/* The conversation rail is the primary surface; controls form a compact dock. */
#drawer .drawer-panel {
  --rail-hover:#f0f0ed;
  --rail-switch:#ededea;
  --rail-selected:#fff;
  width:min(calc(100vw - 28px), 360px) !important;
  display:grid;
  grid-template-rows:auto auto minmax(0, 1fr) auto;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(10px + env(safe-area-inset-bottom)) !important;
  gap:14px !important;
  overflow:hidden;
}
:root[data-theme="dark"] #drawer .drawer-panel { --rail-hover:#33332f; --rail-switch:#33332f; --rail-selected:#45453e; }
#drawer .drawer-panel::after { display:none; }
#drawer .drawer-head { min-height:36px !important; padding:0 !important; }
#drawer .drawer-head h2 { margin:0 !important; font-family:inherit !important; font-size:22px !important; font-weight:650 !important; letter-spacing:0 !important; }
#drawer #closeDrawer { width:40px; height:40px; border:0; background:transparent !important; }
#drawer .drawer-new {
  min-height:48px !important;
  padding:10px 12px !important;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:12px !important;
  border:1px solid var(--line-strong) !important;
  color:var(--ink) !important;
  background:var(--surface-raised) !important;
  box-shadow:none !important;
}
#drawer .drawer-new > svg { width:22px; height:22px; padding:0; border-radius:0; color:var(--ink) !important; background:transparent !important; }
#drawer .drawer-new strong { font-size:14px !important; font-weight:600; }
#drawer .drawer-new small { display:none !important; }
#drawer .drawer-history {
  display:flex !important;
  flex-direction:column;
  min-height:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:hidden;
}
#drawer .drawer-history-head { min-height:26px !important; padding:0 2px 7px !important; font-size:11px; letter-spacing:0; color:var(--muted) !important; }
#drawer .drawer-history-head b { padding:2px 6px; font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--muted) !important; background:var(--surface-soft) !important; }
#drawer .drawer-history .history-controls { min-height:0 !important; padding:0 0 10px !important; gap:7px; }
#drawer #historySearch { height:40px; padding:9px 12px !important; border:1px solid var(--line) !important; border-radius:10px; background:var(--surface-raised) !important; color:var(--ink) !important; font-size:13px !important; }
#drawer #historySearch::placeholder { color:var(--muted); }
#drawer .history-controls select { height:36px; background:var(--surface-raised); color:var(--ink); border-color:var(--line); }
#drawer .history-controls label { color:var(--muted); font-size:11px; }
#drawer #historySearchHint { margin:0; font-size:10px; line-height:1.4; color:var(--muted); }
#drawer .drawer-history .conversation-list { min-height:0; padding:0 5px 4px 0 !important; gap:3px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
#drawer .conversation-row { min-height:60px !important; border:0 !important; background:transparent !important; border-radius:10px !important; grid-template-columns:minmax(0,1fr) 36px !important; }
#drawer .conversation-row.active { background:var(--rail-hover) !important; box-shadow:none !important; }
#drawer .conversation-row.active::before { display:none !important; }
#drawer .conversation-open { min-height:60px !important; padding:9px 8px !important; gap:8px; }
#drawer .conversation-mark { width:22px; height:22px; border-radius:0; background:transparent !important; color:var(--muted) !important; }
#drawer .conversation-mark svg { width:17px; height:17px; }
#drawer .conversation-open strong { font-size:14px !important; line-height:1.5; font-weight:560 !important; color:var(--ink) !important; }
#drawer .conversation-open small { margin-top:3px; font-size:11px !important; line-height:1.4; color:var(--muted) !important; }
#drawer .conversation-more { width:36px; min-height:44px; color:var(--muted); }
#drawer .drawer-tools { gap:10px !important; padding-top:10px; border-top:1px solid var(--line); }
#drawer .drawer-utilities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px !important; }
#drawer .drawer-tools .drawer-profile {
  min-height:48px !important;
  padding:7px 9px !important;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:8px;
  border:0 !important;
  border-radius:10px !important;
  color:var(--ink) !important;
  background:transparent !important;
  box-shadow:none !important;
}
#drawer .drawer-tools .drawer-profile[hidden] { display:none !important; }
#drawer .drawer-tools .drawer-profile .profile-monogram { width:24px; height:24px; border-radius:0; background:transparent !important; color:var(--ink) !important; font-size:13px; }
#drawer .profile-monogram svg { color:var(--ink) !important; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#drawer .drawer-tools .drawer-profile strong { font-size:12px !important; line-height:1.4; color:var(--ink) !important; }
#drawer .drawer-tools .drawer-profile small { display:block; font-size:10px !important; line-height:1.4; color:var(--muted) !important; }
#drawer .drawer-tools .drawer-theme { display:grid; grid-template-columns:52px minmax(0,1fr); min-height:44px; margin:0; padding:0 0 0 3px; gap:10px; border:0 !important; border-radius:0 !important; background:transparent !important; }
#drawer .drawer-theme > span { min-width:0; }
#drawer .drawer-theme > span i { display:none; }
#drawer .drawer-theme > span b { font-size:12px; font-weight:500; color:var(--muted); }
#drawer .theme-options { padding:3px; gap:3px; grid-template-columns:repeat(2,minmax(0,1fr)) !important; border-radius:10px; background:var(--rail-switch) !important; }
#drawer .theme-options button { height:38px; font-size:12px; color:var(--muted) !important; border-radius:8px; }
#drawer .theme-options button.active { color:var(--ink) !important; background:var(--rail-selected) !important; box-shadow:0 1px 3px rgba(0,0,0,.08) !important; }
#drawer .drawer-tools .drawer-footer { display:flex !important; min-height:36px; padding:0 2px; margin:0; border:0 !important; font-size:10px; color:var(--muted) !important; }
#drawer .drawer-footer button { min-height:36px; padding:6px 9px; border:0 !important; background:transparent !important; color:var(--muted) !important; font-size:11px; }
#drawer .workspace-entry { margin:0; padding:10px; font-size:12px; border-color:var(--line); color:var(--ink); background:var(--surface-raised); }
#drawer button:focus-visible, #drawer input:focus-visible, #drawer select:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
@media (hover:hover) {
  #drawer .drawer-profile:hover, #drawer .conversation-row:hover { background:var(--rail-hover) !important; }
}
@media (min-width:900px) {
  body.web-browser #drawer .drawer-panel { width:260px !important; padding:14px 12px 10px !important; gap:12px !important; }
  body.web-browser #drawer .conversation-row { min-height:44px !important; }
  body.web-browser #drawer .conversation-open { min-height:44px !important; }
}
@media (max-height:550px) {
  #drawer .drawer-panel { gap:8px !important; padding-top:calc(8px + env(safe-area-inset-top)) !important; overflow-y:auto; grid-template-rows:auto auto minmax(180px,1fr) auto; scrollbar-width:thin; }
  #drawer .drawer-history { min-height:180px !important; }
  #drawer .drawer-new { min-height:44px !important; }
  #drawer .drawer-tools { gap:6px !important; }
  #drawer .drawer-profile small { display:none !important; }
}