/* =========================================================
   ZAR AI v2 — FULL-SCREEN SIDEBAR (STATE C only)
   About the user's conversational work — chats, projects.
   Deliberately no Cities/architecture content of any kind.
========================================================= */

.zar-v2-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Same fix as .zar-v2-fullscreen__main (layout/fullscreen.css) and
     for the same reason: this is also a direct grid item of
     .zar-v2-fullscreen at desktop widths, so it needs its own
     min-height: 0 to stay clamped to the grid's stretched row height
     instead of growing to fit its chat-list content — otherwise
     .zar-v2-sidebar__scroll's own overflow-y: auto below never gets a
     bounded height to actually scroll within. A no-op at the
     <=900px breakpoint, where the sidebar becomes position: fixed
     (layout/fullscreen.css) and already has its own definite height. */
  min-height: 0;

  background: var(--zar-v2-bg-surface-sunken);
  border-right: 1px solid var(--zar-v2-border-subtle);
}

.zar-v2-sidebar__new {
  margin: var(--zar-v2-space-4) var(--zar-v2-space-4) var(--zar-v2-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zar-v2-space-2);

  padding: var(--zar-v2-space-3);
  border-radius: var(--zar-v2-radius-md);
  border: 1px solid var(--zar-v2-border-strong);
  background: var(--zar-v2-bg-surface);
  color: var(--zar-v2-text-primary);
  font-size: var(--zar-v2-font-size-sm);
  font-weight: var(--zar-v2-font-weight-semibold);

  transition: background var(--zar-v2-duration-fast) var(--zar-v2-ease-standard);
}
.zar-v2-sidebar__new:hover { background: var(--zar-v2-accent-soft); }
.zar-v2-sidebar__new svg { width: 15px; height: 15px; }

.zar-v2-sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--zar-v2-space-2) var(--zar-v2-space-3) var(--zar-v2-space-4);
}

.zar-v2-sidebar__section + .zar-v2-sidebar__section { margin-top: var(--zar-v2-space-5); }

.zar-v2-sidebar__heading {
  padding: 0 var(--zar-v2-space-2);
  margin-bottom: var(--zar-v2-space-1);
  font-size: 0.68rem;
  font-weight: var(--zar-v2-font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--zar-v2-text-muted);
}

/* .zar-v2-chat-row is the actual flex row (an <li>): it holds the
   select-chat button and the kebab-menu button as SIBLINGS. They
   must not nest — a <button> cannot validly contain another
   <button>, and browsers silently repair (reparent) that at parse
   time, which used to break both this layout and the menu's hidden
   state. See the mockup delivery report. */
.zar-v2-chat-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--zar-v2-space-1);
}

.zar-v2-chat-item {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--zar-v2-space-2) var(--zar-v2-space-2);
  border-radius: var(--zar-v2-radius-sm);
  color: var(--zar-v2-text-secondary);
  font-size: var(--zar-v2-font-size-sm);
  text-align: left;
}

.zar-v2-chat-item span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zar-v2-chat-item:hover { background: var(--zar-v2-bg-surface); color: var(--zar-v2-text-primary); }
.zar-v2-chat-item.is-active {
  background: var(--zar-v2-chat-active-bg);
  color: var(--zar-v2-text-primary);
  font-weight: var(--zar-v2-font-weight-medium);
  box-shadow:inset 3px 0 0 var(--zar-v2-chat-active-marker);
}

.zar-v2-chat-item__menu-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--zar-v2-radius-xs);
  color: var(--zar-v2-text-muted);
}
.zar-v2-chat-item__menu-btn:hover { background: var(--zar-v2-bg-surface-raised); color: var(--zar-v2-text-primary); }
.zar-v2-chat-item__menu-btn svg,
.zar-v2-chat-item__edit-btn svg,
.zar-v2-chat-rename button svg,
.zar-v2-chat-item__menu button svg { width: 14px; height: 14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.zar-v2-chat-item__menu-btn svg circle { fill:currentColor; stroke:none; }

.zar-v2-chat-item__edit-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--zar-v2-radius-xs);
  color: var(--zar-v2-text-muted);
}
.zar-v2-chat-row:hover .zar-v2-chat-item__edit-btn,
.zar-v2-chat-row:focus-within .zar-v2-chat-item__edit-btn { display:inline-flex; }
.zar-v2-chat-item__edit-btn:hover { background:var(--zar-v2-bg-surface-raised); color:var(--zar-v2-text-primary); }

.zar-v2-chat-rename { display:flex; align-items:center; gap:4px; flex:1 1 auto; min-width:0; }
.zar-v2-chat-rename input {
  min-width:0; width:100%; padding:6px 7px; border:1px solid var(--zar-v2-border-focus);
  border-radius:var(--zar-v2-radius-xs); background:var(--zar-v2-rename-bg);
  color:var(--zar-v2-text-primary); font:inherit; box-shadow:var(--zar-v2-focus-ring);
}
.zar-v2-chat-rename input[aria-invalid="true"] { border-color:var(--zar-v2-state-danger); }
.zar-v2-chat-rename button { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--zar-v2-radius-xs); color:var(--zar-v2-text-secondary); }
.zar-v2-chat-rename button:hover { background:var(--zar-v2-accent-soft); color:var(--zar-v2-text-primary); }

.zar-v2-chat-item__menu {
  position: absolute;
  right: var(--zar-v2-space-2);
  top: calc(100% + 2px);
  z-index: var(--zar-v2-z-dropdown);

  min-width: 140px;
  padding: var(--zar-v2-space-1);
  border-radius: var(--zar-v2-radius-sm);
  border: 1px solid var(--zar-v2-border-strong);
  background: var(--zar-v2-transient-bg);
  box-shadow: var(--zar-v2-shadow-popover);
}
.zar-v2-chat-item__menu[hidden] { display: none; }
.zar-v2-chat-item__menu.is-floating {
  position:fixed; right:auto; bottom:auto; z-index:calc(var(--zar-v2-z-fullscreen) + 4);
  width:max-content; min-width:176px; max-width:min(280px, calc(100vw - 16px));
}
.zar-v2-chat-item__menu.is-floating,
.zar-v2-chat-project-menu.is-floating { animation:zar-v2-menu-in var(--zar-v2-duration-fast) var(--zar-v2-ease-standard); }
@keyframes zar-v2-menu-in { from { opacity:0; transform:translateY(-2px); } to { opacity:1; transform:none; } }
.zar-v2-chat-item__menu button {
  display: flex;
  align-items:center;
  gap:var(--zar-v2-space-2);
  width: 100%;
  padding: var(--zar-v2-space-2) var(--zar-v2-space-2);
  border-radius: var(--zar-v2-radius-xs);
  text-align: left;
  font-size: var(--zar-v2-font-size-xs);
  color: var(--zar-v2-text-secondary);
}
.zar-v2-chat-item__menu button:hover { background: var(--zar-v2-accent-soft); color: var(--zar-v2-text-primary); }
.zar-v2-chat-item__menu button.is-destructive { color:var(--zar-v2-state-danger); }

.zar-v2-chat-project-menu {
  margin:2px 0 var(--zar-v2-space-1);
  padding:var(--zar-v2-space-1);
  border-top:1px solid var(--zar-v2-border-subtle);
  border-bottom:1px solid var(--zar-v2-border-subtle);
  max-height:190px;
  overflow-y:auto;
}
.zar-v2-chat-project-menu[hidden] { display:none; }
.zar-v2-chat-project-menu.is-floating {
  position:fixed; z-index:calc(var(--zar-v2-z-fullscreen) + 5); width:max-content;
  min-width:220px; max-width:min(360px, calc(100vw - 16px)); max-height:min(360px, calc(100dvh - 16px));
  margin:0; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--zar-v2-border-strong);
  border-radius:var(--zar-v2-radius-sm); background:var(--zar-v2-transient-bg); box-shadow:var(--zar-v2-shadow-popover);
}
.zar-v2-chat-project-menu.is-floating button { width:100%; max-width:100%; }
.zar-v2-chat-project-menu.is-floating button > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zar-v2-chat-project-menu button[aria-checked="true"] { color:var(--zar-v2-accent); background:var(--zar-v2-accent-soft); }
.zar-v2-chat-project-menu__check { width:14px; flex:0 0 14px; color:var(--zar-v2-accent); text-align:center; }
.zar-v2-chat-project-menu__empty { display:block; padding:var(--zar-v2-space-3); color:var(--zar-v2-text-muted); font-size:var(--zar-v2-font-size-xs); }
.zar-v2-chat-project-menu__remove { margin-top:var(--zar-v2-space-1); border-top:1px solid var(--zar-v2-border-subtle); }
/* ==========================================================================
   PATCH: Portaled "Move to project" flyout — drop the redundant back row
          and restore menu-item styling on desktop
   DATE.TIME: 2026-09-08 14:05
   REASON:
   openFloatingProjectSubmenu() portals .zar-v2-chat-project-menu out of
   .zar-v2-chat-item__menu and appends it to #zarV2Root with .is-floating.
   Both the rule that hid the "‹ Move to project" back button and the rule
   that styles menu-item buttons are scoped under .zar-v2-chat-item__menu, so
   once portaled the desktop flyout shows a second "Move to project" and its
   folder rows render as unstyled default buttons. Re-scope both to the
   portaled .is-floating submenu. Mobile is untouched: its submenu is NOT
   .is-floating and stays inside .zar-v2-chat-item__menu.is-mobile-sheet,
   which re-shows the back button on purpose.
   ========================================================================== */
.zar-v2-chat-item__menu .zar-v2-chat-project-menu__back,
.zar-v2-chat-project-menu.is-floating .zar-v2-chat-project-menu__back { display:none; }

.zar-v2-chat-project-menu.is-floating button {
  display:flex;
  align-items:center;
  gap:var(--zar-v2-space-2);
  width:100%;
  padding:var(--zar-v2-space-2) var(--zar-v2-space-2);
  border-radius:var(--zar-v2-radius-xs);
  text-align:left;
  font-size:var(--zar-v2-font-size-xs);
  color:var(--zar-v2-text-secondary);
}
.zar-v2-chat-project-menu.is-floating button:hover {
  background:var(--zar-v2-accent-soft);
  color:var(--zar-v2-text-primary);
}
.zar-v2-menu-chevron { margin-left:auto; color:var(--zar-v2-text-muted); font-size:16px; }
@media (hover:hover) and (pointer:fine) {
  .zar-v2-chat-project-menu.is-floating { scrollbar-width:thin; scrollbar-color:transparent transparent; }
  .zar-v2-chat-project-menu.is-floating:hover, .zar-v2-chat-project-menu.is-floating:focus-within { scrollbar-color:var(--zar-v2-compact-history-scrollbar-active) transparent; }
  .zar-v2-chat-project-menu.is-floating::-webkit-scrollbar { width:6px; }
  .zar-v2-chat-project-menu.is-floating::-webkit-scrollbar-track, .zar-v2-chat-project-menu.is-floating::-webkit-scrollbar-thumb { background:transparent; }
  .zar-v2-chat-project-menu.is-floating::-webkit-scrollbar-thumb { border-radius:999px; }
  .zar-v2-chat-project-menu.is-floating:hover::-webkit-scrollbar-thumb, .zar-v2-chat-project-menu.is-floating:focus-within::-webkit-scrollbar-thumb { background:var(--zar-v2-compact-history-scrollbar-active); }
}

@media (max-width:560px) {
  .zar-v2-chat-item__menu.is-floating.is-mobile-sheet {
    position:fixed; left:var(--zar-v2-space-3); right:var(--zar-v2-space-3); top:auto;
    bottom:max(var(--zar-v2-space-3), env(safe-area-inset-bottom)); width:auto; max-width:none; min-width:0;
    padding:var(--zar-v2-space-2); border-radius:var(--zar-v2-radius-md);
  }
  .zar-v2-chat-item__menu.is-mobile-sheet[data-menu-level="projects"] > [data-zar-v2-chat-project-trigger],
  .zar-v2-chat-item__menu.is-mobile-sheet[data-menu-level="projects"] > [data-zar-v2-chat-trash] { display:none; }
  .zar-v2-chat-item__menu.is-mobile-sheet .zar-v2-chat-project-menu {
    display:none; position:static; width:100%; min-width:0; max-width:none; max-height:min(60dvh, 420px);
    margin:0; padding:0; overflow-y:auto; overscroll-behavior:contain; border:0; background:transparent; box-shadow:none;
    -webkit-overflow-scrolling:touch;
  }
  .zar-v2-chat-item__menu.is-mobile-sheet[data-menu-level="projects"] .zar-v2-chat-project-menu:not([hidden]) { display:block; }
  .zar-v2-chat-item__menu.is-mobile-sheet .zar-v2-chat-project-menu__back {
    display:flex; position:sticky; top:0; z-index:1; background:var(--zar-v2-transient-bg);
    color:var(--zar-v2-text-primary); font-weight:var(--zar-v2-font-weight-semibold);
  }
}

.zar-v2-confirm {
  /* COMMENT BLOCK
     PATCH: Light dialog corner clipping
     NAME: ZAR AI v2
     DATE: 2026-09-06
     TIME: 13:21
     WHY: Remove the user-agent dialog shadow layer visible behind the rounded light-theme card. */
  width:min(430px, calc(100vw - 32px)); max-width:none; max-height:none; padding:0; border:0; outline:0;
  background:transparent; box-shadow:none; filter:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  overflow:visible; color:var(--zar-v2-text-primary);
}
.zar-v2-confirm::backdrop { background:var(--zar-v2-bg-scrim); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.zar-v2-confirm__card { overflow:hidden; padding:var(--zar-v2-space-6); border:1px solid var(--zar-v2-border-strong); border-radius:var(--zar-v2-radius-lg); background:var(--zar-v2-dialog-bg); box-shadow:var(--zar-v2-shadow-4); }
.zar-v2-confirm__kicker { color:var(--zar-v2-text-muted); font-size:var(--zar-v2-font-size-xs); font-weight:var(--zar-v2-font-weight-bold); letter-spacing:.09em; text-transform:uppercase; }
.zar-v2-confirm h3 { margin:var(--zar-v2-space-2) 0; font-size:var(--zar-v2-font-size-lg); color:var(--zar-v2-text-primary); }
.zar-v2-confirm p { color:var(--zar-v2-text-secondary); line-height:var(--zar-v2-line-height-normal); }
.zar-v2-confirm__actions { display:flex; justify-content:flex-end; gap:var(--zar-v2-space-2); margin-top:var(--zar-v2-space-5); }
.zar-v2-confirm__actions button { padding:var(--zar-v2-space-2) var(--zar-v2-space-4); border:1px solid var(--zar-v2-border-strong); border-radius:var(--zar-v2-radius-sm); background:var(--zar-v2-bg-surface); color:var(--zar-v2-text-primary); font-weight:var(--zar-v2-font-weight-semibold); }
.zar-v2-confirm__actions button.is-destructive { border-color:color-mix(in srgb, var(--zar-v2-state-danger) 55%, transparent); color:var(--zar-v2-state-danger); background:color-mix(in srgb, var(--zar-v2-state-danger) 10%, var(--zar-v2-bg-surface)); }

.zar-v2-undo { position:fixed; left:50%; bottom:24px; z-index:calc(var(--zar-v2-z-fullscreen) + 2); transform:translateX(-50%); display:flex; align-items:center; gap:var(--zar-v2-space-4); max-width:calc(100vw - 32px); padding:var(--zar-v2-space-3) var(--zar-v2-space-4); border:1px solid var(--zar-v2-border-strong); border-radius:var(--zar-v2-radius-md); background:var(--zar-v2-undo-bg); color:var(--zar-v2-text-primary); box-shadow:var(--zar-v2-shadow-3); font-size:var(--zar-v2-font-size-sm); animation:zar-v2-undo-attention 420ms var(--zar-v2-ease-emphasized) 2; }
.zar-v2-undo button { color:var(--zar-v2-accent); font-weight:var(--zar-v2-font-weight-bold); }

@keyframes zar-v2-undo-attention {
  0%, 100% { transform:translateX(-50%) scale(1); }
  50% { transform:translateX(-50%) scale(1.018); box-shadow:var(--zar-v2-shadow-4); }
}
@media (prefers-reduced-motion: reduce) { .zar-v2-undo { animation:none; } }

/* ---- projects ---------------------------------------------- */
.zar-v2-sidebar__new-project {
  display: flex;
  align-items: center;
  gap: var(--zar-v2-space-2);
  width: 100%;
  padding: var(--zar-v2-space-2);
  border-radius: var(--zar-v2-radius-sm);
  font-size: var(--zar-v2-font-size-sm);
  color: var(--zar-v2-text-secondary);
}
.zar-v2-sidebar__new-project:hover { background: var(--zar-v2-bg-surface); color: var(--zar-v2-text-primary); }
.zar-v2-sidebar__new-project svg { width: 14px; height: 14px; }

/* COMMENT BLOCK
   PATCH: Phase 2A authenticated Project CRUD presentation
   NAME: ZAR AI v2
   DATE: 2026-09-06
   TIME: 15:10
   WHY: Reuse chat lifecycle interaction language for organizational
   Project rows without introducing project conversation state. */
.zar-v2-project-list { margin:0; padding:0; list-style:none; }
.zar-v2-project { min-width:0; list-style:none; border-radius:var(--zar-v2-radius-sm); }
.zar-v2-project-row { position:relative; display:flex; align-items:center; min-width:0; border-radius:var(--zar-v2-radius-sm); }
.zar-v2-project-row:hover, .zar-v2-project-row:focus-within { background:var(--zar-v2-bg-surface); }
.zar-v2-project-row__icon { flex:0 0 auto; width:15px; height:15px; margin-left:var(--zar-v2-space-2); color:var(--zar-v2-accent); }
.zar-v2-project-row__icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.zar-v2-project-row__name { flex:1 1 auto; min-width:0; overflow:hidden; padding:var(--zar-v2-space-2); color:var(--zar-v2-text-secondary); font-size:var(--zar-v2-font-size-sm); text-overflow:ellipsis; white-space:nowrap; }
.zar-v2-project-row__toggle { display:flex; min-width:0; flex:1 1 auto; align-items:center; border-radius:var(--zar-v2-radius-sm); text-align:left; }
.zar-v2-project-row__toggle:focus-visible { outline:none; box-shadow:var(--zar-v2-focus-ring); }
.zar-v2-project-row__disclosure { flex:0 0 auto; color:var(--zar-v2-text-muted); transform:rotate(0); transition:transform var(--zar-v2-duration-fast) var(--zar-v2-ease-standard); }
.zar-v2-project-row__toggle[aria-expanded="true"] .zar-v2-project-row__disclosure { transform:rotate(90deg); }
.zar-v2-project-row__count { flex:0 0 auto; min-width:20px; margin-right:var(--zar-v2-space-1); padding:1px 6px; border-radius:999px; background:var(--zar-v2-accent-soft); color:var(--zar-v2-accent); font-size:11px; text-align:center; }
.zar-v2-project-chat-browser { min-width:0; margin-left:var(--zar-v2-space-4); }
.zar-v2-project-chat-browser[hidden] { display:none; }
.zar-v2-project-chat-search { position:sticky; top:0; z-index:1; padding:var(--zar-v2-space-1) var(--zar-v2-space-2); background:var(--zar-v2-bg-surface-sunken); }
.zar-v2-project-chat-search input { width:100%; min-width:0; padding:7px 8px; border:1px solid var(--zar-v2-border-subtle); border-radius:var(--zar-v2-radius-xs); background:var(--zar-v2-bg-surface); color:var(--zar-v2-text-primary); font-size:11px; }
.zar-v2-project-chat-search input:focus-visible { outline:none; border-color:var(--zar-v2-border-focus); box-shadow:var(--zar-v2-focus-ring); }
.zar-v2-project-chat-list { min-width:0; max-height:360px; margin:0; padding:var(--zar-v2-space-1) var(--zar-v2-space-1) var(--zar-v2-space-2) 0; list-style:none; overflow-y:auto; overscroll-behavior:contain; }
.zar-v2-project-chat-list[hidden] { display:none; }
.zar-v2-chat-row.is-project-chat { min-width:0; }
.zar-v2-chat-row.is-project-chat .zar-v2-chat-item { align-items:flex-start; font-size:var(--zar-v2-font-size-xs); }
.zar-v2-chat-item__copy { display:flex; min-width:0; flex:1 1 auto; flex-direction:column; overflow:hidden; }
.zar-v2-chat-item__copy > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zar-v2-chat-item__copy time { margin-top:2px; color:var(--zar-v2-text-muted); font-family:var(--zar-v2-font-mono); font-size:9px; font-weight:400; line-height:1.2; white-space:nowrap; }
.zar-v2-project-chat-status { padding:var(--zar-v2-space-2); color:var(--zar-v2-text-muted); font-size:11px; }
.zar-v2-project-chat-more { width:100%; padding:var(--zar-v2-space-2); color:var(--zar-v2-accent); font-size:var(--zar-v2-font-size-xs); text-align:left; border-radius:var(--zar-v2-radius-xs); }
.zar-v2-project-chat-more:hover { background:var(--zar-v2-accent-soft); }
@media (hover:hover) and (pointer:fine) {
  .zar-v2-project-chat-list { scrollbar-width:thin; scrollbar-color:transparent transparent; }
  .zar-v2-project-chat-list:hover, .zar-v2-project-chat-list:focus-within { scrollbar-color:var(--zar-v2-compact-history-scrollbar-active) transparent; }
  .zar-v2-project-chat-list::-webkit-scrollbar { width:6px; }
  .zar-v2-project-chat-list::-webkit-scrollbar-track { background:transparent; }
  .zar-v2-project-chat-list::-webkit-scrollbar-thumb { background:transparent; border-radius:999px; }
  .zar-v2-project-chat-list:hover::-webkit-scrollbar-thumb, .zar-v2-project-chat-list:focus-within::-webkit-scrollbar-thumb { background:var(--zar-v2-compact-history-scrollbar-active); }
}
/* ==========================================================================
   PATCH: Sidebar mobile legibility bump
   DATE.TIME: 2026-09-08 15:05
   REASON (30 words max):
   On phone widths the sidebar list/menu/label text rendered at 0.68-0.82rem
   (and several hard 9-11px values) - below a readable minimum. Nudge primary
   text toward ~14px and meta toward ~12px at <=560px only.
   ========================================================================== */
@media (max-width:560px) {
  .zar-v2-project-chat-search input { font-size:16px; }

  .zar-v2-sidebar__new,
  .zar-v2-chat-item,
  .zar-v2-project-row__name,
  .zar-v2-chat-item__menu button,
  .zar-v2-chat-project-menu button,
  .zar-v2-chat-project-menu.is-floating button,
  .zar-v2-project-row__menu button,
  .zar-v2-trash-trigger { font-size:0.9rem; }

  .zar-v2-chat-row.is-project-chat .zar-v2-chat-item,
  .zar-v2-sidebar__new-project,
  .zar-v2-project-chat-more,
  .zar-v2-trash-filter button { font-size:0.86rem; }

  .zar-v2-sidebar__heading { font-size:0.74rem; }

  .zar-v2-chat-project-menu__empty,
  .zar-v2-project-chat-status,
  .zar-v2-project-row__count,
  .zar-v2-trash-trigger__badge,
  .zar-v2-trash-panel__empty,
  .zar-v2-trash-panel__section-head small { font-size:0.8rem; }

  .zar-v2-chat-item__copy time { font-size:0.72rem; }
}
.zar-v2-project-row__edit,
.zar-v2-project-row__menu-btn { flex:0 0 auto; display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; color:var(--zar-v2-text-muted); border-radius:var(--zar-v2-radius-xs); }
.zar-v2-project-row__edit { opacity:0; }
.zar-v2-project-row:hover .zar-v2-project-row__edit,
.zar-v2-project-row:focus-within .zar-v2-project-row__edit { opacity:1; }
.zar-v2-project-row__edit svg,
.zar-v2-project-row__menu-btn svg,
.zar-v2-project-editor button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.zar-v2-project-row__menu { position:absolute; top:calc(100% - 2px); right:0; z-index:3; min-width:160px; padding:var(--zar-v2-space-1); border:1px solid var(--zar-v2-border-strong); border-radius:var(--zar-v2-radius-sm); background:var(--zar-v2-transient-bg); box-shadow:var(--zar-v2-shadow-2); }
.zar-v2-project-row__menu[hidden] { display:none; }
.zar-v2-project-row__menu button { display:flex; width:100%; align-items:center; gap:var(--zar-v2-space-2); padding:var(--zar-v2-space-2); border-radius:var(--zar-v2-radius-xs); color:var(--zar-v2-state-danger); font-size:var(--zar-v2-font-size-sm); }
.zar-v2-project-row__menu svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.zar-v2-project-editor { display:flex; align-items:center; gap:var(--zar-v2-space-1); padding:var(--zar-v2-space-1); border-radius:var(--zar-v2-radius-sm); background:var(--zar-v2-rename-bg); }
.zar-v2-project-editor input { min-width:0; flex:1 1 auto; padding:var(--zar-v2-space-2); border:1px solid var(--zar-v2-border-strong); border-radius:var(--zar-v2-radius-xs); background:var(--zar-v2-bg-surface); color:var(--zar-v2-text-primary); }
.zar-v2-project-editor button { flex:0 0 auto; display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; color:var(--zar-v2-text-secondary); border-radius:var(--zar-v2-radius-xs); }

/* Phase 2A.1 unified, transient soft-delete recovery surface. */
.zar-v2-trash-wrap { position:relative; margin-top:var(--zar-v2-space-4); }
.zar-v2-trash-trigger { display:flex; width:100%; align-items:center; gap:var(--zar-v2-space-2); padding:var(--zar-v2-space-2); border-radius:var(--zar-v2-radius-sm); color:var(--zar-v2-text-muted); font-size:var(--zar-v2-font-size-sm); }
.zar-v2-trash-trigger:hover, .zar-v2-trash-trigger[aria-expanded="true"] { background:var(--zar-v2-bg-surface); color:var(--zar-v2-text-primary); }
.zar-v2-trash-trigger [data-zar-v2-trash-trigger-icon] { display:inline-flex; width:16px; height:16px; flex:0 0 auto; color:var(--zar-v2-text-muted); }
.zar-v2-trash-trigger [data-zar-v2-trash-trigger-icon] svg { width:16px; height:16px; }
.zar-v2-trash-trigger[data-trash-occupied="true"] [data-zar-v2-trash-trigger-icon] { color:var(--zar-v2-trash-occupied-accent); }
.zar-v2-trash-trigger[data-trash-occupied="true"]:hover [data-zar-v2-trash-trigger-icon], .zar-v2-trash-trigger[data-trash-occupied="true"]:focus-visible [data-zar-v2-trash-trigger-icon] { color:var(--zar-v2-trash-occupied-hover); }
.zar-v2-trash-trigger__badge { min-width:20px; margin-left:auto; padding:1px 6px; border-radius:999px; background:var(--zar-v2-accent-soft); color:var(--zar-v2-accent); font-size:11px; text-align:center; }
.zar-v2-trash-panel { position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:8; display:flex; max-height:min(480px, 70vh, var(--zar-v2-trash-available-height, 70vh)); flex-direction:column; overflow:hidden; padding:var(--zar-v2-space-3); border:1px solid var(--zar-v2-border-strong); border-radius:var(--zar-v2-radius-md); background:var(--zar-v2-transient-bg); box-shadow:var(--zar-v2-shadow-2); }
.zar-v2-trash-panel[data-placement="below"] { top:calc(100% + 6px); bottom:auto; }
.zar-v2-trash-panel[hidden] { display:none; }
.zar-v2-trash-panel__title { margin-bottom:var(--zar-v2-space-3); color:var(--zar-v2-text-primary); font-size:var(--zar-v2-font-size-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.zar-v2-trash-panel__scroll { min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; }
.zar-v2-trash-panel__section + .zar-v2-trash-panel__section { margin-top:var(--zar-v2-space-4); padding-top:var(--zar-v2-space-3); border-top:1px solid var(--zar-v2-border-subtle); }
.zar-v2-trash-panel__section-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--zar-v2-space-2); margin-bottom:var(--zar-v2-space-2); }
.zar-v2-trash-panel__section-head strong { color:var(--zar-v2-text-primary); font-size:var(--zar-v2-font-size-sm); }
.zar-v2-trash-panel__section-head small, .zar-v2-trash-panel__empty { color:var(--zar-v2-text-muted); font-size:11px; }
.zar-v2-trash-panel__empty { margin:var(--zar-v2-space-2) 0; }
.zar-v2-trash-item { display:flex; align-items:center; gap:var(--zar-v2-space-2); padding:var(--zar-v2-space-1) 0; }
.zar-v2-trash-item__copy { display:flex; min-width:0; flex:1; flex-direction:column; overflow:hidden; color:var(--zar-v2-text-secondary); font-size:var(--zar-v2-font-size-sm); }
.zar-v2-trash-item__copy > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zar-v2-trash-item__copy time { overflow:hidden; margin-top:1px; color:var(--zar-v2-text-muted); font-family:var(--zar-v2-font-mono); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.zar-v2-trash-item__actions { display:inline-flex; flex:0 0 auto; align-items:center; gap:2px; }
.zar-v2-trash-item__actions button { display:inline-flex; width:28px; height:28px; flex:0 0 auto; align-items:center; justify-content:center; padding:0; border-radius:var(--zar-v2-radius-xs); color:var(--zar-v2-accent); }
.zar-v2-trash-item__actions button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.zar-v2-trash-item__actions button:hover { background:var(--zar-v2-accent-soft); }
.zar-v2-trash-item__actions button.is-destructive { color:var(--zar-v2-state-danger); }
.zar-v2-trash-item__actions button.is-destructive:hover { background:color-mix(in srgb, var(--zar-v2-state-danger) 10%, transparent); }
.zar-v2-trash-item__actions button:focus-visible { outline:none; box-shadow:var(--zar-v2-focus-ring); }
.zar-v2-trash-item__actions button:disabled { opacity:.45; cursor:wait; }
.zar-v2-trash-panel__loading { display:block; padding:var(--zar-v2-space-2); color:var(--zar-v2-text-muted); font-size:11px; text-align:center; }
.zar-v2-trash-toolbar { position:relative; display:flex; flex:0 0 auto; align-items:center; gap:var(--zar-v2-space-1); margin:var(--zar-v2-space-2) calc(-1 * var(--zar-v2-space-1)) calc(-1 * var(--zar-v2-space-1)); padding:var(--zar-v2-space-2) var(--zar-v2-space-1) var(--zar-v2-space-1); border-top:1px solid var(--zar-v2-border-subtle); background:var(--zar-v2-transient-bg); }
.zar-v2-trash-toolbar input { min-width:0; flex:1 1 auto; padding:7px 8px; border:1px solid var(--zar-v2-border-subtle); border-radius:var(--zar-v2-radius-xs); background:var(--zar-v2-bg-surface); color:var(--zar-v2-text-primary); font-size:11px; }
.zar-v2-trash-toolbar > button { display:inline-flex; width:30px; height:30px; flex:0 0 auto; align-items:center; justify-content:center; border-radius:var(--zar-v2-radius-xs); color:var(--zar-v2-text-secondary); }
.zar-v2-trash-toolbar > button:hover { background:var(--zar-v2-accent-soft); color:var(--zar-v2-accent); }
.zar-v2-trash-toolbar > button[data-zar-v2-trash-restore-all][data-restore-available="true"] { color:var(--zar-v2-trash-restore-accent); }
.zar-v2-trash-toolbar > button[data-zar-v2-trash-restore-all][data-restore-available="true"]:hover,
.zar-v2-trash-toolbar > button[data-zar-v2-trash-restore-all][data-restore-available="true"]:focus-visible { color:var(--zar-v2-trash-restore-hover); background:color-mix(in srgb, var(--zar-v2-trash-restore-accent) 10%, transparent); }
.zar-v2-trash-toolbar > button[data-zar-v2-trash-empty][data-trash-occupied="true"] { color:var(--zar-v2-trash-occupied-accent); }
.zar-v2-trash-toolbar > button[data-zar-v2-trash-empty][data-trash-occupied="true"]:hover,
.zar-v2-trash-toolbar > button[data-zar-v2-trash-empty][data-trash-occupied="true"]:focus-visible { color:var(--zar-v2-trash-occupied-hover); background:color-mix(in srgb, var(--zar-v2-trash-occupied-accent) 10%, transparent); }
.zar-v2-trash-toolbar > button:disabled { opacity:.38; cursor:not-allowed; background:transparent; color:var(--zar-v2-text-muted); }
.zar-v2-trash-toolbar > button:focus-visible { outline:none; box-shadow:var(--zar-v2-focus-ring); }
.zar-v2-trash-toolbar > button[data-filter-active="true"] { background:var(--zar-v2-accent-soft); color:var(--zar-v2-accent); box-shadow:inset 0 0 0 1px var(--zar-v2-border-strong); }
.zar-v2-trash-toolbar svg { width:16px; height:16px; }
.zar-v2-trash-panel__status { margin:var(--zar-v2-space-1) 0 0; color:var(--zar-v2-text-muted); font-size:10px; line-height:1.35; }
.zar-v2-trash-filter { position:absolute; right:34px; bottom:calc(100% + 4px); z-index:2; min-width:100px; padding:4px; border:1px solid var(--zar-v2-border-strong); border-radius:var(--zar-v2-radius-sm); background:var(--zar-v2-transient-bg); box-shadow:var(--zar-v2-shadow-2); }
.zar-v2-trash-filter[hidden] { display:none; }
.zar-v2-trash-filter button { display:block; width:100%; padding:6px 8px; border-radius:var(--zar-v2-radius-xs); color:var(--zar-v2-text-secondary); font-size:var(--zar-v2-font-size-xs); text-align:left; }
.zar-v2-trash-filter button:hover, .zar-v2-trash-filter button[aria-current="true"] { background:var(--zar-v2-accent-soft); color:var(--zar-v2-accent); }

@media (hover:hover) and (pointer:fine) {
  .zar-v2-trash-panel__scroll { scrollbar-width:thin; scrollbar-color:transparent transparent; }
  .zar-v2-trash-panel__scroll:hover, .zar-v2-trash-panel__scroll:focus-within { scrollbar-color:var(--zar-v2-compact-history-scrollbar-active) transparent; }
  .zar-v2-trash-panel__scroll::-webkit-scrollbar { width:6px; }
  .zar-v2-trash-panel__scroll::-webkit-scrollbar-track { background:transparent; }
  .zar-v2-trash-panel__scroll::-webkit-scrollbar-thumb { background:transparent; border-radius:999px; }
  .zar-v2-trash-panel__scroll:hover::-webkit-scrollbar-thumb, .zar-v2-trash-panel__scroll:focus-within::-webkit-scrollbar-thumb { background:var(--zar-v2-compact-history-scrollbar-active); }
}

@media (max-width:560px) {
  .zar-v2-trash-panel { max-height:min(65vh, var(--zar-v2-trash-available-height, 65vh)); }
  .zar-v2-trash-toolbar input { font-size:16px; }
}

.zar-v2-project {
  border-radius: var(--zar-v2-radius-sm);
}
.zar-v2-project + .zar-v2-project { margin-top: var(--zar-v2-space-1); }

.zar-v2-project__summary {
  display: flex;
  align-items: center;
  gap: var(--zar-v2-space-2);
  padding: var(--zar-v2-space-2);
  border-radius: var(--zar-v2-radius-sm);
  cursor: pointer;
  list-style: none;
}
.zar-v2-project__summary::-webkit-details-marker { display: none; }
.zar-v2-project__summary:hover { background: var(--zar-v2-bg-surface); }

.zar-v2-project__chevron {
  width: 12px;
  height: 12px;
  color: var(--zar-v2-text-muted);
  transition: transform var(--zar-v2-duration-fast) var(--zar-v2-ease-standard);
  flex: 0 0 auto;
}
.zar-v2-project[open] .zar-v2-project__chevron { transform: rotate(90deg); }

.zar-v2-project__icon {
  width: 15px;
  height: 15px;
  color: var(--zar-v2-accent);
  flex: 0 0 auto;
}

.zar-v2-project__body {
  min-width: 0;
  flex: 1 1 auto;
}
.zar-v2-project__body strong {
  display: block;
  font-size: var(--zar-v2-font-size-sm);
  color: var(--zar-v2-text-primary);
  font-weight: var(--zar-v2-font-weight-medium);
}
.zar-v2-project__body small {
  display: block;
  font-size: 0.7rem;
  color: var(--zar-v2-text-muted);
  margin-top: 1px;
}

.zar-v2-project__list {
  padding: var(--zar-v2-space-1) 0 var(--zar-v2-space-1) var(--zar-v2-space-6);
}

.zar-v2-sidebar__collapse {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: var(--zar-v2-space-2);
  margin: 0 var(--zar-v2-space-4) var(--zar-v2-space-4);
  padding: var(--zar-v2-space-2) var(--zar-v2-space-3);
  border-radius: var(--zar-v2-radius-sm);
  border: 1px solid var(--zar-v2-border-subtle);
  color: var(--zar-v2-text-muted);
  font-size: var(--zar-v2-font-size-xs);
}