/*
 * web-overrides.css — small web-only tweaks layered on top of the real chat
 * CSS. The browser client is a remote view of someone else's host, so a few
 * desktop-only affordances are hidden here rather than forked in the shared UI.
 */

/* "Advanced / Setup" jumps to the desktop Setup tab, which doesn't exist on
 * the web (a remote client can't change the host's model/config). Hide it but
 * keep the brand mark beside it. */
.cm-side-foot .cm-icon-btn { display: none !important; }

/* ──────────────────────────────────────────────────────────────────────────
 * Mobile. chat.css is desktop-only (no media queries) because the Electron tab
 * is always wide. The browser client runs on phones, so add the responsive
 * layer here. This file is loaded ONLY by the web client (never the Electron
 * tab) and the rules are media-gated, so the desktop app is untouched.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Sidebar: the collapsed rail stays a thin launcher, but EXPANDING it now
     slides an overlay drawer over the chat instead of shoving the whole
     conversation off a 390px-wide screen. Tap the same toggle to close. */
  .cm-sidebar.expanded {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(84vw, 300px); flex-basis: auto;
    /* Opaque (the desktop rail is ~transparent) + above chat.css's z:300
       popovers, so the drawer covers the chat instead of showing through it. */
    background: var(--bg);
    z-index: 1000; box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
  }

  /* Landing: the giant serif greeting + fixed-width composer card overflow a
     phone — scale the greeting down and let the composer use full width. */
  .cm-greet { font-size: 30px; }
  .cm-composer-wrap,
  .cm-landing .cm-composer-wrap { max-width: 100%; }

  /* Chatbar: keep the action row on a single line. The model pill (e.g.
     "Local · Qwen 3.6 27B") was wrapping to three lines and crowding send. */
  .cm-composer-bar { padding: 10px 12px max(14px, env(safe-area-inset-bottom)); }
  .cm-composer { padding: 12px 12px 8px; }
  .cm-composer-row { gap: 6px; }
  .cm-composer-left { gap: 6px; }
  .cm-composer-right { gap: 6px; min-width: 0; }
  .cm-tools { padding: 0 10px 0 9px; font-size: 12px; }
  /* The full model label ("Local · Qwen 3.6 27B") runs off a phone. On mobile
     the pill becomes a compact "Info" button — web-mobile.js intercepts its
     click to show model/host info instead of the model picker (you can't
     change the host's model from a remote device anyway). The <b> stays in the
     DOM (just hidden) so the handler can read the current model name. */
  .cm-model-pill { border-color: var(--border-strong); padding: 5px 11px; }
  .cm-model-pill b, .cm-model-pill .cm-caret { display: none; }
  .cm-model-pill::after { content: "Info"; color: var(--text-dim); font-size: 12.5px; }

  /* Artifacts: a 360px-min side column can't coexist with the chat on a phone.
     Make the panel a full-screen overlay (its 44px head keeps the × close). */
  #chatRoot.cm-has-panel .cm-artifact-panel {
    position: fixed; inset: 0; z-index: 70;
    flex: none; width: 100%; min-width: 0; max-width: 100%;
    border-left: 0;
  }
}