/* UI kit -- the app shell: floating glass sidebar + main panel, topbar,
   brand block, user card, navigation, collapsed sidebar, RTL<->LTR relayout,
   mobile drawer. Needs tokens.css + base.css. Behaviour in ui.js.

   Markup skeleton (see demo/index.html for the full thing):
     <div class="ambient">…</div>
     <div class="corner-toggles" id="cornerToggles">…</div>   (capsule.css)
     <div class="app" id="app" dir="rtl">
       <div class="sidebar-scrim" id="sidebarScrim"></div>
       <aside class="sidebar">
         <div class="brand">  .brand-mark  .brand-text  .sidebar-collapse  </div>
         <div class="conversation-search"> .search-input-shell </div>      (optional)
         <div class="sidebar-actions">  .btn.nav-cta  .nav-section-label  .btn / .sidebar-menu-group  </div>
         <div class="sidebar-scroll"> … </div>                              (optional, fills the middle)
         <div class="user-card"> .avatar .user-meta </div>
         <div class="sidebar-foot"> .btn </div>
       </aside>
       <main class="main">
         <div class="topbar">  .btn-hamburger  .topbar-title  .topbar-tools#topbarTools  </div>
         <section class="view"> <div class="view-scroll"> <div class="view-inner"> … </div></div></section>
       </main>
     </div>

   Map:
     1. frame      -- .app grid, panels as rounded glass, entrance
     2. sidebar    -- brand, search, nav, user card, foot
     3. main       -- topbar, tools cluster, view + scroll container
     4. collapsed  -- .app.sidebar-collapsed (desktop): 84px, icons only
     5. relayout   -- dir flip animation classes (is-relayout-*)
     6. mobile     -- <=720px: sidebar becomes a drawer */

/* ---------- 1. frame ---------- */
  .app{
    position:relative;z-index:1;
    height:100vh;height:100dvh;
    display:grid;
    grid-template-columns:286px minmax(0,1fr);
    gap:16px;padding:16px;
    min-height:0;min-width:0;overflow:hidden;
    background:transparent;
    animation:appIn .6s cubic-bezier(.22,1,.36,1);
    transition:grid-template-columns .35s cubic-bezier(.22,1,.36,1);
  }
  @keyframes appIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
  .sidebar,.main{
    min-height:0;min-width:0;
    border:1px solid var(--line);border-radius:var(--radius-xl);
    box-shadow:var(--panel-shadow);overflow:hidden;
    background:var(--paper-1);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  }
  .main{position:relative;display:flex;flex-direction:column}
  .sidebar{display:flex;flex-direction:column;padding:6px 0 4px}

/* ---------- 2. sidebar ---------- */
  /* brand: the mark floating on a slow-breathing brand-blue glow, the wordmark
     set in the brand mono with an accent letter, a hairline that draws itself in */
  .brand{
    order:-2;position:relative;display:flex;align-items:center;gap:13px;
    padding:18px 18px 16px;flex-shrink:0;isolation:isolate;
  }
  .brand::before{
    content:"";position:absolute;z-index:-1;inset-inline-start:6px;top:8px;width:64px;height:64px;border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--brand-blue) 38%,transparent) 0%,color-mix(in srgb,var(--brand-green) 18%,transparent) 45%,transparent 72%);
    filter:blur(10px);opacity:.75;animation:brandGlow 6s ease-in-out infinite;pointer-events:none;
  }
  html[data-theme="light"] .brand::before{opacity:.55}
  @keyframes brandGlow{0%,100%{transform:scale(.92);opacity:.6}50%{transform:scale(1.08);opacity:.95}}
  .brand-mark{
    width:40px;height:auto;flex:none;display:block;overflow:visible;object-fit:contain;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.28));
    transition:filter .45s ease;
  }
  svg.brand-mark{aspect-ratio:975/1692}
  html[data-theme="light"] .brand-mark{filter:drop-shadow(0 6px 12px rgba(10,114,144,.18))}
  /* an inline SVG logo made of .bm-piece paths slides into place on load (optional) */
  .bm-piece{
    transform-box:fill-box;transform-origin:center;
    animation:bmIn .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.08s + var(--i) * 55ms);
    transition:transform .5s cubic-bezier(.22,1,.36,1);
  }
  @keyframes bmIn{from{opacity:0;transform:translateX(calc((var(--i) - 3.5) * 22px)) scale(.9)}to{opacity:1;transform:none}}
  .brand:hover .brand-mark{filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--brand-blue) 45%,transparent))}
  .brand:hover .bm-piece{transform:translateX(calc((var(--i) - 3.5) * -6px)) rotate(calc((var(--i) - 3.5) * -.6deg))}
  .brand:hover::before{opacity:1;animation-play-state:paused;transform:scale(1.15)}
  .brand-text{min-width:0;text-align:start}
  .brand-name{
    position:relative;display:inline-block;padding-bottom:5px;
    font-family:var(--font-mono);font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink);
  }
  .brand-name::after{
    content:"";position:absolute;inset-inline-start:0;bottom:0;height:1.5px;width:100%;border-radius:1px;
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-green));
    transform:scaleX(0);transform-origin:left;animation:brandRule .9s cubic-bezier(.16,1,.3,1) .5s both;
  }
  @keyframes brandRule{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
  .brand-i{color:var(--brand-blue)}
  .brand-sub{margin-top:2px;font-size:10.5px;color:var(--ink-faint);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar-collapse{flex:none;margin-inline-start:auto;width:28px;height:28px;color:var(--ink-faint)}
  .sidebar-collapse svg{width:15px;height:15px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
  /* search pill under the brand */
  .conversation-search,.sidebar-search{order:-1;margin:0 14px 14px;flex-shrink:0}
  /* navigation: quiet rows, not chunky buttons */
  .sidebar-actions{display:grid;grid-template-columns:1fr;gap:3px;padding:0 14px 6px;flex-shrink:0;min-width:0;overflow-x:hidden}
  .nav-section-label{
    padding:14px 10px 6px;font-size:var(--text-3xs);font-weight:600;letter-spacing:.09em;
    color:var(--ink-faint);text-transform:uppercase;
  }
  .sidebar-actions>.btn,.sidebar-menu-parent{
    justify-content:flex-start;gap:10px;
    min-height:38px;padding:8px 10px;
    border:1px solid transparent;border-radius:10px;
    background:transparent;color:var(--ink-soft);
    font-size:var(--text-base);font-weight:500;
    transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
  }
  .sidebar-actions>.btn:hover,.sidebar-menu-parent:hover{background:var(--paper-2);color:var(--ink);border-color:var(--line)}
  .sidebar-actions>.btn:not(:disabled):active,.sidebar-menu-parent:not(:disabled):active{transform:scale(.985)}
  .sidebar-actions>.btn.active,.sidebar-menu-parent.active{background:var(--paper-2);border-color:var(--line);color:var(--ink)}
  /* the one prominent action (was #btnNewConversation) */
  .sidebar-actions>.btn.nav-cta{
    margin-bottom:10px;min-height:42px;
    justify-content:center;gap:8px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--brand-blue) 34%,transparent);
    background:color-mix(in srgb,var(--brand-blue) 13%,transparent);
    color:var(--brand-blue);
    font-weight:600;font-size:var(--text-md);
    box-shadow:0 0 0 0 var(--halo);
    transition:background .22s ease,border-color .22s ease,box-shadow .35s ease,transform .18s ease;
  }
  .sidebar-actions>.btn.nav-cta:hover{
    background:color-mix(in srgb,var(--brand-blue) 20%,transparent);
    border-color:color-mix(in srgb,var(--brand-blue) 52%,transparent);
    box-shadow:0 0 22px -2px var(--halo);
    color:var(--brand-blue);
  }
  .sidebar-menu-group{display:grid;min-width:0;overflow:hidden}
  .sidebar-menu-parent{width:100%;min-width:0;justify-content:flex-start}
  .sidebar-nav-icon,.btn .sidebar-nav-icon{width:17px;height:17px;flex:0 0 17px;display:block}
  .sidebar-menu-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .submenu-arrow{width:15px;height:15px;margin-inline-start:auto;flex:0 0 15px;transition:transform .18s ease;color:var(--ink-faint)}
  .sidebar-menu-group.open .submenu-arrow{transform:rotate(180deg)}
  .sidebar-submenu{
    display:grid;grid-template-columns:1fr;gap:4px;min-width:0;max-height:0;
    padding:0 7px;opacity:0;visibility:hidden;overflow:hidden;transform:translateY(-4px);
    transition:max-height .2s ease,opacity .16s ease,transform .2s ease,padding .2s ease,visibility 0s linear .2s;
  }
  .sidebar-submenu.open{
    max-height:var(--submenu-max,240px);padding-top:6px;opacity:1;visibility:visible;transform:none;
    transition:max-height .2s ease,opacity .16s ease,transform .2s ease,padding .2s ease;
  }
  .sidebar-submenu-item{
    width:100%;min-width:0;min-height:38px;padding:7px 12px;border:1px solid transparent;
    border-radius:var(--radius-s);background:transparent;color:var(--ink-soft);
    display:flex;align-items:center;justify-content:flex-start;gap:8px;
    font:700 11.5px var(--font-fa);text-align:start;cursor:pointer;
  }
  .sidebar-submenu-item:hover{background:var(--paper-2);border-color:var(--line)}
  .sidebar-submenu-item.active{
    background:color-mix(in srgb,var(--brand-blue) 10%,var(--paper-1));
    border-color:color-mix(in srgb,var(--brand-blue) 35%,var(--line));
    color:var(--brand-blue);
  }
  .sidebar-menu-parent:focus-visible,.sidebar-submenu-item:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}
  /* middle area that takes the remaining height (lists, history, tree...) */
  .sidebar-scroll,.history-list{flex:1;min-height:0;overflow-y:auto;padding:0 14px 10px;display:flex;flex-direction:column;gap:2px}
  .history-title{
    padding:10px 18px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;
    font-size:var(--text-3xs);color:var(--ink-faint);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  }
  .history-item{
    position:relative;display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:6px;align-items:center;
    border:1px solid transparent;border-radius:10px;padding:9px 10px;color:var(--ink-soft);background:transparent;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
  }
  .history-item:hover{background:var(--paper-2);border-color:var(--line);color:var(--ink)}
  .history-item.active{background:var(--paper-2);color:var(--ink);border-color:color-mix(in srgb,var(--brand-blue) 28%,transparent)}
  .history-item.active::before{
    content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
    width:2px;height:18px;border-radius:var(--radius-pill);background:var(--brand-blue);
  }
  .history-main{min-width:0;text-align:start}
  .history-name{font-size:var(--text-base);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
  .history-topic{font-size:var(--text-2xs);color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;unicode-bidi:plaintext}
  .history-time{font-size:var(--text-3xs);color:var(--ink-faint);font-family:var(--font-mono);margin-top:3px;opacity:.8}
  /* user card + foot pinned to the bottom */
  .user-card{
    order:98;margin:6px 14px 4px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;
    background:var(--paper-2);display:flex;align-items:center;gap:10px;flex-shrink:0;cursor:pointer;
    transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  }
  .user-card:hover{background:var(--paper-3);border-color:var(--line-strong);box-shadow:var(--shadow-1)}
  .user-card:active{transform:scale(.988)}
  .avatar{
    width:34px;height:34px;border-radius:11px;flex:none;
    background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);
  }
  .avatar.lg{width:46px;height:46px;border-radius:14px;font-size:14px}
  .user-meta{min-width:0;line-height:1.4;flex:1}
  .user-name{font-size:var(--text-base);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
  .role-badge{font-size:var(--text-2xs);color:var(--ink-faint);font-weight:500;margin-top:1px}
  .profile-card-icon{font-size:17px;line-height:1;color:var(--ink-faint);flex:none;transition:transform .18s ease}
  .user-card:hover .profile-card-icon{transform:translateX(-2px)}
  .app[dir="ltr"] .user-card:hover .profile-card-icon{transform:translateX(2px)}
  .sidebar-foot{order:99;display:grid;grid-template-columns:1fr;gap:8px;padding:0 14px 10px;flex-shrink:0}
  .sidebar-foot .btn{border-radius:10px;background:transparent;border-color:transparent;font-weight:500;color:var(--ink-faint);justify-content:flex-start;gap:10px}
  .sidebar-foot .btn:hover{background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:color-mix(in srgb,var(--danger) 26%,transparent);color:var(--danger)}
  .sidebar-foot .btn svg{width:17px;height:17px}

/* ---------- 3. main ---------- */
  .topbar{
    position:relative;flex-shrink:0;display:flex;align-items:center;gap:10px;
    padding:14px 22px;z-index:5;background:transparent;
  }
  .topbar::after{
    content:"";position:absolute;left:22px;right:22px;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);
  }
  .topbar-title{flex:1;min-width:0;margin-inline-start:6px}
  .topbar-title .t{font-size:var(--text-md);font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-title .s{font-size:var(--text-xs);color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .topbar-tools{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
  .topbar .corner-toggles{position:static;box-shadow:none;margin-inline-end:4px}
  .topbar .corner-toggles:hover{transform:none}
  .topbar .dial{height:30px;width:36px}
  .btn-hamburger{display:none}
  .view{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .view-scroll{flex:1;min-height:0;overflow-y:auto;padding:22px;scrollbar-color:var(--line-strong) transparent;overscroll-behavior:contain}
  .view-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
  .view-inner.narrow{max-width:760px}

/* ---------- 4. collapsed sidebar (desktop) ---------- */
  /* desktop only: on the phone the drawer always shows full rows, whatever was persisted */
  @media (min-width:721px){
    .app.sidebar-collapsed{grid-template-columns:84px minmax(0,1fr)}
    .app.sidebar-collapsed .sidebar-collapse svg{transform:scaleX(-1)}
    .app.sidebar-collapsed .brand{flex-direction:column;gap:10px;padding:16px 0 10px;align-items:center}
    .app.sidebar-collapsed .brand::before{inset-inline-start:auto;left:50%;transform:translateX(-50%);top:6px}
    .app.sidebar-collapsed .brand-mark{width:34px}
    .app.sidebar-collapsed .brand-text,.app.sidebar-collapsed .conversation-search,.app.sidebar-collapsed .sidebar-search,
    .app.sidebar-collapsed .nav-section-label,.app.sidebar-collapsed .sidebar-menu-label,
    .app.sidebar-collapsed .submenu-arrow,.app.sidebar-collapsed .history-title,
    .app.sidebar-collapsed .history-list,.app.sidebar-collapsed .sidebar-scroll,.app.sidebar-collapsed .user-meta,
    .app.sidebar-collapsed .profile-card-icon{display:none}
    .app.sidebar-collapsed .sidebar-collapse{margin:0}
    .app.sidebar-collapsed .sidebar-actions{padding:0 14px 6px;gap:4px}
    .app.sidebar-collapsed .sidebar-actions>.btn,.app.sidebar-collapsed .sidebar-menu-parent,
    .app.sidebar-collapsed .sidebar-submenu-item{justify-content:center;padding:10px 0;gap:0}
    .app.sidebar-collapsed .sidebar-actions>.btn.nav-cta{width:44px;height:44px;min-height:0;padding:0;margin:0 auto 10px;border-radius:50%}
    .app.sidebar-collapsed .sidebar-submenu{padding:0;grid-template-columns:1fr}
    .app.sidebar-collapsed .sidebar-submenu-item{padding:8px 0}
    .app.sidebar-collapsed .user-card{justify-content:center;padding:8px 0;margin:auto 14px 4px}
    .app.sidebar-collapsed .sidebar-foot{padding:0 14px 10px}
    .app.sidebar-collapsed .sidebar-foot .btn{padding:9px 0;gap:0;justify-content:center}
    .app.sidebar-collapsed .sidebar{padding-bottom:4px}
  }

/* ---------- 5. language relayout ---------- */
  /* #app carries dir=rtl|ltr. Switching: the sidebar leaves on the side it
     sits, the direction flips, then it comes back from the new side. */
  .app.is-relayout-out .sidebar{transition:transform .3s cubic-bezier(.55,0,.85,.35),opacity .3s ease;transform:translateX(var(--relayout-out,0));opacity:0}
  .app[dir="rtl"].is-relayout-out .sidebar{--relayout-out:110%}
  .app[dir="ltr"].is-relayout-out .sidebar{--relayout-out:-110%}
  .app.is-relayout-in .sidebar{transition:none;transform:translateX(var(--relayout-in,0));opacity:0}
  .app[dir="rtl"].is-relayout-in .sidebar{--relayout-in:110%}
  .app[dir="ltr"].is-relayout-in .sidebar{--relayout-in:-110%}
  .app.is-relayout-in.is-relayout-done .sidebar{transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s ease;transform:none;opacity:1}
  .app.is-relayout-out .main,.app.is-relayout-in .main{transition:opacity .25s ease}
  .app.is-relayout-out .main{opacity:.6}

/* ---------- 6. mobile ---------- */
  .sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(10,12,15,.45);z-index:44}
  @media (max-width:720px){
    .app{grid-template-columns:1fr;padding:10px;gap:10px}
    .sidebar{
      display:flex;position:fixed;inset-block:10px;inset-inline-start:10px;width:min(300px,86vw);
      z-index:45;box-shadow:var(--shadow);border-radius:24px;
      transform:translateX(110%);transition:transform .22s ease;
    }
    .app[dir="ltr"] .sidebar{transform:translateX(-110%)}
    .app.sidebar-open .sidebar,.app[dir="ltr"].sidebar-open .sidebar{transform:translateX(0)}
    .app.sidebar-open .sidebar-scrim{display:block}
    .sidebar-collapse{display:none}
    .btn-hamburger{display:inline-flex}
    .topbar{padding:10px 12px}
    .view-scroll{padding:14px}
  }
  @media (prefers-reduced-motion:reduce){
    .app,.brand::before,.brand-name::after,.bm-piece{animation:none}
    .sidebar-submenu,.submenu-arrow{transition:none}
  }