/* ============================================================
   AlansForge UI layer  -  forge-ui.css
   ------------------------------------------------------------
   Loaded AFTER styles.css. The product already ships the
   AlansForge "Deep Paper" tokens verbatim, so this file does
   NOT re-skin colors. It adds, faithfully to the design system
   (colors_and_type.css + ui_kits/app/kit.css):
     1. brand webfont wiring (mono for code & numerics)
     2. skeleton preloaders (conversation list + message stream)
     3. the boot splash
     4. a dedicated in-SPA mobile shell (body.is-mobile)
   Mobile rules are prefixed with `body.is-mobile` so they win on
   specificity over the existing @media blocks without !important.
   ============================================================ */

:root {
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fg-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 1. Brand typography ---------------------------- */
/* The kit uses JetBrains Mono for code and dense numerics. */
.message-bubble code,
.message-bubble pre,
.message-bubble pre code,
.message-bubble pre code.hljs,
.stat-value,
.api-key-value,
.code-block,
.code-block code {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
}

/* ---------- 2. Skeleton preloaders ------------------------- */
@keyframes fgShimmer {
  0%   { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}

.fg-skel {
  --skel-base: var(--bg-tertiary);
  --skel-hi: color-mix(in srgb, var(--bg-tertiary) 55%, var(--bg-primary));
  background-color: var(--bg-tertiary); /* fallback if color-mix unsupported */
  background: linear-gradient(90deg,
    var(--skel-base) 0%, var(--skel-hi) 50%, var(--skel-base) 100%);
  background-size: 480px 100%;
  animation: fgShimmer 1.4s var(--fg-ease) infinite;
  border-radius: var(--radius-sm);
}

.fg-skeleton-list { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.fg-skel-convo {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-md);
}
.fg-skel-convo .fg-skel-ico { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; }
.fg-skel-convo .fg-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.fg-skel-convo .fg-skel-line-1 { height: 11px; width: 78%; }
.fg-skel-convo .fg-skel-line-2 { height: 9px;  width: 42%; opacity: 0.7; }

.fg-skeleton-messages {
  display: flex; flex-direction: column; gap: 28px;
  max-width: 820px; margin: 0 auto; width: 100%; padding: 28px 0;
}
.fg-skel-msg { display: flex; align-items: flex-start; gap: 16px; }
.fg-skel-msg .fg-skel-avatar { width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0; }
.fg-skel-msg .fg-skel-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.fg-skel-msg .fg-skel-body .fg-skel { height: 12px; }
.fg-skel-msg .fg-skel-w-90 { width: 90%; }
.fg-skel-msg .fg-skel-w-70 { width: 70%; }
.fg-skel-msg .fg-skel-w-80 { width: 80%; }
.fg-skel-msg .fg-skel-w-40 { width: 40%; }
.fg-skel-msg.is-user { flex-direction: row-reverse; }
.fg-skel-msg.is-user .fg-skel-body { align-items: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .fg-skel { animation: none; }
}

/* ---------- 3. Boot splash --------------------------------- */
#forgeSplash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; background: var(--bg-primary); color: var(--text-primary);
  transition: opacity 0.45s var(--fg-ease), visibility 0.45s var(--fg-ease);
}
#forgeSplash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.forge-splash-mark { height: 40px; width: auto; opacity: 0.92; }
.forge-mark-dark { display: none; }
[data-theme="dark"] .forge-mark-light { display: none; }
[data-theme="dark"] .forge-mark-dark { display: block; }
.forge-splash-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--border-color);
  border-top-color: var(--accent-color);
  animation: fgSpin 0.8s linear infinite;
}
.forge-splash-label {
  font: 500 0.8rem/1 var(--font-sans, 'Inter', sans-serif);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary);
}
@keyframes fgSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .forge-splash-spinner { animation-duration: 1.6s; }
}

/* ============================================================
   4. MOBILE SHELL  -  body.is-mobile  (its own verstka)
   Set by forge-ui.js when matchMedia('(max-width: 768px)').
   ============================================================ */

/* Authoritative mobile chat column. showPage() sets inline display:block
   when the page is visible, so we match [style*="block"] and override it
   with a flex column (only while visible). The bottom tab nav becomes the
   last flex child; header + scroll + composer live inside .chat-main.
   Nothing is position:sticky, so the nav can never cover the composer. */
body.is-mobile #chatPage[style*="block"] {
  display: flex !important; flex-direction: column;
  height: calc(var(--app-vh, 1vh) * 100);
  overflow: hidden;
}
body.is-mobile #chatPage .chat-layout {
  flex: 1 1 auto; min-height: 0; height: auto !important; min-height: 0 !important;
}
body.is-mobile #chatPage .chat-main { flex: 1 1 auto; min-height: 0; height: auto; }
body.is-mobile #chatPage .messages-container { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* --- Old left drawer is retired on mobile: conversations live in a
       bottom sheet (section 5). Hide the drawer + its scrim so the
       existing toggle handlers become harmless no-ops. --- */
body.is-mobile .sidebar { display: none !important; }
body.is-mobile #sidebarOverlay,
body.is-mobile .sidebar-overlay { display: none !important; }

/* --- Claude-style top app bar: menu / title / compose --- */
body.is-mobile .chat-header {
  position: sticky; top: 0; z-index: 50;
  min-height: 56px; padding: 0.5rem 0.5rem;
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
  gap: 0.25rem;
  background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
  background: var(--bg-primary);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-color);
}
body.is-mobile .chat-header .conversation-title {
  text-align: center; font-size: 0.95rem; font-weight: 600;
}
/* Compose button injected into the header on mobile (Claude top-right) */
.forge-header-new { display: none; }
body.is-mobile .forge-header-new { display: inline-flex; }

/* --- Message stream: roomy, edge-aware --- */
body.is-mobile .messages-container { padding: 0 0.875rem 0.5rem; -webkit-overflow-scrolling: touch; }
body.is-mobile .message { padding: 0.875rem 0; gap: 0.75rem; }
body.is-mobile .message-avatar { width: 30px; height: 30px; }
body.is-mobile .message-content { font-size: 1rem; line-height: 1.7; }
body.is-mobile .message-bubble pre { border-radius: var(--radius-md); font-size: 0.82rem; }

/* --- Composer: a flex child of .chat-main pinned above the tab nav.
       NOT sticky/fixed, so it can never overlap the nav. --- */
body.is-mobile .message-input-container {
  position: relative; flex: 0 0 auto; z-index: 1;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}
body.is-mobile .input-wrapper {
  border-radius: var(--radius-xl);
  padding: 0.625rem 0.75rem 0.5rem;
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.25) !important;
}
body.is-mobile .message-form { max-width: 100%; }
body.is-mobile #messageInput { font-size: 16px; } /* >=16px stops iOS zoom-on-focus */

/* Keep the model selector from eating the controls row */
body.is-mobile .model-selector select { max-width: 38vw; }

/* --- Bottom tab nav: last flex child of #chatPage (static), glassy --- */
body.is-mobile .mobile-bottom-nav {
  position: static; flex: 0 0 auto; z-index: 2;
  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
  background: var(--bg-secondary);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
body.is-mobile .mobile-nav-btn { min-height: 52px; padding: 0.45rem 0.25rem; }
body.is-mobile .mobile-nav-btn.active { color: var(--accent-color); }
body.is-mobile .mobile-nav-btn.active .icon { transform: translateY(-1px); transition: transform 0.18s var(--fg-ease); }

/* --- New-chat empty state (mobile) ---------------------------------
   The base layout locks .empty-state to the viewport height (flex:1).
   On a phone the hero + quick actions + categories + suggestion cards
   don't fit, so the flex children compress and their content spills out
   of its box and overlaps the next section. Fix: let the empty state
   take its natural height and scroll inside the message area, and stop
   every section from shrinking. */
body.is-mobile .chat-main:has(.empty-state) .messages-container { overflow-y: auto; }
body.is-mobile .empty-state {
  flex: 0 0 auto;
  height: auto;
  min-height: 100%;
  justify-content: flex-start;
  gap: 0;
  padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
body.is-mobile .empty-state-hero,
body.is-mobile .empty-state-quick-actions,
body.is-mobile .chat-categories,
body.is-mobile .example-suggestions { flex: 0 0 auto; width: 100%; }
body.is-mobile .empty-state-quick-actions { margin-bottom: 0.75rem; }
body.is-mobile .chat-categories { margin-bottom: 1rem; }
body.is-mobile .example-suggestions { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
body.is-mobile .example-item { min-height: 0; }

/* --- Settings/admin on mobile: compact top bar + horizontal
       pill nav + scrollable content. Sections are switched by
       tapping a pill or swiping left/right (forge-ui.js). --- */
body.is-mobile .settings-layout {
  flex-direction: column;
  height: calc(var(--app-vh, 1vh) * 100);
  overflow: hidden;
}
body.is-mobile .settings-sidebar {
  flex: 0 0 auto; width: 100%; min-width: 0;
  padding: 0.4rem 0.9rem 0;
  border-right: 0;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
  overflow: visible;
}
body.is-mobile .settings-sidebar-header {
  margin-bottom: 0.4rem;
  padding: calc(0.35rem + env(safe-area-inset-top, 0px)) 0 0.35rem;
  border-bottom: 0;
  gap: 0.5rem;
}
body.is-mobile .settings-sidebar-header h2 { font-size: 1.1rem; }
body.is-mobile .settings-nav {
  flex-direction: row;
  overflow-x: auto;
  gap: 0.4rem;
  padding-bottom: 0.65rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
body.is-mobile .settings-nav::-webkit-scrollbar { display: none; }
body.is-mobile .settings-nav-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
}
body.is-mobile .settings-nav-btn.active {
  background: var(--text-primary);
  color: var(--bg-primary);
  box-shadow: none;
}
body.is-mobile .settings-nav-btn.active::before { display: none; }
body.is-mobile .settings-content-area {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  max-width: 100%;
}

/* Section change animation, triggered by swipe navigation */
@keyframes fgSlideL {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fgSlideR {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}
.settings-section.fg-slide-left  { animation: fgSlideL 0.28s var(--fg-ease); }
.settings-section.fg-slide-right { animation: fgSlideR 0.28s var(--fg-ease); }
@media (prefers-reduced-motion: reduce) {
  .settings-section.fg-slide-left,
  .settings-section.fg-slide-right { animation: none; }
}

/* Mobile skeleton spacing matches the tighter stream */
body.is-mobile .fg-skeleton-messages { padding: 18px 0; gap: 22px; }

/* --- Modals on mobile: full-width bottom sheet, normalized field sizes
       so nothing overlaps and inputs never overflow the content box.
       A drag handle on top signals the drag-down-to-dismiss gesture
       (wired in forge-ui.js). --- */
body.is-mobile .modal { padding: 0; align-items: flex-end; }
body.is-mobile .modal-content {
  width: 100%; max-width: 100%; max-height: 92dvh;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow-y: auto;
  transition: transform 0.28s var(--fg-ease);
}
body.is-mobile .modal-content.fg-dragging { transition: none; }
body.is-mobile .modal:not(.image-viewer-modal) .modal-content::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--text-tertiary);
  opacity: 0.45;
  margin: 8px auto 0;
}
@media (prefers-reduced-motion: reduce) {
  body.is-mobile .modal-content { transition: none; }
}
body.is-mobile .modal-header { padding: 1rem 1.1rem 0.75rem; }
body.is-mobile .modal-header h3 { font-size: 1.2rem; }
body.is-mobile .modal-content form { padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
body.is-mobile .modal .form-group { margin-bottom: 0.9rem; }
body.is-mobile .modal input,
body.is-mobile .modal select,
body.is-mobile .modal textarea,
body.is-mobile .modal .custom-select-trigger {
  width: 100%; box-sizing: border-box; min-height: 46px; font-size: 16px;
}
body.is-mobile .modal .custom-select-container { width: 100%; max-width: 100%; }
body.is-mobile .modal-actions { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
body.is-mobile .modal-actions .btn { width: 100%; justify-content: center; min-width: 0; }
/* Stop the fixed model dropdown from covering the whole screen */
body.is-mobile .custom-select-dropdown { max-height: min(48vh, 320px); }
body.is-mobile .custom-select-options { max-height: min(40vh, 260px); }

/* ============================================================
   5. CONVERSATIONS BOTTOM SHEET (mobile)
   A thumb-reachable panel that slides up from the bottom. The
   real #conversationsList / search / account nodes are relocated
   into it by forge-ui.js, so all existing handlers keep working.
   ============================================================ */

.forge-sheet-overlay {
  display: none; /* mobile-only; enabled under body.is-mobile */
  position: fixed; inset: 0; z-index: 1900;
  background: rgba(8, 8, 10, 0.46);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--fg-ease), visibility 0.3s var(--fg-ease);
}
body.is-mobile .forge-sheet-overlay { display: block; }
.forge-sheet-overlay.visible { opacity: 1; visibility: visible; }

.forge-sheet {
  display: none; /* mobile-only; enabled under body.is-mobile */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  flex-direction: column;
  max-height: 86vh; height: 86vh;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -18px 50px -12px rgba(0, 0, 0, 0.4);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform 0.36s var(--fg-ease);
  will-change: transform;
  touch-action: none;
}
body.is-mobile .forge-sheet { display: flex; }
.forge-sheet.open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .forge-sheet { transition: transform 0.01s linear; }
}

.forge-sheet-handle {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--text-tertiary); opacity: 0.45;
  margin: 10px auto 4px; flex-shrink: 0;
}
.forge-sheet-head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 6px 14px 10px; flex-shrink: 0;
}
.forge-sheet-title {
  font: 600 1.05rem/1 var(--font-sans, 'Inter', sans-serif);
  color: var(--text-primary); margin-right: auto; letter-spacing: -0.01em;
}
.forge-sheet-head .sb-top-actions { display: flex; align-items: center; gap: 2px; }
.forge-sheet-close {
  width: 34px; height: 34px; border: 0; border-radius: 999px;
  background: var(--bg-tertiary); color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s, color 0.2s; flex-shrink: 0;
}
.forge-sheet-close:active { transform: scale(0.94); }

/* Prominent New chat row (Claude) */
.forge-sheet-new {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 12px; padding: 13px 16px;
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  background: var(--bg-primary); color: var(--text-primary);
  font: 600 15px/1 var(--font-sans, 'Inter', sans-serif); cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.12s;
}
.forge-sheet-new:hover { border-color: var(--accent-color); }
.forge-sheet-new:active { transform: scale(0.99); }
.forge-sheet-new .icon { width: 18px; height: 18px; color: var(--accent-color); }

.forge-sheet-search-slot { padding: 0 14px; flex-shrink: 0; }
.forge-sheet-search-slot .sb-search-wrap { display: flex !important; margin: 0 0 10px; }

.forge-sheet-label {
  padding: 4px 18px 8px; flex-shrink: 0;
  font: 600 0.72rem/1 var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary);
}

.forge-sheet-list-slot { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 6px; }
.forge-sheet-list-slot .conversations-list {
  display: flex !important; height: 100%; overflow-y: auto;
  -webkit-overflow-scrolling: touch; flex-direction: column; gap: 2px; padding: 0 6px;
  overscroll-behavior: contain;
}
.forge-sheet-list-slot .conversation-item { min-height: 52px; }

.forge-sheet-foot-slot { flex-shrink: 0; padding: 8px 12px 4px; border-top: 1px solid var(--border-color); }
.forge-sheet-foot-slot .sb-user-row { display: flex !important; }

/* When the sheet is open, lock the bottom tab nav under the scrim */
body.forge-sheet-open .mobile-bottom-nav { z-index: 1; }

/* ============================================================
   6. INSTALL-THE-APP POPUP
   forge-ui.js owns the single install UI; the legacy banner is
   retired to avoid a duplicate prompt.
   ============================================================ */
#installBanner { display: none !important; }

.forge-install {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 3000;
  max-width: 460px; margin: 0 auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.4);
  padding: 14px 16px;
  transform: translateY(150%); opacity: 0;
  transition: transform 0.4s var(--fg-ease), opacity 0.4s var(--fg-ease);
}
.forge-install.show { transform: translateY(0); opacity: 1; }
body.is-mobile .forge-install { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

.forge-install-x {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.forge-install-x:hover { background: var(--bg-tertiary); color: var(--text-secondary); }
.forge-install-x .icon { width: 16px; height: 16px; }

.forge-install-row { display: flex; gap: 12px; align-items: center; padding-right: 26px; }
.forge-install-icon { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.forge-install-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.forge-install-text strong { font: 600 15px/1.2 var(--font-sans, 'Inter', sans-serif); color: var(--text-primary); }
.forge-install-text span { font: 400 13px/1.45 var(--font-sans, 'Inter', sans-serif); color: var(--text-secondary); }

.forge-install-actions { margin-top: 12px; }
.forge-install-btn {
  width: 100%; padding: 11px; border: 0; border-radius: var(--radius-lg);
  background: var(--text-primary); color: var(--bg-primary); /* contrast-safe in both themes */
  font: 600 14px/1 var(--font-sans, 'Inter', sans-serif); cursor: pointer;
  transition: opacity 0.2s, transform 0.12s;
}
.forge-install-btn:hover { opacity: 0.9; }
.forge-install-btn:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .forge-install { transition: opacity 0.2s; transform: none; }
  .forge-install.show { transform: none; }
}

/* ============================================================
   7. CONVERSATION ROW ACTIONS (rename / delete)
   Rows are decorated by forge-ui.js: the original children move
   into .fg-swipe-inner and an action strip sits behind them.
   Mobile: swipe the row left to reveal. Desktop: shown on hover.
   ============================================================ */
.conversation-item[data-fg-swipe] {
  position: relative;
  overflow: hidden;
}
.fg-swipe-inner {
  display: flex; align-items: center; gap: 0;
  width: 100%; min-width: 0;
  position: relative; z-index: 1;
  transition: transform 0.24s var(--fg-ease);
  will-change: transform;
}
.fg-swipe-actions {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; z-index: 0;
}
.fg-act {
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: opacity 0.15s, transform 0.12s;
}
.fg-act .icon { width: 17px; height: 17px; }
.fg-act:active { transform: scale(0.94); }

/* Mobile: full-height strip revealed behind the sliding row.
   Hidden until a swipe starts so it never shows through the row. */
body.is-mobile .fg-swipe-actions { visibility: hidden; }
body.is-mobile .conversation-item.fg-swiping .fg-swipe-actions,
body.is-mobile .conversation-item.fg-swiped .fg-swipe-actions { visibility: visible; }
body.is-mobile .fg-act { width: 64px; }
body.is-mobile .fg-act-rename { background: var(--accent-color); }
body.is-mobile .fg-act-delete { background: var(--error-color); }
/* While sliding, the row content needs an opaque background so the
   action strip does not show through mid-drag. */
body.is-mobile .conversation-item.fg-swiping .fg-swipe-inner,
body.is-mobile .conversation-item.fg-swiped .fg-swipe-inner {
  background: var(--bg-secondary);
}
body.is-mobile .conversation-item.active.fg-swiping .fg-swipe-inner,
body.is-mobile .conversation-item.active.fg-swiped .fg-swipe-inner {
  background: var(--bg-tertiary);
}

/* Desktop: compact icon buttons appear on hover, right-aligned */
body:not(.is-mobile) .fg-swipe-actions {
  top: 50%; bottom: auto; right: 6px;
  transform: translateY(-50%);
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
body:not(.is-mobile) .conversation-item:hover .fg-swipe-actions,
body:not(.is-mobile) .conversation-item:focus-within .fg-swipe-actions {
  opacity: 1;
  pointer-events: auto;
}
/* Keep the title from running under the hover buttons */
body:not(.is-mobile) .conversation-item:hover .fg-swipe-inner,
body:not(.is-mobile) .conversation-item:focus-within .fg-swipe-inner {
  padding-right: 60px;
}
body:not(.is-mobile) .fg-act {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
body:not(.is-mobile) .fg-act .icon { width: 14px; height: 14px; }
body:not(.is-mobile) .fg-act-rename:hover { color: var(--accent-color); }
body:not(.is-mobile) .fg-act-delete:hover { color: var(--error-color); }
@media (prefers-reduced-motion: reduce) {
  .fg-swipe-inner { transition: none; }
}

/* ============================================================
   8. GESTURE HINT TOAST (one-time, mobile)
   ============================================================ */
.forge-hint {
  position: fixed; left: 16px; right: 16px; z-index: 2800;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  margin: 0 auto; max-width: 420px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--text-primary); color: var(--bg-primary);
  font: 500 0.82rem/1.45 var(--font-sans, 'Inter', sans-serif);
  text-align: center;
  box-shadow: 0 10px 34px -10px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s var(--fg-ease), transform 0.3s var(--fg-ease);
  pointer-events: auto;
}
.forge-hint.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .forge-hint { transform: none; transition: opacity 0.2s; }
}