/* ============================================================================
   Hooshyar  —  css/ui.css
   ----------------------------------------------------------------------------
   ناوبری، چیدمان منوها و شیت تنظیمات.
   ========================================================================== */

/* ============================== navigation.css ============================== */
/* One-column navigation and nested settings; composer/chat tools remain untouched. */
.modal .tabs,.hooshyar-native .tabs{display:flex;flex-direction:column;align-items:stretch;gap:4px;overflow:visible;white-space:normal;padding:4px 0 16px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.modal .tabs button,.hooshyar-native .tabs button{width:100%;min-height:48px;display:flex;align-items:center;gap:12px;text-align:start;padding:12px 14px;border-radius:11px;white-space:normal;font-size:14px;line-height:1.6}
.modal .tabs button::after{content:'›';margin-inline-start:auto;font-size:22px;color:var(--muted)}
html[dir=rtl] .modal .tabs button::after{content:'‹'}
.modal .tabs button:hover{background:var(--hover)}
.modal.vertical-menu-modal{width:min(410px,100%);padding:22px 18px;background:var(--panel);border-radius:22px;scrollbar-width:thin}
.modal.vertical-detail-modal{width:min(680px,100%);scrollbar-width:thin}
.vertical-menu-modal .modal-header{padding-inline:7px;margin-bottom:14px}
.vertical-menu-modal .modal-header h2{font-size:21px}
.vertical-group-label{font-size:12px;font-weight:500;color:var(--muted);padding:19px 13px 8px}
.vertical-panel-menu{display:flex;flex-direction:column;gap:3px}
.vertical-menu-row,.vertical-menu-modal .menu-item{display:flex;align-items:center;gap:14px;width:100%;min-height:49px;padding:12px 13px;text-align:start;border-radius:11px;background:transparent;color:var(--text);font-size:14px;line-height:1.5;white-space:normal}
.vertical-menu-row:hover,.vertical-menu-modal .menu-item:hover{background:var(--hover)}
.vertical-menu-row>.icon{width:21px;height:21px;flex-shrink:0;opacity:.9}
.vertical-menu-row>span{flex:1;min-width:0;overflow-wrap:anywhere}
.vertical-menu-row .vertical-chevron{width:17px;height:17px;opacity:.6;flex-shrink:0}
html[dir=rtl] .vertical-chevron{transform:scaleX(-1)}
.vertical-back{display:flex;align-items:center;gap:9px;padding:9px 12px;margin-bottom:18px;border-radius:10px;font-size:13px;color:var(--muted);text-align:start}
.vertical-back:hover{background:var(--hover);color:var(--text)}
.vertical-back svg{width:19px;height:19px}
html[dir=rtl] .vertical-back svg{transform:scaleX(-1)}
.vertical-profile{display:flex;align-items:center;gap:14px;margin:8px 10px 6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.vertical-profile .profile{width:48px;height:48px;font-size:23px;flex-shrink:0}
.vertical-profile strong{display:block;font-size:17px;font-weight:500}
.vertical-profile small{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.vertical-panel-content{min-width:0;overflow-wrap:anywhere}
.hooshyar-native .stat-grid,.hooshyar-native .plans{display:flex!important;flex-direction:column;gap:10px}
.hooshyar-native .stat-grid .summary-card,.hooshyar-native .plans .plan{width:100%;margin:0}
.hooshyar-native .stat-grid{margin-block:18px}
.hooshyar-native .field-row,.hooshyar-native .apikey-row,.hooshyar-native .d-actions,.hooshyar-native .modal-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.hooshyar-native .field-row>.field{width:100%;flex:auto;margin:8px 0}
.hooshyar-native .d-actions>button,.hooshyar-native .modal-actions>button,.hooshyar-native .apikey-row>button{width:100%;min-height:43px}
.hooshyar-native .field input,.hooshyar-native .field textarea,.hooshyar-native .field select,.hooshyar-native .apikey-row input{width:100%}
.hooshyar-native #adminBody{overflow-x:visible}
.hooshyar-native .atable,.hooshyar-native .atable tbody{display:block;width:100%}
.hooshyar-native .atable tr{display:flex;flex-direction:column;margin:10px 0 16px;padding:12px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.hooshyar-native .atable tr:has(th){display:none}
.hooshyar-native .atable td{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;text-align:start!important;padding:10px 0;white-space:normal!important;overflow-wrap:anywhere}
.hooshyar-native .atable td:last-child{border-bottom:0}
.hooshyar-native .atable td[data-field-label]::before{content:attr(data-field-label);font-size:11px;font-weight:500;color:var(--muted)}
.hooshyar-native .atable td select{width:100%;padding:10px}
.hooshyar-native .atable td .cact{align-self:flex-start;border-radius:10px}
.hooshyar-native .setting-row{align-items:flex-start;flex-direction:column;gap:12px;padding:16px 0}
.hooshyar-native .setting-row select{width:100%;max-width:100%}
.vertical-menu-row:focus-visible,.vertical-back:focus-visible,.tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:600px){.modal.vertical-menu-modal,.modal.vertical-detail-modal{max-height:90dvh;padding:19px 15px}.vertical-menu-row{min-height:50px}.vertical-menu-modal .modal-header h2{font-size:20px}}

/* ============================== menu-layout.css ============================== */
/* Gemini-style sidebar: grouped sections, pill rows, quiet labels. */
#sidebar{padding:8px 8px 10px}
body.expanded #sidebar{padding-inline:10px}
.rail-head{height:52px;gap:8px;margin-bottom:2px;padding-inline:2px}
.rail-head .brand-label{font-size:20px;font-weight:500;line-height:1;letter-spacing:-.2px}
.rail-head .ico{width:34px;height:34px}
.rail-search{display:none;margin-inline-start:auto}
body.expanded .rail-search{display:inline-flex}
.rail-top,#nav-bottom{display:flex;flex-direction:column;gap:2px}
.nav-item{min-height:40px;border-radius:999px;padding:8px 10px;gap:14px;font-size:14px;line-height:1.4;color:var(--text)}
.nav-item .icon{width:20px;height:20px;opacity:.92}
.nav-item.chat-pill{min-height:44px;margin:2px 0 12px}
.nav-item.chat-pill .icon{opacity:1}
body:not(.expanded) .nav-item.chat-pill{width:38px;height:38px;min-height:38px;margin:0 auto 10px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
.rail-group-label{display:none;font-size:11.5px;font-weight:500;letter-spacing:.01em;color:var(--muted);padding:14px 10px 6px}
body.expanded .rail-group-label{display:block}
.rail-notebooks{margin-top:2px}
.rail-notebooks:empty{display:none}
.recent{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.recent-heading{font-size:11.5px;letter-spacing:.01em;padding:0 10px 8px}
.recent-title{font-size:13.5px}
.rail-bottom{margin-top:auto;gap:2px;border-top:1px solid var(--line);padding-top:10px}
.nav-item.profile-row{justify-content:flex-start;gap:12px;padding:7px 8px;margin-top:4px;min-height:46px}
body:not(.expanded) .nav-item.profile-row{justify-content:center;padding:6px 4px}
.nav-item.profile-row .nav-label{font-weight:500}

/* ============================== settings-sheet.css ============================== */
/* ==== Gemini-style settings panel (desktop popover / mobile bottom sheet) ==== */
#sheet-scrim{position:fixed;inset:0;z-index:76;background:#000000a6;opacity:0;transition:opacity .2s ease;display:none}
#sheet-scrim.open{display:block;opacity:1}
@media(min-width:761px){#sheet-scrim{display:none!important}}
#settings-sheet{position:fixed;z-index:77;width:292px;max-height:min(640px,calc(100dvh - 96px));display:flex;flex-direction:column;background:#1e1f20;color:#e3e3e3;border:1px solid #ffffff14;border-radius:16px;box-shadow:0 14px 44px #000000b3;overflow:hidden;opacity:0;transform:translateY(8px) scale(.985);pointer-events:none;transition:opacity .16s ease,transform .16s ease;font-family:inherit}
#settings-sheet.open{opacity:1;transform:none;pointer-events:auto}
html[data-theme=light] #settings-sheet{background:#fff;color:#202124;border-color:#dde1e6;box-shadow:0 14px 44px #14233a2e}
.sheet-grip{display:none}
.sheet-top{display:none;align-items:center;gap:6px;padding:10px 12px 2px}
.sheet-mini,.sheet-dots,.sheet-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex:0 0 auto}
.sheet-mini .icon,.sheet-dots .icon{width:19px;height:19px}
.sheet-dots .icon{stroke-dasharray:2.6 3.4;opacity:.8}
.sheet-close{background:#c2263b;color:#fff}
.sheet-close:hover{background:#d32d43}
.sheet-close .icon{width:15px;height:15px;stroke-width:2.4}
.sheet-title{display:inline-flex;align-items:center;gap:3px;font-size:15px;line-height:1;color:#e3e3e3;padding-inline-start:2px}
html[data-theme=light] .sheet-title{color:#202124}
.sheet-title .chev{width:15px;height:15px;opacity:.85}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:4px 8px 10px;scrollbar-width:thin}
.sheet-group+.sheet-group{margin-top:4px}
.sheet-head{padding:12px 10px 5px;font-size:11.5px;font-weight:500;letter-spacing:.01em;color:#9aa0a6}
html[data-theme=light] .sheet-head{color:#5f6368}
.sheet-row{display:flex;align-items:center;gap:12px;width:100%;min-height:38px;padding:7px 10px;border-radius:9px;text-align:start;color:inherit;font-size:13.5px;line-height:1.35;background:transparent;white-space:nowrap}
.sheet-row:hover{background:#2a2b2d}
html[data-theme=light] .sheet-row:hover{background:#eef0f3}
.sheet-row .icon{width:18px;height:18px;stroke-width:1.7;flex:0 0 auto;opacity:.94}
.sheet-row .sheet-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.sheet-row .chev{width:15px;height:15px;opacity:.55;stroke-width:2}
html[dir=rtl] .sheet-row .chev{transform:scaleX(-1)}
.sheet-row.danger{color:#f2a6a6}
html[data-theme=light] .sheet-row.danger{color:#c5221f}
.sheet-row.sel{background:#2a2b2d}
html[data-theme=light] .sheet-row.sel{background:#e8eaed}
.sheet-row .chk{width:16px;height:16px;color:#a8c7fa}
html[data-theme=light] .sheet-row .chk{color:#1a73e8}
.sheet-sub{padding:8px 6px 2px}
.sheet-back{display:inline-flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;font-size:14px;color:inherit}
.sheet-back .icon{width:17px;height:17px}
html[dir=rtl] .sheet-back .icon{transform:scaleX(-1)}
.sheet-field{display:block;padding:6px 6px 0}
.sheet-field>span{display:block;margin-bottom:7px;font-size:12px;color:#9aa0a6}
.sheet-field input{display:block;width:100%;border:1px solid #ffffff1f;border-radius:10px;background:#131314;color:#e3e3e3;padding:10px 12px;font-size:12.5px}
html[data-theme=light] .sheet-field input{border-color:#dde1e6;background:#f7f8fa;color:#202124}
.sheet-actions{display:flex;justify-content:flex-end;padding:12px 6px 0}
.sheet-btn{border-radius:20px;padding:9px 16px;font-size:13px;background:#2a2b2d}
html[data-theme=light] .sheet-btn{background:#eef0f3}
.sheet-btn.primary{background:#a8c7fa;color:#0b1d3a}
html[data-theme=light] .sheet-btn.primary{background:#1a73e8;color:#fff}
.sheet-note,.sheet-body .subtle{padding:10px 8px 2px;font-size:11.5px;line-height:1.75;color:#9aa0a6}
html[data-theme=light] .sheet-note,html[data-theme=light] .sheet-body .subtle{color:#5f6368}
.sheet-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 6px 0}
.sheet-stat{background:#26272a;border-radius:12px;padding:12px}
html[data-theme=light] .sheet-stat{background:#f1f3f4}
.sheet-stat b{display:block;font-size:19px;font-weight:500;letter-spacing:-.3px}
.sheet-stat span{display:block;margin-top:4px;font-size:11px;color:#9aa0a6}
html[data-theme=light] .sheet-stat span{color:#5f6368}
.sheet-kbd{display:flex;justify-content:space-between;gap:12px;padding:7px 8px;font-size:12px;color:#c7c9cc}
html[data-theme=light] .sheet-kbd{color:#3c4043}
.sheet-help{padding:2px 8px;font-size:12.5px;line-height:1.9;color:#c7c9cc}
html[data-theme=light] .sheet-help{color:#3c4043}
@media(max-width:760px){
  #settings-sheet{left:0;right:0;bottom:0;width:auto;max-height:88dvh;border:0;border-radius:26px 26px 0 0;background:#131314;transform:translateY(100%);box-shadow:0 -10px 44px #000000b3}
  html[data-theme=light] #settings-sheet{background:#fff}
  #settings-sheet.open{transform:none}
  .sheet-grip{display:block;width:34px;height:4px;border-radius:4px;background:#5f6368;margin:9px auto 3px;flex:0 0 auto}
  .sheet-top{display:flex}
  .sheet-body{padding:2px 12px calc(18px + env(safe-area-inset-bottom))}
  .sheet-group+.sheet-group{margin-top:2px}
  .sheet-head{padding:13px 6px 7px}
  .sheet-row{background:#1f1f20;border-radius:12px;margin-bottom:5px;min-height:46px;padding:9px 13px;font-size:14px}
  html[data-theme=light] .sheet-row{background:#f1f3f4}
  .sheet-row:hover{background:#2a2b2d}
  html[data-theme=light] .sheet-row:hover{background:#e8eaed}
  .sheet-sub{padding:6px 2px 4px}
  .sheet-stat{background:#1f1f20}
  .sheet-field input{background:#1f1f20}
}