/* VeLens Cloud — web-host wrapper for the AI chat.
 *
 * The chat component itself (bubbles, history, result cards, tool trace,
 * pending-write card…) is styled by the SHARED skin vendor/ai-chat-dashboard.css
 * (source of truth: content/ui/ai-chat-dashboard.css, synced by
 * `npm run sync-studio`) on top of vendor/tokens.css + vendor/button.css —
 * identical to the extension. This file holds only what is web-specific:
 * the page-level container, the BU picker bar, layout heights, and the
 * Permissions popover suppression.
 */

/* ── Chat page: wider than the standard 860px content column — the chat is
      the whole page, give it room to breathe. ── */
.page.page-chat { max-width: 1160px; }

/* ── Chat container: a Studio card that fills the workspace page ── */
.mcx-chat {
  display: flex;
  flex-direction: column;
  /* 68px = main's 34px top + bottom padding. The BU picker now lives inside
     the chat header (no separate topbar row) — the card fills the viewport. */
  height: calc(100vh - 68px);
  min-height: 440px;
  border: 1px solid var(--mc-border-subtle);
  border-radius: var(--mc-radius-xl);
  background: var(--mc-surface);
  box-shadow: var(--mc-shadow-sm);
  overflow: hidden;
}

/* ── Merged header bar: component tools (New chat / History / credits) on the
      left, host-owned BU picker on the right — one generous white bar. ── */
.mcx-chat-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mc-border);
  background: var(--mc-surface);
}
/* One flat flex row: the component's header wrappers are flattened
   (display:contents) so its buttons/chips and the host BU picker are laid out
   together by .mcx-chat-header — [+ New chat][History] …… [BU ▼][credits].
   The picker's margin-left:auto pushes the right cluster over; order:1 on the
   credits chip places it AFTER the picker even though it renders inside the
   component's node. Menus (position:absolute) anchor to .mcx-chat-header. */
.mcx-chat-header-tools,
.mcx-chat-header .acd-header-bar { display: contents; }
.mcx-chat-header .acd-header-bar .acd-bu-chip { order: 1; margin-left: 0; }

.mcx-bu-picker { display: flex; align-items: center; gap: 9px; flex-shrink: 0; margin-left: auto; }
.mcx-bu-picker label { font-size: var(--mc-text-md); color: var(--mc-text-muted); font-weight: 600; white-space: nowrap; }
.mcx-bu-select {
  padding: 7px 10px;
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-lg);
  background: var(--mc-surface);
  color: var(--mc-text);
  font-size: var(--mc-text-md);
  min-width: 200px;
  max-width: 320px;
}
.mcx-bu-select:disabled { opacity: .6; }
.mcx-bu-select:focus-visible { outline: 2px solid var(--mc-primary); outline-offset: 2px; }

/* Mount node between .mcx-chat and .acd-wrap — must carry the flex chain, or
 * min-height:auto lets it grow to content height and the page scrolls instead
 * of the message list. */
.mcx-chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ── Canvas: side panel reviewing a pending email write ── */
.mcx-split { display: flex; gap: 18px; align-items: stretch; min-width: 0; }
.mcx-split > .mcx-chat { flex: 1; min-width: 0; }
/* Use the full window width while a review is open. */
.page.page-chat:has(.mcx-canvas-open) { max-width: none; }

.mcx-canvas {
  display: none;
  width: 46%;
  min-width: 400px;
  flex-shrink: 0;
  flex-direction: column;
  height: calc(100vh - 68px);
  border: 1px solid var(--mc-border-subtle);
  border-radius: var(--mc-radius-xl);
  background: var(--mc-surface);
  box-shadow: var(--mc-shadow-sm);
  overflow: hidden;
}
.mcx-canvas-open .mcx-canvas { display: flex; }

.mcx-canvas-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mc-border); }
.mcx-canvas-titles { flex: 1; min-width: 0; }
.mcx-canvas-title { font-weight: 700; font-size: var(--mc-text-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcx-canvas-sub { font-size: var(--mc-text-sm); color: var(--mc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcx-canvas-views { display: flex; border: 1px solid var(--mc-border); border-radius: var(--mc-radius-pill); overflow: hidden; flex-shrink: 0; }
.mcx-canvas-view { border: none; background: var(--mc-surface); color: var(--mc-text-muted); font-size: var(--mc-text-sm); padding: 5px 12px; cursor: pointer; }
.mcx-canvas-view.active { background: var(--mc-primary); color: #fff; }
.mcx-canvas-close { border: none; background: none; color: var(--mc-text-muted); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: var(--mc-radius-md); flex-shrink: 0; }
.mcx-canvas-close:hover { background: var(--mc-surface-2); color: var(--mc-text); }

.mcx-canvas-frame { flex: 1; min-height: 0; background: var(--mc-surface-2); padding: 14px; display: flex; justify-content: center; }
.mcx-canvas-frame iframe { width: 100%; height: 100%; border: 1px solid var(--mc-border-subtle); border-radius: var(--mc-radius-md); background: #fff; }
.mcx-canvas-frame.mobile iframe { width: 375px; }

.mcx-canvas-details { border-top: 1px solid var(--mc-border-subtle); padding: 8px 16px; }
.mcx-canvas-details summary { cursor: pointer; font-size: var(--mc-text-sm); color: var(--mc-text-muted); }
.mcx-canvas-details pre { max-height: 160px; overflow: auto; font-size: var(--mc-text-xs); background: var(--mc-surface-2); border-radius: var(--mc-radius-md); padding: 10px; margin: 8px 0 4px; }

.mcx-canvas-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--mc-border); }
.mcx-canvas-warn { margin-right: auto; font-size: var(--mc-text-sm); color: var(--mc-danger-strong); }

@media (max-width: 1100px) {
  /* Not enough width for a split — the canvas becomes a full-screen sheet.
     The ✕ (or resolving the write) returns to the chat. */
  .mcx-canvas-open .mcx-canvas { position: fixed; inset: 0; z-index: 60; width: auto; min-width: 0; height: 100%; border-radius: 0; }
}

/* Permissions popover is extension-only; the web host hides it. */
.acd-perms-menu { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile (≤768px) — matches app.css's breakpoint.

   Everything here is web-only on purpose: the acd-* skin
   (content/ui/ai-chat-dashboard.css) is SHARED with the extension's modal,
   which has its own sizing, so the phone overrides live in this sheet — which
   is linked after the vendored skin — rather than in the shared source.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* --topbar-h comes from app.css (56px under this breakpoint, 0 above it);
     40px = .main's 20px top + bottom padding. The dvh line wins where it is
     supported — 100vh on iOS measures the URL-bar-collapsed viewport and would
     push the composer off the bottom of the screen. */
  .mcx-chat {
    height: calc(100vh - var(--topbar-h) - 40px);
    height: calc(100dvh - var(--topbar-h) - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 320px; /* landscape phones: let the page scroll rather than crush the chat */
  }

  /* Header wraps into two clean rows instead of one ragged one:
       row 1  [+ New chat] [History] ······················· [credits]
       row 2  [Business unit  ▼ ...............................full width]
     order:1 on the picker is what forces the break; the credits chip drops
     back to order:0 (it is order:1 on desktop, where the picker is inline). */
  .mcx-chat-header { gap: 8px; padding: 10px 12px; }
  .mcx-chat-header .acd-header-bar .acd-bu-chip { order: 0; margin-left: auto; }
  .mcx-bu-picker { order: 1; width: 100%; margin-left: 0; }
  .mcx-bu-select { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 16px; min-height: 44px; }
  .mcx-chat-header .mc-btn--sm { min-height: 40px; }

  /* Full-bleed history dropdown — the desktop min-width:260px/left:12px
     overflowed the card on a 375px screen. */
  .acd-history-menu { left: 8px; right: 8px; min-width: 0; max-width: none; }

  /* Composer. 16px on the textarea is the iOS Safari zoom threshold: below it
     Safari zooms the page on focus and never zooms back out. */
  .acd-messages { padding: 12px; }
  .acd-form { padding: 10px 12px; gap: 6px; }
  .acd-input { font-size: 16px; min-height: 44px; }
  /* Three-class selector on purpose: app.css's blanket
     `.main .mc-btn:not(.mc-btn--icon) { min-height: 40px }` would otherwise
     out-specify a plain `.acd-send`, and the composer's Send is the one
     control worth the full 44px. */
  .mcx-chat .acd-form .acd-send { min-height: 44px; padding: 0 16px; }
  .acd-attach-btn { width: 44px; min-height: 44px; }

  .acd-action-grid { grid-template-columns: 1fr; }
  .acd-empty, .acd-empty--launcher { padding: 20px 12px; margin-top: 12px; }
  .acd-msg { max-width: 92%; }
  .acd-msg.acd-msg-has-cards { max-width: 100%; width: 100%; }

  /* Full-screen sheet already (see the 1100px rule); just keep it clear of
     the notch and the home indicator. */
  .mcx-canvas-open .mcx-canvas {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 480px) {
  /* .main tightens to 16px top/bottom at this width. */
  .mcx-chat {
    height: calc(100vh - var(--topbar-h) - 32px);
    height: calc(100dvh - var(--topbar-h) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .mcx-bu-picker label { font-size: var(--mc-text-sm); }
  /* The desktop 375px phone-preview width is wider than the phone itself. */
  .mcx-canvas-frame { padding: 8px; }
  .mcx-canvas-frame.mobile iframe { width: 100%; }
}