/* ==========================================================
   On The Go — Agent Assistant  |  Claude-inspired theme
   ========================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Surface */
    --cream:          #F5F3EE;
    --cream-dark:     #EDEAE3;
    --cream-darker:   #E5E1D9;
    --white:          #FFFFFF;

    /* Sidebar */
    --sb-bg:          #1E1E1C;
    --sb-hover:       #2E2E2B;
    --sb-border:      #3A3936;
    --sb-text:        #B8B3AA;
    --sb-text-hi:     #F0ECE4;

    /* Text */
    --t1:             #1A1A1A;
    --t2:             #6B6560;
    --t3:             #9C9690;

    /* Accent */
    --accent:         #D97706;
    --accent-hover:   #B86107;
    --accent-soft:    rgba(217,119,6,.10);

    /* Borders */
    --border:         #E0DDD6;
    --border-strong:  #D0CDC5;

    /* Semantic */
    --green:          #16A34A;
    --green-soft:     rgba(34,197,94,.12);
    --red:            #DC2626;
    --red-soft:       rgba(239,68,68,.10);
    --yellow:         #EAB308;
    --yellow-soft:    rgba(234,179,8,.12);
    --accent:         #D97706;
    --accent-soft:    rgba(217,119,6,.10);

    /* Elevation */
    --shadow-sm:      0 1px 3px rgba(0,0,0,.06);
    --shadow-md:      0 4px 14px rgba(0,0,0,.10);

    /* Radius */
    --r-sm:  .375rem;
    --r-md:  .625rem;
    --r-lg:  1rem;
    --r-xl:  1.5rem;
    --r-pill:9999px;
}

/* ---- Base ---- */
html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--t1);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}

/* ── App layout ── */
.app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */
.sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    transition: margin-left .25s cubic-bezier(.4,0,.2,1);
    z-index: 10;
}
.sidebar.hidden { margin-left: -280px; }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sb-border);
}
.logo {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--sb-text-hi);
    letter-spacing: -.01em;
}

/* ── Project selector (sidebar header) ── */
.project-selector {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 0;
}
.project-select {
    flex: 1;
    min-width: 0;
    background: var(--sb-hover);
    color: var(--sb-text-hi);
    border: 1px solid var(--sb-border);
    border-radius: var(--r-sm);
    padding: .375rem .5rem;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: auto;
    transition: border-color .15s;
}
.project-select:focus {
    border-color: var(--accent);
}
.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: .75rem;
}

/* ==========================================================
   EXISTING REPORTS — full-screen overlay (admin)
   ========================================================== */

.existing-reports-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: rgba(15, 18, 28, 0.45);
    box-sizing: border-box;
}
.existing-reports-overlay.open {
    display: flex;
}
.existing-reports-modal {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    width: 100%;
    max-width: none;
    background: var(--cream);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
.existing-reports-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--white);
}
.existing-reports-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--t1);
}
.existing-reports-close-btn {
    color: var(--t2);
}
.existing-reports-hint {
    flex-shrink: 0;
    margin: 0;
    padding: .625rem 1.25rem;
    font-size: .8125rem;
    color: var(--t3);
    line-height: 1.45;
    border-bottom: 1px solid var(--border-soft);
    background: var(--cream);
}
.existing-reports-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
}
.existing-reports-list-col {
    width: 280px;
    min-width: 240px;
    max-width: 32vw;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--white);
    min-height: 0;
}
.existing-reports-daily-list {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.existing-reports-list-loading,
.existing-reports-list-empty {
    font-size: .8125rem;
    color: var(--t3);
    padding: .75rem .25rem;
    line-height: 1.4;
}
.existing-reports-daily-item {
    width: 100%;
    margin: 0;
    padding: .625rem .75rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--cream);
    color: var(--t1);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.existing-reports-daily-item:hover {
    background: var(--cream-dark);
    border-color: var(--border-strong);
}
.existing-reports-daily-item.active {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.existing-reports-daily-item .chat-item-body {
    padding: 0;
}
.existing-reports-daily-date {
    font-size: .875rem;
    font-weight: 600;
    color: var(--t1);
}
.existing-reports-daily-meta {
    font-size: .75rem;
    color: var(--t3);
    margin-top: .2rem;
    white-space: normal;
}
.existing-reports-preview-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--cream);
}
.existing-reports-preview {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 1rem 1.25rem 1.25rem;
    max-width: 56rem;
    width: calc(100% - 2.5rem);
}
@media (max-width: 768px) {
    .existing-reports-body {
        flex-direction: column;
    }
    .existing-reports-list-col {
        width: 100%;
        max-width: none;
        max-height: 36vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .existing-reports-preview {
        width: calc(100% - 2rem);
        margin: 1rem;
    }
}

.sidebar-footer {
    padding: .75rem;
    border-top: 1px solid var(--sb-border);
}
.sidebar-username {
    display: block;
    font-size: .75rem;
    color: var(--sb-text);
    text-align: center;
    padding: 0 .5rem .375rem;
}

.btn-ghost {
    background: transparent;
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
    border-radius: var(--r-md);
    padding: .5rem 1rem;
    cursor: pointer;
    font-family: inherit;
    font-size: .8125rem;
    transition: background .15s, color .15s;
}
.btn-ghost:hover {
    background: var(--sb-hover);
    color: var(--sb-text-hi);
}

.sidebar-section { margin-bottom: .25rem; }

.section-label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    padding: .25rem .5rem;
    margin-bottom: .375rem;
}

.divider {
    border: none;
    border-top: 1px solid var(--sb-border);
    margin: .5rem 0;
    opacity: .45;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .5rem 1rem;
    border: none;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    outline: none;
}
.btn:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }
.full-w { width: 100%; }

.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.btn-accent    { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); }

.btn-outline {
    background: transparent;
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
}
.btn-outline:hover { background: var(--sb-hover); color: var(--sb-text-hi); }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    transition: all .15s ease;
}
.sidebar .icon-btn:hover { background: var(--sb-hover); color: var(--sb-text-hi); }

/* ── Status badge ── */
/* ── Chat list ── */
.chat-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-list-empty {
    padding: .75rem .5rem;
    font-size: .8125rem;
    color: var(--t3);
}

.chat-item {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .5rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background .12s ease;
}
.chat-item:hover { background: var(--sb-hover); }
.chat-item.active { background: var(--sb-hover); }

.chat-item-body {
    flex: 1;
    min-width: 0;
    padding: .125rem .25rem;
}
.chat-item-preview {
    font-size: .8125rem;
    color: var(--sb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-item.active .chat-item-preview { color: var(--sb-text-hi); font-weight: 500; }

.chat-item-meta {
    font-size: .6875rem;
    color: var(--t3);
    margin-top: .125rem;
}
.chat-item-creator {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: .125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-del {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border: none; border-radius: var(--r-sm);
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    opacity: 0;
    transition: all .12s ease;
    flex-shrink: 0;
}
.chat-item:hover .chat-item-del { opacity: .55; }
.chat-item-del:hover { opacity: 1 !important; background: rgba(255,255,255,.06); }

/* ==========================================================
   MAIN
   ========================================================== */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cream);
}

/* ── Top bar ── */
.topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--cream);
    flex-shrink: 0;
}
.topbar h1 { font-size: .9375rem; font-weight: 600; }
.topbar-meta { font-size: .75rem; color: var(--t3); margin-left: .75rem; }
.topbar-center {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: .5rem;
}
.topbar-sep {
    color: var(--border-strong);
    font-size: .875rem;
    user-select: none;
    margin: 0 .125rem;
}
.topbar-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .375rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--t2);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.topbar-action:hover {
    background: var(--cream-dark);
    color: var(--t1);
}
.topbar-action.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.session-id-bar {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .75rem;
}
.session-id-label {
    font-family: 'Courier New', Courier, monospace;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--t3);
    background: var(--cream-dark);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: .125rem .5rem;
    letter-spacing: .02em;
    user-select: all;
}
.copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    transition: all .12s ease;
}
.copy-btn:hover {
    background: var(--cream-dark);
    color: var(--t1);
    border-color: var(--border-strong);
}
.copy-tooltip {
    position: absolute;
    top: -1.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .125rem .5rem;
    font-size: .625rem;
    font-weight: 600;
    color: #fff;
    background: var(--t1);
    border-radius: var(--r-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.copy-btn.copied .copy-tooltip {
    opacity: 1;
}

.chat-item-id {
    font-family: 'Courier New', Courier, monospace;
    font-size: .625rem;
    font-weight: 400;
    color: var(--t3);
    letter-spacing: .01em;
}

#sidebar-toggle { color: var(--t2); }
#sidebar-toggle:hover { background: var(--cream-dark); color: var(--t1); }

/* ── Messages area ── */
.messages-scroll {
    flex: 1;
    overflow-y: auto;
}
.messages {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 2rem;
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6rem 2rem 4rem;
}
.empty-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    margin-bottom: 1rem;
}
.empty-state h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: .5rem; }
.empty-state p  { font-size: .9375rem; color: var(--t3); max-width: 24rem; line-height: 1.5; }

/* ── Chat messages ── */
.message {
    display: flex;
    gap: .875rem;
    padding: 1rem 0;
}

.message-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    margin-top: .125rem;
}
.message-avatar.user      { background: var(--accent); }
.message-avatar.assistant { background: var(--t1); }

.message-body { flex: 1; min-width: 0; }

.message-sender {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: .25rem;
}

.message-content {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--t1);
}
.message-content p  { margin-bottom: .75rem; }
.message-content p:last-child { margin-bottom: 0; }
.message-content strong { font-weight: 600; }
.message-content ol,
.message-content ul { padding-left: 1.25rem; margin-bottom: .75rem; }
.message-content li { margin-bottom: .375rem; }

.message.user-msg {
    background: var(--cream-dark);
    border-radius: var(--r-lg);
    padding: 1rem 1.25rem;
    margin: .25rem 0;
}

/* Details toggle */
.msg-details { margin-top: .625rem; }

.details-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    color: var(--t3);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: .1875rem .5rem;
    cursor: pointer;
    font-family: inherit;
    transition: all .12s ease;
}
.details-btn:hover { background: var(--cream-dark); color: var(--t2); }

.details-body {
    display: none;
    margin-top: .375rem;
    padding: .5rem .625rem;
    background: rgba(255,255,255,.5);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: .75rem;
    color: var(--t3);
    line-height: 1.5;
    white-space: pre-wrap;
    font-family: 'Inter', monospace;
}
.details-body.open { display: block; }

.msg-prompt-stamp {
    margin-top: .375rem;
    font-size: .6875rem;
    color: var(--t3);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: .01em;
    opacity: .85;
}
.msg-prompt-stamp--sandbox {
    color: #4F46E5;
    background: rgba(79, 70, 229, .08);
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: var(--r-pill);
    opacity: 1;
}
.msg-prompt-stamp--legacy {
    color: var(--t4, #999);
    font-style: italic;
}

/* Thinking dots */
.thinking {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 0;
    color: var(--t3);
    font-size: .875rem;
}
.thinking-dots { display: flex; gap: 3px; }
.thinking-dots span {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--t3);
    animation: blink 1.4s infinite both;
}
.thinking-dots span:nth-child(2) { animation-delay: .2s; }
.thinking-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3 } 40% { opacity: 1 } }

/* ==========================================================
   INPUT BAR
   ========================================================== */
.input-bar {
    padding: .75rem 1.5rem 1rem;
    background: var(--cream);
    flex-shrink: 0;
}
.input-wrap {
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    background: var(--white);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-xl);
    padding: .375rem .375rem .375rem 1rem;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.input-wrap textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--t1);
    background: transparent;
    padding: .375rem 0;
    max-height: 150px;
}
.input-wrap textarea::placeholder { color: var(--t3); }
.input-wrap textarea:disabled    { color: var(--t3); cursor: not-allowed; }

.send-btn {
    width: 32px; height: 32px;
    border: none; border-radius: 50%;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s ease;
}
.send-btn:hover:not(:disabled) { background: var(--accent-hover); }
.send-btn:disabled {
    background: var(--border);
    color: var(--t3);
    cursor: not-allowed;
}

/* ==========================================================
   LOADING OVERLAY
   ========================================================== */
/* ==========================================================
   LOGIN
   ========================================================== */

.login-overlay {
    position: fixed;
    inset: 0;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.login-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: var(--shadow-md);
    text-align: center;
    width: 100%;
    max-width: 380px;
}

.login-logo {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.02em;
    margin-bottom: .25rem;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: .25rem;
}

.login-subtitle {
    font-size: .875rem;
    color: var(--t2);
    margin-bottom: 1.5rem;
}

.login-input {
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: .9375rem;
    color: var(--t1);
    background: var(--white);
    outline: none;
    transition: border-color .15s;
}

.login-input + .login-input {
    margin-top: .5rem;
}
.login-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(198,136,78,.15);
}

.login-error {
    color: #dc2626;
    font-size: .8125rem;
    min-height: 1.25rem;
    margin: .5rem 0;
}

.login-btn {
    margin-top: .25rem;
}


/* ==========================================================
   DEACTIVATED BANNER
   ========================================================== */
.deactivated-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 48rem;
    margin: 0 auto;
    padding: .5rem 1rem;
    background: var(--yellow-soft);
    border: 1px solid var(--yellow);
    border-radius: var(--r-md);
    font-size: .8125rem;
    color: var(--t1);
    flex-shrink: 0;
}
.readonly-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 48rem;
    margin: .5rem auto;
    padding: .625rem 1rem;
    background: var(--cream-dark);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-size: .8125rem;
    color: var(--t2);
    flex-shrink: 0;
}

/* ── System message (interruption) ── */
.message.system-msg {
    padding: .625rem 0;
}
.message.system-msg .message-content {
    font-style: italic;
    color: var(--t3);
    font-size: .875rem;
}

/* ==========================================================
   SCROLLBAR
   ========================================================== */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--t3); }

.sidebar ::-webkit-scrollbar-thumb { background: var(--sb-border); }

/* ==========================================================
   FLAG SYSTEM
   ========================================================== */

/* Flag button on agent messages */
.message-body { position: relative; }

.flag-btn {
    position: absolute;
    top: 0; right: 0;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--t2);
    cursor: pointer;
    transition: all .15s ease;
}
.flag-btn:hover { background: var(--cream-dark); color: var(--t1); border-color: var(--t3); }

.flag-btn.flagged {
    width: 30px; height: 30px;
    border: 2px solid var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.flag-btn.flagged:hover { background: rgba(217,119,6,.18); }

/* Flagged message border */
.flagged-msg {
    border-left: 3px solid var(--accent);
    padding-left: calc(1.25rem - 3px);
}

/* Flag comment form */
.flag-form {
    margin-top: .5rem;
    padding: .5rem .625rem;
    background: var(--accent-soft);
    border: 1px solid rgba(217,119,6,.2);
    border-radius: var(--r-sm);
}

.flag-textarea {
    width: 100%;
    min-height: 48px;
    padding: .375rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--t1);
    background: var(--white);
    resize: vertical;
    outline: none;
}
.flag-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.flag-actions {
    display: flex;
    gap: .375rem;
    margin-top: .375rem;
}

.flag-comment-ro {
    padding: .375rem .5rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--t1);
    white-space: pre-wrap;
    margin-bottom: .375rem;
}
.flag-no-comment { color: var(--t3); font-style: italic; }
.flag-author {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--t3);
    margin-bottom: .25rem;
}

.flag-save-btn, .flag-edit-btn, .flag-unflag-btn, .flag-cancel-btn {
    padding: .25rem .625rem;
    border: none;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
}
.flag-save-btn, .flag-edit-btn {
    background: var(--accent);
    color: #fff;
}
.flag-save-btn:hover, .flag-edit-btn:hover { background: #B45309; }

.flag-unflag-btn {
    background: var(--red-soft);
    color: var(--red);
}
.flag-unflag-btn:hover { background: rgba(239,68,68,.18); }

.flag-cancel-btn {
    background: var(--cream-dark);
    color: var(--t2);
}
.flag-cancel-btn:hover { background: var(--cream-darker); }

/* Yellow dot on sidebar chat items */
.flag-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: .375rem;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Filter toggle buttons */
.filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .625rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--t3);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    margin-left: auto;
}
.filter-toggle:hover { background: var(--cream-dark); color: var(--t2); }
.filter-toggle.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.filter-toggle.sidebar-filter {
    width: 100%;
    justify-content: center;
    margin-top: .375rem;
    margin-left: 0;
    border-color: var(--sb-border);
    color: var(--sb-text);
}
.filter-toggle.sidebar-filter:hover {
    background: var(--sb-hover);
    color: var(--sb-text-hi);
}
.filter-toggle.sidebar-filter.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.sidebar-filter-label {
    display: block;
    margin-top: .5rem;
    margin-bottom: .125rem;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--sb-text);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.user-filter-select {
    width: 100%;
    background: var(--sb-bg);
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
    border-radius: var(--r-sm);
    padding: .25rem .5rem;
    font-family: inherit;
    font-size: .75rem;
    cursor: pointer;
    outline: none;
    appearance: auto;
}
.user-filter-select:focus {
    border-color: var(--accent);
}

/* ==========================================================
   ADMIN PANEL
   ========================================================== */

.admin-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: .375rem;
}
.admin-panel-btn svg {
    flex-shrink: 0;
}

.admin-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    max-width: 52rem;
    margin: 0 auto;
    width: 100%;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.admin-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--t1);
}

.admin-nav {
    display: flex;
    gap: .25rem;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.25rem;
}
.admin-tab {
    padding: .5rem 1rem;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--t3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.admin-tab:hover {
    color: var(--t1);
}
.admin-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.admin-add-form {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.admin-add-form input,
.admin-add-form select {
    padding: .5rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: .8125rem;
    color: var(--t1);
    background: var(--cream);
    outline: none;
    transition: border-color .15s;
}
.admin-add-form input:focus,
.admin-add-form select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.admin-add-form input {
    flex: 1;
    min-width: 120px;
}
.admin-add-form select {
    min-width: 80px;
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.admin-table thead th {
    text-align: left;
    padding: .625rem 1rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--t3);
    background: var(--cream);
    border-bottom: 1px solid var(--border);
}
.admin-table tbody td {
    padding: .625rem 1rem;
    font-size: .8125rem;
    color: var(--t1);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.admin-table tbody tr:last-child td {
    border-bottom: none;
}
.admin-table tbody tr:hover {
    background: var(--cream);
}

.badge {
    display: inline-block;
    padding: .125rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    border-radius: var(--r-pill);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.badge-admin {
    background: var(--accent-soft);
    color: var(--accent);
}
.badge-qa {
    background: var(--green-soft);
    color: var(--green);
}
.badge-sub-admin {
    background: rgba(79, 70, 229, .12);
    color: #4F46E5;
}

.status-active {
    color: var(--green);
    font-weight: 600;
    font-size: .8125rem;
}
.status-inactive {
    color: var(--t3);
    font-weight: 600;
    font-size: .8125rem;
}

.self-label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--t3);
    font-style: italic;
    margin-right: .25rem;
}

.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .625rem;
    border: none;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
}
.btn-sm.btn-accent {
    background: var(--accent);
    color: #fff;
}
.btn-sm.btn-accent:hover {
    background: var(--accent-hover);
}
.btn-sm.btn-danger {
    background: var(--red-soft);
    color: var(--red);
}
.btn-sm.btn-danger:hover {
    background: rgba(239,68,68,.18);
}

.admin-table td .btn-sm + .btn-sm {
    margin-left: .375rem;
}

/* ==========================================================
   SYSTEM PROMPT PANEL (front-page, role-tiered)
   ========================================================== */

.system-prompt-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.system-prompt-panel {
    width: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--cream);
    border-left: 1px solid var(--border);
    transition: width .25s cubic-bezier(.4,0,.2,1), min-width .25s cubic-bezier(.4,0,.2,1);
}
.system-prompt-panel.open {
    width: 48%;
    min-width: 480px;
}

/* ----------------------------------------------------------
 * Embedded variant — when mounted inside the admin panel's
 * "System Prompt" tab. Same DOM, same controller; just adapts
 * to the larger workspace and drops sidebar chrome.
 * --------------------------------------------------------*/
.system-prompt-admin-mount {
    display: flex;
    flex: 1;
    min-height: 0;
}
.system-prompt-panel.is-embedded {
    width: 100%;
    min-width: 0;
    flex: 1;
    height: 100%;
    min-height: 0;
    border-left: none;
    transition: none;
    background: var(--white);
}
.system-prompt-panel.is-embedded .system-prompt-header {
    background: var(--cream);
}
.system-prompt-panel.is-embedded #system-prompt-close-btn {
    display: none;
}
.system-prompt-panel.is-embedded .sp-versions-pane {
    width: 280px;
}
.system-prompt-panel.is-embedded .system-prompt-body {
    overflow: hidden;
}

#admin-section-prompt {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* When the System Prompt tab is active, drop the admin panel's
 * narrow max-width and outer scroll so the two-pane branching UI
 * gets full real estate and manages its own internal scrolling. */
.admin-panel.is-prompt-section {
    max-width: none;
    overflow: hidden;
    padding: 1rem 1.5rem 1.5rem;
}

.system-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.system-prompt-header h3 {
    font-size: .875rem;
    font-weight: 700;
    color: var(--t1);
}

.system-prompt-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--white);
    flex-shrink: 0;
}
.sp-branch-field {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--t2);
}
.sp-branch-field select {
    padding: .25rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--white);
    font-size: .8125rem;
    color: var(--t1);
}
.sp-active-toggle {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--t2);
    cursor: pointer;
    user-select: none;
}
.sp-active-toggle input:disabled + span {
    opacity: .5;
}

.system-prompt-body {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.sp-versions-pane {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--white);
}
.sp-versions-header {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .5rem .625rem;
    border-bottom: 1px solid var(--border);
    font-size: .75rem;
    font-weight: 600;
    color: var(--t2);
}
.sp-version-filter {
    padding: .25rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: .75rem;
}
.sp-versions-list {
    flex: 1;
    overflow-y: auto;
    padding: .25rem;
}
.sp-versions-empty {
    padding: 1rem .75rem;
    font-size: .75rem;
    color: var(--t3);
    text-align: center;
}
.sp-version-row {
    padding: .5rem .625rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: .125rem;
}
.sp-version-row:hover {
    background: var(--hover, #f4f4f5);
}
.sp-version-row.is-viewing {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.sp-version-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--t1);
    display: flex;
    align-items: center;
    gap: .375rem;
}
.sp-head-badge {
    font-size: .625rem;
    padding: .0625rem .3125rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    letter-spacing: .05em;
}
.sp-version-meta {
    font-size: .6875rem;
    color: var(--t3);
    margin-top: .125rem;
}

.sp-main-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.sp-main-pane .prompt-meta {
    padding: .5rem 1rem 0;
    font-size: .75rem;
    color: var(--t2);
    flex-shrink: 0;
}
.sp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sp-main-pane .prompt-content {
    flex: 1;
    overflow-y: auto;
    margin: .5rem 1rem 1rem;
    border-radius: var(--r-md);
}
.prompt-textarea#sp-textarea {
    flex: 1;
    margin: .5rem 1rem 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .8125rem;
    line-height: 1.6;
    resize: none;
    background: var(--white);
    color: var(--t1);
}

/* Branch activity log */
.sp-activity {
    margin: 0 1rem 1rem;
    padding: .5rem .75rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: .75rem;
    color: var(--t2);
    flex-shrink: 0;
}
.sp-activity summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--t1);
    padding: .125rem 0;
    user-select: none;
}
.sp-activity-list {
    margin-top: .5rem;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.sp-activity-row {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    padding: .25rem .375rem;
    border-radius: var(--r-sm);
    background: var(--cream);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .6875rem;
    flex-wrap: wrap;
}
.sp-activity-event {
    display: inline-block;
    padding: .0625rem .375rem;
    border-radius: var(--r-pill);
    background: #e2e8f0;
    color: var(--t1);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .625rem;
}
.sp-evt-save { background: rgba(79, 70, 229, .15); color: #4338ca; }
.sp-evt-activate { background: rgba(16, 185, 129, .15); color: #047857; }
.sp-evt-fork { background: rgba(245, 158, 11, .18); color: #b45309; }
.sp-evt-promote { background: rgba(139, 92, 246, .18); color: #6d28d9; }
.sp-evt-promoted_to_main { background: rgba(139, 92, 246, .12); color: #6d28d9; }
.sp-evt-archive { background: rgba(239, 68, 68, .15); color: #b91c1c; }
.sp-activity-actor { font-weight: 600; color: var(--t1); }
.sp-activity-details { color: var(--t3); flex: 1; }
.sp-activity-ts { color: var(--t3); font-size: .625rem; }
.sp-activity-empty {
    color: var(--t3);
    font-style: italic;
    text-align: center;
    padding: .5rem;
}

/* Diff / Promote modal */
.diff-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.diff-modal-overlay.open { display: flex; }
.diff-modal {
    width: min(960px, 94vw);
    max-height: 86vh;
    background: var(--white);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    overflow: hidden;
}
.diff-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.diff-modal-header h3 {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--t1);
}
.diff-modal-pickers {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--cream);
    flex-shrink: 0;
}
.diff-picker {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.diff-picker-label {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--t3);
    letter-spacing: .03em;
    text-transform: uppercase;
}
.diff-picker select {
    padding: .375rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--white);
    font-size: .8125rem;
    color: var(--t1);
}
.diff-picker-arrow {
    font-size: 1.25rem;
    color: var(--t3);
    padding-bottom: .5rem;
}
.diff-modal-body {
    flex: 1;
    overflow: auto;
    padding: 0;
    background: #fafafa;
    min-height: 200px;
}
.diff-pre {
    margin: 0;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .8125rem;
    line-height: 1.45;
}
.diff-line {
    padding: .0625rem .75rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.diff-line.diff-plus { background: #ecfdf5; color: #065f46; }
.diff-line.diff-minus { background: #fef2f2; color: #991b1b; }
.diff-line.diff-meta { color: var(--t3); background: #f1f5f9; font-weight: 600; }
.diff-line.diff-hunk { color: #6366f1; background: #eef2ff; font-weight: 600; }
.diff-line.diff-context { color: var(--t2); }
.diff-empty {
    padding: 2rem;
    text-align: center;
    color: var(--t3);
    font-style: italic;
}
.diff-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.diff-modal-note {
    font-size: .75rem;
    color: var(--t3);
    flex: 1;
}
.diff-modal-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

/* Sandbox banner above messages */
.sandbox-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .875rem;
    background: rgba(79, 70, 229, .08);
    border-bottom: 1px solid rgba(79, 70, 229, .25);
    color: #4F46E5;
    font-size: .8125rem;
    flex-shrink: 0;
}

/* ==========================================================
   PROMPT CONTENT (shared: QA panel + admin prompt)
   ========================================================== */

.prompt-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    line-height: 1.65;
    color: var(--t1);
    font-size: .875rem;
}

.prompt-content h1 { font-size: 1.5rem; font-weight: 700; margin: 1.25rem 0 .5rem; color: var(--t1); }
.prompt-content h2 { font-size: 1.25rem; font-weight: 700; margin: 1.125rem 0 .375rem; color: var(--t1); border-bottom: 1px solid var(--border); padding-bottom: .25rem; }
.prompt-content h3 { font-size: 1.0625rem; font-weight: 600; margin: 1rem 0 .25rem; color: var(--t1); }
.prompt-content h4 { font-size: .9375rem; font-weight: 600; margin: .75rem 0 .25rem; color: var(--t2); }
.prompt-content p { margin: .5rem 0; }
.prompt-content ul, .prompt-content ol { margin: .5rem 0 .5rem 1.25rem; }
.prompt-content li { margin: .2rem 0; }
.prompt-content strong { font-weight: 700; }
.prompt-content em { font-style: italic; }
.prompt-content code {
    background: var(--cream);
    padding: .125rem .375rem;
    border-radius: var(--r-sm);
    font-size: .8125rem;
    font-family: 'Courier New', monospace;
}
.prompt-content pre {
    background: var(--cream);
    padding: .75rem 1rem;
    border-radius: var(--r-sm);
    overflow-x: auto;
    font-size: .8125rem;
    font-family: 'Courier New', monospace;
    margin: .5rem 0;
}
.prompt-content pre code {
    background: none;
    padding: 0;
}
.prompt-content table {
    width: 100%;
    border-collapse: collapse;
    margin: .5rem 0;
}
.prompt-content table th,
.prompt-content table td {
    text-align: left;
    padding: .375rem .625rem;
    border: 1px solid var(--border);
    font-size: .8125rem;
}
.prompt-content table th {
    background: var(--cream);
    font-weight: 600;
}
.prompt-content blockquote {
    margin: .5rem 0;
    padding: .5rem 1rem;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    color: var(--t2);
}
.prompt-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}

.prompt-error {
    color: var(--red);
    font-style: italic;
}

.prompt-meta {
    font-size: .75rem;
    color: var(--t3);
    margin-bottom: .5rem;
    font-style: italic;
}

/* ==========================================================
   ADMIN PROMPT EDITOR
   ========================================================== */

.prompt-sub-nav {
    display: flex;
    gap: .25rem;
    margin-bottom: .75rem;
}

.prompt-sub-tab {
    padding: .375rem .75rem;
    border: 1px solid var(--border);
    background: var(--cream);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    color: var(--t3);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: all .15s;
}
.prompt-sub-tab:hover {
    color: var(--t1);
    border-color: var(--border-strong);
}
.prompt-sub-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* AI Reports (admin) */
.report-manual-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    margin-bottom: .75rem;
}
.report-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--t2);
}
.report-field input,
.report-field select {
    font-family: inherit;
    font-size: .8125rem;
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--t1);
}
.report-status {
    font-size: .8125rem;
    color: var(--t2);
    min-height: 1.25rem;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.report-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: report-spin .7s linear infinite;
    flex-shrink: 0;
}
.report-spinner[hidden] {
    display: none !important;
}
@keyframes report-spin {
    to { transform: rotate(360deg); }
}
.report-list-heading {
    font-size: .875rem;
    margin: 1rem 0 .5rem;
    color: var(--t1);
}
.report-meta {
    font-size: .7rem;
    color: var(--t3);
    font-weight: 500;
}
.report-hint {
    font-size: .75rem;
    color: var(--t3);
    margin: 0 0 .75rem;
    max-width: 42rem;
}
.report-daily-actions {
    margin-bottom: .5rem;
}
.report-markdown-preview {
    max-height: 22rem;
    overflow: auto;
    margin: .75rem 0;
    padding: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--cream);
    font-size: .8125rem;
    line-height: 1.5;
}
.report-detail-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}
.report-export-row {
    margin: 0 0 .5rem;
}

.prompt-toolbar {
    display: flex;
    gap: .375rem;
    margin-bottom: .5rem;
}

.prompt-textarea {
    flex: 1;
    width: 100%;
    min-height: 24rem;
    padding: 1rem;
    font-family: 'Courier New', Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--t1);
    background: var(--white);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    resize: vertical;
    outline: none;
    transition: border-color .15s;
}
.prompt-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ==========================================================
   VERSION HISTORY
   ========================================================== */
.versions-empty {
    color: var(--t3);
    font-size: .875rem;
    padding: 2rem 0;
    text-align: center;
}
.versions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}
.versions-table th {
    text-align: left;
    padding: .5rem .75rem;
    border-bottom: 2px solid var(--border);
    color: var(--t2);
    font-weight: 600;
}
.versions-table td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--t1);
}
.versions-table tr:hover td {
    background: var(--cream-dark);
}
.versions-actions {
    text-align: right;
    white-space: nowrap;
}
.versions-actions .btn {
    margin-left: .375rem;
}
.versions-detail-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0 .75rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: .75rem;
}
.versions-detail-info {
    flex: 1;
    font-size: .8125rem;
    color: var(--t2);
}
.version-name-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.version-no-name {
    color: var(--t3);
    cursor: pointer;
    font-style: italic;
    font-size: .75rem;
}
.version-no-name:hover {
    color: var(--accent);
}
.version-rename-icon {
    cursor: pointer;
    color: var(--t3);
    font-size: .75rem;
    margin-right: .35rem;
    flex-shrink: 0;
}
.version-rename-icon:hover {
    color: var(--accent);
}
.btn-danger {
    background: #d9534f;
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background: #c9302c;
}
.version-current-row {
    background: var(--bg2);
}
.version-current-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 768px) {
    .sidebar { position: fixed; inset: 0; width: 280px; z-index: 50; }
    .sidebar.hidden { margin-left: -280px; }
}