/* Chat input and send button integration */
.chat-input-wrap {
    display: flex;
    align-items: flex-end;
    position: relative;
    width: 100%;
    margin-top: 8px;
}

#chat-input {
    flex: 1 1 auto;
    min-height: 48px;
    max-height: 160px;
    resize: vertical;
    border-radius: 10px 0 0 10px;
    border: 1px solid var(--edge);
    padding: 10px 44px 10px 14px;
    font-size: 1rem;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    transition: border 0.15s;
}

#chat-input:focus {
    border: 1.5px solid #1f6feb;
}

#chat-input::placeholder {
    color: #a8b3c4;
    opacity: 1;
}

#chat-send-btn {
    position: absolute;
    right: 8px;
    bottom: 10px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    transition: background 0.15s;
    z-index: 2;
}

#chat-send-btn:hover {
    background: #e8f0fc;
}

#chat-send-btn svg {
    display: block;
}
#chat-maximize-toggle {
    margin: 0;
    padding: 5px 11px;
    font-size: 1.1rem;
    line-height: 1;
    background: #f2f7ff;
    color: #1f6feb;
    border: 1px solid #d8e5f7;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s, border 0.15s;
    opacity: 1 !important;
    z-index: 200;
    display: inline-block;
}

#chat-collapse-toggle,
#chat-side-toggle,
#new-chat-btn {
    margin: 0;
    padding: 5px 11px;
    font-size: 1.1rem;
    line-height: 1;
    background: #f2f7ff;
    color: #1f6feb;
    border: 1px solid #d8e5f7;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s, border 0.15s;
    opacity: 1 !important;
    z-index: 200;
    display: inline-block;
}

#new-chat-btn {
    font-size: 0.85rem;
    font-family: inherit;
    line-height: normal;
}

#chat-collapse-toggle:hover,
#chat-side-toggle:hover,
#new-chat-btn:hover {
    background: #e8f0fc;
    color: #0d51b5;
    border: 1px solid #1f6feb;
}

#chat-maximize-toggle:hover {
    background: #e8f0fc;
    color: #0d51b5;
    border: 1px solid #1f6feb;
}

body.chat-maximized {
    overflow: hidden;
}

body.chat-maximized .chat-panel {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 9999;
    border-radius: 0 !important;
    box-shadow: 0 0 0 9999px rgba(16,35,59,0.12);
    background: #fff;
    display: flex;
    flex-direction: column;
}

body.chat-maximized #chat-window {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}

body.chat-maximized #chat-form {
    flex-shrink: 0;
}
:root {
    --ink: #10233b;
    --muted: #6b7b8f;
    --paper: #f3f8ff;
    --panel: #ffffff;
    --edge: #d8e5f7;
    --brand: #1f6feb;
    --brand-strong: #0d51b5;
    --assistant-bg: #e8f0fc;
    --chat-sidebar-width: 360px;
    --chat-collapsed-width: 42px;
    --app-gap: 4px;
    --viewer-panel-height: 400px;
    --page-padding-top: 2px;
    --page-padding: clamp(10px, 2vw, 20px);
}

body.chat-collapsed {
    --chat-sidebar-width: 0px;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: var(--page-padding-top) var(--page-padding) 0;
    background: radial-gradient(circle at top left, #ffffff 0%, var(--paper) 42%, #e9f2ff 100%);
    color: var(--ink);
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: -18vmax;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease;
}

body::before {
    z-index: 0;
    background:
        radial-gradient(circle at 22% 18%, rgba(59, 130, 246, 0.28) 0 24%, transparent 48%),
        radial-gradient(circle at 80% 24%, rgba(16, 185, 129, 0.24) 0 20%, transparent 45%),
        radial-gradient(circle at 58% 78%, rgba(236, 72, 153, 0.20) 0 24%, transparent 50%);
    filter: blur(18px) saturate(115%);
    transform-origin: 50% 50%;
}

body::after {
    z-index: 0;
    background: repeating-linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0) 18px,
        rgba(82, 129, 201, 0.08) 18px,
        rgba(82, 129, 201, 0.08) 22px
    );
    mix-blend-mode: soft-light;
}

body.generating::before,
body.generating::after {
    opacity: 1;
}

body.generating::before {
    animation: mw-aurora-drift 5.5s ease-in-out infinite;
}

body.generating::after {
    animation: mw-grid-sweep 2.8s linear infinite;
}

/* Isomer generation (enantiomer / diastereomer): amber-violet aurora instead of blue-green */
body.generating.generating-isomer::before {
    background:
        radial-gradient(circle at 22% 18%, rgba(245, 158, 11, 0.28) 0 24%, transparent 48%),
        radial-gradient(circle at 80% 24%, rgba(139, 92, 246, 0.24) 0 20%, transparent 45%),
        radial-gradient(circle at 58% 78%, rgba(236, 72, 153, 0.20) 0 24%, transparent 50%);
}

body.generating.generating-isomer #toolbar {
    animation: mw-toolbar-glow-isomer 1.9s ease-in-out infinite;
}

@keyframes mw-toolbar-glow-isomer {
    0%,
    100% {
        box-shadow: 0 4px 12px rgba(22, 60, 110, 0.07);
        border-color: var(--edge);
    }
    50% {
        box-shadow: 0 8px 22px rgba(139, 92, 246, 0.22);
        border-color: #c4b5fd;
    }
}

@keyframes mw-aurora-drift {
    0% {
        transform: translate3d(-2%, -1.5%, 0) scale(1);
        filter: blur(18px) saturate(110%);
    }
    50% {
        transform: translate3d(2.5%, 1.5%, 0) scale(1.04);
        filter: blur(22px) saturate(124%);
    }
    100% {
        transform: translate3d(-2%, -1.5%, 0) scale(1);
        filter: blur(18px) saturate(110%);
    }
}

@keyframes mw-grid-sweep {
    0% {
        transform: translateX(-2%);
    }
    100% {
        transform: translateX(2%);
    }
}
header {
    display: none;
}

.chat-titlebar {
    display: none;
    position: relative;
    text-align: center;
    flex-shrink: 0;
    background:
        radial-gradient(circle at 12% 42%, rgba(255,255,255,0.22) 0 3px, transparent 4px),
        radial-gradient(circle at 21% 58%, rgba(255,255,255,0.16) 0 2px, transparent 3px),
        radial-gradient(circle at 33% 36%, rgba(255,255,255,0.2) 0 4px, transparent 5px),
        radial-gradient(circle at 44% 62%, rgba(255,255,255,0.16) 0 2px, transparent 3px),
        radial-gradient(circle at 65% 40%, rgba(255,255,255,0.2) 0 3px, transparent 4px),
        radial-gradient(circle at 78% 56%, rgba(255,255,255,0.18) 0 2px, transparent 3px),
        linear-gradient(120deg, #0d3b78 0%, #14539d 45%, #1f6eb8 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

body.chat-maximized .chat-titlebar {
    display: block;
}

.chat-titlebar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(148deg, transparent 16%, rgba(255,255,255,0.16) 17%, transparent 18%) 7% 41% / 88px 56px no-repeat,
        linear-gradient(28deg, transparent 16%, rgba(255,255,255,0.14) 17%, transparent 18%) 28% 47% / 90px 54px no-repeat,
        linear-gradient(156deg, transparent 16%, rgba(255,255,255,0.12) 17%, transparent 18%) 59% 44% / 88px 56px no-repeat,
        linear-gradient(22deg, transparent 16%, rgba(255,255,255,0.1) 17%, transparent 18%) 80% 49% / 86px 52px no-repeat;
    opacity: 0.75;
}

.chat-titlebar h1 {
    margin: 0;
    position: relative;
    z-index: 1;
    letter-spacing: 0.3px;
    font-size: 1.5rem;
}

body.generating.chat-maximized .chat-titlebar h1 {
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.9) 42%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.9) 58%,
        rgba(255, 255, 255, 0.9) 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: mw-title-shimmer 1.8s ease-in-out infinite;
}

@keyframes mw-title-shimmer {
    0% {
        background-position: 120% 50%;
    }
    100% {
        background-position: -20% 50%;
    }
}

main {
    flex: 1;
    min-height: 0;
    margin: 0 0 0 calc(var(--chat-sidebar-width) + var(--app-gap));
    margin-right: 0;
    width: calc(100% - var(--chat-sidebar-width) - var(--app-gap));
    max-width: none;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

body.chat-right main {
    margin-left: 0;
    margin-right: calc(var(--chat-sidebar-width) + var(--app-gap));
}

#toolbar {
    flex-shrink: 0;
    margin: 16px 0 0 calc(var(--chat-sidebar-width) + var(--app-gap));
    margin-right: 0;
    width: calc(100% - var(--chat-sidebar-width) - var(--app-gap));
    max-width: none;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 12px;
    padding: 10px 18px;
    box-shadow: 0 4px 12px rgba(22, 60, 110, 0.07);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

body.chat-right #toolbar {
    margin-left: 0;
    margin-right: calc(var(--chat-sidebar-width) + var(--app-gap));
}

#molecule-tab-pane > #toolbar {
    margin: 0 20px 18px;
    width: auto;
    max-width: none;
}

#molecule-tab-pane > #toolbar .toolbar-group {
    min-width: 0;
}

#molecule-tab-pane #viewer-display {
    min-height: 560px;
}

body.generating #toolbar {
    animation: mw-toolbar-glow 1.9s ease-in-out infinite;
}

@keyframes mw-toolbar-glow {
    0%,
    100% {
        box-shadow: 0 4px 12px rgba(22, 60, 110, 0.07);
        border-color: var(--edge);
    }
    50% {
        box-shadow: 0 8px 22px rgba(31, 111, 235, 0.22);
        border-color: #8db7f7;
    }
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.toolbar-group + .toolbar-group {
    border-left: 1px solid var(--edge);
    padding-left: 12px;
}

#spin-toggle {
    padding: 4px 9px;
    font-size: 1rem;
    color: #1e2e46;
    border: 1px solid var(--edge);
    border-radius: 6px;
    background: var(--panel);
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

#spin-toggle:hover {
    background: #e8f0fe;
}

#spin-toggle.spinning {
    background: #dbeafe;
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}

#enantiomer-toolbar-btn:disabled {
    background: #a8b7cf;
    cursor: not-allowed;
}

#enantiomer-toolbar-btn:disabled:hover {
    background: #a8b7cf;
}

#enantiomer-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 5px 7px;
}

.enantiomer-icon {
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

#diastereomer-toolbar-btn:disabled {
    background: #a8b7cf;
    cursor: not-allowed;
}

#diastereomer-toolbar-btn:disabled:hover {
    background: #a8b7cf;
}

#diastereomer-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 5px 7px;
}

.diastereomer-icon {
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

#isomer-toolbar-btn:disabled {
    background: #a8b7cf;
    cursor: not-allowed;
}

#isomer-toolbar-btn:disabled:hover {
    background: #a8b7cf;
}

#isomer-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 5px 7px;
}

.isomer-icon {
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#bg-color-picker {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bg-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s, transform 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.bg-swatch:hover {
    transform: scale(1.15);
}

.bg-swatch.active {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.25);
}

#toolbar label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
    white-space: nowrap;
}

#toolbar select {
    margin: 0;
    padding: 6px 10px;
    font-size: 0.9rem;
    max-width: 170px;
}

#toolbar button {
    margin: 0;
    padding: 6px 14px;
    font-size: 0.9rem;
}

.app-layout {
    display: block;
    height: 100%;
}

.content-column {
    min-width: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
}

section {
    background-color: var(--panel);
    margin: 0;
    padding: 0;
    border: 1px solid var(--edge);
    box-shadow: 0 10px 22px rgba(22, 60, 110, 0.08);
    position: relative;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

h2 {
    color: var(--ink);
    margin-top: 0;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
}

textarea,
select,
button {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid var(--edge);
    border-radius: 8px;
}

button {
    background-color: var(--brand);
    color: white;
    cursor: pointer;
    margin-top: 10px;
    border: none;
    transition: background-color 0.2s ease;
}

button:hover {
    background-color: var(--brand-strong);
}

#viewer {
    border: 1px solid var(--edge);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #f9f9f9;
}

#viewer-notice {
    display: none;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    padding: 10px 12px;
    border: 1px solid #f0c36d;
    border-radius: 8px;
    background: #fff8e6;
    color: #684f1d;
    font-size: 0.9rem;
    line-height: 1.35;
}

#viewer-notice.visible {
    display: block;
}

#viewer-notice.loading {
    display: flex;
    align-items: center;
    gap: 10px;
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1e40af;
}
#viewer-notice.loading::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 2px solid #bfdbfe;
    border-top-color: #1e40af;
    border-radius: 50%;
    animation: mw-spin 0.75s linear infinite;
}
@keyframes mw-spin {
    to { transform: rotate(360deg); }
}

/* ── Molecule visibility toggle bar (comparison mode) ─────────────── */
#molecule-visibility-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--edge);
    border-radius: 8px;
    font-size: 0.82rem;
}

#molecule-visibility-bar[hidden] {
    display: none;
}

.mol-vis-label {
    color: var(--muted);
    margin-right: 2px;
    flex-shrink: 0;
}

.mol-vis-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 7px;
    border-radius: 14px;
    border: 1.5px solid var(--mol-color, #888);
    background: transparent;
    color: var(--ink);
    font-size: 0.82rem;
    cursor: pointer;
    opacity: 0.38;
    transition: opacity 140ms ease, background 140ms ease;
    line-height: 1.25;
    user-select: none;
}

.mol-vis-btn.active {
    background: color-mix(in srgb, var(--mol-color, #888) 14%, transparent);
    opacity: 1;
}

.mol-vis-btn:hover {
    opacity: 0.82;
}

.mol-vis-btn:focus-visible {
    outline: 2px solid var(--mol-color, #888);
    outline-offset: 1px;
}

.mol-vis-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mol-color, #888);
    flex-shrink: 0;
    transition: background 140ms ease, border-color 140ms ease;
}

.mol-vis-btn:not(.active) .mol-vis-dot {
    background: transparent;
    border: 1.5px solid var(--mol-color, #888);
}

/* ─────────────────────────────────────────────────────────────────── */

#viewer-display {
    display: grid;
    gap: 12px;
    flex: 1;
    min-height: 0;
    padding: 0 20px 20px 20px;
}

#viewer-display.mode-3d {
    grid-template-columns: 1fr;
}

#viewer-display.mode-code {
    grid-template-columns: 1fr;
}

#viewer-display.mode-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#molecule-code-panel {
    display: none;
    border: 1px solid var(--edge);
    border-radius: 8px;
    background: #f7fbff;
    overflow: hidden;
    height: 100%;
    min-height: 0;
}

#molecule-code-panel .code-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.86rem;
    color: var(--muted);
    border-bottom: 1px solid var(--edge);
    background: #eef5ff;
}

#molecule-code-panel .code-meta-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#code-format-select {
    margin: 0;
    padding: 4px 8px;
    font-size: 0.8rem;
    min-width: 96px;
}

#copy-code-btn {
    margin-top: 0;
    padding: 4px 10px;
    font-size: 0.78rem;
    background: #2f6ea7;
}

#copy-code-btn:hover {
    background: #255a88;
}

#copy-code-btn:disabled {
    background: #9db0c2;
    cursor: not-allowed;
}

#molecule-code {
    margin: 0;
    padding: 12px;
    height: calc(100% - 46px);
    overflow: auto;
    font-size: 0.8rem;
    line-height: 1.35;
    font-family: "Consolas", "Courier New", monospace;
    color: #1e2e46;
}

#viewer-display.mode-code #viewer {
    display: none;
}

#viewer-display.mode-code #molecule-code-panel,
#viewer-display.mode-split #molecule-code-panel {
    display: block;
}

#viewer {
    position: relative;
}

/* Viewer control strip — zoom, fit, reset — top-right corner */
#viewer-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#viewer-controls button {
    display: block;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1rem;
    line-height: 32px;
    text-align: center;
    background: rgba(255,255,255,0.85);
    color: #1e2e46;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#viewer-controls button:hover {
    background: rgba(255,255,255,1);
}

/* Gray background */
#viewer[data-bg="gray"] #viewer-controls button {
    background: rgba(255,255,255,0.9);
    color: #1e2e46;
    border-color: rgba(0,0,0,0.3);
}
#viewer[data-bg="gray"] #viewer-controls button:hover {
    background: #ffffff;
}

/* Dark background */
#viewer[data-bg="dark"] #viewer-controls button {
    background: rgba(30,30,50,0.75);
    color: #e8eaf6;
    border-color: rgba(255,255,255,0.3);
}
#viewer-controls button.active {
    box-shadow: inset 0 0 0 2px rgba(31,111,235,0.5);
}

#viewer[data-bg="dark"] #viewer-controls button.active {
    box-shadow: inset 0 0 0 2px rgba(147,197,253,0.6);
}


#viewer canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    z-index: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

#input-section.chat-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    width: var(--chat-sidebar-width);
    height: 100vh;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 0 18px 18px 0;
    z-index: 110;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.chat-right #input-section.chat-panel {
    left: auto;
    right: 0;
    border-radius: 18px 0 0 18px;
}

body.chat-collapsed #input-section.chat-panel {
    transform: translateX(-100%);
    box-shadow: none;
    pointer-events: none;
}
body.chat-right.chat-collapsed #input-section.chat-panel {
    transform: translateX(100%);
}

.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.chat-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.chat-panel-actions-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.3;
}

#history-toggle {
    flex-shrink: 0;
    margin: 0;
    padding: 5px 12px;
    font-size: 0.85rem;
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 20px;
    white-space: nowrap;
}

#chat-collapse-toggle,
#chat-expand-toggle {
    margin: 0;
    padding: 5px 11px;
    font-size: 0.9rem;
    line-height: 1;
}

#chat-expand-toggle {
    position: fixed;
    top: 18px;
    left: 8px;
    right: auto;
    z-index: 120;
    display: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 6px 18px rgba(22, 60, 110, 0.14);
}

body.chat-right #chat-expand-toggle {
    left: auto;
    right: 8px;
    border-radius: 12px 0 0 12px;
}

body.chat-collapsed #chat-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#history-toggle:hover {
    background: var(--brand);
    color: white;
}

/* History drawer */
#history-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 60, 0.35);
    z-index: 200;
}

#history-backdrop.open {
    display: block;
}

#history-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(400px, 92vw);
    height: 100%;
    background: var(--panel);
    border-right: 1px solid var(--edge);
    box-shadow: 6px 0 28px rgba(22, 60, 110, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 201;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

#history-drawer.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--edge);
    flex-shrink: 0;
}

.drawer-header h2 {
    margin: 0;
}

#history-close {
    margin: 0;
    padding: 2px 8px;
    font-size: 1.4rem;
    line-height: 1;
    background: transparent;
    color: var(--muted);
    border: none;
}

#history-close:hover {
    background: transparent;
    color: var(--ink);
}

.history-search-wrap {
    padding: 10px 20px 0;
    flex-shrink: 0;
}

#history-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
    font-size: 0.88rem;
    border: 1px solid var(--edge);
    border-radius: 8px;
    background: #f5f9ff;
    color: var(--ink);
    outline: none;
    margin: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

#history-search:focus {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

#chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.history-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.history-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font-size: 0.88rem;
    color: var(--ink);
}

.history-select-all input,
.history-item-header input[type="checkbox"] {
    margin: 0;
}

.history-item {
    border: 1px solid var(--edge);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    background: #fbfdff;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.history-item:hover {
    background: #f3f8ff;
    border-color: #c8daf5;
}

.history-item-header {
    margin-bottom: 6px;
}

.history-item-header label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.danger-btn {
    background: #dc3545;
}

.danger-btn:disabled {
    background: #d9a8ad;
    cursor: not-allowed;
}

.danger-btn:hover {
    background: #b02a37;
}

.history-empty {
    color: var(--muted);
    font-size: 0.92rem;
}

#chat-window {
    min-height: 0;
    max-height: none;
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--edge);
    border-radius: 12px;
    background: linear-gradient(180deg, #f9fcff, #f2f7ff);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-message {
    max-width: 90%;
    padding: 10px 12px;
    border-radius: 12px;
    line-height: 1.4;
    word-break: break-word;
}

.chat-message.user {
    align-self: flex-end;
    background: var(--brand);
    color: white;
    border-top-right-radius: 4px;
}

.chat-message.assistant {
    align-self: flex-start;
    background: var(--assistant-bg);
    color: var(--ink);
    border-top-left-radius: 4px;
}

.chat-message.status {
    align-self: center;
    font-size: 0.85rem;
    color: var(--muted);
    background: transparent;
    border: 1px dashed var(--edge);
}

.chat-resend-wrap {
    background: transparent !important;
    border: none !important;
    padding: 2px 0 !important;
}

.chat-resend-btn {
    align-self: flex-start;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.chat-resend-btn:hover {
    background: #fde68a;
    border-color: #d97706;
}

.force-render-cif-btn {
    align-self: flex-start;
    margin: 4px 0 6px 0;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.force-render-cif-btn:hover:not(:disabled) {
    background: #fde68a;
    border-color: #d97706;
}
.force-render-cif-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ── Info badge (truncation details tooltip) ────────────────── */
.info-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
    background: #3b82f6;
    color: #fff;
    vertical-align: middle;
    margin-left: 4px;
    cursor: help;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}

#chat-form {
    margin-top: auto;
    flex-shrink: 0;
}

#chat-input {
    min-height: 84px;
    resize: vertical;
}

.chat-card {
    align-self: flex-start;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 12px;
    border-top-left-radius: 4px;
    padding: 12px 14px;
    max-width: 92%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-card-title {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.95rem;
}

.chat-card-allotrope-note {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 4px;
}

.chat-card-allotrope-note strong {
    color: #78350f;
}

.chat-card-allotrope-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.chat-card-allotrope-btn {
    padding: 3px 10px;
    font-size: 0.80rem;
    font-weight: 500;
    color: #78350f;
    background: #fef9c3;
    border: 1px solid #fbbf24;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s;
}

.chat-card-allotrope-btn:hover {
    background: #fef08a;
    border-color: #f59e0b;
}

.chat-card-description {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.4;
}

.chat-card-props {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chat-prop-chip {
    background: var(--paper);
    border: 1px solid var(--edge);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.82rem;
    color: var(--ink);
    white-space: nowrap;
}

.chat-prop-chip strong {
    color: var(--brand);
    margin-right: 3px;
}

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-self: flex-start;
    max-width: 92%;
}

.chat-followup-suggestions {
    margin-top: -4px;
    margin-bottom: 2px;
    padding-left: 2px;
}

.chat-followup-btn {
    border-color: #3f6ea8;
    color: #3f6ea8;
    background: rgba(63, 110, 168, 0.05);
}

.chat-followup-btn:hover {
    background: #3f6ea8;
    color: #fff;
}

/* ── Constitutional isomer result list ───────────────────────────── */
.const-isomer-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: flex-start;
    width: 100%;
    max-width: 92%;
}

.const-isomer-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 10px;
    border-top-left-radius: 3px;
    padding: 8px 10px;
}

.const-isomer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.const-isomer-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    white-space: normal;
    word-break: break-word;
}

.const-isomer-smiles {
    font-size: 0.75rem;
    color: var(--muted);
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.const-isomer-load {
    flex-shrink: 0;
    background: transparent;
    border: 1.5px solid var(--brand);
    border-radius: 14px;
    color: var(--brand);
    font-size: 0.80rem;
    padding: 3px 12px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.const-isomer-load:hover {
    background: var(--brand);
    color: white;
}

.const-isomer-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.const-isomer-compare {
    flex-shrink: 0;
    background: transparent;
    border: 1.5px solid #059669;
    border-radius: 14px;
    color: #059669;
    font-size: 0.80rem;
    padding: 3px 12px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.const-isomer-compare:hover {
    background: #059669;
    color: white;
}
/* ────────────────────────────────────────────────────────────────── */


.chat-suggestion-btn {
    background: transparent;
    border: 1px solid var(--brand);
    border-radius: 20px;
    color: var(--brand);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 4px 12px;
    margin: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}

.chat-suggestion-btn:hover {
    background: var(--brand);
    color: white;
}

/* ────────────────────────────────────────────────────────────────── */
/* ── Tab Navigation ─────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────── */

#viewer-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--edge);
    background: #f9fbff;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.tab-button {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 12px 20px;
    margin: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border-bottom: 3px solid transparent;
    position: relative;
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
}

.tab-button:hover {
    color: var(--ink);
    background: rgba(31, 111, 235, 0.05);
}

.tab-button.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
    background: transparent;
}

/* Tab Pane Styling */
.tab-pane {
    display: none;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    flex-direction: column;
}

.tab-pane.active {
    display: flex;
    flex-direction: column;
}

#molecule-tab-pane #viewer-notice {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
}

#molecule-tab-pane #molecule-visibility-bar {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
}

/* Periodic/Electron Table Container */
.periodic-table-container {
    flex: 1;
    overflow: auto;
    padding: 30px 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

#electron-orbital-container {
    align-items: stretch;
    gap: 12px;
    background: #ffffff;
}

.dot-diagram-content {
    margin-top: 12px;
    border: 1px solid #d8e3f2;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    padding: 18px;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    gap: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#dot-diagram-container {
    gap: 10px;
    padding-top: 14px;
}

#dot-diagram-container .organic-family-header {
    padding: 10px 14px;
}

#dot-diagram-container .organic-family-header h2 {
    margin-bottom: 2px;
    font-size: 1.12rem;
}

#dot-diagram-container .organic-family-header p {
    line-height: 1.3;
}

#dot-diagram-container .dot-diagram-confidence-wrapper,
#dot-diagram-container .dot-diagram-copy-wrapper {
    margin-top: 4px;
}

#dot-diagram-container .dot-diagram-content {
    margin-top: 4px;
    padding: 12px;
}
.dot-diagram-content::-webkit-scrollbar {
    display: none;
}

.dot-diagram-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #d7e3f3;
    border-radius: 10px;
    background: #f7fbff;
}

.dot-diagram-controls label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #314a68;
}

#dot-diagram-mode {
    border: 1px solid #c7d8ef;
    border-radius: 8px;
    background: #ffffff;
    color: #123257;
    font-size: 0.82rem;
    padding: 4px 8px;
}

.dot-diagram-mode-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #5a7a99;
    cursor: help;
    font-weight: 700;
}

.dot-diagram-confidence-wrapper {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.dot-diagram-confidence-wrapper.show {
    display: flex;
}

.dot-diagram-confidence {
    flex: 1;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d8e3f2;
    background: #f8fbff;
    color: #284562;
    font-size: 0.82rem;
    font-weight: 600;
}

.dot-diagram-confidence-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d7e3f3;
    color: #314a68;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: help;
}

.dot-diagram-confidence.level-exact {
    border-color: #b8e5c5;
    background: #f3fcf6;
    color: #1f5f37;
}

.dot-diagram-confidence.level-approximate {
    border-color: #f0dfb2;
    background: #fffaf0;
    color: #7a5717;
}

.dot-diagram-confidence.level-fallback {
    border-color: #e1d5f5;
    background: #f8f5ff;
    color: #5a4090;
}

.dot-diagram-confidence.level-unavailable {
    border-color: #efd3d3;
    background: #fff5f5;
    color: #8a2b2b;
}

.dot-diagram-copy-wrapper {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    align-items: center;
}

.dot-diagram-copy-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #c5dff8;
    background: #f0f6ff;
    color: #2d5a8a;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 32px;
}

.dot-diagram-copy-btn:hover {
    background: #e0ecff;
    border-color: #a8d0ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(45, 90, 138, 0.15);
}

.dot-diagram-copy-btn:active {
    transform: translateY(0);
    background: #d0e0ff;
}

.dot-diagram-copy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.dot-diagram-copy-feedback {
    flex: 0 1 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f5f37;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dot-diagram-copy-feedback.show {
    opacity: 1;
}

.dot-diagram-alternate-hint {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #f0dfb2;
    background: #fffaf0;
    color: #7a5717;
    font-size: 0.78rem;
    display: none;
    gap: 8px;
    align-items: center;
}

.dot-diagram-alternate-hint.show {
    display: flex;
}

.dot-diagram-alternate-hint-btn {
    padding: 4px 10px;
    border: 1px solid #d4a746;
    border-radius: 6px;
    background: #fff9f0;
    color: #7a5717;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.dot-diagram-alternate-hint-btn:hover {
    background: #f5e8d0;
}

.dot-diagram-octet-panel {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #f0dfb2;
    background: #fffaf0;
    color: #7a5717;
    font-size: 0.78rem;
    display: none;
}

.dot-diagram-octet-panel.show {
    display: block;
}

.dot-diagram-octet-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.dot-diagram-octet-violations {
    margin: 4px 0;
    padding-left: 12px;
}

.dot-diagram-octet-violation {
    margin: 2px 0;
    font-size: 0.75rem;
}

.dot-diagram-hypervalent-title {
    font-weight: 700;
    margin-bottom: 6px;
    margin-top: 8px;
    color: #2d5a8a;
    border-top: 1px solid rgba(45, 90, 138, 0.2);
    padding-top: 6px;
}

.dot-diagram-hypervalent-atoms {
    margin: 4px 0;
    padding-left: 12px;
}

.dot-diagram-hypervalent-atom {
    margin: 2px 0;
    font-size: 0.75rem;
    color: #2d5a8a;
}

.dot-diagram-optimize-panel {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #c5dff8;
    background: #f0f6ff;
    color: #2d5a8a;
    font-size: 0.78rem;
    display: none;
}

.dot-diagram-optimize-panel.show {
    display: block;
}

/* VSEPR Geometry Panel */
.dot-diagram-vsepr-panel {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #a8d8b0;
    background: #f0faf2;
    color: #1e5c2e;
    font-size: 0.78rem;
    display: none;
}

.dot-diagram-vsepr-panel.show {
    display: block;
}

.dot-diagram-vsepr-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: #145224;
    font-size: 0.8rem;
}

.dot-diagram-vsepr-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dot-diagram-vsepr-geometry {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a5c2d;
    padding: 3px 10px;
    background: rgba(30, 92, 46, 0.1);
    border-radius: 14px;
    border: 1px solid rgba(30, 92, 46, 0.25);
    white-space: nowrap;
}

.dot-diagram-vsepr-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.dot-diagram-vsepr-tag {
    font-size: 0.72rem;
    color: #1e5c2e;
    padding: 2px 8px;
    background: rgba(30, 92, 46, 0.07);
    border-radius: 10px;
    border: 1px solid rgba(30, 92, 46, 0.18);
    white-space: nowrap;
}

.dot-diagram-vsepr-central {
    font-size: 0.72rem;
    font-style: italic;
    color: #3a7a4a;
    margin-left: 4px;
}

/* Atom Hybridization Panel */
.dot-diagram-hybrid-panel {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #d4bff8;
    background: #f8f3ff;
    color: #4a1e8a;
    font-size: 0.78rem;
    display: none;
}

.dot-diagram-hybrid-panel.show {
    display: block;
}

.dot-diagram-hybrid-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: #38146e;
    font-size: 0.8rem;
}

.dot-diagram-hybrid-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dot-diagram-hybrid-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 14px;
    background: rgba(74, 30, 138, 0.08);
    border: 1px solid rgba(74, 30, 138, 0.2);
    font-size: 0.75rem;
    white-space: nowrap;
}

.dot-diagram-hybrid-atom {
    font-weight: 700;
    color: #38146e;
}

.dot-diagram-hybrid-value {
    color: #5a1ea0;
    font-variant-ligatures: none;
}

.dot-diagram-hybrid-chip.aromatic {
    background: rgba(180, 100, 0, 0.08);
    border-color: rgba(180, 100, 0, 0.2);
}

.dot-diagram-hybrid-chip.aromatic .dot-diagram-hybrid-atom {
    color: #7a3700;
}

.dot-diagram-hybrid-chip.aromatic .dot-diagram-hybrid-value {
    color: #a04500;
}

.dot-diagram-optimize-title {
    font-weight: 700;
    margin-bottom: 6px;
    color: #1e4d7b;
}

.dot-diagram-optimize-suggestions {
    margin: 4px 0;
    padding-left: 12px;
}

.dot-diagram-optimize-suggestion {
    margin: 4px 0;
    font-size: 0.75rem;
    padding: 4px 6px;
    background: rgba(45, 90, 138, 0.08);
    border-left: 3px solid #2d5a8a;
    border-radius: 3px;
}

.dot-diagram-optimize-suggestion-atom {
    font-weight: 700;
    color: #1e4d7b;
}

.dot-diagram-optimize-suggestion-text {
    display: block;
    font-size: 0.73rem;
    margin-top: 2px;
    color: #2d5a8a;
}

.dot-diagram-atom-charge {
    font-size: 0.65em;
    font-weight: 700;
    baseline-shift: super;
}

.dot-diagram-atom-charge.positive {
    color: #d84040;
}

.dot-diagram-atom-charge.negative {
    color: #2d5a8a;
}

.dot-diagram-empty,
.dot-diagram-unavailable {
    color: #4f5e72;
    font-size: 0.9rem;
}

.dot-diagram-unavailable {
    font-weight: 600;
}

.dot-diagram-title {
    margin: 0 0 10px 0;
    font-size: 0.96rem;
    font-weight: 700;
    color: #10233d;
}

.dot-diagram-compare-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    align-items: stretch;
    width: 100%;
    flex-shrink: 0;
}

.dot-diagram-panel {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
}

.dot-diagram-svg-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 10px;
}

@media (max-width: 768px) {
    .dot-diagram-svg-wrap {
        min-height: 0;
        padding: 8px;
    }
}

.dot-diagram-svg-wrap svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.dot-diagram-dot-wrap svg {
    max-height: 100%;
}

.dot-diagram-shell-wrap svg {
    max-width: 100%;
    max-height: 100%;
}

.electron-orbital-intro {
    padding: 14px 18px;
    border: 1px solid #d9e2ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(36, 61, 84, 0.08);
}

.electron-orbital-intro h2 {
    margin: 0 0 5px 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #153d63;
}

.electron-orbital-intro p {
    margin: 3px 0 0;
    color: #43586e;
    line-height: 1.5;
}

.electron-orbital-header {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px 0;
    width: 100%;
    box-sizing: border-box;
}

.electron-orbital-header-cell {
    min-height: 56px;
    border-radius: 8px;
    border: 1px solid #c8d8ec;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1d3f5f;
    background: #eef4fb;
    gap: 4px;
    padding: 10px 8px;
}

.electron-orbital-header-cell .header-number {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #153d63;
}

.electron-orbital-header-cell .header-subtitle {
    font-size: 0.76rem;
    color: #4a6880;
    line-height: 1.2;
    white-space: nowrap;
}

.electron-orbital-grid-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.electron-orbital-row-labels {
    display: none !important;
}

.electron-orbital-row-label {
    min-height: 84px;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.electron-orbital-table {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    flex: 1;
}

.electron-orbital-cell {
    min-height: 88px;
    border: 1px solid #c8d8ec;
    border-radius: 8px;
    background: #f9fcff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 8px;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.electron-orbital-cell:hover {
    border-color: #94b8d4;
    background: #f0f6fc;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(74, 106, 138, 0.1);
}

.electron-orbital-cell.active {
    border-color: #4a7ab0;
    background: #eaf2fb;
    box-shadow: 0 0 0 2px rgba(74, 122, 176, 0.15);
}

.electron-orbital-cell:focus-visible {
    outline: 2px solid #4a7ab0;
    outline-offset: 1px;
}

.electron-orbital-cell .orbital-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: #1c3d5c;
}

.orbital-figure-wrap {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    perspective: 520px;
}

.orbital-figure {
    width: 100%;
    height: 100%;
    display: block;
    transform-style: preserve-3d;
    filter: drop-shadow(0 2px 2px rgba(16, 35, 61, 0.22));
}

.orbital-figure.large {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 8px 12px rgba(16, 35, 61, 0.24));
}

.orbital-figure .orbital-scene {
    transform-origin: 32px 32px;
    transform: rotateX(24deg) rotateY(-20deg) rotateZ(-6deg) translateZ(0);
}

.orbital-figure.orbital-figure-s .orbital-scene {
    transform: rotateX(18deg) rotateY(-14deg) rotateZ(0deg) translateZ(0);
}

.orbital-figure.orbital-figure-p .orbital-scene {
    transform: rotateX(28deg) rotateY(-22deg) rotateZ(-8deg) translateZ(0);
}

.orbital-figure.orbital-figure-d .orbital-scene {
    transform: rotateX(32deg) rotateY(-18deg) rotateZ(12deg) translateZ(0);
}

.orbital-figure.orbital-figure-f .orbital-scene {
    transform: rotateX(34deg) rotateY(-16deg) rotateZ(20deg) translateZ(0);
}

.orbital-figure .orbital-lobe {
    stroke: rgba(16, 35, 61, 0.55);
    stroke-width: 1.1;
    filter: drop-shadow(0 1.2px 1.6px rgba(11, 29, 56, 0.22));
}

.orbital-figure .orbital-fill-a {
    fill: rgba(31, 111, 235, 0.46);
}

.orbital-figure .orbital-fill-b {
    fill: rgba(84, 66, 224, 0.34);
}

.orbital-figure .orbital-axis {
    stroke: rgba(52, 71, 103, 0.45);
    stroke-width: 0.9;
    stroke-dasharray: 2 2;
}

.orbital-figure .orbital-axis-pos {
    stroke-width: 1.15;
    stroke-dasharray: none;
}

.orbital-figure .orbital-axis-neg {
    opacity: 0.46;
    stroke-dasharray: 2.2 2.2;
}

.orbital-figure .axis-x {
    stroke: #ef4444;
}

.orbital-figure .axis-y {
    stroke: #10b981;
}

.orbital-figure .axis-z {
    stroke: #3b82f6;
}

.orbital-figure .orbital-axis-label {
    font-size: 5.6px;
    font-weight: 800;
    font-family: "Segoe UI", Tahoma, sans-serif;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 0.8;
}

.orbital-figure .axis-x-label {
    fill: #b91c1c;
}

.orbital-figure .axis-y-label {
    fill: #047857;
}

.orbital-figure .axis-z-label {
    fill: #1d4ed8;
}

.orbital-figure .orbital-node-contour {
    fill: none;
    stroke: rgba(10, 30, 60, 0.62);
    stroke-width: 0.85;
    stroke-dasharray: 1.6 1.2;
    opacity: 0.8;
}

.orbital-figure.small .orbital-axis-label {
    display: none;
}

.orbital-figure.small .orbital-node-contour {
    stroke-width: 0.7;
    opacity: 0.7;
}

.orbital-figure .orbital-nodal-plane {
    fill: rgba(255, 255, 255, 0.42);
    stroke: rgba(28, 44, 73, 0.35);
    stroke-width: 0.6;
    stroke-dasharray: 1.3 1.3;
}

.orbital-figure .orbital-phase-label {
    font-size: 6px;
    font-weight: 800;
    font-family: "Segoe UI", Tahoma, sans-serif;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.86);
    stroke-width: 0.9;
}

.orbital-figure .phase-positive {
    fill: #0f766e;
}

.orbital-figure .phase-negative {
    fill: #9f1239;
}

.orbital-figure .orbital-torus {
    stroke: rgba(16, 35, 61, 0.55);
    stroke-width: 1;
}

.orbital-figure .orbital-torus-hole {
    fill: rgba(255, 255, 255, 0.82);
    stroke: rgba(60, 78, 108, 0.35);
    stroke-width: 0.7;
}

.orbital-figure.small .orbital-phase-label {
    display: none;
}

.orbital-figure.small .orbital-nodal-plane {
    opacity: 0.65;
}

.orbital-figure .orbital-shadow {
    fill: rgba(16, 35, 61, 0.2);
    filter: blur(1.5px);
}

.orbital-figure .orbital-nucleus {
    fill: #10233d;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.35));
}

.electron-orbital-cell .orbital-meta {
    font-size: 0.76rem;
    color: #4a6880;
    line-height: 1.25;
}

.electron-orbital-cell .orbital-cap,
.electron-orbital-cell .orbital-order {
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
    color: #4a6880;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.electron-orbital-cell.empty {
    border: 1px dashed #ccd8e8;
    background: #fafcff;
    cursor: default;
}

.electron-orbital-cell.empty:hover {
    border-color: #ccd8e8;
    background: #fafcff;
    transform: none;
    box-shadow: none;
}

.electron-orbital-cell.orbital-s,
.electron-orbital-header-cell.orbital-s,
.legend-swatch.orbital-s {
    background: #fef3e2;
    border-color: #f0d5a0;
}

.electron-orbital-cell.orbital-s:hover {
    background: #fde9cc;
}

.electron-orbital-cell.orbital-p,
.electron-orbital-header-cell.orbital-p,
.legend-swatch.orbital-p {
    background: #f0eaff;
    border-color: #d0b8f8;
}

.electron-orbital-cell.orbital-p:hover {
    background: #e6dfff;
}

.electron-orbital-cell.orbital-d,
.electron-orbital-header-cell.orbital-d,
.legend-swatch.orbital-d {
    background: #e8f4ff;
    border-color: #a8d0ee;
}

.electron-orbital-cell.orbital-d:hover {
    background: #d8ecfc;
}

.electron-orbital-cell.orbital-f,
.electron-orbital-header-cell.orbital-f,
.legend-swatch.orbital-f {
    background: #f0e6ff;
    border-color: #c4a0e8;
}

.electron-orbital-cell.orbital-f:hover {
    background: #e4d8ff;
}

.electron-orbital-legend {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
}

.electron-orbital-legend .periodic-table-legend-item {
    font-size: 0.83rem;
    font-weight: 400;
    color: #153d63;
    gap: 8px;
}

.electron-orbital-legend .legend-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
}

.electron-orbital-detail-panel {
    border: 1px solid #d5e2ee;
    border-radius: 8px;
    background: #f9fcff;
    padding: 12px 14px;
}

.electron-orbital-detail-empty {
    color: #43586e;
    font-size: 0.83rem;
    line-height: 1.5;
}

.electron-orbital-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.electron-orbital-detail-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #1c3d5c;
}

.electron-orbital-detail-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #c8d8ec;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #153d63;
    background: #eef4fb;
}

.electron-orbital-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.electron-orbital-detail-grid > div {
    padding: 8px 10px;
    border-radius: 6px;
    background: #f0f6fc;
    border: 1px solid #d5e2ee;
}

.electron-orbital-detail-figure {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px 0 10px;
    flex: 1;
}

.electron-orbital-detail-figure-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 10px;
}

.electron-orbital-view-btn {
    padding: 7px 14px;
    background: #1168c4;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.electron-orbital-view-btn:hover {
    background: #0d57a8;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(17, 104, 196, 0.25);
}

.electron-orbital-view-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.orbital-variant-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
    padding: 0;
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.orbital-variant-selector label {
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #4a6880;
    text-transform: uppercase;
    font-size: 0.76rem;
}

.orbital-variant-selector .variant-btn {
    padding: 4px 9px;
    border: 1px solid #b9cee6;
    border-radius: 8px;
    background: #ffffff;
    color: #3b5c7c;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.orbital-variant-selector .variant-btn:hover {
    border-color: #94b8d4;
    background: #e4f0fa;
}

.orbital-variant-selector .variant-btn[active],
.orbital-variant-selector .variant-btn.active {
    border-color: #3a6ea8;
    background: #3a6ea8;
    color: #ffffff;
}

.orbital-variant-selector sub {
    font-size: 0.6em;
    position: relative;
    bottom: -1px;
}

.electron-orbital-detail-grid > div {
    padding: 8px 10px;
    border-radius: 10px;
    background: #f5f8fc;
    border: 1px solid #e3ebf5;
}

.electron-orbital-detail-grid .label {
    display: block;
    margin-bottom: 3px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #4a6880;
}

.electron-orbital-detail-grid .value {
    display: block;
    font-size: 0.83rem;
    font-weight: 800;
    line-height: 1.4;
    color: #153d63;
}

.electron-orbital-detail-notes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #d5e2ee;
    font-size: 0.83rem;
    color: #153d63;
    line-height: 1.5;
}

.electron-orbital-detail-notes p {
    margin: 4px 0 0;
}

.organic-family-container {
    flex: 1;
    overflow: auto;
    padding: 28px 20px 30px;
    background: linear-gradient(180deg, #fbfcff 0%, #f4f7fb 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}

.organic-family-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #d9e2ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(36, 61, 84, 0.08);
    box-sizing: border-box;
}

.organic-family-header h2 {
    margin: 0 0 6px 0;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #153d63;
}

.organic-family-header p {
    margin: 3px 0 0;
    line-height: 1.5;
    color: #43586e;
}

.organic-family-badge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.organic-family-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eaf1ff;
    color: #2456a6;
    border: 1px solid #c9dbff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.organic-family-table-wrapper {
    width: 100%;
    min-width: 0;
}

.organic-family-detail-panel {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #d9e3f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    box-sizing: border-box;
}

.organic-family-detail-empty {
    color: #66778f;
    font-size: 0.82rem;
    line-height: 1.45;
}

.organic-family-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.organic-family-detail-header > div:first-child {
    min-width: 0;
}

.organic-family-detail-kicker {
    margin-bottom: 4px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7f99;
}

.organic-family-detail-header h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    color: #10233d;
}

.organic-family-detail-cue {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef7f0;
    border: 1px solid #cce8d4;
    color: #1e6b3a;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.organic-family-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.organic-family-detail-grid > div {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f5f8fc;
    border: 1px solid #e3ebf5;
}

.organic-family-detail-grid .label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7f99;
}

.organic-family-detail-grid .value {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #1d2f4a;
}

.organic-family-reactions {
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f3f8ff;
    border: 1px solid #dce8f8;
}

.organic-family-reactions-label {
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4a6588;
    margin-bottom: 6px;
}

.organic-family-reactions-value {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #18314e;
}

.organic-family-row {
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.organic-family-row:hover td {
    background: #f3f8ff;
}

.organic-family-row.active td {
    background: #eaf2ff !important;
    box-shadow: inset 0 0 0 1px #bfd5ff;
}

.organic-family-row:focus-visible {
    outline: 2px solid #2456a6;
    outline-offset: -2px;
}

.bio-family-row:hover td {
    background: #f3f8ff;
}

.bio-family-row.active td {
    background: #eaf2ff !important;
    box-shadow: inset 0 0 0 1px #bfd5ff;
}

.bio-family-row:focus-visible {
    outline: 2px solid #2456a6;
    outline-offset: -2px;
}

#organic-family-ask-btn {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #bfd5ff;
    background: linear-gradient(180deg, #edf4ff 0%, #dfeaff 100%);
    color: #16345e;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(36, 86, 166, 0.12);
    flex-shrink: 0;
}

#organic-family-ask-btn:hover {
    background: linear-gradient(180deg, #e5efff 0%, #d6e4ff 100%);
}

#organic-family-ask-btn:focus-visible {
    outline: 2px solid #2456a6;
    outline-offset: 2px;
}

.organic-family-loading {
    padding: 18px;
    color: #51637d;
    font-size: 0.85rem;
}

.organic-family-table-scroll {
    width: 100%;
    overflow: auto;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.organic-family-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

.organic-family-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #23395d 0%, #16253e 100%);
    color: #ffffff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 13px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    white-space: normal;
    overflow-wrap: anywhere;
}

.organic-family-table tbody td {
    padding: 11px 12px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #1d2f4a;
    border-bottom: 1px solid #e7edf5;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.organic-family-table tbody tr:nth-child(even) td {
    background: #fcfdff;
}

.organic-family-section-row th {
    padding: 11px 12px;
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #16345e;
    background: linear-gradient(90deg, #eef4ff 0%, #f7faff 100%);
    border-top: 1px solid #d7e3f6;
    border-bottom: 1px solid #d7e3f6;
}

.organic-family-table tbody td:first-child {
    overflow-wrap: normal;
    word-break: normal;
}

.organic-family-table .family-name {
    font-weight: 800;
    color: #10233d;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.organic-family-cue {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef7f0;
    color: #1e6b3a;
    border: 1px solid #cce8d4;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    max-width: 100%;
}

@media (max-width: 900px) {
    .organic-family-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .organic-family-badge-row {
        justify-content: flex-start;
    }

    .organic-family-detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .organic-family-detail-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .organic-family-container,
    .hybridization-container,
    .periodic-table-container {
        padding: 18px 12px 20px;
        gap: 12px;
    }

    #viewer-tabs {
        -webkit-overflow-scrolling: touch;
    }

    .tab-button {
        padding: 10px 14px;
        font-size: 0.88rem;
    }

    .periodic-table-header,
    .periodic-table-grid-wrapper,
    .periodic-table-legend {
        gap: 8px;
    }

    .periodic-table-header {
        padding-left: 28px;
        margin-bottom: 14px;
    }

    .periodic-table-search-wrap {
        width: 100%;
    }

    .periodic-table-search {
        min-width: 0;
        width: 100%;
    }

    .periodic-table-search-clear {
        margin-top: 0;
    }

    .organic-family-table {
        min-width: 0;
        table-layout: fixed;
    }

    .organic-family-table thead th,
    .organic-family-table tbody td,
    .organic-family-section-row th {
        padding: 9px 8px;
    }
}

@media (max-width: 600px) {
    .tab-button {
        padding: 9px 12px;
        font-size: 0.82rem;
    }

    .periodic-table-controls {
        gap: 8px;
    }

    .periodic-table-header,
    .periodic-table-grid-wrapper,
    .periodic-table-row-labels,
    .periodic-table,
    .periodic-table-legend {
        gap: 6px;
    }

    .periodic-table-row-labels {
        width: 20px;
        min-width: 20px;
    }

    .periodic-table-header {
        padding-left: 24px;
    }

    .organic-family-header,
    .organic-family-detail-panel,
    .hybridization-detail-content {
        padding: 12px;
    }
}

/* ── Ionic Family – aligned with Organic Family label style ───────────── */
.ionic-family-badge {
    background: #e8f2ff;
    color: #1e4d8c;
    border-color: #c8dbf5;
}

.ionic-family-cue {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef7f0;
    color: #1e6b3a;
    border: 1px solid #cce8d4;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    max-width: 100%;
}

.ionic-family-detail-cue {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef7f0;
    border: 1px solid #cce8d4;
    color: #1e6b3a;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}


.ionic-family-section-row th {
    background: linear-gradient(90deg, #eef4ff 0%, #f7faff 100%);
    color: #16345e;
    border-top-color: #d7e3f6;
    border-bottom-color: #d7e3f6;
}

#ionic-family-ask-btn {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #bfd5ff;
    background: linear-gradient(180deg, #edf4ff 0%, #dfeaff 100%);
    color: #16345e;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(36, 86, 166, 0.12);
    flex-shrink: 0;
}

#ionic-family-ask-btn:hover {
    background: linear-gradient(180deg, #e5efff 0%, #d6e4ff 100%);
}

#ionic-family-ask-btn:focus-visible {
    outline: 2px solid #2456a6;
    outline-offset: 2px;
}

#bio-family-ask-btn,
#organic-family-ask-btn {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #bfd5ff;
    background: linear-gradient(180deg, #edf4ff 0%, #dfeaff 100%);
    color: #16345e;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(36, 86, 166, 0.12);
    flex-shrink: 0;
}

#bio-family-ask-btn:hover,
#organic-family-ask-btn:hover {
    background: linear-gradient(180deg, #e5efff 0%, #d6e4ff 100%);
}

#bio-family-ask-btn:focus-visible,
#organic-family-ask-btn:focus-visible {
    outline: 2px solid #2456a6;
    outline-offset: 2px;
}

/* Make all family detail CTA buttons more noticeable and consistent */
#organic-family-ask-btn,
#ionic-family-ask-btn,
#bio-family-ask-btn {
    border: 1px solid #cc5200;
    background: linear-gradient(180deg, #ff9a2f 0%, #f46a00 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(204, 82, 0, 0.28);
}

#organic-family-ask-btn:hover,
#ionic-family-ask-btn:hover,
#bio-family-ask-btn:hover {
    background: linear-gradient(180deg, #ff8d1a 0%, #e95c00 100%);
}

#organic-family-ask-btn:focus-visible,
#ionic-family-ask-btn:focus-visible,
#bio-family-ask-btn:focus-visible {
    outline: 2px solid #ffab59;
    outline-offset: 2px;
}

.periodic-table-header {
    display: grid;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 20px 0;
    width: 100%;
    max-width: 100%;
    padding-left: 34px;
    box-sizing: border-box;
}

.periodic-table-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 18px 0;
}

.periodic-table-search-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.periodic-table-search {
    flex: 1;
    min-width: 260px;
    padding: 10px 12px;
    border: 1px solid #cfd8e3;
    border-radius: 10px;
    background: #fbfdff;
    color: #22354b;
    font-size: 0.92rem;
}

.periodic-table-search:focus {
    outline: none;
    border-color: #7da8d6;
    box-shadow: 0 0 0 3px rgba(125, 168, 214, 0.18);
}

.periodic-table-search-clear {
    padding: 10px 14px;
    border: 1px solid #cfd8e3;
    border-radius: 10px;
    background: #f4f8fc;
    color: #284562;
    font-weight: 600;
    cursor: pointer;
}

.periodic-table-search-clear:hover {
    background: #eaf2fb;
}

.periodic-table-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.periodic-table-filter-chip {
    padding: 6px 11px;
    border: 1px solid #d3dbe6;
    border-radius: 999px;
    background: #ffffff;
    color: #41566d;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.periodic-table-filter-chip:hover {
    background: #f2f7fc;
}

.periodic-table-filter-chip.active {
    background: #284562;
    border-color: #284562;
    color: #ffffff;
}

.periodic-table-filter-status {
    min-height: 1.2em;
    color: #55697f;
    font-size: 0.76rem;
    font-weight: 600;
}

.periodic-table-heatmap-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Keep diagram mode controls internal-only in production UI. */
.dot-diagram-controls[aria-hidden="true"] {
    display: none !important;
}

.periodic-table-heatmap-legend {
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid #d5deec;
    border-radius: 8px;
    background: #f7faff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.periodic-table-heatmap-legend[hidden] {
    display: none !important;
}

.heatmap-legend-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.heatmap-legend-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: #1f3550;
}

.heatmap-legend-note {
    font-size: 0.68rem;
    font-weight: 600;
    color: #3f5c7f;
}

.heatmap-legend-scale-wrap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
}

.heatmap-legend-scale-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: #516c8c;
}

.heatmap-legend-scale {
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(35, 73, 119, 0.25);
    background: linear-gradient(90deg, rgb(200, 220, 240) 0%, rgb(10, 60, 180) 100%);
}

.heatmap-legend-extremes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.heatmap-legend-pill {
    font-size: 0.66rem;
    font-weight: 600;
    color: #24415f;
    background: #edf4fc;
    border: 1px solid #cfdded;
    border-radius: 999px;
    padding: 4px 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.heatmap-legend-pill.high {
    background: #e4efff;
    border-color: #c2d7ff;
}

.heatmap-legend-trend {
    font-size: 0.68rem;
    color: #3d5675;
    border-top: 1px dashed #d4e0ef;
    padding-top: 5px;
}

@media (max-width: 900px) {
    .heatmap-legend-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .heatmap-legend-extremes {
        grid-template-columns: 1fr;
    }
}

.periodic-table-heatmap-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #38506f;
    white-space: nowrap;
}

.periodic-table-heatmap-mode {
    padding: 5px 8px;
    border: 1px solid #d5deec;
    border-radius: 4px;
    background: #ffffff;
    color: #38506f;
    font-size: 0.74rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.periodic-table-heatmap-mode:hover {
    border-color: #7da8d6;
    background-color: #f7faff;
}

.periodic-table-heatmap-mode:focus {
    outline: none;
    border-color: #4a7ba7;
    box-shadow: 0 0 0 2px rgba(74, 123, 167, 0.15);
}

.periodic-table-header-meta-cell,
.periodic-table-header-cell {
    aspect-ratio: 1 / 0.5;
    min-height: 28px;
    padding: 4px 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.periodic-table-header-meta-cell {
    background: transparent;
    border: none;
}

.periodic-table-header-meta-cell .header-meta-label {
    font-size: 0.6rem;
    font-weight: 500;
    color: #555;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

.periodic-table-header-cell {
    border: 1px solid #bbb;
    background: #e8e8e8;
    color: #333;
}

.periodic-table-header-cell .header-number {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.periodic-table-grid-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
}

.periodic-table-row-labels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 24px;
    min-width: 24px;
    flex-shrink: 0;
}

.periodic-table-row-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: #555;
    background: #e8e8e8;
    border: 1px solid #bbb;
    border-radius: 3px;
    min-height: 0;
    box-sizing: border-box;
}

.periodic-table {
    display: grid;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
    font-family: monospace;
    position: relative;
}

.periodic-table-trend-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 14;
}

.heatmap-trend-chip {
    position: absolute;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 999px;
    padding: 3px 7px;
    border: 1px solid rgba(16, 45, 84, 0.25);
    box-shadow: 0 1px 3px rgba(10, 35, 70, 0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.heatmap-trend-chip.high {
    background: rgba(18, 69, 164, 0.9);
    color: #ffffff;
}

.heatmap-trend-chip.low {
    background: rgba(238, 246, 255, 0.92);
    color: #264569;
}

.heatmap-trend-chip.trend-top-left {
    top: 6px;
    left: 6px;
}

.heatmap-trend-chip.trend-top-right {
    top: 6px;
    right: 6px;
}

.heatmap-trend-chip.trend-bottom-left {
    bottom: 6px;
    left: 6px;
}

.heatmap-trend-chip.trend-bottom-right {
    bottom: 6px;
    right: 6px;
}

.periodic-table-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 0 0 25px 0;
    padding: 0 0 15px 0;
    width: 100%;
    max-width: 100%;
    order: -1;
    border-bottom: 1px solid #e0e0e0;
    justify-content: flex-start;
}

.periodic-table-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 0.55rem;
    color: #555;
    font-weight: 500;
    white-space: nowrap;
}

.periodic-table-legend-item.block-legend-item,
.periodic-table-legend-item.block-legend-title {
    font-size: 0.55rem;
}

#periodic-table-legend .periodic-table-legend-item {
    font-size: 0.83rem;
    font-weight: 400;
    color: #153d63;
    gap: 8px;
}

#periodic-table-legend .legend-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-swatch {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 2px;
    flex-shrink: 0;
}

.periodic-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    min-height: 0;
    min-width: 0;
    padding: 3px;
    border: 1px solid #999;
    border-radius: 3px;
    box-sizing: border-box;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 0.7rem;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.45), 0 1px 1px rgba(0,0,0,0.06);
    position: relative;
}

.periodic-element:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

.periodic-element.filtered-out {
    opacity: 0.18;
    transform: none;
    box-shadow: none;
}

.periodic-element.filtered-out:hover {
    transform: none;
    box-shadow: none;
}

.periodic-element.search-match {
    z-index: 8;
    box-shadow: 0 0 0 3px rgba(31, 93, 172, 0.22), 0 8px 18px rgba(31, 93, 172, 0.18);
    border-color: #1f5dac;
}

.metal-nonmetal-separator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 12;
}

.periodic-element.alkali-metal { background: #ffd8b0; }
.periodic-element.alkaline-earth { background: #fff1b8; }
.periodic-element.transition-metal { background: #cfe8ff; }
.periodic-element.coinage-metal { background: #f8d4e4; }
.periodic-element.triel { background: #d6f1cd; }
.periodic-element.tetrel { background: #e6d1ff; }
.periodic-element.pnictogen { background: #c3f7ff; }
.periodic-element.chalcogen { background: #ffe4b5; }
.periodic-element.halogen { background: #d8ccff; }
.periodic-element.noble-gas { background: #d7f0ff; }
.periodic-element.lanthanoid { background: #b59cff; }
.periodic-element.actinide { background: #ff9f7a; }
.periodic-element.hydrogen { background: #f4f4f4; }
.periodic-element.synthetic { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.18); }

.periodic-element.empty {
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: default;
}

.periodic-element.empty:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
}

/* ── Element Info Popover ──────────────────────────────────────────────────── */

/* Outer wrapper: position:fixed, overflow:visible so arrow pokes out */
.element-info-popup {
    position: fixed;
    z-index: 9999;
    pointer-events: auto;
    /* drop-shadow follows the combined outline of box + arrow */
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.20));
    width: 218px;
    overflow: visible;
}

.element-info-popup[hidden] {
    display: none !important;
}

/* Inner box: clips header bg to rounded corners */
.element-info-inner {
    width: 218px;
    background: #ffffff;
    border: 1px solid #cdd7e6;
    border-radius: 10px;
    overflow: hidden;
}

/* Arrow pseudo-elements — before = border layer, after = fill layer */
.element-info-popup::before,
.element-info-popup::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.element-info-popup::before { border: 7px solid transparent; }
.element-info-popup::after  { border: 6px solid transparent; }

/* Popup RIGHT of element → arrow points LEFT */
.element-info-popup[data-arrow="left"]::before {
    right: 100%; top: var(--arrow-offset, 24px); margin-top: -7px;
    border-right-color: #cdd7e6;
}
.element-info-popup[data-arrow="left"]::after {
    right: 100%; top: var(--arrow-offset, 24px); margin-top: -6px;
    border-right-color: #ffffff;
}

/* Popup LEFT of element → arrow points RIGHT */
.element-info-popup[data-arrow="right"]::before {
    left: 100%; top: var(--arrow-offset, 24px); margin-top: -7px;
    border-left-color: #cdd7e6;
}
.element-info-popup[data-arrow="right"]::after {
    left: 100%; top: var(--arrow-offset, 24px); margin-top: -6px;
    border-left-color: #ffffff;
}

/* Popup BELOW element → arrow points UP */
.element-info-popup[data-arrow="top"]::before {
    bottom: 100%; left: var(--arrow-offset, 24px); margin-left: -7px;
    border-bottom-color: #cdd7e6;
}
.element-info-popup[data-arrow="top"]::after {
    bottom: 100%; left: var(--arrow-offset, 24px); margin-left: -6px;
    border-bottom-color: #ffffff;
}

/* Popup ABOVE element → arrow points DOWN */
.element-info-popup[data-arrow="bottom"]::before {
    top: 100%; left: var(--arrow-offset, 24px); margin-left: -7px;
    border-top-color: #cdd7e6;
}
.element-info-popup[data-arrow="bottom"]::after {
    top: 100%; left: var(--arrow-offset, 24px); margin-left: -6px;
    border-top-color: #ffffff;
}

.element-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-bottom: 1px solid #e3e9f2;
    background: #f7faff;
}

.element-info-pin-btn {
    width: 24px;
    height: 24px;
    padding: 2px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.element-info-pin-btn:hover {
    opacity: 0.7;
}

.element-info-pin-btn.pinned {
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(31, 93, 172, 0.35));
}

.periodic-element.pinned {
    box-shadow: 0 0 0 2px #1f5dac, 0 8px 18px rgba(31, 93, 172, 0.25);
    border-color: #1f5dac;
}

.element-info-header h3 {
    margin: 0;
    font-size: 0.82rem;
    color: #1a2d46;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#element-info-close {
    margin: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #d5deec;
    border-radius: 6px;
    background: #ffffff;
    color: #38506f;
    font-size: 0.82rem;
    line-height: 1;
    flex-shrink: 0;
    cursor: pointer;
}

.element-info-content {
    padding: 7px 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
}

.element-info-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.72rem;
    border-bottom: 1px dashed #e6edf7;
    padding-bottom: 3px;
}

.element-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.element-info-compare-btn {
    width: 24px;
    height: 24px;
    padding: 2px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: opacity 0.15s ease;
}

.element-info-compare-btn:hover {
    opacity: 0.7;
}

.element-compare-panel {
    padding: 10px;
    background: #f7faff;
    border-top: 1px solid #e3e9f2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.element-compare-panel[hidden] {
    display: none !important;
}

.element-compare-instruction {
    font-size: 0.72rem;
    color: #38506f;
    text-align: center;
    font-weight: 500;
}

.element-compare-content {
    flex: 1;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
}

.compare-table-row {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 0;
    border-bottom: 1px dashed #e3e9f2;
}

.compare-table-row:last-child {
    border-bottom: none;
}

.compare-table-header {
    background: #edf2fb;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #cdd7e6 !important;
    margin-bottom: 2px;
}

.compare-table-header .compare-prop {
    display: none;
}

.compare-table-header .compare-val {
    grid-column: span 1;
    font-weight: 700;
    font-size: 0.68rem;
    color: #1a2d46;
    text-align: center;
    padding: 4px 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-table-header {
    grid-template-columns: 1fr 1fr;
}

.compare-prop {
    padding: 3px 3px 3px 0;
    font-weight: 600;
    color: #38506f;
    background: transparent;
}

.compare-val {
    padding: 3px;
    color: #1a2d46;
    font-variant-numeric: tabular-nums;
    background: #f0f5fb;
    text-align: center;
    border-left: 2px solid #e3e9f2;
}

.element-compare-cancel-btn {
    padding: 5px 8px;
    border: 1px solid #d5deec;
    border-radius: 4px;
    background: #ffffff;
    color: #38506f;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.element-compare-cancel-btn:hover {
    background: #f0f5fb;
}

.element-info-row .label {
    color: #5a6f88;
    font-weight: 600;
}

.element-info-row .value {
    color: #132943;
    text-align: right;
    font-weight: 500;
}

.element-info-actions {
    padding: 6px 10px 7px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e3e9f2;
    background: #fbfdff;
}

#element-info-ask {
    margin: 0;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 7px;
    border: 1px solid #cc5200;
    background: linear-gradient(180deg, #ff9a2f 0%, #f46a00 100%);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(204, 82, 0, 0.28);
}
#element-info-ask:hover {
    background: linear-gradient(180deg, #ff8d1a 0%, #e95c00 100%);
}
#element-info-ask:focus-visible {
    outline: 2px solid #ffab59;
    outline-offset: 2px;
}
.element-number {
    font-size: 0.65rem;
    color: #666;
    font-weight: bold;
}

.element-symbol {
    font-size: 0.9rem;
    font-weight: bold;
    color: #000;
}

.element-weight {
    font-size: 0.65rem;
    color: #666;
}

/* Element Category Colors */
.nonmetal {
    background: #a3e4d7;
}

.nonmetal:hover {
    background: #7fd4c1;
}

.reactive-nonmetal {
    background: #ffff99;
}

.reactive-nonmetal:hover {
    background: #ffffb3;
}

.noble-gas {
    background: #c0ffff;
}

.noble-gas:hover {
    background: #99ffff;
}

.alkali-metal {
    background: #ffb3b3;
}

.alkali-metal:hover {
    background: #ff9999;
}

.alkaline-earth {
    background: #ffc9a3;
}

.alkaline-earth:hover {
    background: #ffb380;
}

.transition-metal {
    background: #ccccff;
}

.transition-metal:hover {
    background: #bbbbff;
}

.lanthanide {
    background: #ffccff;
}

.lanthanide:hover {
    background: #ffb3ff;
}

.actinide {
    background: #ff99cc;
}

.actinide:hover {
    background: #ff80cc;
}

.semimetal {
    background: #cccccc;
}

.semimetal:hover {
    background: #bbbbbb;
}

/* ── Hybridization Table & Controls ────────────────────────────────────── */
.hybridization-container {
    flex: 1;
    overflow: auto;
    padding: 28px 20px 30px;
    background: linear-gradient(180deg, #fbfcff 0%, #f4f7fb 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}

.hybridization-intro {
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid #d9e2ee;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(36, 61, 84, 0.08);
}

.hybridization-intro h2 {
    margin: 0 0 6px 0;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #153d63;
}

.hybridization-intro p {
    margin: 3px 0 0;
    line-height: 1.5;
    color: #43586e;
}

.hybridization-container h2 {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    line-height: 1.2;
    color: #153d63;
}

.hybridization-container > p {
    margin: 0;
    max-width: 80ch;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #43586e;
}

.hybridization-detail-content {
    padding: 16px 18px;
    border: 1px solid #d9e3f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    box-sizing: border-box;
    margin-bottom: 12px;
}

.hybridization-table-wrapper {
    width: 100%;
    min-width: 0;
}

.hybridization-table-scroll {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.hybridization-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

/* Compact info columns */
.hybridization-table thead th:nth-child(1),
.hybridization-table tbody td:nth-child(1) { width: 9%; }

.hybridization-table thead th:nth-child(2),
.hybridization-table tbody td:nth-child(2) { width: 10%; }

.hybridization-table thead th:nth-child(3),
.hybridization-table tbody td:nth-child(3) { width: 8%; }

.hybridization-table thead th:nth-child(4),
.hybridization-table tbody td:nth-child(4) { width: 12%; }

.hybridization-table thead th:nth-child(5),
.hybridization-table tbody td:nth-child(5) { width: 7%; }

/* ── Report Tab ─────────────────────────────────────────────────────────── */
.report-content {
    padding: 20px 24px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
    font-size: 0.88rem;
    color: #1a2d46;
}

.report-placeholder {
    color: #7a92a8;
    font-style: italic;
    padding: 24px 0;
}

.report-header {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #d0dff0;
}

.report-title {
    margin: 0 0 4px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a2d46;
}

.report-formula {
    font-size: 1rem;
    color: #355173;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.report-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.report-section h3 {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5577a0;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
}

.report-table td {
    padding: 5px 10px 5px 0;
    vertical-align: top;
    border-bottom: 1px solid #e8eff8;
    line-height: 1.45;
}

.report-table td:first-child {
    width: 42%;
    font-weight: 600;
    color: #2d4a6b;
    padding-right: 16px;
    white-space: nowrap;
}

.report-table td:last-child {
    color: #1a2d46;
    word-break: break-all;
}

.report-table tr:last-child td {
    border-bottom: none;
}

.report-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    background: #f0f5fb;
    padding: 1px 4px;
    border-radius: 3px;
    word-break: break-all;
}

.report-table a {
    color: #1f5dac;
    text-decoration: none;
}

.report-table a:hover {
    text-decoration: underline;
}

.vl-report-document {
    max-width: 980px;
    margin: 0 auto;
    color: #1a2d46;
}

.vl-report-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 14px;
}

.vl-report-cover {
    border: 1.5px solid #c8d8ec;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}

.vl-report-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5577a0;
    margin-bottom: 6px;
}

.vl-report-cover h2 {
    margin: 0 0 8px;
    font-size: 1.32rem;
    line-height: 1.25;
    color: #183659;
}

.vl-report-equation {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #dce8f4;
    font-weight: 700;
    color: #223f63;
}

.vl-report-meta {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #6c829a;
}

.vl-report-print-summary,
.vl-report-wysiwyg {
    margin-bottom: 18px;
}

.vl-report-print-summary h3,
.vl-report-wysiwyg > h3 {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5577a0;
}

.vl-report-wysiwyg .vl-result {
    display: block;
}

.vl-report-wysiwyg .vl-card,
.vl-report-wysiwyg .vl-kpi-row,
.vl-report-wysiwyg .vl-rxn-banner {
    break-inside: avoid;
    page-break-inside: avoid;
}

.vl-report-standalone-print {
    margin: 0;
    background: #ffffff;
}

.vl-report-standalone-print .report-content {
    height: auto;
    overflow: visible;
    padding: 0;
}

.vl-report-standalone-print .vl-report-document {
    max-width: none;
    margin: 0;
}

.vl-report-standalone-print .vl-report-toolbar {
    display: none;
}

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body.vl-printing-report * {
        visibility: hidden !important;
    }

    body.vl-printing-report #report-tab-pane,
    body.vl-printing-report #report-tab-pane * {
        visibility: visible !important;
    }

    body.vl-printing-report #report-tab-pane {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    body.vl-printing-report .report-content {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        font-size: 9.5pt !important;
        color: #10233a !important;
    }

    body.vl-printing-report .vl-report-toolbar {
        display: none !important;
    }

    body.vl-printing-report .vl-report-document {
        max-width: none !important;
        margin: 0 !important;
    }

    body.vl-printing-report .vl-report-cover,
    body.vl-printing-report .vl-card,
    body.vl-printing-report .vl-rxn-banner,
    body.vl-printing-report .vl-kpi-row {
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.vl-printing-report .vl-card,
    body.vl-printing-report .vl-report-cover {
        border-color: #c8d8ec !important;
        background: #ffffff !important;
    }

    body.vl-printing-report button,
    body.vl-printing-report select,
    body.vl-printing-report input,
    body.vl-printing-report textarea,
    body.vl-printing-report .vl-empty-flask {
        display: none !important;
    }
}

/* Content-rich columns get the remaining 54% */
.hybridization-table thead th:nth-child(6),
.hybridization-table tbody td:nth-child(6) { width: 24%; }

.hybridization-table thead th:nth-child(7),
.hybridization-table tbody td:nth-child(7) { width: 30%; }

.hybridization-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #23395d 0%, #16253e 100%);
    color: #ffffff;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 13px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-weight: 700;
}

.hybridization-table tbody td {
    padding: 12px 12px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #1d2f4a;
    border-bottom: 1px solid #e7edf5;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
}

.hybridization-table tbody tr:nth-child(even) td {
    background: #fcfdff;
}

.hybridization-row {
    cursor: pointer;
    transition: background-color 120ms ease;
}

.hybridization-row:hover td {
    background: #f3f8ff !important;
}

.hybridization-row.active td {
    background: #eaf2ff !important;
    box-shadow: inset 0 0 0 1px #bfd5ff;
}

.hybrid-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--hcolor, #3b82f6);
    color: white;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hybrid-examples {
    font-style: italic;
    color: #51637d;
}

.hybrid-view-cell {
    display: table-cell;
    white-space: normal;
    line-height: 1.3;
}

.hybrid-view-cell .hybrid-variant-btn {
    margin: 2px 4px 2px 0;
}

.hybrid-variant-btn {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #bfd5ff;
    background: linear-gradient(180deg, #edf4ff 0%, #dfeaff 100%);
    color: #16345e;
    font-size: 0.64rem;
    font-weight: 700;
    cursor: pointer;
    white-space: normal;
    line-height: 1.2;
    transition: all 120ms ease;
}

.hybrid-variant-btn:hover {
    background: linear-gradient(180deg, #e5efff 0%, #d6e4ff 100%);
    box-shadow: 0 4px 12px rgba(36, 86, 166, 0.16);
}

.hybrid-variant-btn:focus-visible {
    outline: 2px solid #2456a6;
    outline-offset: 1px;
}

.hybridization-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.hybridization-detail-header h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    color: #10233d;
    flex: 1;
}

.hybrid-type-badge-lg {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--hcolor, #3b82f6);
    color: white;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hybridization-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.hybridization-detail-grid > div {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f5f8fc;
    border: 1px solid #e3ebf5;
}

.hybridization-detail-grid .label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7f99;
}

.hybridization-detail-grid .value {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #1d2f4a;
    font-weight: 600;
}

.hybridization-detail-notes {
    padding: 11px;
    border-radius: 10px;
    background: #f0f6ff;
    border-left: 3px solid #3b82f6;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #1d2f4a;
    margin-bottom: 10px;
}

.hybridization-detail-examples {
    font-size: 0.78rem;
    line-height: 1.5;
    color: #1d2f4a;
    margin-bottom: 12px;
    padding: 10px 0;
}

.hybridization-detail-examples strong {
    color: #10233d;
    font-weight: 700;
}

.hybridization-detail-view-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7f99;
    margin-bottom: 8px;
}

.hybrid-variant-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.halogen {
    background: #ffffcc;
}

.halogen:hover {
    background: #ffffe6;
}

.post-transition {
    background: #ccccaa;
}

.post-transition:hover {
    background: #bbbbaa;
}

/* Synthetic/Artificial elements (104-118) - dashed border indicator */
.periodic-element.synthetic {
    border: 2px dashed #999;
}

@media (max-width: 1200px) {
    :root {
        --chat-sidebar-width: clamp(300px, 30vw, 350px);
    }

    #toolbar {
        padding: 10px 12px;
    }

    #toolbar select {
        max-width: 140px;
    }
}

@media (max-width: 1000px) {
    body.chat-collapsed {
        --chat-sidebar-width: 0px;
    }

    body {
        padding-bottom: var(--page-padding);
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-y: auto;
    }

    html {
        overflow-y: auto;
    }

    header,
    #toolbar,
    main {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 1280px;
    }

    .app-layout {
        display: block;
        height: auto;
    }

    #input-section.chat-panel {
        position: static;
        transform: none;
        width: auto;
        height: auto;
        min-height: 0;
        border-radius: 14px;
        margin-bottom: 14px;
        padding: 14px;
    }

    #chat-collapse-toggle,
    #chat-side-toggle {
        display: none;
    }

    #chat-expand-toggle {
        display: none !important;
    }

    #chat-window {
        max-height: 48vh;
        flex: none;
    }

    main {
        height: auto;
        overflow: visible;
        display: flex;
        flex-direction: row;
    }

    .content-column {
        height: auto;
        overflow: visible;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    /* Override for viewer section to support 3D orbital visualization */
    #viewer-section {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1;
    }

    section {
        height: auto;
        min-height: 0;
        padding: 14px 14px 0;
    }

    #viewer-display {
        min-height: 0;
    }

    #viewer {
        height: min(58vh, 520px);
        min-height: 320px;
    }

    #molecule-code-panel {
        min-height: 220px;
    }

    #molecule-code {
        max-height: 34vh;
    }

    #viewer-display.mode-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    header h1 {
        font-size: 1.25rem;
    }

    #toolbar {
        gap: 8px;
        padding: 10px;
    }

    .toolbar-group {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .toolbar-group + .toolbar-group {
        border-left: none;
        padding-left: 0;
    }

    #toolbar label {
        width: 100%;
    }

    #toolbar select {
        max-width: none;
        flex: 1;
        min-width: 130px;
    }

    #viewer {
        height: min(52vh, 440px);
        min-height: 300px;
    }

    #molecule-code-panel .code-meta {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    #molecule-code-panel .code-meta-actions {
        width: 100%;
    }

    #code-format-select {
        flex: 1;
    }
}

@media (max-width: 520px) {
    :root {
        --page-padding: 8px;
    }

    .chat-panel-header {
        flex-wrap: wrap;
    }

    .chat-panel-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .chat-message,
    .chat-card,
    .chat-suggestions {
        max-width: 100%;
    }

    #viewer {
        height: min(50vh, 380px);
        min-height: 280px;
    }

    #history-drawer {
        width: 100vw;
    }
}

@media (max-height: 760px) {
    body {
        --page-padding: 10px;
    }

    #toolbar {
        margin-top: 12px;
    }

    main {
        margin-top: 12px;
    }

    #chat-window {
        max-height: 34vh;
    }

    #viewer {
        height: min(54vh, 420px);
        min-height: 260px;
    }
}

/* 3D Orbital Visualization */
#orbital-3d-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex !important;
    flex-direction: column;
}

#orbital-3d-canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1;
}

#orbital-3d-info {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.9rem;
    width: clamp(300px, 30vw, 380px);
    box-sizing: border-box;
    max-width: calc(100% - 20px);
    max-height: calc(100% - 140px);
    overflow: auto;
    z-index: 10;
    display: none;
}

#orbital-3d-info .orbital-equation-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#orbital-3d-info .orbital-equation-line {
    margin-top: 6px;
    font-size: 0.8rem;
    line-height: 1.35;
}

#orbital-3d-info .orbital-equation-secondary {
    opacity: 0.92;
}

#orbital-3d-info .orbital-equation-note {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.72rem;
    opacity: 0.82;
}

#orbital-3d-controls {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
    width: fit-content;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    z-index: 10;
    display: none;
}

.orbital-tuning-controls {
    margin-top: 8px;
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr);
    gap: 4px 8px;
    align-items: center;
}

.orbital-tuning-controls label {
    font-size: 0.72rem;
    opacity: 0.9;
}

.orbital-tuning-controls input[type="range"] {
    width: 100%;
}

.orbital-control-buttons {
    margin-top: 8px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.orbital-preset-controls {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

.orbital-preset-btn {
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #e6eeff;
    font-size: 0.72rem;
    cursor: pointer;
}

.orbital-preset-btn.active {
    background: #2e9b62;
    border-color: #2e9b62;
    color: #ffffff;
}

#orbital-3d-play-btn,
#orbital-3d-axes-btn,
#orbital-3d-render-mode-btn,
#orbital-3d-cycle-btn,
#orbital-3d-step-btn,
#orbital-3d-back-btn {
    margin-top: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s ease;
}

#orbital-3d-play-btn,
#orbital-3d-axes-btn,
#orbital-3d-render-mode-btn,
#orbital-3d-cycle-btn,
#orbital-3d-step-btn {
    margin-right: 8px;
}

#orbital-3d-play-btn[aria-pressed="true"],
#orbital-3d-axes-btn[aria-pressed="true"],
#orbital-3d-cycle-btn[aria-pressed="true"] {
    background: #2e9b62;
}

#orbital-3d-play-btn::before,
#orbital-3d-axes-btn::before,
#orbital-3d-render-mode-btn::before,
#orbital-3d-cycle-btn::before,
#orbital-3d-step-btn::before,
#orbital-3d-back-btn::before {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
}

#orbital-3d-play-btn::before {
    content: '\25B6';
}

#orbital-3d-play-btn[aria-pressed="true"]::before {
    content: '\23F8';
}

#orbital-3d-axes-btn::before {
    content: '\2736';
}

#orbital-3d-render-mode-btn::before {
    content: '\25A6';
}

#orbital-3d-render-mode-btn[data-mode="translucent"]::before {
    content: '\25CE';
}

#orbital-3d-render-mode-btn[data-mode="cloud"]::before {
    content: '\2022\2022\2022';
    letter-spacing: 1px;
}

#orbital-3d-cycle-btn::before {
    content: '\21BB';
}

#orbital-3d-cycle-btn[aria-pressed="true"]::before {
    content: '\23F8';
}

#orbital-3d-step-btn::before {
    content: '\23ED';
}

#orbital-3d-back-btn::before {
    content: '\21A9';
}

#orbital-3d-play-btn:hover,
#orbital-3d-axes-btn:hover,
#orbital-3d-render-mode-btn:hover,
#orbital-3d-cycle-btn:hover,
#orbital-3d-step-btn:hover,
#orbital-3d-back-btn:hover {
    background: #764ba2;
}

/* Viewer section should take remaining space */
#viewer-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}