:root {
    --space-black: #040508;
    --dark-blue: #121723;
    --blue: #2E3B54;
    --mint: #5DD39E;
    --coral: #FF9980;
    --magenta: #CE3E74;
    --text: #FFFFFF;
    --yellow: #FCBE42;
    --font-sans: 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    /* overflow: hidden; */
    height: 100vh;
    position: relative;
    background-color: var(--space-black);
    background-image: url('/assets/img/control_room.png');
    background-image: image-set(
        url('/assets/img/control_room.webp') type('image/webp'),
        url('/assets/img/control_room.png') type('image/png')
    );
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(3px);
    z-index: 0;
    height:100%;
    width:100%;
}


#nav-bar {
    width: 60px;
    background-color: var(--dark-blue);
    height: 100vh;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    /* 1500 > page content cards (commonly z-index: 1000) so the slide-out
       nav always stacks over page content. Modals use 10000 to stay above. */
    z-index: 1500;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

#nav-bar-title
{
    color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    /* margin-top: 10px; */
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center;
}

#nav-bar:hover {
    width: 200px;
    background-color: var(--space-black);
}

.nav-content {
    width: 200px; /* Full width of expanded nav */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-placeholder {
    width: 60px;
    height: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-placeholder img {
    border-radius: 4px;
    /* background-color: var(--space-black); */
    padding: 3px;
}

.nav-items {
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    padding-top: 20px;
}

#nav-bar:hover .nav-items {
    opacity: 1;
    pointer-events: auto;
}

.nav-item {
    padding: 15px 25px;
    color: var(--text);
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    display: block;
    white-space: nowrap;
    transition: background-color 0.2s;
    border-radius: 0px;
    margin: 2px 8px;
}

.nav-item.active {
    background-color: var(--mint);
    color: var(--space-black);
}

.nav-item:hover {
    background-color: var(--blue);
    color:#aaa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-avatar-container {
    margin-top: auto;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background-color 0.2s;
}

#nav-bar:hover .nav-avatar-container {
    width: 100%;
    padding-left: 30px;

}

.nav-avatar-container:hover {
    background-color: var(--blue);
}

.nav-avatar-container.active .nav-avatar {
    box-shadow: 0 0 0 2px var(--mint);
}

.nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.nav-avatar-name {
    color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    white-space: nowrap;
    display: none;
}

#nav-bar:hover .nav-avatar-name {
    display: inline;
}

.nav-avatar-container.active {
  background-color: inherit;
}

#main-content {
    flex-grow: 1;
    padding: 40px;
    padding-left: 100px;
    transition: padding-left 0.3s ease-in-out;
    /* 251113 */
    position: relative;
}

#nav-bar:hover + #main-content {
    padding-left: 200px;
}

@media (max-width: 720px) {
    #nav-bar {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 48px;
        flex-direction: row;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    #nav-bar:hover {
        width: 100%;
        background-color: var(--dark-blue);
    }

    .nav-content {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        padding: 0 12px;
    }

    .logo-placeholder {
        width: 32px;
        height: 32px;
        margin: 0;
    }

    .logo-placeholder img {
        width: 32px;
        padding: 2px;
    }

    #nav-bar-title {
        margin: 0;
        font-size: 11px;
    }

    .nav-items,
    #nav-bar:hover .nav-items,
    .nav-avatar-container {
        display: none;
    }

    #main-content {
        padding: 20px 16px 68px;
    }

    #nav-bar:hover + #main-content {
        padding-left: 16px;
    }
}

/* Header and Breadcrumbs */
.page-header {
    /* background-color: rgba(26, 33, 48, 0.7); */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.05); */
    /* padding: 16px 40px; */
    padding: 40px 0px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-item a:hover {
    color: var(--coral);
}

.breadcrumb-separator {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.3);
}

.breadcrumb-current {
    color: var(--coral);
}

/* .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
} */

.title-container h1 {
    font-size: 28px;
    font-weight: 500;
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    padding-top: 20px;
}

.id-badge {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    background-color: #1a2744;
    color: rgba(255, 255, 255, 0.7);
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 10px;
}
.id-badge:hover {
    background-color: #243356;
    color: rgba(255, 255, 255, 0.9);
}
.id-badge.copied {
    background-color: #1a4432;
    color: #5DD39E;
}

.title-description {
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.6);
}

#nav-bar:hover + #main-content {
    padding-left: 240px;
}

.card {
    background-color: var(--dark-blue);
    border-radius: 0px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    z-index:50;
}

.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.3;
}

.card.coral::after { background: linear-gradient(90deg, transparent, var(--coral), var(--mint)); }
.card.blue::after { background: linear-gradient(90deg, transparent, var(--blue), var(--mint)); }
.card.magenta::after { background: linear-gradient(90deg, transparent, var(--magenta), var(--mint)); }
.card.mint::after { background: linear-gradient(90deg, transparent, var(--mint), var(--mint)); }

.synthetic-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.card-nav-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: inherit;
    text-decoration: none;
}

.card-menu-container,
.card-section-link,
.card-title-link,
.inline-nav-link,
.sop-badge,
.id-badge {
    position: relative;
    z-index: 3;
}

.table-nav-link,
.card-title-link,
.inline-nav-link {
    color: inherit;
    text-decoration: none;
}

.table-nav-link:hover,
.card-title-link:hover,
.inline-nav-link:hover {
    color: var(--mint);
    text-decoration: underline;
}

.card-header {
    align-items: center;
    margin-bottom: 1rem;
}

.card-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-mono);
    margin: 0;
}

.card-content {
    position: relative;
    z-index: 1;
}

.card-content-role {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.card-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

.card-id {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

#add-synthetic-btn {
    /* margin-top: 60px; */
    width:50px;
    height: 50px;;
    /* padding: 12px 24px; */
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background-color: rgba(0,0,0,0);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    border: none;
    text-align: center;
    font-weight: 300;
    font-size:14px;
    cursor: pointer;
    margin-top:0px !important;
}

#add-synthetic-btn:hover {
    filter: brightness(1.1);
}

.synthetic-square {
    width: 50px;
    height: 50px;
    background-color: var(--dark-blue);
    /* margin-right: 20px; */
    display: inline-block;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.synthetic-square::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    opacity: 0.7;
}

.synthetic-square:nth-child(4n+1)::after {
    background: linear-gradient(90deg, transparent, var(--coral), transparent);
}

.synthetic-square:nth-child(4n+2)::after {
    background: linear-gradient(90deg, transparent, var(--magenta), transparent);
}

.synthetic-square:nth-child(4n+3)::after {
    background: linear-gradient(90deg, transparent, var(--mint), transparent);
}

.synthetic-square:nth-child(4n+4)::after {
    background: linear-gradient(90deg, transparent, var(--red), transparent);
}

.synthetic-square:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

#synthetics-display {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* margin-top: 20px; */
}

#title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text);
}

.content-wrapper {
    /* padding-left: 40px;
    padding-right: 40px; */
    padding-top:20px;
}

button {
    padding: 10px 20px;
    border-radius: 0px;
    background-color: var(--blue);
    color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 20px;
}
            
#subpage-links {
    display: flex;
    justify-content: left;
    margin-top: 20px;

    margin-bottom: 20px;
    width: 50%;
    z-index: 100;
}

.subpage-link {
    text-decoration: none;
    color: var(--text);
    padding: 10px 15px;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0px;
    background-color: var(--space-black);
    transition: background-color 0.3s, color 0.3s;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
}

.subpage-link:hover {
    background-color: var(--blue);
    border-color: var(--mint);
    color: var(--text);
}

.subpage-link.sop-recovery-primary,
.subpage-link.recovery-primary {
    border-color: var(--mint);
    color: var(--mint);
}

.subpage-link.sop-recovery-primary:hover,
.subpage-link.recovery-primary:hover {
    background-color: var(--mint);
    color: var(--space-black);
}

[data-mc-icon],
.mc-fa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

[data-mc-icon] svg,
.mc-fa-icon svg {
    flex-shrink: 0;
}

.mc-fa-icon::before {
    content: none !important;
}

.bulk-actions-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 12px;
    font-family: var(--font-mono);
}

.bulk-actions-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
}

.bulk-actions-select {
    min-width: 150px;
    background: var(--space-black);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
}

.bulk-actions-apply {
    margin: 0;
    padding: 8px 12px;
    font-size: 11px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--dark-blue);
}

.bulk-actions-apply:hover {
    border-color: var(--coral);
    color: var(--coral);
}

#main-content.synth-settings-page {
    display: grid;
    grid-template-columns: minmax(176px, 224px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

#main-content.synth-settings-page > .page-header {
    position: sticky;
    top: 20px;
    z-index: 20;
    min-width: 0;
    padding: 40px 0 0;
}

#main-content.synth-settings-page > .content-wrapper {
    grid-column: 2;
    min-width: 0;
}

#main-content.synth-settings-page #subpage-links {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    gap: 8px;
    margin: 24px 0 0;
    z-index: 1;
}

#main-content.synth-settings-page .subpage-link {
    display: flex;
    align-items: center;
    min-height: 38px;
    margin-right: 0;
    line-height: 1.3;
}

body:has(.system-banner-stack-top) #main-content.synth-settings-page > .page-header {
    top: calc(var(--mc-top-banner-h, 0px) + 20px);
}

@media (max-width: 980px) {
    #main-content.synth-settings-page {
        display: block;
    }

    #main-content.synth-settings-page > .page-header {
        position: relative;
        top: auto;
    }

    #main-content.synth-settings-page #subpage-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    #main-content.synth-settings-page .subpage-link {
        flex: 0 0 auto;
    }
}

.active {
    background-color: var(--mint);
    color: var(--space-black);
    /* border-color: var(--coral); */
}

/* Header with avatar styling */
/* RAB DEPRECATED 260129 */
/* .header-content {
    display: flex;
    align-items: center;
    gap: 20px;
} */
 .header-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.synthetic-avatar {
    margin-top: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    overflow: hidden;
    background-color: var(--dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid var(--mint); */
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
    flex-shrink: 0;
    border-color: var(--mint);
    box-shadow: 0 4px 30px rgba(93, 211, 158, 0.3);
}

.synthetic-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback avatar styling */
.synthetic-avatar .fallback-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-blue);
    color: var(--coral);
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 24px;
}

/* COMMAND PALLETTE */

.hidden {
    display: none !important;
}
  
#command-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 100px;
}
  
#command-palette {
    width: 50%;
    max-width: 650px;
    background-color: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    font-family: 'IBM Plex Sans', sans-serif;
}
  
.command-input-container {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #333;
}
  
  .command-input-icon {
    color: #888;
    margin-right: 8px;
    display: flex;
    align-items: center;
  }
  
  #command-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    outline: none;
    padding: 8px 0;
    font-family: 'IBM Plex Sans', sans-serif;
  }
  
  .command-input-shortcut {
    display: flex;
    gap: 4px;
    color: #888;
    font-size: 12px;
  }
  
  kbd {
    background: #333;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
  }
  
  #command-list-container {
    max-height: 400px;
    overflow-y: auto;
  }
  
  #command-list {
    padding: 8px 0;
  }
  
  .command-category {
    padding: 8px 16px;
    font-size: 12px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
  }
  
  .command-item {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.15s ease;
  }
  
  .command-item:hover, .command-item.selected {
    background-color: #333;
  }
  
  .command-item-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
  }
  
  .command-item-content {
    flex: 1;
  }
  
  .command-item-title {
    font-weight: 500;
    margin-bottom: 2px;
  }
  
  .command-item-description {
    font-size: 12px;
    color: #888;
  }
  
  /* Scrollbar styling */
  #command-list-container::-webkit-scrollbar {
    width: 8px;
  }
  
  #command-list-container::-webkit-scrollbar-track {
    background: transparent;
  }
  
  #command-list-container::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
  }
  
  /* Highlight matching text */
  .highlight {
    font-weight: 600;
    color: #3291ff;
  }

    @keyframes twinkle {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 1; }
    }

    #spatial-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* Very high */
    }

.foot{
    height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index:5;
    color: #CCCCCC50;
    font-size:10px;
    text-align: center;
}

/* ── DEV-1838: system bottom banner stack positioning ───────────────────────
   The operator-configurable bottom banner stack (partials/system_banners.php),
   rendered only when the SECURITY_BANNER_BOTTOM env var is set, pins to
   the bottom edge. Positioning lives here (not inline) so it clears the
   bottom-fixed chrome instead of covering it, per the ticket AC: the warning
   must not hide navigation, page actions, content, or the footer/build line on
   desktop or mobile.
     - z-index 1600 sits ABOVE #nav-bar (1500) so the bottom strip frames OVER
       the left rail, matching the top banner (which also frames over the rail),
       for a consistent top/bottom frame instead of the old asymmetry (top over
       the rail, bottom under it). The rail's bottom account avatar is lifted
       clear of the strip by the #nav-bar reserve below (the mirror of the top
       rail reserve), so it stays visible and clickable. Also ABOVE page cards
       (1000).
     - bottom: 0 pins the strip flush to the viewport bottom edge (DEV-1852), out
       of the content/popup zone, so transient overlays (toasts, notification
       cards) no longer collide with a bar floating mid-screen. The .foot build
       line is lifted to sit just above the strip (rule below) so build info
       stays visible.
     - on mobile the nav is a 48px bottom bar, so the stack sits at bottom: 48px
       (just above it) and the page reserves matching bottom space.
   Reserve space is scoped with :has() so it applies ONLY when the stack is
   actually rendered; off-state pages keep today's spacing. Sized for the short
   single-line slice-1 bottom banner; a much taller banner would need a
   larger reserve. */
.system-banner-stack-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1600;
}

/* ── DEV-1838 round 5: GLOBAL bottom-banner reserve ─────────────────────────
   --mc-bottom-banner-h is the height the bottom banner stack occupies ABOVE the
   bottom chrome row (the fixed .foot build line on desktop, the bottom #nav-bar
   on mobile). It is set ONLY when the stack is actually rendered (body:has), so
   every fixed or sticky bottom-anchored element across the logged-in app can
   lift by it with var(--mc-bottom-banner-h, 0px) and fall back to its original
   bottom when the banner is off (off-state spacing is byte-for-byte unchanged).
   Round 4 reserved only #main-content; the home/chat screen does not use
   #main-content, so its composer, mini prompt library, and centered console are
   reserved against this same variable in app/index.php. Sized for the slice-1
   single-line bottom banner; a much taller banner would need larger values.
     desktop: 40px chrome (.foot) + 80px stack = 120px reserve.
     mobile:  48px chrome (#nav-bar) + 92px stack = 140px reserve. */
body:has(.system-banner-stack-bottom) {
    --mc-bottom-banner-h: 80px;
}

body:has(.system-banner-stack-bottom) #main-content {
    padding-bottom: calc(40px + var(--mc-bottom-banner-h, 0px));
}

/* DEV-1852: with the bottom banner pinned flush to the viewport bottom edge
   (bottom: 0), lift the fixed .foot build line just above the strip so the
   build / authorized-use line stays visible instead of being covered. 36px
   clears the single-line strip; reset to 0 on mobile (media query), where the
   strip sits above the 48px nav bar and the foot keeps its normal position. */
body:has(.system-banner-stack-bottom) .foot {
    bottom: 36px;
}

/* DEV-1852: mirror of the top rail reserve. With the bottom banner now framing
   OVER the desktop left rail (z-index above #nav-bar, matching the top so the
   two banners sit consistently), the rail's bottom account avatar
   (.nav-avatar-container, margin-top:auto, so it pins to the rail's bottom edge)
   would fall under the strip. Push the rail's content up by the banner height so
   the avatar clears it, the same way the top reserve pushes the logo down. On
   mobile the rail relocates to the 48px bottom bar with the banner sitting just
   above it (no overlap), so the reserve is reset there (see media query). */
body:has(.system-banner-stack-bottom) #nav-bar {
    padding-bottom: var(--mc-bottom-banner-h, 0px);
}

/* DEV-1838: transient bottom-anchored toasts and notifications on feature pages
   (the .notification and .toast classes) sit below the bottom security banner.
   Lift them to clear the banner stack when it renders, gated on body:has so the
   banner-off position is unchanged, matching the clearance used for the composer
   and nav. */
body:has(.system-banner-stack-bottom) .notification,
body:has(.system-banner-stack-bottom) .toast {
    bottom: calc(40px + var(--mc-bottom-banner-h, 0px));
}

/* DEV-1852: the synthetics/details conversation panel was NOT scrolling inside
   itself; it grew to fit all messages, made the whole page scroll, and the fixed
   bottom banner then overlapped messages as the page scrolled (a content-padding
   reserve cannot fix a pinned bar over a page-scroll). Bound the panel to the
   viewport so #conversation-messages scrolls INTERNALLY and the panel + composer
   always sit above the banner. The offset covers the page header/tabs above the
   panel plus the foot and both banner reserves below it. Gated on body:has, so
   the banner-off layout is unchanged. */
body:has(.system-banner-stack-bottom) .conversation-container {
    height: calc(100vh - 360px - var(--mc-top-banner-h, 0px) - var(--mc-bottom-banner-h, 0px));
    min-height: 320px;
}

@media (max-width: 720px) {
    .system-banner-stack-bottom {
        bottom: 48px;
    }

    body:has(.system-banner-stack-bottom) {
        --mc-bottom-banner-h: 92px;
    }

    body:has(.system-banner-stack-bottom) #main-content {
        padding-bottom: calc(48px + var(--mc-bottom-banner-h, 0px));
    }

    /* The mobile nav is the 48px bottom bar and the banner sits above it (no
       overlap), so drop the desktop rail reserve to keep the bottom bar intact,
       mirroring the top banner's mobile reset. */
    body:has(.system-banner-stack-bottom) #nav-bar {
        padding-bottom: 0;
    }

    /* The mobile nav owns the bottom edge; keep the foot in its normal spot. */
    body:has(.system-banner-stack-bottom) .foot {
        bottom: 0;
    }

    body:has(.system-banner-stack-bottom) .notification,
    body:has(.system-banner-stack-bottom) .toast {
        bottom: calc(48px + var(--mc-bottom-banner-h, 0px));
    }
}

/* ── DEV-1838: GLOBAL top-banner reserve ────────────────────────────────────
   Mirror of the bottom-banner reserve above, for the operator-configurable TOP
   stack (partials/system_banners.php: the SECURITY_BANNER_TOP line). The stack
   is position:fixed;top:0 (inline), full width, so it pins to
   the viewport top edge and would cover the top of page content, the home
   header, the desktop nav logo, and the Account card unless space is reserved.
   --mc-top-banner-h is the height that fixed top stack occupies. It is set ONLY
   while the stack renders (body:has), so every top-anchored surface lifts by
   var(--mc-top-banner-h, 0px) and falls back to its original offset when the
   banner is off (off-state spacing is byte-for-byte unchanged).
   Sizing mirrors the bottom stack: each stack is a single short banner row
   (0.4rem-padded, 0.85rem), so the bottom's measured 80px/92px reserve (sized
   with margin for the single-line slice-1 banner) covers the top stack with
   room to spare. A much taller banner would need larger values. */
body:has(.system-banner-stack-top) {
    --mc-top-banner-h: 80px;
}

body:has(.system-banner-stack-top) #main-content {
    padding-top: calc(40px + var(--mc-top-banner-h, 0px));
}

/* The shared sticky .page-header (partials/components.php) pins to top:0, i.e.
   under the fixed banner once scrolled. Stick it below the banner instead, so
   page titles and breadcrumbs stay visible. Uses the same var, so it picks up
   the 92px mobile value automatically. */
body:has(.system-banner-stack-top) .page-header {
    top: var(--mc-top-banner-h, 0px);
}

/* The desktop left nav rail (#nav-bar, position:fixed, top:0) puts its logo at
   the top, which the banner would cover. Push the rail's content down so the
   logo clears the banner. On mobile the rail relocates to the bottom (see the
   media query below), where the top banner cannot reach it, so the reserve is
   reset there. */
body:has(.system-banner-stack-top) #nav-bar {
    padding-top: var(--mc-top-banner-h, 0px);
}

@media (max-width: 720px) {
    body:has(.system-banner-stack-top) {
        --mc-top-banner-h: 92px;
    }

    body:has(.system-banner-stack-top) #main-content {
        padding-top: calc(20px + var(--mc-top-banner-h, 0px));
    }

    /* The mobile nav is a 48px bottom bar; the top banner never reaches it, so
       drop the desktop rail reserve to keep the bottom bar's row intact. */
    body:has(.system-banner-stack-top) #nav-bar {
        padding-top: 0;
    }
}

/* ── sortable table headers ─────────────────────────────────────────── */
table.sortable-table th.col-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

table.sortable-table th.col-sortable:hover {
    color: var(--mint);
}

table.sortable-table th.col-sortable::after {
    content: '↕';
    margin-left: 0.5rem;
    opacity: 0.3;
    font-size: 0.85em;
}

table.sortable-table th.col-sortable.sort-asc::after {
    content: '↑';
    opacity: 1;
    color: var(--mint);
}

table.sortable-table th.col-sortable.sort-desc::after {
    content: '↓';
    opacity: 1;
    color: var(--mint);
}

/* ── markdown inside chat message bodies (DEV-1614) ─────────────────── */
/* Shared by every chat surface that renders message bodies through
   renderMessageMarkdown (home chat, synth-detail) so synth replies format
   identically everywhere, including
   the DEV-1034 GFM table styling (borders / shaded header / zebra /
   horizontal scroll). Block spacing is set explicitly because the global
   `* { margin: 0 }` reset strips the defaults. The page-local bubble
   styles (background, borders, padding) stay on each page. */
.message-renderer-unavailable {
    margin-bottom: 0.65em;
    padding: 0.55em 0.7em;
    border: 1px solid var(--yellow);
    border-left-width: 4px;
    border-radius: 3px;
    background: rgba(252, 190, 66, 0.12);
    color: var(--text);
}
.message-renderer-unavailable strong { color: var(--yellow); }
.message-renderer-fallback-text {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.message-content p { margin: 0 0 0.8em; }
.message-content p:last-child { margin-bottom: 0; }
.message-content ul,
.message-content ol { margin: 0 0 0.8em; padding-left: 1.5em; }
.message-content ul:last-child,
.message-content ol:last-child { margin-bottom: 0; }
.message-content li { margin-bottom: 0.25em; }
.message-content li > p { margin-bottom: 0.25em; }
.message-content blockquote {
    margin: 0 0 0.8em;
    padding: 0.25em 0.9em;
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}
.message-content pre {
    margin: 0 0 0.8em;
    padding: 0.6em 0.8em;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    overflow-x: auto;
}
.message-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 4px;
    border-radius: 2px;
}
.message-content pre code { background: none; padding: 0; }
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 { margin: 0.6em 0 0.4em; line-height: 1.25; }
.message-content h1:first-child,
.message-content h2:first-child,
.message-content h3:first-child,
.message-content h4:first-child,
.message-content h5:first-child,
.message-content h6:first-child { margin-top: 0; }
.message-content hr {
    margin: 0.8em 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
/* GFM tables: block + overflow-x so wide tables scroll inside the bubble instead of breaking layout */
.message-content table {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 0 0.8em;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.95em;
}
.message-content table:last-child { margin-bottom: 0; }
.message-content th,
.message-content td {
    padding: 0.4em 0.7em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: left;
    vertical-align: top;
}
.message-content thead th {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
}
.message-content tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}
.message-content a {
    color: var(--yellow);
}
/* DEV-2085: one shared send-time client-certificate passphrase prompt. */
body.browser-cert-passphrase-open {
    overflow: hidden;
}

.browser-cert-unlock-status {
    position: fixed;
    top: calc(24px + var(--mc-top-banner-h, 0px));
    right: 24px;
    z-index: 1650;
    max-width: min(420px, calc(100vw - 48px));
    padding: 12px 16px;
    border: 1px solid #315d52;
    border-radius: 8px;
    background: #102a25;
    color: #e5fff8;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    font-size: 14px;
    line-height: 1.4;
}

.browser-cert-unlock-status[hidden] {
    display: none;
}

.browser-cert-passphrase-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 42%, rgba(46, 59, 84, 0.34), transparent 52%),
        rgba(4, 5, 8, 0.82);
    backdrop-filter: blur(8px);
}

.browser-cert-passphrase-overlay[hidden] {
    display: none;
}

.browser-cert-passphrase-dialog {
    width: min(620px, 100%);
    display: grid;
    grid-template-columns: 46px 1fr;
    overflow: hidden;
    background: #0b0e15;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
}

.browser-cert-passphrase-keyrail {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--coral);
    color: var(--space-black);
    border-right: 1px solid rgba(4, 5, 8, 0.45);
}

.browser-cert-passphrase-keyrail span {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-90deg);
}

.browser-cert-passphrase-content {
    padding: 30px 32px 28px;
}

.browser-cert-passphrase-eyebrow {
    margin-bottom: 10px;
    color: var(--coral);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.browser-cert-passphrase-dialog h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.browser-cert-passphrase-dialog p {
    max-width: 48ch;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
}

.browser-cert-passphrase-dialog label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.browser-cert-passphrase-dialog input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    color: var(--text);
    caret-color: var(--coral);
    background: var(--dark-blue);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    outline: none;
    font-family: var(--font-mono);
    font-size: 15px;
}

.browser-cert-passphrase-dialog input:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 2px rgba(255, 153, 128, 0.18);
}

.browser-cert-passphrase-error {
    min-height: 20px;
    padding-top: 7px;
    color: var(--coral);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.35;
}

.browser-cert-passphrase-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.browser-cert-passphrase-actions button {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.browser-cert-passphrase-actions button:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.browser-cert-passphrase-primary {
    color: var(--space-black);
    background: var(--coral);
    border: 1px solid var(--coral);
}

.browser-cert-passphrase-skip {
    color: var(--text);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.32);
}

.browser-cert-passphrase-cancel {
    color: rgba(255, 255, 255, 0.62);
    background: transparent;
    border: 1px solid transparent;
}

.browser-cert-passphrase-actions button:hover {
    filter: brightness(1.1);
}

@media (max-width: 560px) {
    .browser-cert-passphrase-overlay {
        align-items: end;
        padding: 12px;
    }

    .browser-cert-passphrase-dialog {
        grid-template-columns: 1fr;
    }

    .browser-cert-passphrase-keyrail {
        min-height: 28px;
        border-right: 0;
        border-bottom: 1px solid rgba(4, 5, 8, 0.45);
    }

    .browser-cert-passphrase-keyrail span {
        transform: none;
    }

    .browser-cert-passphrase-content {
        padding: 24px 20px 20px;
    }

    .browser-cert-passphrase-actions {
        flex-direction: column;
    }

    .browser-cert-passphrase-actions button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .browser-cert-passphrase-dialog,
    .browser-cert-passphrase-actions button {
        transition: none;
    }
}
.message-content img {
    display: block;
    max-width: 100%;
    max-height: min(520px, 62vh);
    width: auto;
    height: auto;
    margin: 0.8em 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    object-fit: contain;
}
.message-content img:first-child { margin-top: 0; }
.message-content img:last-child { margin-bottom: 0; }
.message-content img[data-blocked-image="true"] { display: none; }