/* ═══════════════════════════════════════════════════════════════
   APP SHELL — sidebar, main column, topbar, search, notifications
   Ported from the prototype: Kimi_Agent_Steelco ai/app/buyer.html
   ═══════════════════════════════════════════════════════════════ */

/* ─── app ─── */
.app{display:flex;min-height:100vh}

/* ─── sidebar ─── */
.sidebar{
  width:264px;flex:none;position:sticky;top:0;height:100vh;z-index:60;
  background:var(--navy);color:#C4CBD3;
  display:flex;flex-direction:column;
  transition:width .2s var(--ease),transform .22s var(--ease);
}
html[data-theme="dark"] .sidebar{background:var(--bg-footer);border-inline-end:1px solid var(--n-800)}
.sb-head{display:flex;align-items:center;gap:10px;padding:16px 18px;min-height:72px;flex:none}
.sb-logo{display:flex;align-items:center;gap:10px;min-height:44px}
.sb-logo img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.sb-word{font-family:var(--font-display);font-weight:800;font-size:1rem;color:#FFFFFF;line-height:1.2;white-space:nowrap}
.sb-word small{display:block;font-family:var(--font-body);font-weight:500;font-size:.6875rem;color:var(--brushed)}
.sb-collapse{
  width:44px;height:44px;border-radius:8px;flex:none;margin-inline-start:auto;
  display:inline-flex;align-items:center;justify-content:center;color:#9CA4AD;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.sb-collapse:hover{background:var(--n-800);color:#FFFFFF}
.sb-collapse svg{width:20px;height:20px;transition:transform .2s var(--ease)}
html[dir="ltr"] .sb-collapse svg{transform:scaleX(-1)}
.app.sb-collapsed .sb-collapse svg{transform:rotate(180deg)}
html[dir="ltr"] .app.sb-collapsed .sb-collapse svg{transform:rotate(180deg) scaleX(-1)}
.sb-nav{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.sb-item{
  display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 14px;border-radius:10px;
  font-weight:600;font-size:.9375rem;color:#C4CBD3;width:100%;text-align:start;
  transition:background .16s var(--ease),color .16s var(--ease);
  white-space:nowrap;
}
.sb-item:hover{background:var(--n-800);color:#FFFFFF}
.sb-item.active{background:var(--royal);color:#FFFFFF;box-shadow:var(--shadow-flat)}
html[data-theme="dark"] .sb-item.active{background:var(--ai-blue)}
.sb-item svg{width:22px;height:22px;flex:none}
/* Zamzam nav item — the only glowing icon (AI presence) */
.sb-item.zamzam svg{filter:drop-shadow(0 0 7px rgba(49,168,255,.75))}
.sb-foot{padding:14px 12px;border-top:1px solid var(--n-800);flex:none}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.sb-user-meta{min-width:0}
.sb-user-name{font-size:.8125rem;font-weight:600;color:#F3F5F7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-role{font-size:.6875rem;color:var(--brushed)}
/* Company avatar. Round, not a hexagon: this slot carries the customer's own
   brand logo, and a hexagonal mask crops the corners off whatever they upload. */
.hex-avatar{
  width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--grad-primary);color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-family:var(--font-display);font-size:.9375rem;
}
.hex-avatar img{width:100%;height:100%;object-fit:cover}
/* collapsed rail: icons only */
.app.sb-collapsed .sidebar{width:78px}
.app.sb-collapsed .sb-word,
.app.sb-collapsed .sb-item span,
.app.sb-collapsed .sb-user-meta{display:none}
.app.sb-collapsed .sb-item{justify-content:center;padding:12px}
.app.sb-collapsed .sb-head{justify-content:center;padding:16px 10px}
.app.sb-collapsed .sb-collapse{margin-inline-start:0}

/* ─── main column ─── */
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ─── topbar ─── */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--bg);border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-flat);
}
.topbar-inner{display:flex;align-items:center;gap:12px;min-height:72px;padding:0 24px}
.tb-burger{display:none}
.tb-title{font-size:1.125rem;font-weight:700;color:var(--heading);white-space:nowrap}
.tb-search{position:relative;flex:1;max-width:420px;margin-inline-start:8px}
.tb-search input{
  width:100%;min-height:44px;border-radius:var(--radius-chip);
  border:1px solid var(--border);background:var(--bg-section);
  padding:8px 42px 8px 16px;padding-inline-start:42px;padding-inline-end:16px;
  font-family:var(--font-body);font-size:.875rem;color:var(--heading);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
html[data-theme="dark"] .tb-search input{background:var(--raised)}
.tb-search input:focus{border-color:var(--ai-blue);box-shadow:0 0 0 3px rgba(7,90,160,.14)}
.tb-search input::placeholder{color:var(--caption)}
.tb-search .s-ic{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--caption);pointer-events:none}
.tb-search .s-ic svg{width:18px;height:18px;display:block}
.search-results{
  position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:70;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-raised);overflow:hidden;display:none;max-height:320px;overflow-y:auto;
}
.search-results.open{display:block}
.sr-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  padding:12px 16px;min-height:48px;font-size:.875rem;
  transition:background .14s var(--ease);
}
.sr-item:hover{background:var(--row-hover)}
.sr-item .sr-ref{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.75rem;color:var(--caption);margin-inline-start:auto;direction:ltr}
.sr-item svg{width:18px;height:18px;color:var(--brushed);flex:none}
.sr-empty{padding:14px 16px;font-size:.8125rem;color:var(--caption)}
.tb-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
/* notifications */
.notif-wrap{position:relative}
.notif-badge{
  position:absolute;top:8px;inset-inline-end:8px;min-width:16px;height:16px;
  border-radius:999px;background:var(--error);color:#FFFFFF;
  font-family:var(--font-mono);font-size:.625rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  border:2px solid var(--bg);
}
.notif-panel{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:min(340px,90vw);z-index:70;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-raised);display:none;overflow:hidden;
}
.notif-panel.open{display:block}
.notif-head{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:.875rem;color:var(--heading)}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:.8125rem;line-height:1.6}
.notif-item:last-child{border-bottom:none}
.notif-item .n-ic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--bg-section);border:1px solid var(--border);color:var(--ai-blue)}
html[data-theme="dark"] .notif-item .n-ic{background:var(--raised)}
.notif-item .n-ic svg{width:18px;height:18px}
.notif-item .n-time{font-size:.6875rem;color:var(--caption);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* toggles (solid-surface variants of the index header pattern) */
.lang-toggle{
  display:inline-flex;align-items:center;border-radius:var(--radius-chip);
  border:1px solid var(--border-strong);overflow:hidden;min-height:44px;
  font-size:.8125rem;font-weight:600;background:var(--surface);
}
.lang-toggle span{display:inline-flex;align-items:center;align-self:stretch;padding:6px 12px;color:var(--body);transition:background .16s var(--ease),color .16s var(--ease)}
.lang-toggle span[aria-pressed="true"]{background:var(--royal);color:#FFFFFF}
html[data-theme="dark"] .lang-toggle span[aria-pressed="true"]{background:var(--ai-blue)}
.theme-toggle{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);color:var(--body);background:var(--surface);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.theme-toggle:hover{background:var(--bg-section)}
html[data-theme="dark"] .theme-toggle:hover{background:var(--raised)}
.theme-toggle svg{width:18px;height:18px}
.icon-sun{display:none}.icon-moon{display:block}
html[data-theme="dark"] .icon-sun{display:block}
html[data-theme="dark"] .icon-moon{display:none}
@media (max-width:960px){
  .tb-burger{display:inline-flex}
  .tb-title{display:none}
}
@media (max-width:640px){
  .topbar-inner{padding:0 12px;gap:8px;flex-wrap:wrap}
  .tb-search{max-width:none;flex-basis:100%;order:5;margin-inline-start:0;margin-bottom:10px}
  .tb-actions .hex-avatar{width:38px;height:38px}
  .lang-toggle span{padding:6px 9px}
  .zamzam-hero{padding:16px}
}
/* mobile sidebar → overlay drawer */
.sb-overlay{
  position:fixed;inset:0;background:rgba(14,17,22,.55);z-index:55;
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s;
}
@media (max-width:960px){
  .sidebar{
    position:fixed;top:0;bottom:0;height:auto;width:min(300px,84vw);
    border-inline-end:1px solid var(--n-800);
  }
  html[dir="rtl"] .sidebar{right:0;left:auto;transform:translateX(105%)}
  html[dir="ltr"] .sidebar{left:0;right:auto;transform:translateX(-105%)}
  .app.sb-open .sidebar{transform:translateX(0)}
  .app.sb-open .sb-overlay{opacity:1;visibility:visible}
  .sb-collapse{display:none}
  .app.sb-collapsed .sidebar{width:min(300px,84vw)}
  .app.sb-collapsed .sb-word,.app.sb-collapsed .sb-item span,.app.sb-collapsed .sb-user-meta{display:block}
  .app.sb-collapsed .sb-item{justify-content:flex-start;padding:12px 14px}
}