@font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("./Urbanist-300.ttf") format("truetype");
}

@font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./Urbanist-700.ttf") format("truetype");
}

@font-face {
    font-family: "Urbanist";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("./Urbanist-300Italic.ttf") format("truetype");
}

@font-face {
    font-family: "Urbanist";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("./Urbanist-700Italic.ttf") format("truetype");
}

:root {
    --primary: #229EBC;
    --secondary: #023148;
    --accent: #000000;
}

/* AGENT interactive Pong artifact */
.genie-pong {
    width: min(100%, 46rem);
    overflow: hidden;
    border: 1px solid rgba(2, 49, 72, 0.14);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(2, 49, 72, 0.12), 0 2px 8px rgba(2, 49, 72, 0.08);
    color: var(--secondary);
    font-family: "Urbanist", sans-serif;
}

.genie-pong__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem 0.7rem;
}

.genie-pong__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.genie-pong__hint {
    margin: 0.12rem 0 0;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.35;
}

.genie-pong__pause,
.genie-pong__start {
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}

.genie-pong__pause {
    flex: none;
    padding: 0.46rem 0.7rem;
    background: #eef4f6;
    color: var(--secondary);
}

.genie-pong__pause:not(:disabled):hover,
.genie-pong__start:hover {
    transform: translateY(-1px);
}

.genie-pong__pause:disabled {
    cursor: default;
    opacity: 0.42;
}

.genie-pong__score {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 1rem 0.65rem;
    font-variant-numeric: tabular-nums;
}

.genie-pong__score > span:not(.genie-pong__score-divider) {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 0.4rem;
}

.genie-pong__score small {
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.genie-pong__score strong,
.genie-pong__score-divider {
    font-size: 1.15rem;
    line-height: 1;
}

.genie-pong__score-divider {
    color: #94a3b8;
}

.genie-pong__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #023148;
}

.genie-pong__canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    cursor: ns-resize;
    touch-action: none;
}

.genie-pong__canvas:focus-visible {
    box-shadow: inset 0 0 0 3px #55d6f6;
}

.genie-pong__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(2, 31, 45, 0.58);
    color: #ffffff;
    text-align: center;
    backdrop-filter: blur(2px);
}

.genie-pong__overlay[hidden] {
    display: none;
}

.genie-pong__overlay p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.genie-pong__start {
    padding: 0.58rem 0.95rem;
    background: #ffffff;
    color: #023148;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

body.genie-theme-dark .genie-pong {
    border-color: rgba(148, 163, 184, 0.28);
    background: #0f172a;
    color: #e2e8f0;
}

body.genie-theme-dark .genie-pong__pause {
    background: #1e293b;
    color: #e2e8f0;
}

@media (max-width: 540px) {
    .genie-pong__header {
        align-items: flex-start;
        padding: 0.72rem 0.75rem 0.6rem;
    }

    .genie-pong__hint {
        max-width: 15rem;
    }

    .genie-pong__score {
        padding-bottom: 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .genie-pong__pause,
    .genie-pong__start {
        transition: none;
    }
}

/* AGENT Genie Arcade artifacts */
.genie-arcade {
    width: min(100%, 46rem);
    overflow: hidden;
    border: 1px solid rgba(2, 49, 72, 0.14);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(2, 49, 72, 0.12), 0 2px 8px rgba(2, 49, 72, 0.08);
    color: var(--secondary);
    font-family: "Urbanist", sans-serif;
}

.genie-arcade button {
    font: inherit;
}

.genie-arcade__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 1rem 0.7rem;
}

.genie-arcade__header h3 {
    margin: 0;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.genie-arcade__header p {
    margin: 0.12rem 0 0;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.35;
}

.genie-arcade__quiet,
.genie-arcade__mode,
.genie-arcade__overlay button {
    flex: none;
    border: 0;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}

.genie-arcade__quiet,
.genie-arcade__mode {
    padding: 0.46rem 0.72rem;
    background: #eef4f6;
    color: var(--secondary);
}

.genie-arcade__quiet:disabled {
    cursor: default;
    opacity: 0.42;
}

.genie-arcade__quiet:not(:disabled):hover,
.genie-arcade__mode:hover,
.genie-arcade__overlay button:hover,
.genie-arcade__menu button:hover {
    transform: translateY(-1px);
}

.genie-arcade__metrics {
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem 1.2rem;
    padding: 0 1rem 0.65rem;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.genie-arcade__metrics strong {
    margin-left: 0.2rem;
    color: var(--secondary);
    font-size: 1rem;
}

.genie-arcade__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #061e2b;
}

.genie-arcade__stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    touch-action: none;
}

.genie-arcade__stage canvas:focus-visible,
.genie-arcade__tiles:focus-visible {
    box-shadow: inset 0 0 0 3px #55d6f6;
}

.genie-arcade__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(2, 31, 45, 0.58);
    color: #ffffff;
    text-align: center;
    backdrop-filter: blur(2px);
}

.genie-arcade__overlay[hidden] {
    display: none;
}

.genie-arcade__overlay p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.genie-arcade__overlay button {
    padding: 0.58rem 0.95rem;
    background: #ffffff;
    color: #023148;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.genie-arcade__status {
    min-height: 1.5rem;
    margin: 0;
    padding: 0 1rem 0.55rem;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
}

.genie-arcade__menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0 1rem 1rem;
}

.genie-arcade__menu button {
    position: relative;
    min-height: 6rem;
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.15rem 0.65rem;
    align-items: center;
    border: 1px solid rgba(2, 49, 72, 0.1);
    border-radius: 0.85rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #f8fcfd, #edf8fb);
    color: var(--secondary);
    text-align: left;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.genie-arcade__menu button:hover {
    border-color: rgba(34, 158, 188, 0.45);
    box-shadow: 0 10px 24px rgba(2, 49, 72, 0.1);
}

.genie-arcade__menu button > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    background: var(--secondary);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.08em;
}

.genie-arcade__menu strong {
    align-self: end;
    font-size: 0.84rem;
}

.genie-arcade__menu small {
    align-self: start;
    color: #64748b;
    font-size: 0.66rem;
    line-height: 1.3;
}

.genie-arcade__menu em {
    grid-column: 3;
    grid-row: 1 / 3;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: #ffffff;
    color: #0c7895;
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 700;
}

.genie-arcade__tic {
    width: min(19rem, calc(100% - 2rem));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin: 0 auto 1rem;
}

.genie-arcade__tic button {
    aspect-ratio: 1;
    border: 0;
    border-radius: 0.8rem;
    background: #eaf7fb;
    color: var(--secondary);
    font-size: clamp(2rem, 9vw, 3.25rem);
    font-weight: 300;
    cursor: pointer;
}

.genie-arcade__tic button[data-mark="X"] { color: #0c7895; }
.genie-arcade__tic button[data-mark="O"] { color: #d9689f; }
.genie-arcade__tic button:disabled:empty { opacity: 0.62; }

.genie-arcade__chess {
    width: min(26rem, calc(100% - 2rem));
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    overflow: hidden;
    margin: 0 auto 1rem;
    border: 0.45rem solid #dcebf0;
    border-radius: 0.85rem;
    background: #dcebf0;
    box-shadow: 0 10px 26px rgba(2, 49, 72, 0.12);
}

.genie-arcade__chess button {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: #f7fbfc;
    color: #023148;
    font-family: "Times New Roman", serif;
    font-size: clamp(1.2rem, 6.5vw, 2.4rem);
    line-height: 1;
    cursor: pointer;
}

.genie-arcade__chess button:nth-child(16n + 2),
.genie-arcade__chess button:nth-child(16n + 4),
.genie-arcade__chess button:nth-child(16n + 6),
.genie-arcade__chess button:nth-child(16n + 8),
.genie-arcade__chess button:nth-child(16n + 9),
.genie-arcade__chess button:nth-child(16n + 11),
.genie-arcade__chess button:nth-child(16n + 13),
.genie-arcade__chess button:nth-child(16n + 15) { background: #9dd9e7; }

.genie-arcade__chess button.is-selected { box-shadow: inset 0 0 0 4px #f6d365; }
.genie-arcade__chess button.is-legal::after {
    content: "";
    position: absolute;
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(12, 120, 149, 0.46);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.genie-arcade__promotion {
    width: min(26rem, calc(100% - 2rem));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: -0.25rem auto 1rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
}

.genie-arcade__promotion[hidden] { display: none; }

.genie-arcade__promotion button {
    width: 2.35rem;
    aspect-ratio: 1;
    border: 1px solid #c9e0e8;
    border-radius: 0.55rem;
    background: #f7fbfc;
    color: #023148;
    font-family: "Times New Roman", serif;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
}

.genie-arcade__promotion button:hover,
.genie-arcade__promotion button:focus-visible { background: #dff4fa; }

.genie-arcade__memory {
    width: min(25rem, calc(100% - 2rem));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
    margin: 0 auto 1rem;
}

.genie-arcade__memory button {
    aspect-ratio: 1;
    border: 1px solid rgba(2, 49, 72, 0.12);
    border-radius: 0.75rem;
    background: var(--secondary);
    color: #ffffff;
    font-size: clamp(1.25rem, 6vw, 2rem);
    font-weight: 700;
    cursor: pointer;
}

.genie-arcade__memory button.is-matched {
    background: #dff7ef;
    color: #087561;
    opacity: 0.78;
}

.genie-arcade__tiles {
    width: min(22rem, calc(100% - 2rem));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 0 auto 1rem;
    padding: 0.55rem;
    border-radius: 0.9rem;
    background: #dcebf0;
    outline: none;
    touch-action: none;
}

.genie-arcade__tiles span {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.62);
    color: var(--secondary);
    font-size: clamp(1rem, 5vw, 1.6rem);
    font-weight: 700;
}

.genie-arcade__tiles span[data-value="2"] { background: #f8fafc; }
.genie-arcade__tiles span[data-value="4"] { background: #dff5fb; }
.genie-arcade__tiles span[data-value="8"] { background: #9be3f2; }
.genie-arcade__tiles span[data-value="16"] { background: #77e0c1; }
.genie-arcade__tiles span[data-value="32"] { background: #f6d365; }
.genie-arcade__tiles span[data-value="64"] { background: #f7a072; color: #ffffff; }
.genie-arcade__tiles span[data-value="128"],
.genie-arcade__tiles span[data-value="256"] { background: #e783b9; color: #ffffff; }
.genie-arcade__tiles span[data-value="512"],
.genie-arcade__tiles span[data-value="1024"],
.genie-arcade__tiles span[data-value="2048"] { background: #0c7895; color: #ffffff; }

.genie-arcade__mines {
    width: min(26rem, calc(100% - 2rem));
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.2rem;
    margin: 0 auto 1rem;
    padding: 0.45rem;
    border-radius: 0.75rem;
    background: #dcebf0;
}

.genie-arcade__mines button {
    aspect-ratio: 1;
    border: 0;
    border-radius: 0.28rem;
    background: #ffffff;
    color: #0c7895;
    font-size: clamp(0.65rem, 2.8vw, 0.92rem);
    font-weight: 700;
    cursor: pointer;
}

.genie-arcade__mines button.is-revealed { background: #f1f5f9; box-shadow: inset 0 0 0 1px rgba(2,49,72,.05); }
.genie-arcade__mines button.is-mine { background: #fee2e2; color: #be123c; }
.genie-arcade__mines button[data-count="1"] { color: #0c7895; }
.genie-arcade__mines button[data-count="2"] { color: #087561; }
.genie-arcade__mines button[data-count="3"] { color: #be123c; }

.genie-arcade__solitaire {
    margin: 0 0.75rem 0.9rem;
    padding: 0.7rem;
    overflow: hidden;
    border-radius: 0.9rem;
    background: linear-gradient(145deg, #075f68, #023f50);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.genie-arcade__solitaire-top,
.genie-arcade__solitaire-tableau {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(0.2rem, 1vw, 0.45rem);
}

.genie-arcade__solitaire-top { margin-bottom: 0.7rem; }
.genie-arcade__solitaire-spacer { min-width: 0; }
.genie-arcade__solitaire-column { position: relative; min-width: 0; }

.genie-playing-card {
    position: relative;
    width: 100%;
    aspect-ratio: 0.72;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid rgba(2, 49, 72, 0.2);
    border-radius: clamp(0.28rem, 1.2vw, 0.48rem);
    padding: clamp(0.16rem, 0.8vw, 0.34rem);
    background: #ffffff;
    color: #023148;
    box-shadow: 0 3px 8px rgba(0, 28, 38, 0.18);
    font-family: Georgia, serif;
    font-size: clamp(0.68rem, 2.8vw, 1.05rem);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.genie-arcade__solitaire-column .genie-playing-card { position: absolute; inset-inline: 0; }
.genie-playing-card.is-red { color: #c92d55; }
.genie-playing-card.is-face-down {
    align-items: center;
    justify-content: center;
    border-color: rgba(255,255,255,.7);
    background: repeating-linear-gradient(135deg, #075f68 0 5px, #0c7895 5px 10px);
    color: rgba(255,255,255,.9);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.18), 0 3px 8px rgba(0,28,38,.2);
}

.genie-playing-card small {
    position: absolute;
    right: 0.22rem;
    bottom: 0.18rem;
    font-family: "Urbanist", sans-serif;
    font-size: 0.55rem;
}

.genie-playing-card.is-slot {
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255,255,255,.45);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.68);
    box-shadow: none;
}

.genie-playing-card.is-selected {
    box-shadow: 0 0 0 3px #f6d365, 0 5px 12px rgba(0,28,38,.28);
    transform: translateY(-2px);
}

body.genie-theme-dark .genie-arcade {
    border-color: rgba(148, 163, 184, 0.28);
    background: #0f172a;
    color: #e2e8f0;
}

body.genie-theme-dark .genie-arcade__quiet,
body.genie-theme-dark .genie-arcade__mode {
    background: #1e293b;
    color: #e2e8f0;
}

body.genie-theme-dark .genie-arcade__metrics strong { color: #e2e8f0; }
body.genie-theme-dark .genie-arcade__menu button { border-color: rgba(148,163,184,.18); background: linear-gradient(135deg,#111f31,#13283a); color: #e2e8f0; }
body.genie-theme-dark .genie-arcade__menu em { background: #1e293b; color: #55d6f6; }

@media (max-width: 540px) {
    .genie-arcade__header { padding: 0.72rem 0.75rem 0.6rem; }
    .genie-arcade__header p { max-width: 17rem; }
    .genie-arcade__menu { grid-template-columns: 1fr; padding: 0 0.75rem 0.75rem; }
    .genie-arcade__menu button { min-height: 4.7rem; }
    .genie-arcade__metrics { padding-bottom: 0.55rem; }
    .genie-arcade__chess { width: min(24rem, calc(100% - 1.5rem)); }
    .genie-arcade__solitaire { margin-inline: 0.45rem; padding: 0.45rem; }
    .genie-arcade__solitaire-top { margin-bottom: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .genie-arcade button { transition: none !important; }
}

.genie-button-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: min(18rem, calc(100vw - 1rem));
    padding: 0.38rem 0.5rem;
    border-radius: 0.38rem;
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.24), 0 2px 8px rgba(15, 23, 42, 0.18);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px) scale(0.98);
    transition: opacity 80ms ease, transform 80ms ease;
    white-space: pre-line;
}

.genie-button-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#settings-modal {
    font-size: 18px;
}

#settings-modal .settings-modal-shell {
    align-items: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#settings-modal .settings-modal-panel {
    display: flex;
    flex-direction: column;
    max-width: min(1120px, calc(100vw - 2rem));
    height: min(895px, calc(100vh - 2rem));
    height: min(895px, calc(100dvh - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

#settings-modal .settings-modal-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#settings-modal .settings-layout {
    display: grid;
    grid-template-columns: 166px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    width: 100%;
}

#settings-modal .settings-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100%;
    padding: 0.75rem;
    border-right: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#settings-modal .settings-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

#settings-modal .settings-sidebar-footer {
    margin-top: 0.45rem;
    padding-top: 0.6rem;
    border-top: 1px solid #e2e8f0;
}

#settings-modal .settings-nav-link {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.45rem;
    color: #475569;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

#settings-modal .settings-nav-link svg {
    width: 1.08rem;
    height: 1.08rem;
    flex: 0 0 1.08rem;
}

#settings-modal .settings-nav-link .settings-models-nav-icon {
    transform: rotate(90deg);
    transform-origin: center;
}

#settings-modal .settings-nav-link:hover,
#settings-modal .settings-nav-link.is-active {
    color: var(--secondary);
    background: #ffffff;
}

#settings-modal .settings-nav-link.is-active {
    box-shadow: inset 3px 0 0 var(--secondary);
}

#settings-modal .settings-content {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
}

#settings-modal .settings-panel {
    scroll-margin-top: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.85rem;
}

#settings-modal .settings-scope-tabs {
    display: inline-flex;
    align-self: flex-start;
    gap: 0.2rem;
    padding: 0.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    background: #f8fafc;
}

#settings-modal .settings-scope-tab {
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: #64748b;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

#settings-modal .settings-scope-tab.is-active {
    color: var(--secondary);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

#settings-modal .settings-panel[hidden] {
    display: none;
}

#settings-modal .settings-subpanel,
#settings-modal .settings-model-card,
#settings-modal .settings-toggle-row {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.75rem;
}

#settings-modal .settings-model-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

#settings-modal .settings-model-card-disabled {
    opacity: 0.58;
}

#settings-modal .settings-model-control-grid {
    display: grid;
    grid-template-columns: minmax(8.5rem, 1fr) minmax(8.5rem, 1fr) minmax(7rem, 0.8fr);
    gap: 0.5rem;
}

#settings-modal .settings-model-card-description,
#settings-modal .settings-subsection-help {
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.35;
}

#settings-modal .settings-advanced-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

#settings-modal .settings-subsection-title {
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
}

#settings-modal .settings-section-kicker {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
}

#settings-modal .settings-section-title {
    margin-top: 0.1rem;
    color: var(--secondary);
    font-size: 1rem;
    font-weight: 700;
}

:is(#settings-modal, #support-modal) .settings-input {
    width: 100%;
    min-height: 2rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #334155;
    font-size: 0.82rem;
    padding: 0.35rem 0.65rem;
    outline: none;
}

:is(#settings-modal, #support-modal) .settings-textarea {
    min-height: 10rem;
    resize: vertical;
    line-height: 1.4;
}

#support-modal .support-textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.4;
}

:is(#settings-modal, #support-modal) .settings-input:focus {
    border-color: rgba(34, 158, 188, 0.7);
    box-shadow: 0 0 0 2px rgba(34, 158, 188, 0.12);
}

:is(#settings-modal, #support-modal) .settings-input.settings-input-error {
    border-color: #f43f5e;
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.12);
}

#settings-modal .settings-character-counter {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
}

#settings-modal .settings-character-counter.is-over-limit,
#settings-modal .settings-field-warning {
    color: #be123c;
}

#settings-modal .settings-field-warning {
    font-size: 0.72rem;
    line-height: 1.35;
}

:is(#settings-modal, #support-modal) .settings-rich-select-source {
    display: none !important;
}

:is(#settings-modal, #support-modal) .settings-rich-select,
#settings-modal .settings-tone-picker {
    position: relative;
}

:is(#settings-modal, #support-modal) .settings-rich-select-button,
#settings-modal .settings-tone-button {
    width: 100%;
    min-height: 2.3rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: left;
}

:is(#settings-modal, #support-modal) .settings-rich-select-button:focus,
#settings-modal .settings-tone-button:focus {
    border-color: rgba(34, 158, 188, 0.7);
    box-shadow: 0 0 0 2px rgba(34, 158, 188, 0.12);
    outline: none;
}

:is(#settings-modal, #support-modal) .settings-rich-select-menu,
#settings-modal .settings-tone-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.25rem);
    right: 0;
    left: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.16);
    max-height: min(20rem, 52vh);
    overflow: hidden;
}

:is(#settings-modal, #support-modal) .settings-rich-select-menu {
    overflow-y: auto;
    overscroll-behavior: contain;
}

:is(#settings-modal, #support-modal) .settings-rich-select-option,
#settings-modal .settings-tone-option {
    width: 100%;
    border: 0;
    background: transparent;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    text-align: left;
    cursor: pointer;
}

:is(#settings-modal, #support-modal) .settings-rich-select-button:disabled,
:is(#settings-modal, #support-modal) .settings-rich-select-option:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

:is(#settings-modal, #support-modal) .settings-rich-select-option[hidden] {
    display: none;
}

:is(#settings-modal, #support-modal) .settings-rich-select.is-disabled .settings-rich-select-button {
    background: #f8fafc;
    color: #94a3b8;
}

:is(#settings-modal, #support-modal) .settings-rich-select-button small {
    display: block;
    margin-top: 0.05rem;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
}

#settings-modal .settings-tone-option:hover,
:is(#settings-modal, #support-modal) .settings-rich-select-option:hover,
:is(#settings-modal, #support-modal) .settings-rich-select-option.is-selected,
#settings-modal .settings-tone-option.is-selected {
    background: #f8fafc;
}

:is(#settings-modal, #support-modal) .settings-rich-select-button span,
#settings-modal .settings-tone-option strong,
:is(#settings-modal, #support-modal) .settings-rich-select-option strong,
#settings-modal .settings-tone-option small {
    display: block;
}

#settings-modal .settings-tone-option strong,
:is(#settings-modal, #support-modal) .settings-rich-select-option strong {
    color: #1e293b;
    font-size: 0.84rem;
}

#settings-modal .settings-tone-option small,
:is(#settings-modal, #support-modal) .settings-rich-select-option small {
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.25;
}

#settings-modal .settings-tone-check,
:is(#settings-modal, #support-modal) .settings-rich-select-check {
    color: var(--secondary);
    opacity: 0;
}

#settings-modal .settings-tone-option.is-selected .settings-tone-check,
:is(#settings-modal, #support-modal) .settings-rich-select-option.is-selected .settings-rich-select-check {
    opacity: 1;
}

#settings-modal .settings-key-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}

#settings-modal .settings-key-row,
#settings-modal .settings-toggle-row,
#settings-modal .settings-check-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.75fr) minmax(220px, 1fr);
    align-items: center;
    gap: 0.75rem;
}

#settings-modal .settings-toggle-row {
    grid-template-columns: minmax(0, 1fr) auto;
    cursor: pointer;
}

#settings-modal .settings-check-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-top: 0.55rem;
    color: #475569;
    font-size: 0.82rem;
    cursor: pointer;
}

#settings-modal .settings-key-row strong,
#settings-modal .settings-toggle-row strong {
    display: block;
    color: #334155;
    font-size: 0.82rem;
}

#settings-modal .settings-check-row strong {
    display: block;
    color: #334155;
    font-size: 0.82rem;
}

#settings-modal .settings-integration-row {
    min-height: 2.5rem;
    padding-top: 0.45rem;
}

#settings-modal .settings-integration-label {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.6rem;
}

#settings-modal .settings-integration-icon-wrap {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
}

#settings-modal .settings-integration-icon {
    display: block;
    width: 1.55rem;
    height: 1.55rem;
    object-fit: contain;
}

#settings-modal .settings-key-row small,
#settings-modal .settings-toggle-row small {
    display: block;
    margin-top: 0.1rem;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.25;
}

#settings-modal .settings-action-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

#settings-modal .settings-small-button {
    min-height: 2rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0 0.7rem;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

#settings-modal .settings-small-button:hover {
    background: #f8fafc;
    color: var(--secondary);
}

#settings-modal .settings-permission-status {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #f8fafc;
    padding: 0 0.65rem;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

#settings-modal .settings-permission-status.is-granted {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

#settings-modal .settings-permission-status.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

#settings-modal .settings-permission-status.is-blocked {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

#settings-modal .settings-provider-link {
    display: inline-flex;
    align-items: center;
    color: #0369a1;
    font-weight: 700;
    text-decoration: none;
}

#settings-modal .settings-provider-link:hover {
    color: #075985;
    text-decoration: underline;
}

#settings-modal .settings-section-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(226, 232, 240, 0) 0%, rgba(203, 213, 225, 0.95) 18%, rgba(203, 213, 225, 0.95) 82%, rgba(226, 232, 240, 0) 100%);
}

body.genie-theme-dark {
    --primary: #38bdf8;
    --secondary: #e2e8f0;
    --accent: #f8fafc;
    background: #020617 !important;
    color: #e2e8f0 !important;
}

body.genie-theme-dark .bg-white,
body.genie-theme-dark .hover\:bg-white:hover {
    background-color: #0f172a !important;
}

body.genie-theme-dark .bg-slate-50,
body.genie-theme-dark .bg-slate-50\/50,
body.genie-theme-dark .bg-slate-50\/60,
body.genie-theme-dark .bg-slate-50\/80,
body.genie-theme-dark .bg-slate-100,
body.genie-theme-dark .hover\:bg-slate-100:hover {
    background-color: #111827 !important;
}

body.genie-theme-dark .bg-slate-900 {
    background-color: #020617 !important;
}

body.genie-theme-dark .bg-black\/40 {
    background-color: rgba(2, 6, 23, 0.74) !important;
}

body.genie-theme-dark .border-slate-100,
body.genie-theme-dark .border-slate-200,
body.genie-theme-dark .border-slate-300 {
    border-color: #334155 !important;
}

body.genie-theme-dark .text-accent,
body.genie-theme-dark .text-secondary,
body.genie-theme-dark .text-slate-700,
body.genie-theme-dark .text-slate-800,
body.genie-theme-dark .text-slate-900,
body.genie-theme-dark .font-bold,
body.genie-theme-dark .font-semibold,
body.genie-theme-dark strong {
    color: #e2e8f0 !important;
}

body.genie-theme-dark .text-slate-400,
body.genie-theme-dark .text-slate-500,
body.genie-theme-dark .text-slate-600 {
    color: #94a3b8 !important;
}

body.genie-theme-dark .text-primary {
    color: #38bdf8 !important;
}

body.genie-theme-dark input,
body.genie-theme-dark select,
body.genie-theme-dark textarea,
body.genie-theme-dark .settings-input,
body.genie-theme-dark :is(#settings-modal, #support-modal) .settings-rich-select-button,
body.genie-theme-dark #settings-modal .settings-tone-button,
body.genie-theme-dark #settings-modal .settings-small-button {
    background-color: #0b1220 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.genie-theme-dark input::placeholder,
body.genie-theme-dark textarea::placeholder {
    color: #64748b !important;
}

body.genie-theme-dark #settings-modal .settings-modal-panel {
    background: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important;
}

body.genie-theme-dark #settings-modal .settings-sidebar,
body.genie-theme-dark #settings-modal .settings-panel,
body.genie-theme-dark #settings-modal .settings-subpanel,
body.genie-theme-dark #settings-modal .settings-model-card,
body.genie-theme-dark #settings-modal .settings-toggle-row,
body.genie-theme-dark :is(#settings-modal, #support-modal) .settings-rich-select-menu,
body.genie-theme-dark #settings-modal .settings-tone-menu,
body.genie-theme-dark .project-instruction-row {
    background: #111827 !important;
    border-color: #334155 !important;
}

body.genie-theme-dark #settings-modal .settings-nav-link {
    color: #94a3b8;
}

body.genie-theme-dark #settings-modal .settings-sidebar-footer {
    border-top-color: rgba(148, 163, 184, 0.22);
}

body.genie-theme-dark #settings-modal .settings-nav-link:hover,
body.genie-theme-dark #settings-modal .settings-nav-link.is-active {
    background: #0b1220;
    color: #e2e8f0;
}

body.genie-theme-dark #settings-modal .settings-scope-tabs {
    background: #0b1220;
    border-color: #334155;
}

body.genie-theme-dark #settings-modal .settings-scope-tab {
    color: #94a3b8;
}

body.genie-theme-dark #settings-modal .settings-scope-tab.is-active {
    background: #1e293b;
    color: #e2e8f0;
}

body.genie-theme-dark #settings-modal .settings-permission-status {
    background: #0b1220;
    border-color: #334155;
    color: #94a3b8;
}

body.genie-theme-dark #settings-modal .settings-permission-status.is-granted {
    background: rgba(6, 78, 59, 0.35);
    border-color: rgba(52, 211, 153, 0.45);
    color: #6ee7b7;
}

body.genie-theme-dark #settings-modal .settings-permission-status.is-warning {
    background: rgba(120, 53, 15, 0.35);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

body.genie-theme-dark #settings-modal .settings-permission-status.is-blocked {
    background: rgba(127, 29, 29, 0.35);
    border-color: rgba(251, 113, 133, 0.45);
    color: #fda4af;
}

body.genie-theme-dark #settings-modal .settings-section-kicker,
body.genie-theme-dark #settings-modal .settings-key-row small,
body.genie-theme-dark #settings-modal .settings-toggle-row small,
body.genie-theme-dark :is(#settings-modal, #support-modal) .settings-rich-select-button small,
body.genie-theme-dark :is(#settings-modal, #support-modal) .settings-rich-select-option small,
body.genie-theme-dark #settings-modal .settings-tone-option small,
body.genie-theme-dark #settings-modal .settings-model-card-description,
body.genie-theme-dark #settings-modal .settings-subsection-help {
    color: #94a3b8;
}

body.genie-theme-dark #settings-modal .settings-tone-option:hover,
body.genie-theme-dark :is(#settings-modal, #support-modal) .settings-rich-select-option:hover,
body.genie-theme-dark :is(#settings-modal, #support-modal) .settings-rich-select-option.is-selected,
body.genie-theme-dark #settings-modal .settings-tone-option.is-selected {
    background: #0b1220;
}

body.genie-theme-dark #settings-modal .settings-subsection-title {
    color: #e2e8f0;
}

body.genie-theme-dark #settings-modal .settings-check-row strong {
    color: #e2e8f0;
}

body.genie-theme-dark #settings-modal .settings-integration-icon-wrap {
    border-color: #334155;
    background: #f8fafc;
}

body.genie-theme-dark #settings-modal .settings-provider-link {
    color: #7dd3fc;
}

body.genie-theme-dark #settings-modal .settings-provider-link:hover {
    color: #bae6fd;
}

body.genie-theme-dark #settings-modal .settings-section-divider {
    background: linear-gradient(90deg, rgba(51, 65, 85, 0) 0%, rgba(51, 65, 85, 0.95) 18%, rgba(51, 65, 85, 0.95) 82%, rgba(51, 65, 85, 0) 100%);
}

body.genie-theme-dark pre,
body.genie-theme-dark code {
    background-color: #020617 !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

.project-instruction-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.8rem 0.85rem;
    border-radius: 0.95rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.project-instruction-row input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--secondary);
}

.project-collapsible .project-collapsible-icon {
    transition: transform 0.15s ease;
}

.project-collapsible[open] .project-collapsible-icon {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    #settings-modal .settings-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    #settings-modal .settings-sidebar {
        position: static;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }

    #settings-modal .settings-nav-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }

    #settings-modal .settings-sidebar-footer {
        margin-top: 0;
        padding-top: 0.45rem;
    }

    #settings-modal .settings-key-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    #settings-modal .settings-model-control-grid {
        grid-template-columns: 1fr;
    }

    #settings-modal .settings-action-control {
        grid-template-columns: 1fr;
    }

}

html {
    font-size: 17px;
}

body {
    font-family: "Urbanist", sans-serif;
    font-weight: 300; /* Urbanist Light */
}

body.script-workspace-agent-overlay {
    background: transparent !important;
}

body.script-workspace-agent-overlay,
body.script-workspace-agent-overlay #chat-window,
body.script-workspace-agent-overlay footer {
    background-color: transparent !important;
}

body.script-workspace-agent-overlay > header,
body.script-workspace-agent-overlay #conversation-panel,
body.script-workspace-agent-overlay #workbench-panel,
body.script-workspace-agent-overlay #metadata-explorer,
body.script-workspace-agent-overlay #settings-modal,
body.script-workspace-agent-overlay #support-modal,
body.script-workspace-agent-overlay #license-modal {
    display: none !important;
}

body.script-workspace-agent-overlay #chat-window {
    padding: 0.95rem 1.05rem 0.55rem;
    gap: 0.7rem;
    background: transparent !important;
}

body.script-workspace-agent-overlay footer {
    padding: 0.55rem 0.85rem 0.8rem;
    border-top: 0;
    background: transparent;
}

body.script-workspace-agent-overlay footer > div {
    max-width: none;
}

body.script-workspace-agent-overlay footer .relative.bg-white {
    border-radius: 1.25rem;
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(248, 253, 255, 0.66) !important;
    box-shadow:
        0 18px 52px rgba(2, 49, 72, 0.14),
        0 4px 18px rgba(2, 49, 72, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

body.script-workspace-agent-overlay footer .relative.bg-white > .flex.items-center {
    min-height: 3.05rem;
    padding: 0.5rem 0.62rem 0.5rem 0.7rem;
    gap: 0.36rem;
}

body.script-workspace-agent-overlay #chat-window > .message-enter:first-child {
    margin-top: 0.15rem;
}

body.script-workspace-agent-overlay #chat-window > .message-enter:first-child > div {
    max-width: 100%;
}

body.script-workspace-agent-overlay #chat-window > .message-enter:first-child .text-accent {
    max-width: 30rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

body.script-workspace-agent-overlay #chat-window .max-w-\[85\%\] {
    max-width: 92%;
}

body.script-workspace-agent-overlay #chat-window .max-w-\[80\%\] {
    max-width: 88%;
}

body.script-workspace-agent-overlay #selected-scripts-panel:empty,
body.script-workspace-agent-overlay #selected-layout-badges:empty,
body.script-workspace-agent-overlay #selected-scripts-badges:empty,
body.script-workspace-agent-overlay #selected-files-badges:empty,
body.script-workspace-agent-overlay #mode-selector,
body.script-workspace-agent-overlay #query-output-selector,
body.script-workspace-agent-overlay #query-chart-type-selector,
body.script-workspace-agent-overlay #btn-discovery-plan,
body.script-workspace-agent-overlay #btn-inject-layout,
body.script-workspace-agent-overlay #btn-web-search,
body.script-workspace-agent-overlay #btn-privacy-mode,
body.script-workspace-agent-overlay footer .mt-2 {
    display: none !important;
}

body.script-workspace-agent-overlay #chat-input {
    min-height: 2.15rem;
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    max-height: 10.5rem;
    padding-top: 0.43rem;
    padding-bottom: 0.36rem;
}

body.script-workspace-agent-overlay #btn-dictation,
body.script-workspace-agent-overlay #btn-send,
body.script-workspace-agent-overlay #btn-stop {
    width: 2rem;
    height: 2rem;
}

body.script-workspace-agent-overlay #btn-send {
    margin-left: 0.3rem;
}

body.script-workspace-agent-overlay .script-agent-overlay-new-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68), 0 8px 24px rgba(2, 49, 72, 0.08);
    color: #58677e;
    transition: color 120ms ease, background 120ms ease, transform 120ms ease;
}

body.script-workspace-agent-overlay .script-agent-overlay-new-chat:hover {
    color: #023148;
    background: rgba(255, 255, 255, 0.82);
}

body.script-workspace-agent-overlay .script-agent-overlay-new-chat:active {
    transform: scale(0.94);
}

.script-agent-overlay-model {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    max-width: 10.25rem;
    min-width: 0;
    height: 1.85rem;
    padding: 0 0.55rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68), 0 8px 24px rgba(2, 49, 72, 0.08);
    color: #58677e;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

.script-agent-overlay-model img {
    filter: drop-shadow(0 1px 2px rgba(2, 49, 72, 0.14));
}

.script-agent-overlay-model span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.script-agent-model-menu {
    position: absolute;
    left: 0.8rem;
    right: auto;
    bottom: 3.45rem;
    z-index: 50;
    width: min(16rem, calc(100vw - 2rem));
    max-height: 14rem;
    overflow: auto;
    padding: 0.45rem;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 45px rgba(2, 49, 72, 0.18);
    backdrop-filter: blur(22px) saturate(1.18);
    -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

.script-agent-model-group {
    padding: 0.45rem 0.5rem 0.25rem;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.script-agent-model-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.5rem;
    border-radius: 0.55rem;
    color: #0f172a;
    font-size: 0.74rem;
}

.script-agent-model-option:hover,
.script-agent-model-option.is-selected {
    background: #eaf7fb;
    color: #023148;
}

body.script-workspace-agent-overlay .composer-autocomplete {
    z-index: 60;
    min-width: min(21rem, calc(100vw - 2rem));
    max-width: min(26rem, calc(100vw - 2rem));
    max-height: 13.5rem;
    border-color: rgba(255, 255, 255, 0.74);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 20px 46px rgba(2, 49, 72, 0.18),
        0 4px 16px rgba(2, 49, 72, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(22px) saturate(1.18);
    -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

body.script-workspace-agent-overlay #viewer-modal {
    z-index: 80;
}

body.script-workspace-agent-overlay #viewer-modal > div:first-child {
    background: rgba(2, 49, 72, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.script-workspace-agent-overlay #viewer-modal > div:nth-child(2) {
    padding: 0.65rem;
}

body.script-workspace-agent-overlay #viewer-modal > div:nth-child(2) > div {
    max-width: none;
    height: calc(100vh - 1.3rem);
    border-radius: 1.1rem;
    border-color: rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 22px 54px rgba(2, 49, 72, 0.22);
}

body.script-workspace-agent-overlay #viewer-modal .px-6.py-4 {
    padding: 0.8rem 1rem;
}

body.script-workspace-agent-overlay #viewer-title {
    font-size: 0.88rem;
}

body.script-workspace-agent-overlay #viewer-toolbar {
    padding: 0.45rem 0.7rem;
}

body.script-workspace-agent-overlay #viewer-content {
    padding: 0.9rem;
    font-size: 0.68rem;
    line-height: 1.5;
}

.font-bold, .font-semibold, b, strong {
    font-weight: 700; /* Urbanist Bold */
}

.total-value {
    font-weight: 700;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Message area transitions */
.message-enter {
    opacity: 0;
    transform: translateY(10px);
}
.message-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s;
}

/* Sidebar transitions */
.sidebar-closed {
    transform: translateX(100%);
}
.sidebar-open {
    transform: translateX(0);
}
.left-sidebar-closed {
    transform: translateX(-100%);
}
.left-sidebar-open {
    transform: translateX(0);
}
.metadata-expanded {
    inset: 0 !important;
    width: 100% !important;
    transform: translateX(0) !important;
}
.sidebar-closed.metadata-expanded {
    transform: translateX(100%) !important;
}
/* Prevent side-panel glow when fully closed off-canvas */
#metadata-explorer.sidebar-closed,
#conversation-panel.left-sidebar-closed,
#workbench-panel.left-sidebar-closed {
    box-shadow: none !important;
}
.metadata-resizer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 30;
}
.metadata-expanded .metadata-resizer {
    display: none;
}
body.metadata-resizing,
body.metadata-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.conversation-item {
    width: 100%;
    min-width: 0;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    padding: 0.55rem 0.6rem;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.conversation-item:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.conversation-item.active {
    background: #eef6ff;
    border-color: #c7dcff;
}
.conversation-row {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
}
.conversation-row .conversation-item {
    flex: 1 1 auto;
    min-width: 0;
}
.conversation-delete-btn {
    flex: 0 0 auto;
    width: 2rem;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    color: #94a3b8;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.conversation-delete-btn:hover {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}
#conversation-panel {
    overflow-x: hidden;
}
#workbench-panel {
    overflow-x: hidden;
}
#conversation-list {
    overflow-x: hidden;
}
#workbench-list {
    overflow-x: hidden;
}

/* Keep side panels above the full interface (including composer/footer). */
#conversation-panel,
#workbench-panel,
#metadata-explorer {
    position: fixed !important;
    top: 0;
    bottom: 0;
    z-index: 35;
}

.workbench-item {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.workbench-item-pending {
    border-left: 3px solid #0e7490;
}
.workbench-item-submitted {
    border-color: #a7f3d0;
    border-left: 3px solid #059669;
    background: linear-gradient(180deg, #f0fdf8 0, #ffffff 4.5rem);
}
.workbench-toolbar-badge {
    position: absolute;
    top: -0.15rem;
    right: -0.2rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #e11d48;
    box-sizing: content-box;
}
.workbench-tabs-row {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    margin-top: 0.75rem;
}
.workbench-tabs {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: 0.6rem;
    background: #f1f5f9;
}
.workbench-clear-submitted-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    flex: 0 0 2.25rem;
    border: 1px solid #fecdd3;
    border-radius: 0.55rem;
    background: #ffffff;
    color: #e11d48;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.workbench-clear-submitted-btn:hover {
    border-color: #fda4af;
    background: #fff1f2;
    color: #be123c;
}
.workbench-clear-submitted-btn.hidden {
    display: none;
}
.workbench-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2rem;
    border-radius: 0.45rem;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.workbench-tab:hover {
    color: #023148;
}
.workbench-tab.active {
    background: #ffffff;
    color: #023148;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.workbench-tab-count {
    min-width: 1.15rem;
    padding: 0.05rem 0.3rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.62rem;
    line-height: 1rem;
}
.workbench-tab.active .workbench-tab-count {
    background: #cffafe;
    color: #155e75;
}
#workbench-tab-submitted.active .workbench-tab-count {
    background: #d1fae5;
    color: #047857;
}
.workbench-submitted-banner {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: -0.2rem 0 0.65rem;
    color: #047857;
    font-size: 0.68rem;
    font-weight: 800;
}
.workbench-target {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #dbeafe;
    border-radius: 0.45rem;
    background: #f8fbff;
}
.workbench-target-copy {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}
.workbench-target span {
    color: #64748b;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}
.workbench-target strong {
    color: #0f172a;
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.workbench-copy-script-name-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    color: #64748b;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.workbench-copy-script-name-btn:hover {
    border-color: #bfdbfe;
    color: #0369a1;
    background: #eff6ff;
}
.workbench-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.workbench-run-btn,
.workbench-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 0.45rem;
    border: 1px solid #cbd5e1;
    padding: 0.35rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.workbench-run-btn {
    background: #023148;
    border-color: #023148;
    color: #ffffff;
}
.workbench-run-btn:hover {
    background: #0f172a;
    border-color: #0f172a;
}
.workbench-secondary-btn {
    background: #ffffff;
    color: #334155;
}
.workbench-secondary-btn:hover {
    background: #f8fafc;
    color: #0f172a;
}
.workbench-create-btn {
    flex: 0 1 auto;
}
.workbench-icon-btn {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    padding: 0;
}

/* Prevent selection of UI elements */
.no-select {
    user-select: none;
    -webkit-user-select: none;
}

/* Code block styling */
pre code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
}

/* Markdown Content Styling */
.markdown-content p {
    margin-bottom: 0.75rem;
}
.markdown-content {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.markdown-content p:last-child {
    margin-bottom: 0;
}
.markdown-content ul, .markdown-content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
}
.markdown-content li {
    margin-bottom: 0.25rem;
}
.markdown-content ul {
    list-style-type: disc;
}
.markdown-content ol {
    list-style-type: decimal;
}
.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 {
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--secondary);
}
.markdown-content .sg-structured-section {
    margin: 1rem 0;
    padding: 0.95rem 1rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid #dbe4ee;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.98) 100%);
    box-shadow: 0 10px 24px rgba(2, 49, 72, 0.08);
}
.markdown-content .sg-structured-section + .sg-structured-section {
    margin-top: 1.15rem;
}
.markdown-content .sg-structured-section-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}
.markdown-content .sg-structured-section-title {
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    color: #0f172a;
}
.markdown-content .sg-structured-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 9999px;
    flex: 0 0 auto;
}
.markdown-content .sg-structured-section-list {
    margin: 0;
    padding-left: 1.15rem;
}
.markdown-content .sg-structured-section-item {
    margin-bottom: 0.45rem;
    color: #334155;
}
.markdown-content .sg-structured-section-item:last-child {
    margin-bottom: 0;
}
.markdown-content .sg-structured-section-neutral {
    border-color: #dbe4ee;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.markdown-content .sg-structured-section-neutral .sg-structured-section-icon {
    background: #e2e8f0;
    color: #475569;
}
.markdown-content .sg-structured-section-info {
    border-color: rgba(34, 158, 188, 0.28);
    background: linear-gradient(180deg, rgba(239, 250, 255, 0.98) 0%, rgba(232, 245, 255, 0.98) 100%);
}
.markdown-content .sg-structured-section-info .sg-structured-section-icon {
    background: rgba(34, 158, 188, 0.14);
    color: #0f7d97;
}
.markdown-content .sg-structured-section-warning {
    border-color: rgba(249, 115, 22, 0.28);
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98) 0%, rgba(255, 237, 213, 0.96) 100%);
}
.markdown-content .sg-structured-section-warning .sg-structured-section-icon {
    background: rgba(249, 115, 22, 0.16);
    color: #c2410c;
}
.markdown-content .sg-structured-section-sources {
    border-color: rgba(37, 99, 235, 0.24);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98) 0%, rgba(224, 242, 254, 0.96) 100%);
}
.markdown-content .sg-structured-section-sources .sg-structured-section-icon {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}
.markdown-content .sg-agent-document-preview {
    max-height: 22rem;
    overflow: auto;
    padding: 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.72);
}
.markdown-content .sg-agent-document-preview > :first-child {
    margin-top: 0;
}
.markdown-content .sg-agent-document-preview > :last-child {
    margin-bottom: 0;
}
.markdown-content code {
    background-color: rgba(0,0,0,0.05);
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-family: monospace;
    font-size: 0.9em;
}
.markdown-content pre code {
    background-color: transparent;
    padding: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.markdown-content pre {
    max-width: 100%;
    overflow-x: hidden;
    white-space: pre-wrap;
}
.markdown-content table {
    max-width: 100%;
}
.markdown-content th,
.markdown-content td {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.markdown-content blockquote {
    border-left: 3px solid var(--primary);
    padding-left: 1rem;
    font-style: italic;
    color: #64748b;
    margin-bottom: 0.75rem;
}
.markdown-content a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.markdown-content a::before {
    content: "🌐";
    font-size: 0.75rem;
    line-height: 1;
}
.markdown-content a:hover {
    color: #1d4ed8;
}
.markdown-content .sg-data-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.markdown-content .sg-migration-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.markdown-content .sg-preflight-card {
    margin-top: 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    background: #f8fafc;
    padding: 0.7rem;
}
.markdown-content .sg-preflight-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}
.markdown-content .sg-preflight-question {
    font-size: 0.86rem;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}
.markdown-content .sg-preflight-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.markdown-content a.sg-preflight-yes {
    background: #16a34a;
    color: #ffffff;
}
.markdown-content a.sg-preflight-yes:hover {
    background: #15803d;
    color: #ffffff;
}
.markdown-content a.sg-preflight-no {
    background: #fff1f2;
    color: #9f1239;
    border-color: #fecdd3;
}
.markdown-content a.sg-preflight-no:hover {
    background: #ffe4e6;
    color: #881337;
}
.markdown-content .sg-preflight-inline {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
}
.markdown-content .sg-preflight-inline-input,
.markdown-content .sg-preflight-inline-select {
    min-width: 15rem;
    flex: 1 1 16rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.8rem;
    padding: 0.32rem 0.5rem;
}
.markdown-content .sg-preflight-inline-input:focus,
.markdown-content .sg-preflight-inline-select:focus {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 0 0 1px #94a3b8;
}
.markdown-content .sg-preflight-inline-input:disabled,
.markdown-content .sg-preflight-inline-select:disabled {
    background: #f1f5f9;
    color: #64748b;
}
.markdown-content .sg-preflight-footnote {
    margin-top: 0.4rem;
    font-size: 0.67rem;
    color: #64748b;
}
.markdown-content .sg-data-action-result {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    background: #e2e8f0;
    color: #334155;
    border: 1px solid #cbd5e1;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.markdown-content .sg-migration-destructive-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 0.45rem;
    background: #fff1f2;
    color: #b91c1c;
    border: 1px solid #fecdd3;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.markdown-content a.sg-action-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.markdown-content a.sg-action-btn::before {
    content: none;
}
.markdown-content a.sg-action-confirm {
    background: #16a34a;
    color: #ffffff;
}
.markdown-content a.sg-action-confirm:hover {
    background: #15803d;
    color: #ffffff;
}
.markdown-content a.sg-action-cancel {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}
.markdown-content a.sg-action-cancel:hover {
    background: #e2e8f0;
    color: #1e293b;
}
.markdown-content a.sg-action-preview {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}
.markdown-content a.sg-action-preview:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.markdown-content .sg-chart-block {
    background: #ffffff;
}
.markdown-content .sg-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    border-radius: 0.45rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.markdown-content .sg-export-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.markdown-content .sg-chart-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.markdown-content .sg-tableau-block {
    background: #ffffff;
}
.markdown-content .sg-tableau-scroll {
    overflow: auto;
    width: 100%;
    max-width: 100%;
}
.markdown-content .sg-tableau-scroll table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}
.markdown-content .sg-tableau-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #334155;
    border-bottom: 1px solid #cbd5e1;
}
.markdown-content .sg-tableau-scroll th,
.markdown-content .sg-tableau-scroll td {
    padding: 0.45rem 0.6rem;
    white-space: nowrap;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}
.markdown-content .sg-tableau-scroll tr > *:first-child {
    border-left: 1px solid #e2e8f0;
}
.markdown-content .sg-tableau-scroll tbody tr:nth-child(even) {
    background: #f8fafc;
}
.markdown-content .sg-chart-stage {
    position: relative;
    width: 100%;
    min-height: 260px;
    height: min(44vh, 340px);
    padding: 0.5rem 0.75rem 0.75rem;
}
.markdown-content .sg-chart-canvas {
    width: 100% !important;
    height: 100% !important;
}
.markdown-content .sg-chart-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Accordion transition */
.accordion-content {
    transition: max-height 0.3s ease-out;
}

.metadata-active-table-pill {
    display: inline-flex;
    align-items: center;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 9999px;
    border: 1px solid #7dd3fc;
    background: #e0f2fe;
    color: #075985;
    padding: 0.18rem 0.5rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.metadata-list-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.65rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.metadata-list-row:hover {
    background: #f8fafc;
}

.metadata-relationship-row {
    width: 100%;
    background: transparent;
    color: inherit;
}

#viewer-content.viewer-content-custom {
    padding: 0;
    background: #f8fafc;
    color: #0f172a;
    font-family: "Urbanist", sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
}

.viewer-custom-content {
    min-height: 100%;
    background: #f8fafc;
}

.field-definition-preview {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
}

.field-definition-hero {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid #dbeafe;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.field-definition-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    background: #dbeafe;
    color: #1d4ed8;
}

.field-definition-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.field-definition-table {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.field-definition-title {
    margin-top: 0.08rem;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-definition-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.field-definition-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 0.64rem;
    font-weight: 700;
}

.field-definition-badge.is-primary {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.field-definition-badge.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.field-definition-badge.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.field-definition-badge.is-purple {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #6d28d9;
}

.field-definition-comment,
.field-definition-ai-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    background: #ffffff;
    color: #475569;
    font-size: 0.76rem;
}

.field-definition-comment strong,
.field-definition-ai-note strong {
    color: #0f172a;
    font-size: 0.72rem;
}

.field-definition-comment p,
.field-definition-ai-note p {
    margin-top: 0.15rem;
    line-height: 1.45;
}

.field-definition-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.field-definition-section {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    background: #ffffff;
}

.field-definition-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.field-definition-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.field-definition-setting {
    min-width: 0;
    padding: 0.48rem 0.55rem;
    border-radius: 0.45rem;
    background: #f8fafc;
}

.field-definition-setting span {
    display: block;
    color: #94a3b8;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.field-definition-setting strong {
    display: block;
    margin-top: 0.15rem;
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-definition-formula-card {
    margin-top: 0.55rem;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #0f172a;
}

.field-definition-formula-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid #334155;
    color: #cbd5e1;
    font-size: 0.65rem;
    font-weight: 700;
}

.field-definition-context-pill {
    max-width: 55%;
    overflow: hidden;
    padding: 0.12rem 0.35rem;
    border-radius: 999px;
    background: #1e293b;
    color: #93c5fd;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-definition-formula-card pre {
    max-height: min(32vh, 18rem);
    margin: 0;
    overflow: auto;
    padding: 0.7rem;
    color: #e2e8f0;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.7rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.field-definition-subheading {
    margin: 0.65rem 0 0.35rem;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field-definition-empty {
    padding: 0.55rem;
    border-radius: 0.45rem;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 0.72rem;
    text-align: center;
}

.field-definition-ai-note {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
}

.field-definition-ai-note strong {
    color: #3730a3;
}

.relationship-preview {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
}

.relationship-preview-hero {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
}

.relationship-preview-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: #e0f2fe;
    color: #0369a1;
}

.relationship-preview-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.relationship-preview-title {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relationship-preview-summary {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relationship-preview-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.relationship-preview-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: stretch;
}

.relationship-preview-to {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
}

.relationship-preview-to-label,
.relationship-preview-section-title,
.relationship-preview-field-table {
    color: #94a3b8;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.relationship-preview-to-name {
    margin-top: 0.25rem;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relationship-preview-flow-arrow {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
}

.relationship-preview-section {
    padding: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
}

.relationship-preview-section-title {
    margin-bottom: 0.55rem;
    color: #475569;
}

.relationship-preview-predicate-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.relationship-preview-predicate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.55rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.relationship-preview-predicate-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.65rem;
    font-weight: 700;
}

.relationship-preview-field {
    min-width: 0;
    padding: 0.5rem;
    border-radius: 0.45rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.relationship-preview-field.is-sparse {
    border-color: #fcd34d;
    background: #fffbeb;
}

.relationship-preview-field-name {
    margin-top: 0.12rem;
    color: #0f172a;
    font-size: 0.83rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relationship-preview-operator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    min-height: 2.2rem;
    padding: 0.24rem 0.5rem;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

.relationship-preview-flag {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 9.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
}

.relationship-preview-flag strong {
    color: #0f172a;
    font-size: 0.68rem;
}

.relationship-preview-flag.is-on {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.relationship-preview-warning {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.76rem;
    font-weight: 700;
}

.relationship-preview-empty {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 0.78rem;
    text-align: center;
}

@media (max-width: 640px) {
    .field-definition-section-grid,
    .field-definition-settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .relationship-preview-flow,
    .relationship-preview-predicate {
        grid-template-columns: minmax(0, 1fr);
    }

    .relationship-preview-flow-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .relationship-preview-operator {
        justify-self: center;
    }
}

.metadata-list-row.is-active-table {
    background: #e0f2fe;
    border-color: #7dd3fc;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.18);
}

.metadata-list-row.is-active-table:hover {
    background: #d5eefc;
}

.metadata-list-label {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    font-size: 0.75rem;
    color: #475569;
}

.metadata-list-row:hover .metadata-list-label {
    color: #0f172a;
}

.metadata-list-row.is-active-table .metadata-list-label {
    color: #0f172a;
}

.metadata-row-badge {
    flex: 0 0 auto;
    border-radius: 9999px;
    background: rgba(2, 132, 199, 0.12);
    color: #0369a1;
    padding: 0.12rem 0.42rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.metadata-row-info-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
}

.metadata-layout-fields-button,
.metadata-field-details-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    color: #94a3b8;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.metadata-layout-fields-button:hover,
.metadata-field-details-button:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.metadata-layout-fields-button:disabled,
.metadata-field-details-button:disabled {
    cursor: progress;
    opacity: 0.78;
}

.metadata-layout-fields-button.is-loading svg,
.metadata-field-details-button.is-loading svg {
    animation: metadata-layout-fields-spin 0.85s linear infinite;
}

.metadata-script-attach-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    color: #64748b;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.metadata-script-attach-button:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

@keyframes metadata-layout-fields-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Custom focus ring for input */
#chat-input:focus {
    outline: none;
}

.dictation-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    height: 2rem;
    max-width: 12rem;
    padding: 0 0.65rem;
    border: 1px solid rgb(254 202 202);
    border-radius: 9999px;
    background: rgb(254 242 242);
    color: rgb(185 28 28);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.dictation-status.hidden {
    display: none;
}

.dictation-status.is-transcribing {
    border-color: rgb(226 232 240);
    background: rgb(248 250 252);
    color: rgb(71 85 105);
}

.dictation-status-time {
    font-variant-numeric: tabular-nums;
    color: rgb(127 29 29);
}

.dictation-status.is-transcribing .dictation-status-time {
    display: none;
}

.dictation-status-bars {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    height: 0.9rem;
}

.dictation-status-bars span {
    display: block;
    width: 0.12rem;
    height: 0.28rem;
    border-radius: 9999px;
    background: currentColor;
    animation: dictation-listening-bar 0.8s ease-in-out infinite;
}

.dictation-status-bars span:nth-child(2) {
    animation-delay: 0.12s;
}

.dictation-status-bars span:nth-child(3) {
    animation-delay: 0.24s;
}

.dictation-status-bars span:nth-child(4) {
    animation-delay: 0.36s;
}

.dictation-status.is-transcribing .dictation-status-bars span {
    animation-duration: 1s;
}

@keyframes dictation-listening-bar {
    0%, 100% {
        height: 0.28rem;
        opacity: 0.45;
    }
    50% {
        height: 0.85rem;
        opacity: 1;
    }
}

.composer-autocomplete {
    position: absolute;
    z-index: 35;
    min-width: 280px;
    max-width: min(520px, calc(100% - 2rem));
    max-height: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    padding: 0.35rem;
}

.composer-autocomplete.hidden {
    display: none;
}

.composer-autocomplete-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.1rem;
}

.composer-autocomplete-footer {
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    padding: 0.45rem 0.75rem 0.5rem;
    color: #64748b;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: rgba(248, 250, 252, 0.9);
}

.composer-autocomplete-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: start;
    width: 100%;
    border: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.composer-autocomplete-row:hover,
.composer-autocomplete-row.is-active {
    background: rgba(34, 158, 188, 0.12);
    border-color: rgba(34, 158, 188, 0.18);
    box-shadow: inset 0 0 0 1px rgba(34, 158, 188, 0.08);
}

.composer-autocomplete-row.is-helper {
    cursor: default;
}

.composer-autocomplete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #334155;
    flex: 0 0 auto;
}

.composer-autocomplete-row.is-trigger-hash .composer-autocomplete-icon {
    background: rgba(34, 158, 188, 0.12);
    color: #0f5e71;
}

.composer-autocomplete-main {
    min-width: 0;
}

.composer-autocomplete-label {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.2;
}

.composer-autocomplete-label-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-autocomplete-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: #eef2f7;
    color: #516173;
    padding: 0.15rem 0.42rem;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.composer-autocomplete-subtitle {
    display: -webkit-box;
    margin-top: 0.28rem;
    color: #6b7b8d;
    font-size: 0.72rem;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.composer-autocomplete-mirror {
    position: absolute;
    top: 0;
    left: -9999px;
    visibility: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.live-context-badge {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 100%;
    min-height: 1.7rem;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    padding: 0.18rem 0.55rem;
    font-size: 0.65rem;
    line-height: 1;
}

.live-context-badge.live-context-badge-clickable {
    cursor: pointer;
    transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.live-context-badge.live-context-badge-clickable:hover,
.live-context-badge.live-context-badge-clickable:focus-visible {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.16);
    transform: translateY(-1px);
    outline: none;
}

.live-context-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #cbd5e1;
    flex: 0 0 auto;
}

.live-context-mode {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #475569;
    padding: 0.16rem 0.42rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.live-context-script {
    display: inline-flex;
    align-items: center;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: #023148;
}

.live-context-lines {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
    padding: 0.16rem 0.42rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.live-context-state {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: #f8fafc;
    color: #64748b;
    padding: 0.16rem 0.42rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.attached-context-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    border-radius: 9999px;
    border: 1px solid #1b89a3;
    background: #229EBC;
    color: #ffffff;
    padding: 0.18rem 0.45rem 0.18rem 0.55rem;
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.attached-context-badge:hover {
    background: #1f91ad;
    border-color: #16778f;
}

.attached-context-badge-multi {
    border-color: #1b89a3;
    background: #229EBC;
    color: #ffffff;
}

.attached-context-badge-multi:hover {
    background: #1f91ad;
    border-color: #16778f;
}

.attached-context-badge-single {
    border-color: #1b89a3;
    background: #229EBC;
    color: #ffffff;
}

.attached-context-badge-label {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.92;
}

.attached-context-badge-name {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.attached-context-badge-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
    flex: 0 0 auto;
}

.attached-context-badge-remove:hover {
    background: rgba(255, 255, 255, 0.32);
}

.attached-context-badge-multi .attached-context-badge-remove {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.attached-context-badge-multi .attached-context-badge-remove:hover {
    background: rgba(255, 255, 255, 0.32);
}

.attached-layout-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 18rem;
    border-radius: 9999px;
    border: 1px solid #2563eb;
    background: #eff6ff;
    color: #1e3a8a;
    padding: 0.2rem 0.35rem 0.2rem 0.45rem;
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.attached-layout-badge:hover {
    background: #dbeafe;
    border-color: #1d4ed8;
}

.attached-layout-badge .attached-context-badge-remove {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.attached-layout-badge .attached-context-badge-remove:hover {
    background: rgba(37, 99, 235, 0.22);
}

.attached-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 16rem;
    padding: 0.2rem 0.35rem 0.2rem 0.45rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 9999px;
    background: rgb(248 250 252);
    color: rgb(71 85 105);
    font-size: 0.65rem;
    line-height: 1;
}

.attached-file-badge-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.attached-file-badge-status {
    flex: 0 0 auto;
    max-width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 9999px;
    background: rgb(241 245 249);
    padding: 0.12rem 0.35rem;
    color: rgb(100 116 139);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
}

.attached-file-badge .attached-context-badge-remove {
    background: rgb(226 232 240);
    color: rgb(71 85 105);
}

.attached-file-badge .attached-context-badge-remove:hover {
    background: rgb(203 213 225);
}

.script-agent-overlay-model:disabled { opacity: 0.6; cursor: default; }
.script-agent-overlay-model:focus-visible,
.script-agent-model-option:focus-visible { outline: 2px solid #1fa6c4; outline-offset: 2px; }

/* Keep the shared composer usable in narrow main windows. */
body:not(.script-workspace-agent-overlay) #chat-input { min-width: 0; }
@media (max-width: 520px) {
    body:not(.script-workspace-agent-overlay) .script-agent-overlay-model { max-width: 7rem; }
}