/* =====================================================================
       KOGNITIVE 360 — Design system v2 (presentational refresh only)
       Premium light theme · refined teal accent · no markup/behaviour change
    ===================================================================== */
    :root{
      --bg: #EEF2F6;
      --surface: #FFFFFF;
      --surface-2: #F6F9FB;
      --stroke: #E2E8F0;
      --stroke-strong: #CBD5E1;
      --text: #0B1626;
      --muted: #51617A;
      --muted2: #8494AB;
      --accent: #0D9488;
      --accent-deep: #0A7E74;
      --accent2: #06B6D4;
      --accent-grad: linear-gradient(135deg, #0D9488 0%, #0BA5A0 55%, #06B6D4 100%);
      --accent-tint: rgba(13,148,136,0.09);
      --ring: rgba(13,148,136,0.16);
      --info: #2E6FD8;
      --danger: #D92D20;
      --warn: #DC6803;
      --shadow: 0 1px 2px rgba(11,22,38,0.05), 0 2px 6px rgba(11,22,38,0.05);
      --shadow-md: 0 10px 28px rgba(11,22,38,0.10);
      --shadow-lg: 0 32px 72px rgba(11,22,38,0.22);
      --glow: 0 10px 30px rgba(13,148,136,0.32);
      --font-display: "Schibsted Grotesk", Inter, system-ui, sans-serif;
      --radius: 16px;
      --radius2: 12px;
      --gap: 16px;
      --pad: 20px;
      --inner-pad: 14px;
      --side-col: 300px;
      --lower-row-height: 1100px;
      --dashboard-row-height: 360px;
    }
    *{ box-sizing:border-box; }
    html, body{
      min-height: 100%;
      margin: 0;
      background-color: var(--bg);
    }
    body{
      min-height: 100dvh;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background-color: var(--bg);
      background-image:
        radial-gradient(1100px 500px at 85% -8%, rgba(6,182,212,0.07), transparent 60%),
        radial-gradient(900px 480px at 8% 12%, rgba(13,148,136,0.06), transparent 55%);
      background-attachment: fixed;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a{ color:inherit; text-decoration:none; }

    /* Subtle, consistent scrollbars */
    ::-webkit-scrollbar{ width: 10px; height: 10px; }
    ::-webkit-scrollbar-track{ background: transparent; }
    ::-webkit-scrollbar-thumb{
      background: rgba(16,24,40,0.14);
      border-radius: 999px;
      border: 3px solid transparent;
      background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover{ background-color: rgba(16,24,40,0.24); background-clip: padding-box; }

    /* ------------------------------------------------- App shell */
    .app{
      display:grid;
      grid-template-columns: 264px minmax(0, 1fr);
      min-height: 100dvh;
    }
    .sidebar{
      position: sticky;
      top: 0;
      height: 100dvh;
      display:flex;
      flex-direction:column;
      padding: 22px 16px;
      background:
        radial-gradient(420px 260px at 108% -4%, rgba(6,182,212,0.05), transparent 60%),
        radial-gradient(380px 280px at -18% 106%, rgba(13,148,136,0.05), transparent 60%),
        var(--surface);
      border-right: 1px solid var(--stroke);
      min-width: 0;
      overflow-y: auto;
    }
    .side-nav{
      display:flex;
      flex-direction:column;
      gap: 5px;
      margin-top: 26px;
    }
    .nav-item{
      display:flex;
      align-items:center;
      gap: 11px;
      width: 100%;
      padding: 11px 13px;
      border: 1px solid transparent;
      border-radius: 11px;
      background: transparent;
      color: var(--muted);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      text-align: left;
      position: relative;
      transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .nav-item:hover{ background: var(--surface-2); color: var(--text); }
    .nav-item.active{
      background: linear-gradient(120deg, rgba(13,148,136,0.12), rgba(6,182,212,0.07));
      color: var(--accent-deep);
      border-color: rgba(13,148,136,0.28);
      box-shadow: 0 4px 14px rgba(13,148,136,0.12);
    }
    .nav-item.active:before{
      content:"";
      position:absolute;
      left: -3px;
      top: 22%;
      bottom: 22%;
      width: 3px;
      border-radius: 999px;
      background: var(--accent-grad);
      box-shadow: 0 0 10px rgba(6,182,212,0.55);
    }
    .nav-item svg{ flex: 0 0 auto; }
    .side-foot{
      margin-top: auto;
      display:flex;
      flex-direction:column;
      gap: 6px;
      padding-top: 16px;
      margin-top: auto;
      border-top: 1px solid var(--stroke);
    }
    .side-foot .chip{ justify-content:flex-start; }
    /* Account chip and Sign out sit stacked in the sidebar foot and must read as
       a matched pair. Scoped to .sidebar so this beats .btn.ghost / .btn.sm,
       which are declared later in this stylesheet at equal specificity and were
       otherwise winning on padding and border — leaving the two labels sitting
       a pixel apart inside boxes that were themselves identical. */
    .sidebar .side-foot .account-chip,
    .sidebar .side-foot .btn{
      width: 100%;
      /* styles.css carries a legacy global rule: button { margin-left: 8px }.
         The account chip is a span and Sign out is a button element, so that
         rule shifted only one of the pair and left them permanently offset by
         8px. Reset the margin here rather than relying on that file. */
      margin: 0;
      /* Fixed, not min-height: the tier badge inside the chip is taller than the
         text line and would otherwise stretch that box past the button. */
      height: 38px;
      padding: 9px 12px;
      font-size: 12px;
      font-weight: 600;
      line-height: 18px;
      border-radius: 9px;
      border: 1px solid var(--stroke);
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }
    .side-foot .account-chip{
      background: var(--surface-2);
      border-color: var(--stroke);
      color: var(--text);
      /* A long username would otherwise spill past the border and make this
         box look a different size from the Sign out button beneath it. Clip
         the name instead; the icon and tier badge always keep their space. */
      overflow: hidden;
    }
    .side-foot .account-chip > svg,
    .side-foot .account-chip .tier-badge{ flex: 0 0 auto; }
    .side-foot .account-chip #currentUserName{
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .side-foot .btn{
      justify-content: flex-start;
      text-align: left;
      color: var(--muted);
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    .side-foot .btn.ghost:hover{
      background: var(--surface-2);
      color: var(--text);
      border-color: transparent;
    }
    .main-area{ min-width: 0; display:flex; flex-direction:column; }
    .content{
      width: 100%;
      max-width: 1480px;
      margin: 0 auto;
      padding: 24px 28px 48px;
      flex: 1 1 auto;
    }
    .view{ display:none; }
    .view.active{ display:block; }
    .view > * + *{ margin-top: var(--gap); }
    .page-heading{ min-width: 0; }
    .page-heading h2{
      margin: 0;
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .page-heading p{
      margin: 2px 0 0;
      font-size: 12px;
      color: var(--muted2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ------------------------------------------------- Top bar */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 30;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: var(--gap);
      padding: 14px 28px;
      border-bottom: 1px solid rgba(226,232,240,0.8);
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(14px) saturate(1.4);
      -webkit-backdrop-filter: blur(14px) saturate(1.4);
      box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 0;
    }
    .logo{
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #ffffff;
      border: 1px solid var(--stroke);
      display:flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .logo img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 4px;
      display:block;
      background: #ffffff;
    }
    .brand h1{
      margin:0;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .brand p{
      margin: 2px 0 0;
      font-size: 12px;
      color: var(--muted2);
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .chipset{
      display:flex;
      align-items:center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content:flex-end;
    }
    /* Chipset lives in the sidebar: render as a vertical menu section */
    .sidebar .chipset{
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 4px;
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid var(--stroke);
    }
    .sidebar .chipset .btn{
      width: 100%;
      justify-content: flex-start;
      text-align: left;
      border-color: transparent;
      background: transparent;
      color: var(--muted);
      font-weight: 600;
      padding: 10px 12px;
      border-radius: 10px;
      box-shadow: none;
    }
    .sidebar .chipset .btn:hover{
      background: var(--surface-2);
      color: var(--text);
      border-color: transparent;
    }
    .sidebar .chipset .chip{
      width: 100%;
      justify-content: flex-start;
      margin-top: 6px;
    }
    .sidebar .chipset .notif-dot{
      position: absolute;
      top: 10px;
      right: 12px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap: 7px;
      padding: 7px 12px;
      border-radius: 8px;
      border: 1px solid var(--stroke);
      background: var(--surface-2);
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
    }

    /* ------------------------------------------------- Hero */
    .hero{
      margin-top: 0;
      padding: 30px 32px 28px;
      border-radius: 20px;
      border: 1px solid var(--stroke);
      background:
        radial-gradient(720px 300px at 90% -30%, rgba(6,182,212,0.10), transparent 55%),
        radial-gradient(520px 280px at -6% 130%, rgba(13,148,136,0.09), transparent 55%),
        var(--surface);
      box-shadow: var(--shadow-md);
      position: relative;
      overflow: hidden;
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:-1px;
      background: transparent; /* painted by per-account branding when set */
      pointer-events:none;
    }
    .hero:after{
      content:"";
      position:absolute;
      inset: 0 0 auto 0;
      height: 3px;
      background: linear-gradient(90deg, var(--accent), rgba(6,182,212,0.75) 45%, rgba(6,182,212,0.10) 85%, transparent);
      pointer-events:none;
    }
    /* When an account's custom branding is active, its wash replaces the strip */
    html:has(#brandStyle) .hero:after{ display:none; }
    .hero > *{ position:relative; }
    .hero-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
    }
    @media (min-width: 920px){
      .hero-grid{
        grid-template-columns: 1.25fr 0.75fr;
        align-items: center;
      }
    }
    .hero h2{
      margin:0;
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.12;
      background: linear-gradient(100deg, var(--text) 35%, var(--accent-deep) 78%, #0891B2 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      width: fit-content;
    }
    .hero small{
      display:block;
      margin-top: 12px;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.65;
      max-width: 64ch;
    }
    .hero-cards{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content:flex-start;
    }
    @media (min-width: 920px){
      .hero-cards{ justify-content:flex-end; }
    }
    .mini{
      padding: 13px 16px;
      border-radius: var(--radius2);
      border: 1px solid rgba(13,148,136,0.18);
      background: linear-gradient(160deg, rgba(13,148,136,0.05), rgba(6,182,212,0.03)), var(--surface);
      box-shadow: var(--shadow);
      min-width: 170px;
    }
    .mini .k{
      font-size: 10.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent-deep);
      margin-bottom: 5px;
    }
    .mini .v{
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .status{
      display:none;
      align-items:flex-start;
      gap:10px;
      padding:10px 14px;
      border-radius:10px;
      border:1px solid var(--stroke);
      background: var(--surface-2);
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.5;
      /* Per-file skip reasons and warnings are sent as separate lines. */
      white-space: pre-line;
      margin-top: 12px;
    }

    /* ------------------------------------------------- Layout shells */
    .page-sections{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      margin-top: var(--gap);
    }
    .card{
      border: 1px solid var(--stroke);
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      min-width: 0;
    }
    .card-head{
      padding: 18px 20px 14px;
      border-bottom: 1px solid #EEF2F6;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
    }
    .card-head h3{
      margin:0;
      font-family: var(--font-display);
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: 0;
      display:flex;
      align-items:center;
      gap: 9px;
    }
    .card-head p{
      margin: 5px 0 0;
      color: var(--muted2);
      font-size: 12.5px;
      line-height: 1.45;
    }
    .card-body{
      padding: var(--pad);
      display:flex;
      flex-direction:column;
      min-height: 0;
    }

    /* ------------------------------------------------- Dashboard */
    .dashboard{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
    }
    .dashboard-metrics{
      display:grid;
      grid-template-columns: repeat(1, 1fr);
      gap: var(--gap);
    }
    @media (min-width: 700px){
      .dashboard-metrics{
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1100px){
      .dashboard-metrics{
        grid-template-columns: repeat(4, 1fr);
      }
    }
    .stat-card{
      border: 1px solid var(--stroke);
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      min-height: 126px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position: relative;
      overflow: hidden;
      transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
    }
    .stat-card:before{
      content:"";
      position:absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: var(--accent-grad);
      opacity: 0.85;
    }
    .stat-card:hover{
      border-color: rgba(13,148,136,0.35);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .stat-label{
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--muted2);
      margin-bottom: 8px;
      font-weight: 600;
    }
    .stat-value{
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
      background: linear-gradient(120deg, #0B1626 20%, #0A7E74 90%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      width: fit-content;
      max-width: 100%;
      line-height: 1.12;
      font-variant-numeric: tabular-nums;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .stat-sub{
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted2);
      line-height: 1.45;
    }
    .dashboard-top,
    .dashboard-bottom{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      align-items:stretch;
    }
    @media (min-width: 1100px){
      .dashboard-top,
      .dashboard-bottom{
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.82fr);
      }
      .dashboard-top > .card,
      .dashboard-bottom > .card{
        height: 550px;
      }
    }
    .chart-card .card-body{
      padding: 16px 20px 20px;
    }
    .chart-wrap,
    .small-chart-wrap{
      height: 420px;
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
    }
    .chart-wrap canvas,
    .small-chart-wrap canvas{
      width: 100% !important;
      height: 100% !important;
      display:block;
    }
    .comparison-stack{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-content:start;
    }
    .comparison-mini{
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      background: var(--surface-2);
      padding: 16px 18px;
      min-height: 88px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    /* ------------------------------------------------- Main 3-column grid */
    .main-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      align-items:stretch;
    }
    @media (min-width: 1100px){
      .main-grid{
        grid-template-columns: var(--side-col) minmax(0, 1fr) var(--side-col);
      }
    }
    .column{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      min-width: 0;
      align-content:start;
    }
    @media (min-width: 1100px){
      .left-column{
        grid-template-rows: 1fr 1fr;
        height: var(--lower-row-height);
      }
      .center-column{
        grid-template-rows: 1fr;
        height: var(--lower-row-height);
      }
      .right-column{
        grid-template-rows: 1fr;
        height: var(--lower-row-height);
      }
    }
    .upload-card,
    .library-card,
    .ask-card,
    .history-card{
      display:flex;
      flex-direction:column;
      min-height: 0;
    }
    @media (min-width: 1100px){
      .upload-card,
      .library-card,
      .ask-card,
      .history-card{
        height: 100%;
      }
    }

    /* ------------------------------------------------- Upload drop zone */
    .drop{
      border: 1.5px dashed var(--stroke-strong);
      background: var(--surface-2);
      border-radius: var(--radius2);
      padding: 18px;
      display:flex;
      gap: 14px;
      align-items:flex-start;
      cursor:pointer;
      user-select:none;
      transition: border-color .15s ease, background .15s ease;
      position: relative;
      overflow:hidden;
      margin-top: 12px;
      min-height: 96px;
    }
    .drop:hover{
      border-color: var(--accent);
      background:
        radial-gradient(300px 120px at 50% 0%, rgba(6,182,212,0.10), transparent 70%),
        var(--accent-tint);
      box-shadow: 0 0 0 4px rgba(13,148,136,0.08);
    }
    .drop:before{
      content:"";
      position:absolute;
      inset:-1px;
      background: transparent; /* painted by per-account branding when set */
      pointer-events:none;
    }
    .drop > *{ position: relative; }
    .drop .icon{
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display:grid;
      place-items:center;
      background: var(--accent-tint);
      border: 1px solid rgba(13,148,136,0.22);
      flex: 0 0 auto;
    }
    .drop strong{
      display:block;
      font-size: 13px;
      margin-bottom: 4px;
      font-weight: 600;
    }
    .drop span{
      display:block;
      color: var(--muted2);
      font-size: 12.5px;
      line-height: 1.45;
    }
    .row{
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--gap);
      align-items:center;
      margin-top: 12px;
    }

    /* ------------------------------------------------- Buttons */
    .btn{
      border: 1px solid var(--stroke-strong);
      background: var(--surface);
      color: var(--text);
      padding: 9px 15px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      user-select: none;
      white-space: nowrap;
      min-width: 0;
      font-family: inherit;
      box-shadow: 0 1px 2px rgba(11,22,38,0.06);
    }
    .btn:hover{
      background: var(--surface-2);
      border-color: #B8C4D2;
    }
    .btn:active{ box-shadow: none; transform: translateY(1px); }
    .btn.primary{
      background: var(--accent-grad);
      border-color: transparent;
      box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,0.22);
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(8,60,54,0.25);
    }
    .btn.primary:hover{
      background: linear-gradient(135deg, #0A7E74 0%, #0D9488 55%, #0891B2 100%);
      border-color: transparent;
      box-shadow: 0 12px 34px rgba(13,148,136,0.42), inset 0 1px 0 rgba(255,255,255,0.22);
    }
    .btn.success{
      background: linear-gradient(135deg, #101F33 0%, #16283D 100%);
      border-color: transparent;
      box-shadow: 0 8px 22px rgba(11,22,38,0.32), inset 0 1px 0 rgba(255,255,255,0.10);
      color: #ffffff;
    }
    .btn.success:hover{
      background: linear-gradient(135deg, #0C1726 0%, #101F33 100%);
      border-color: transparent;
    }
    .btn.ghost{
      background: transparent;
      border-color: var(--stroke);
      box-shadow: none;
      padding: 8px 12px;
      font-weight: 600;
      font-size: 12px;
      border-radius: 8px;
      color: var(--muted);
    }
    .btn.ghost:hover{
      background: var(--surface-2);
      color: var(--text);
      border-color: var(--stroke-strong);
    }
    .btn.sm{
      padding: 8px 12px;
      font-size: 12px;
      border-radius: 8px;
    }

    /* ------------------------------------------------- Form controls */
    .field-label{
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted2);
      margin-bottom: 8px;
    }
    select,
    input[type="text"],
    input[type="password"]{
      width: 100%;
      min-width: 0;
      padding: 12px 42px 12px 14px;
      border-radius: var(--radius2);
      border: 1px solid var(--stroke-strong);
      background-color: var(--surface);
      color: var(--text);
      outline: none;
      font-size: 13px;
      font-family: inherit;
      box-shadow: 0 1px 2px rgba(16,24,40,0.04);
      transition: border-color .15s ease, box-shadow .15s ease;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 46px;
    }
    select:focus,
    input[type="text"]:focus,
    input[type="password"]:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--ring), 0 4px 14px rgba(13,148,136,0.10);
      background: #ffffff;
    }
    select{
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
      background-position:
        calc(100% - 19px) calc(50% - 2px),
        calc(100% - 14px) calc(50% - 2px);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      cursor: pointer;
    }
    input[type="text"]::placeholder,
    input[type="password"]::placeholder{
      color: var(--muted2);
    }
    .login-card input[type="text"],
    .login-card input[type="password"] {
      padding: 12px 14px;
    }

    /* ------------------------------------------------- Library toolbar */
    .library-toolbar{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin: 0 0 14px;
    }
    .library-toolbar select{
      min-height: 48px;
      font-size: 13.5px;
      padding: 13px 44px 13px 16px;
    }
    .library-actions{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    /* ------------------------------------------------- Ask / answer area */
    .chatbox{
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items:center;
      margin-top: 14px;
    }
    .chatbox .btn{ min-height: 46px; padding-left: 22px; padding-right: 22px; }
    .answer-sources{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      margin-top: 16px;
      min-height: 0;
      flex: 1 1 auto;
      align-content:start;
      padding: 0;
    }
    /* ------------------------------------------------- Blueprint actions
       A plan can hold a dozen or more actions. Showing every control on every
       row turned the list into a wall of widgets that buried the actual text,
       so each action collapses to a single scannable line and opens on click. */
    .bp-group{ margin-top: 22px; }
    .bp-group:first-of-type{ margin-top: 6px; }
    .bp-group-h{
      display:flex; align-items:center; gap:9px;
      padding: 0 0 7px; margin-bottom: 2px;
      border-bottom: 1px solid var(--stroke);
    }
    .bp-group-h .lbl{
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
      font-weight: 700; color: var(--muted2);
    }
    .bp-group-h .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
    .bp-group-h .n{ font-size: 11.5px; color: var(--muted2); margin-left:auto; }

    .bp-item{ border-bottom: 1px solid #EEF2F6; }
    .bp-item:last-child{ border-bottom: none; }
    .bp-row{
      display:flex; align-items:center; gap: 10px;
      padding: 11px 4px; cursor: pointer; user-select: none;
      transition: background .12s ease;
    }
    .bp-row:hover{ background: var(--surface-2); }
    .bp-caret{
      flex:0 0 auto; width:14px; text-align:center; color: var(--muted2);
      font-size: 10px; transition: transform .16s ease;
    }
    .bp-item.open .bp-caret{ transform: rotate(90deg); }
    .bp-title{
      flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600;
      color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .bp-item.done .bp-title{ color: var(--muted2); text-decoration: line-through; }
    .bp-owner{
      flex:0 0 auto; font-size: 11.5px; color: var(--muted);
      max-width: 120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .bp-owner.none{ color: var(--muted2); font-style: italic; }
    /* Effort and impact as two small bars rather than repeating the words on
       every row, where they were near-identical and pure noise. */
    .bp-ei{ display:inline-flex; gap:3px; flex:0 0 auto; align-items:flex-end; height:12px; }
    .bp-ei i{ display:block; width:4px; border-radius:1px; background: var(--stroke-strong); }
    .bp-ei i[data-l="low"]{ height:4px; }
    .bp-ei i[data-l="medium"]{ height:8px; }
    .bp-ei i[data-l="high"]{ height:12px; background: var(--accent); }
    .bp-status{
      flex:0 0 auto; width:auto; min-height:26px; padding:3px 24px 3px 9px;
      font-size:11px; font-weight:600; border-radius:999px; min-width:0;
      background-position: calc(100% - 12px) calc(50% - 1px), calc(100% - 8px) calc(50% - 1px);
    }
    .bp-detail{ padding: 2px 4px 16px 28px; }
    .bp-detail p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:0 0 10px; }
    .bp-meta{ font-size:11.5px; color:var(--muted2); margin-bottom:10px; }
    .bp-ev{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
    .bp-ev .k{
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
      font-weight:700; color:var(--muted2);
    }
    .bp-controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .bp-controls select{ width:auto; min-height:32px; padding:5px 26px 5px 10px; font-size:11.5px; }

    /* Ask card: the answer takes all the free height and sources sits at the
       bottom of the column, so the middle card doesn't leave a large dead gap
       underneath. Both boxes scroll internally rather than growing the card. */
    .ask-card .card-body{ overflow-y: auto; min-height: 0; flex: 1 1 auto; }
    .ask-card .answer-sources{
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1 1 auto;
      min-height: 0;
    }
    .ask-card .answer{
      flex: 1 1 auto;
      height: auto;
      min-height: 150px;
    }
    .ask-card .evidence-box{ flex: 0 0 auto; }
    .ask-card .sources{
      flex: 0 0 auto;
      height: auto;
      min-height: 0;
      max-height: 210px;
      margin-top: auto;   /* pin to the bottom even when the answer is short */
    }
    .ask-card .suggest-box,
    .ask-card .conv-bar,
    .ask-card .fb-bar{ flex: 0 0 auto; }
    .answer,
    .sources,
    .history-list-wrap,
    .doc-list-wrap{
      border: 1px solid var(--stroke);
      background: var(--surface-2);
      border-radius: var(--radius2);
      width: auto;
      min-width: 0;
      margin: 0;
      padding: 16px;
    }
    .answer{
      min-height: 0;
      height: 200px;
      overflow-y: auto;
      flex: 0 0 auto;
    }
    .sources{
      height: 200px;
      min-height: 200px;
      max-height: 200px;
      overflow-y: auto;
      flex: 0 0 auto;
      position: relative;
      z-index: 1;
    }
    .doc-list-wrap{
      min-height: 0;
      overflow-y: auto;
      flex: 1 1 auto;
    }
    .history-list-wrap{
      min-height: 0;
      overflow-y: auto;
      flex: 1 1 auto;
    }
    .answer-text{
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      font-size: 13px;
      line-height: 1.7;
      background: transparent;
    }
    .evidence-box{
      display: none;
      padding: 16px;
      border: 1px solid var(--stroke);
      background: var(--surface);
      border-radius: var(--radius2);
      margin: 0;
    }
    .evidence-label{
      font-size: 10.5px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .evidence-content{
      font-size: 13px;
      line-height: 1.75;
      color: var(--text);
      background: var(--surface-2);
      padding: 14px;
      border-radius: 8px;
      border-left: 3px solid var(--accent);
    }
    ul{
      margin: 0;
      padding-left: 0;
      list-style: none;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.5;
    }
    li{
      margin: 0;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
      padding: 12px 0;
      border-bottom: 1px solid #EAEEF3;
    }
    li:last-child{
      border-bottom: none;
    }
    .src-meta{
      display:flex;
      flex-direction:column;
      gap: 2px;
      min-width:0;
      flex: 1 1 auto;
    }
    .src-title{
      color: var(--text);
      font-size: 12.5px;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .src-sub{
      color: var(--muted2);
      font-size: 11.5px;
      margin-top: 2px;
    }
    .list-item{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #EAEEF3;
    }
    .list-item:last-child{
      border-bottom:none;
    }
    .list-item-main{
      flex: 1 1 auto;
      min-width: 0;
    }
    .list-item-title{
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
      overflow-wrap:anywhere;
    }
    .list-item-sub{
      font-size: 11.5px;
      color: var(--muted2);
      line-height: 1.5;
    }
    .empty-state{
      font-size: 12.5px;
      color: var(--muted2);
    }

    /* ------------------------------------------------- Modals */
    .modal-backdrop{
      position: fixed;
      inset: 0;
      background: rgba(8,17,28,0.55);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 50;
    }
    .modal{
      width: min(920px, 100%);
      max-height: min(80vh, 820px);
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid var(--stroke);
      background: var(--surface);
      box-shadow: var(--shadow-lg);
      display:flex;
      flex-direction:column;
    }
    .modal-head{
      padding: 14px 18px;
      border-bottom: 1px solid #EEF2F6;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
    }
    .modal-title{
      display:flex;
      flex-direction:column;
      gap: 2px;
      min-width: 0;
    }
    .modal-title strong{
      font-size: 13.5px;
      font-weight: 650;
      color: var(--text);
      white-space: nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .modal-title span{
      font-size: 12px;
      color: var(--muted2);
    }
    .modal-body{
      padding: 20px;
      overflow:auto;
      background: var(--surface-2);
    }
    .snippet{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size: 14px;
      line-height: 1.75;
      color: var(--text);
      white-space: pre-wrap;
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      padding: 18px 18px 20px;
      box-shadow: var(--shadow);
    }
    mark{
      background: rgba(13,148,136,0.16);
      color: var(--text);
      padding: 1px 3px;
      border-radius: 4px;
    }
    .guide-content{
      display:flex;
      flex-direction:column;
      gap: 14px;
    }
    .guide-section{
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      padding: 16px 18px;
    }
    .guide-section h4{
      margin: 0 0 8px 0;
      font-size: 13.5px;
      font-weight: 650;
      color: var(--text);
    }
    .guide-section p,
    .guide-section li{
      font-size: 13px;
      color: var(--muted);
      line-height: 1.6;
      border-bottom: none;
      padding: 0;
      margin: 0;
    }
    .guide-section ul{
      padding-left: 18px;
      list-style: disc;
    }
    .guide-section ul li{
      margin: 6px 0;
      display:list-item;
    }
    #fileInput{ display:none !important; }

    /* -----------------------------------------------
       PDF preview modal mode
    ----------------------------------------------- */
    .modal.pdf-mode {
      max-height: 94vh;
      height: 94vh;
    }
    .modal.pdf-mode .modal-body {
      flex: 1 1 0;
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #sourcePdfFrame {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      border: none;
      display: block;
    }

    /* -----------------------------------------------
       Login overlay
    ----------------------------------------------- */
    #loginOverlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background-color: var(--bg);
      background-image:
        radial-gradient(1000px 540px at 80% -14%, rgba(6,182,212,0.13), transparent 58%),
        radial-gradient(820px 520px at 4% 110%, rgba(13,148,136,0.13), transparent 55%),
        radial-gradient(560px 340px at 50% 40%, rgba(255,255,255,0.85), transparent 70%);
      background-repeat: no-repeat;
      background-attachment: fixed;
      transition: opacity 0.35s ease;
    }
    #loginOverlay.fade-out {
      opacity: 0;
      pointer-events: none;
    }
    .login-card {
      width: min(430px, 100%);
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: 22px;
      box-shadow:
        var(--shadow-lg),
        0 0 60px rgba(13,148,136,0.10);
      padding: 38px 34px 32px;
    }
    .login-logo-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 22px;
    }
    .login-logo-wrap .logo {
      width: 60px;
      height: 60px;
      border-radius: 16px;
      box-shadow: 0 12px 30px rgba(13,148,136,0.28);
    }
    .login-title {
      margin: 0 0 6px;
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.01em;
      text-align: center;
      color: var(--text);
    }
    .login-sub {
      margin: 0 0 24px;
      font-size: 13px;
      color: var(--muted);
      text-align: center;
      line-height: 1.5;
    }
    .login-fields {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 6px;
    }
    .login-field-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .login-field-group .field-label {
      margin-bottom: 0;
    }
    .login-error {
      min-height: 22px;
      font-size: 12.5px;
      color: var(--danger);
      margin: 8px 0 10px;
      text-align: center;
      line-height: 1.4;
    }
    .login-submit-btn {
      width: 100%;
      padding: 12px 16px;
      font-size: 14px;
      border-radius: var(--radius2);
      margin-bottom: 16px;
    }
    .login-toggle {
      margin: 0;
      font-size: 12.5px;
      color: var(--muted);
      text-align: center;
    }
    .login-toggle a {
      color: var(--accent);
      font-weight: 600;
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: rgba(13,148,136,0.3);
    }
    .login-toggle a:hover {
      color: var(--accent-deep);
    }

    /* -----------------------------------------------
       Phase 3: Streaming cursor
    ----------------------------------------------- */
    .answer-text.streaming::after {
      content: '▋';
      animation: blink 1s step-end infinite;
      color: var(--accent);
      margin-left: 2px;
    }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

    /* -----------------------------------------------
       Phase 3: Feedback bar
    ----------------------------------------------- */
    .fb-bar {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 14px 0 6px;
      margin-top: 10px;
      border-top: 1px solid #EEF2F6;
      flex-wrap: wrap;
    }
    .fb-label { font-size: 12px; color: var(--muted); }
    .fb-btn {
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid var(--stroke-strong);
      background: var(--surface);
      cursor: pointer;
      font-size: 13px;
      font-family: inherit;
      transition: all 0.15s ease;
    }
    .fb-btn:hover { background: var(--surface-2); border-color: #C4CDD8; }
    .fb-btn.active-pos { background: rgba(13,148,136,0.10); border-color: rgba(13,148,136,0.45); }
    .fb-btn.active-neg { background: rgba(217,45,32,0.08); border-color: rgba(217,45,32,0.38); }
    .fb-btn.active-flag { background: rgba(220,104,3,0.08); border-color: rgba(220,104,3,0.38); }

    /* -----------------------------------------------
       Phase 3: Conversation bar
    ----------------------------------------------- */
    .conv-bar {
      display: none;
      align-items: center;
      gap: 10px;
      row-gap: 10px;
      flex-wrap: wrap;
      padding: 16px 0 2px;
      margin-top: 10px;
      border-top: 1px solid #EEF2F6;
    }
    .conv-bar .btn { flex-shrink: 0; }
    .conv-badge {
      background: var(--accent-tint);
      border: 1px solid rgba(13,148,136,0.28);
      border-radius: 999px;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 600;
      color: rgba(16,27,41,0.82);
    }

    /* -----------------------------------------------
       Phase 3: Admin panel overlay
    ----------------------------------------------- */
    #adminPanel, #companyPanel {
      position: fixed;
      inset: 0;
      z-index: 8888;
      background: rgba(16,24,40,0.40);
      backdrop-filter: blur(4px);
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 24px 18px 40px;
      overflow-y: auto;
    }
    .admin-modal {
      width: min(1100px, 100%);
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      margin: auto;
    }
    .admin-head {
      padding: 16px 22px;
      border-bottom: 1px solid #EEF2F6;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .admin-head strong { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
    .admin-tabs {
      display: flex;
      gap: 2px;
      padding: 10px 18px 0;
      border-bottom: 1px solid #EEF2F6;
      flex-wrap: wrap;
    }
    .admin-tab, .co-tab {
      padding: 9px 14px 11px;
      border-radius: 0;
      border: none;
      border-bottom: 2px solid transparent;
      background: transparent;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted2);
      transition: color 0.15s, border-color 0.15s;
      font-family: inherit;
      margin-bottom: -1px;
    }
    .admin-tab:hover, .co-tab:hover { color: var(--text); }
    .admin-tab.active, .co-tab.active {
      background: transparent;
      border-bottom-color: var(--accent);
      color: var(--text);
    }
    .admin-body { padding: 22px; min-height: 400px; }
    .admin-section, .co-section { display: none; }
    .admin-section.active, .co-section.active { display: block; }
    .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .admin-table th {
      text-align: left;
      padding: 10px 12px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted2);
      border-bottom: 1px solid var(--stroke);
      background: var(--surface-2);
    }
    .admin-table td {
      padding: 11px 12px;
      border-bottom: 1px solid #EEF2F6;
      color: var(--text);
      vertical-align: middle;
    }
    .admin-table tr:last-child td { border-bottom: none; }
    .role-badge, .status-badge {
      display: inline-flex;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
    }
    .role-badge.admin { background: rgba(13,148,136,0.10); color: var(--accent-deep); }
    .role-badge.user  { background: rgba(87,103,122,0.10); color: var(--muted); }
    .status-badge.enabled  { background: rgba(13,148,136,0.10); color: var(--accent-deep); }
    .status-badge.disabled { background: rgba(217,45,32,0.08); color: #B42318; }
    .flagged-entry, .audit-entry {
      padding: 12px 16px;
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      margin-bottom: 8px;
      background: var(--surface);
      font-size: 13px;
    }
    .flagged-entry .fq { font-weight: 600; margin-bottom: 4px; color: var(--text); }
    .flagged-entry .fa { color: var(--muted); font-size: 12px; line-height: 1.5; }
    .flagged-entry .fm { font-size: 11px; color: var(--muted2); margin-top: 6px; }
    .audit-entry { display: flex; gap: 12px; align-items: flex-start; }
    .audit-time   { color: var(--muted2); font-size: 11.5px; white-space: nowrap; flex-shrink: 0; }
    .audit-action { font-weight: 600; color: var(--text); font-size: 13px; }
    .audit-detail { color: var(--muted); font-size: 12px; }
    .admin-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 14px;
      margin-bottom: 22px;
    }
    .admin-stat-box {
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      background: var(--surface-2);
      padding: 16px;
    }
    .shared-badge {
      font-size: 10px;
      background: rgba(13,148,136,0.10);
      color: var(--accent-deep);
      padding: 1px 7px;
      border-radius: 999px;
      font-weight: 600;
      margin-left: 4px;
    }

    /* -----------------------------------------------
       Phase 4: tier & role badges
    ----------------------------------------------- */
    .tier-badge {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 999px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .tier-badge.basic      { background: rgba(87,103,122,0.10); color: var(--muted); }
    .tier-badge.pro        { background: rgba(46,111,216,0.10);  color: #1D4FA8; }
    .tier-badge.enterprise { background: rgba(13,148,136,0.10);  color: var(--accent-deep); }
    .role-badge.company_admin { background: rgba(46,111,216,0.10); color: #1D4FA8; }
    .role-badge.member    { background: rgba(87,103,122,0.10); color: var(--muted); }
    .role-badge.viewer    { background: rgba(220,104,3,0.10); color: #B54708; }

    /* -----------------------------------------------
       Phase 4: login extras (remember me, forgot, invite)
    ----------------------------------------------- */
    .login-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 10px 2px 0;
      font-size: 12.5px;
      color: var(--muted);
    }
    .remember-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      user-select: none;
    }
    .remember-label input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
    .forgot-link {
      color: var(--accent);
      font-weight: 600;
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: rgba(13,148,136,0.3);
    }
    .invite-notice {
      background: var(--accent-tint);
      border: 1px solid rgba(13,148,136,0.28);
      border-radius: var(--radius2);
      padding: 10px 14px;
      font-size: 12.5px;
      color: var(--accent-deep);
      margin-bottom: 14px;
      line-height: 1.5;
    }
    .login-success {
      min-height: 22px;
      font-size: 12.5px;
      color: var(--accent-deep);
      margin: 8px 0 10px;
      text-align: center;
      line-height: 1.4;
    }

    /* -----------------------------------------------
       Phase 4: changelog ("What's new")
    ----------------------------------------------- */
    .notif-dot {
      position: absolute;
      top: -3px;
      right: -3px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--danger);
      border: 2px solid #fff;
    }
    .changelog-entry {
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      padding: 16px 18px;
      margin-bottom: 12px;
    }
    .changelog-entry h4 { margin: 0 0 6px; font-size: 14px; font-weight: 650; color: var(--text); }
    .changelog-entry .cl-date { font-size: 11.5px; color: var(--muted2); margin-bottom: 8px; }
    .changelog-entry .cl-body { font-size: 13px; color: var(--muted); line-height: 1.6; white-space: pre-wrap; }

    /* -----------------------------------------------
       Phase 4: preferences modal
    ----------------------------------------------- */
    .prefs-group { margin-bottom: 16px; }
    .prefs-hint { font-size: 11.5px; color: var(--muted2); margin: 6px 2px 0; line-height: 1.5; }
    .pref-toggle {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 2px;
      font-size: 13px;
      color: var(--text);
      cursor: pointer;
      user-select: none;
      border-bottom: 1px solid #EEF2F6;
      line-height: 1.5;
    }
    .pref-toggle input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

    /* -----------------------------------------------
       Phase 4: admin invites / settings / changelog tabs
    ----------------------------------------------- */
    .admin-form-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 14px;
    }
    .admin-form-row input[type="text"], .admin-form-row select { min-height: 44px; padding: 10px 14px; border-radius: var(--radius2); }
    .admin-form-row select { padding-right: 40px; }
    .admin-textarea {
      width: 100%;
      min-height: 110px;
      padding: 12px 14px;
      border-radius: var(--radius2);
      border: 1px solid var(--stroke-strong);
      background: var(--surface);
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      resize: vertical;
      box-sizing: border-box;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .admin-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
    .invite-link-box {
      background: var(--surface-2);
      border: 1px dashed var(--stroke-strong);
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 12px;
      color: var(--text);
      word-break: break-all;
      margin: 8px 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .status-badge.pending { background: rgba(46,111,216,0.08); color: #1D4FA8; }
    .status-badge.used    { background: rgba(87,103,122,0.10); color: var(--muted); }
    .status-badge.expired { background: rgba(217,45,32,0.08); color: #B42318; }
    .admin-table-scroll { overflow-x: auto; }

    /* -----------------------------------------------
       Phase 4: confidence indicator (Pro)
    ----------------------------------------------- */
    .confidence-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .confidence-badge.high   { background: rgba(13,148,136,0.10);  color: var(--accent-deep); border: 1px solid rgba(13,148,136,0.28); }
    .confidence-badge.medium { background: rgba(220,104,3,0.08);  color: #B54708; border: 1px solid rgba(220,104,3,0.28); }
    .confidence-badge.low    { background: rgba(217,45,32,0.08);   color: #B42318;  border: 1px solid rgba(217,45,32,0.26); }

    /* -----------------------------------------------
       Phase 4: suggested questions (Pro)
    ----------------------------------------------- */
    .suggest-box {
      display: none;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 16px 0 2px;
      margin-top: 6px;
      border-top: 1px solid #EEF2F6;
    }
    .suggest-label {
      flex: 0 0 100%;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--muted2);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 2px;
    }
    .suggest-chip {
      border: 1px solid rgba(46,111,216,0.26);
      background: rgba(46,111,216,0.06);
      color: #1D4FA8;
      border-radius: 999px;
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      transition: background .15s ease;
    }
    .suggest-chip:hover { background: rgba(46,111,216,0.12); }

    /* -----------------------------------------------
       Phase 4: support chatbot (Enterprise)
    ----------------------------------------------- */
    #supportWidget {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 7000;
      display: none;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }
    #supportToggle {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      border: none;
      background: var(--accent-grad);
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 12px 32px rgba(13,148,136,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
      transition: box-shadow .15s ease, transform .15s ease;
    }
    #supportToggle:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(13,148,136,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
    #supportPanel {
      display: none;
      width: min(340px, calc(100vw - 40px));
      height: 440px;
      max-height: 70vh;
      background: var(--surface);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      flex-direction: column;
      overflow: hidden;
    }
    .support-head {
      padding: 13px 16px;
      background: var(--accent-grad);
      color: #fff;
      font-weight: 650;
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .support-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .support-msg {
      max-width: 85%;
      padding: 9px 12px;
      border-radius: 10px;
      font-size: 12.5px;
      line-height: 1.5;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .support-msg.user { align-self: flex-end; background: var(--accent-tint); }
    .support-msg.bot  { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--stroke); }
    .support-input {
      display: flex;
      gap: 8px;
      padding: 10px;
      border-top: 1px solid #EEF2F6;
    }
    .support-input input { flex: 1; min-height: 40px; padding: 8px 12px; }

    /* -----------------------------------------------
       Phase 4: 2FA setup + integrations admin
    ----------------------------------------------- */
    .twofa-qr { display: flex; justify-content: center; margin: 12px 0; }
    .twofa-secret {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      background: var(--surface-2);
      border: 1px dashed var(--stroke-strong);
      border-radius: 8px;
      padding: 8px 10px;
      word-break: break-all;
      margin: 8px 0;
    }
    .integration-card {
      border: 1px solid var(--stroke);
      border-radius: var(--radius2);
      background: var(--surface);
      padding: 16px;
      margin-bottom: 12px;
    }
    .intg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
    @media (max-width: 700px){ .intg-grid { grid-template-columns: 1fr; } }

    /* Document library action buttons — stacked so filenames keep their width */
    .doc-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
      align-items: stretch;
    }
    .list-item-main { min-width: 110px; }

    /* -----------------------------------------------
       Phase 4: mobile-friendly responsive design
       (all core features usable at 375px wide)
    ----------------------------------------------- */
    @media (max-width: 1000px){
      .app{ grid-template-columns: 1fr; }
      .sidebar{
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        border-right: none;
        border-bottom: 1px solid var(--stroke);
      }
      .side-nav{ flex-direction: row; margin-top: 0; margin-left: auto; }
      .nav-item{ width: auto; padding: 9px 12px; }
      .side-foot{
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
      }
      .side-foot .account-chip{ width: auto; }
      .side-foot .btn{ width: auto; padding: 8px 11px; }
      .sidebar .chipset{
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
      }
      .sidebar .chipset .btn{ width: auto; padding: 8px 11px; }
      .sidebar .chipset .chip{ width: auto; margin-top: 0; }
      .sidebar .chipset .notif-dot{ top: 5px; right: 6px; }
      .topbar{ position: static; padding: 12px 16px; }
      .page-heading p{ display: none; }
    }
    .btn, select, input[type="text"], input[type="password"] { touch-action: manipulation; }
    @media (max-width: 700px){
      .content{ padding: 12px 10px 28px; }
      .topbar{ padding: 12px; }
      .chip.decor-chip{ display:none; }
      .brand p{ display:none; }
      /* Logo-only brand on small screens — stops the logo sliding under the
         nav pills when the brand block shrinks. */
      .brand{ flex: 0 0 auto; }
      .brand h1{ display:none; }
      /* Let the top bar flow onto extra rows instead of clipping the
         What's new / Settings / Guide buttons off-screen. */
      .sidebar{ flex-wrap: wrap; row-gap: 4px; }
      .hero{ padding: 18px 16px; }
      .hero h2{ font-size: 20px; }
      .hero-cards{ display:none; }
      .chart-wrap, .small-chart-wrap{ height: 240px; }
      .stat-card{ min-height: 100px; padding: 14px; }
      .stat-value{ font-size: 22px; }
      .card-head{ padding: 14px 14px 12px; }
      .card-body{ padding: 14px; }
      .btn{ min-height: 44px; }
      .btn.sm, .btn.ghost{ min-height: 40px; }
      .chatbox{ grid-template-columns: 1fr; }
      .row{ grid-template-columns: 1fr; }
      .answer{ height: 240px; }
      .sources{ height: 170px; min-height: 170px; max-height: 170px; }
      .doc-list-wrap, .history-list-wrap{ max-height: 320px; }
      .conv-bar{ flex-wrap: wrap; }
      .conv-bar .btn{ flex: 1 1 auto; }
      .fb-bar .fb-btn{ min-height: 40px; }
      .modal{ max-height: 92vh; }
      .modal-body{ padding: 14px; }
      .login-card{ padding: 26px 18px 22px; }
      .admin-body{ padding: 14px; min-height: 300px; }
      .admin-tabs{ padding: 10px 14px 0; gap: 2px; }
      .admin-tab, .co-tab{ padding: 8px 10px; font-size: 12px; }
      .admin-table{ min-width: 640px; }
      .admin-form-row{ grid-template-columns: 1fr; }
      #adminPanel, #companyPanel{ padding: 10px 6px 24px; }
    }

    /* =====================================================================
       Lower-section refinement — document library, question history, answer
       and sources. Presentational only (scoped overrides); no markup or
       behaviour change. The library and history lists share one card style.
    ===================================================================== */
    .library-card .doc-list-wrap,
    .history-card .history-list-wrap{
      padding: 8px;
      background: var(--surface-2);
      border-color: var(--stroke);
    }
    .library-card .doc-list-wrap .list-item,
    .history-card .history-list-wrap .list-item{
      border: 1px solid var(--stroke);
      background: var(--surface);
      border-radius: var(--radius2);
      padding: 13px 14px;
      margin-bottom: 8px;
      align-items: center;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .library-card .doc-list-wrap .list-item:last-child,
    .history-card .history-list-wrap .list-item:last-child{
      margin-bottom: 0;
      border-bottom: 1px solid var(--stroke);
    }
    .library-card .doc-list-wrap .list-item:hover,
    .history-card .history-list-wrap .list-item:hover{
      border-color: var(--stroke-strong);
      box-shadow: var(--shadow-md);
    }
    .library-card .list-item-title,
    .history-card .list-item-title{
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.38;
    }
    .library-card .list-item-sub,
    .history-card .list-item-sub{
      font-size: 11px;
      color: var(--muted2);
      letter-spacing: 0.01em;
      margin-top: 4px;
    }
    .library-card .doc-actions .btn{
      padding: 6px 12px;
      font-size: 11.5px;
      min-height: 0;
      border-radius: 7px;
    }
    /* History pin button — quieter until hovered */
    .history-card .history-list-wrap .list-item .btn.ghost{
      border-color: transparent;
      background: transparent;
      opacity: 0.5;
      transition: opacity .15s ease, background .15s ease;
    }
    .history-card .history-list-wrap .list-item:hover .btn.ghost{ opacity: 1; }
    .library-card .empty-state,
    .history-card .empty-state{
      text-align: center;
      padding: 30px 14px;
      color: var(--muted2);
    }
    /* Answer + Sources cards */
    .answer-sources .answer,
    .answer-sources .sources{
      border: 1px solid var(--stroke);
      background: var(--surface);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      padding: 16px 18px 18px;
    }
    .answer-sources .answer::before,
    .answer-sources .sources::before{
      content: "Answer";
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 11px;
    }
    .answer-sources .sources::before{ content: "Sources"; }
    .answer-sources .answer-text{
      font-size: 13.5px;
      line-height: 1.78;
    }
    .answer-sources .sources li{ padding: 11px 0; }
    .answer-sources .src-title{ font-size: 12.5px; line-height: 1.5; }
    /* Indexing "Folder" row — match the select height to the New folder button */
    #uploadFolderSelect{
      min-height: 44px;
      padding-top: 10px;
      padding-bottom: 10px;
      border-radius: 8px;
    }
    #newFolderBtn{ min-height: 44px; }
    /* Library file cards — details span the full width on top, the Analyse /
       Delete buttons sit in an even row across the bottom (no side overlap). */
    .library-card .doc-list-wrap .list-item{
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .library-card .doc-list-wrap .list-item .list-item-main{
      width: 100%;
      min-width: 0;
    }
    .library-card .doc-list-wrap .list-item .doc-actions{
      flex-direction: row;
      gap: 8px;
      width: 100%;
    }
    .library-card .doc-list-wrap .list-item .doc-actions .btn,
    .library-card .doc-list-wrap .list-item > .btn{
      flex: 1 1 0;
      min-width: 0;
      padding: 7px 10px;
      font-size: 11px;
      text-align: center;
    }