/* MIDE OS · Portal Cliente · Conversaciones (reference client/02). Layout of the view only:
   components come from ui/components.css and every value from ui/tokens.css. The view keeps the
   historical hook classes (.thread, .chat-body, .context-panel…) used by the E2E suites, so every
   property the legacy sheets set on them is restated here (the views layer wins).

   The three columns fill the viewport below the page header and never grow with their content:
   only the thread list, the messages and the context body scroll, so the composer is always in
   view (visual review 3, finding 1). */
@layer views {
  /* ADR 014: «Canal no conectado» (tokens only; the notice replaces the inbox, it never sits beside fake data). */
  .conv-channel-off { display: grid; gap: var(--mide-space-2); padding: var(--mide-space-5); max-width: 640px; }
  .conv-channel-off[hidden], .conv-layout[hidden] { display: none; }
  .conv-channel-off-title { margin: 0; font-size: var(--mide-text-lg); }
  .conv-channel-off-text { margin: 0; color: var(--mide-ink-2); }

  /* Issue 1172 (D1-A) «Canal de ensayo»: a dashed sandbox frame (same tone as «Simulado»), text and icon, never colour alone. */
  .conv-rehearsal { display: grid; gap: var(--mide-space-3); margin-bottom: var(--mide-space-3); padding: var(--mide-space-3) var(--mide-space-4); border: 1px dashed var(--mide-sandbox); border-radius: var(--mide-radius-sm); background: var(--mide-sandbox-bg); }
  .conv-rehearsal[hidden] { display: none; }
  .conv-rehearsal-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-2) var(--mide-space-3); }
  .conv-rehearsal-text { flex: 1 1 280px; margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .conv-rehearsal-form { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 260px) minmax(0, 1fr); gap: var(--mide-space-3); align-items: start; }
  .conv-rehearsal-field { display: grid; gap: var(--mide-space-1); min-width: 0; }
  .conv-rehearsal-phone { display: flex; align-items: center; gap: var(--mide-space-2); }
  .conv-rehearsal-prefix { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--mide-ink-2); }
  .conv-rehearsal-suffix { width: 7ch; min-width: 0; font-variant-numeric: tabular-nums; }
  .conv-rehearsal-message { width: 100%; min-height: 44px; resize: vertical; }
  .conv-rehearsal-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .conv-rehearsal-feedback { display: flex; align-items: flex-start; gap: var(--mide-space-2); margin: 0; padding: var(--mide-space-2) var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface); font-size: var(--mide-text-sm); }
  .conv-rehearsal-feedback[data-tone="ok"] > .ui-icon { color: var(--mide-ok); }
  .conv-rehearsal-feedback[data-tone="danger"] { color: var(--mide-danger); border-color: var(--mide-danger); }
  .conv-rehearsal-feedback-text { display: grid; gap: 2px; min-width: 0; }
  .conv-rehearsal-feedback-state { display: inline-flex; align-items: center; gap: var(--mide-space-1); color: var(--mide-sandbox); }
  /* The «Cerrar simulador» / «Simular» toggle is a 44 px target everywhere. */
  .conv-rehearsal [data-rehearsal-toggle] { min-height: 44px; min-width: 44px; }
  /* SANDBOX_ACCEPTED in words on the message (the «Simulado» chip stays in the meta line). */
  .conv-bubble-sandbox { display: flex; align-items: center; gap: var(--mide-space-1); margin: var(--mide-space-1) 0 0; color: var(--mide-sandbox); font-size: var(--mide-text-sm); }
  /* Desktop, simulator open: the columns keep room for the thread under the panel (the thread scrolls inside). */
  @media (min-width: 901px) {
    .conv-view:has(.conv-rehearsal-form) .conv-layout { min-height: 620px; }
  }
  @media (max-width: 900px) {
    .conv-rehearsal { padding: var(--mide-space-3); }
    /* Phones, a conversation open: only the «Canal de ensayo» chip stays (the header chips are hidden there). */
    .conv-view:has(.conv-layout:not([data-panel="list"])) > .conv-rehearsal { padding: var(--mide-space-2) var(--mide-space-3); margin-bottom: var(--mide-space-2); }
    .conv-view:has(.conv-layout:not([data-panel="list"])) > .conv-rehearsal :is(.conv-rehearsal-text, .conv-rehearsal-form, .conv-rehearsal-feedback, [data-rehearsal-toggle]) { display: none; }
    .conv-rehearsal-form { grid-template-columns: minmax(0, 1fr); }
    .conv-rehearsal-actions .ui-button { width: 100%; justify-content: center; }
  }

  /* --conv-top (layout offset) and --conv-pad (content padding) are measured by the view. */
  .conv-view { display: none; }
  .conv-view.active { display: block; margin-bottom: calc(var(--mide-space-4) - var(--conv-pad, 0px)); }

  .conv-layout { display: grid; grid-template-columns: minmax(300px, 32fr) minmax(380px, 38fr) minmax(290px, 30fr); grid-template-rows: minmax(0, 1fr); gap: var(--mide-space-4); align-items: stretch; height: calc(100dvh - var(--conv-top, 200px) - var(--mide-space-4)); min-height: 480px; }
  .conv-layout > .ui-card { display: flex; flex-direction: column; gap: 0; min-height: 0; min-width: 0; padding: 0; overflow: hidden; }
  /* No conversation at all: only the inbox, full width, with its empty state. */
  .conv-view .conv-layout[data-inbox-empty] { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .conv-view .conv-layout[data-inbox-empty] > :is(.conv-chat, .conv-context) { display: none; }
  .conv-view .conv-layout[data-inbox-empty] > .conv-list { display: flex; }
  .conv-view .conv-layout[data-inbox-empty] .conv-list-state { padding-block: var(--mide-space-8); }
  .conv-ai-status[hidden] { display: none; }

  /* ---------- inbox ---------- */
  /* Bandejas as a segmented control: the four always fit, nothing is clipped (finding 6). */
  .conv-list .conv-segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mide-space-1); margin: var(--mide-space-4) var(--mide-space-4) 0; padding: var(--mide-space-1); border: 0; border-radius: var(--mide-radius-sm); background: var(--mide-surface-hover); overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .conv-list .conv-segmented .ui-tab { flex-direction: column; justify-content: center; gap: 0; min-width: 0; min-height: 44px; margin: 0; padding: var(--mide-space-1) 2px; border-radius: 6px; color: var(--mide-ink-2); font-size: var(--mide-text-sm); line-height: 1.25; text-align: center; white-space: nowrap; }
  .conv-list .conv-segmented .ui-tab::after { display: none; }
  .conv-list .conv-segmented .ui-tab > span:first-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .conv-list .conv-segmented .ui-tab[aria-selected="true"] { background: var(--mide-surface); color: var(--mide-accent); box-shadow: var(--mide-shadow); }
  .conv-list .conv-segmented .ui-tab-count { color: var(--mide-muted); font-size: var(--mide-text-xs); font-weight: var(--mide-weight-semibold); }
  .conv-search-row { display: flex; align-items: center; gap: var(--mide-space-2); padding: var(--mide-space-3) var(--mide-space-4); border: 0; background: transparent; }
  .conv-search { position: relative; flex: 1 1 auto; min-width: 0; }
  .conv-search .ui-icon { position: absolute; inset: 0 auto 0 var(--mide-space-3); margin: auto 0; width: 18px; height: 18px; color: var(--mide-muted); }
  .conv-search .search { width: 100%; min-height: 40px; padding-left: calc(var(--mide-space-3) * 3); text-overflow: ellipsis; }
  .conv-search-row .ui-button.is-active { border-color: var(--mide-accent); color: var(--mide-accent); background: var(--mide-accent-soft); }
  .conv-filter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mide-space-2) var(--mide-space-3); align-items: end; padding: var(--mide-space-3) var(--mide-space-4); border-block: 1px solid var(--mide-line); background: var(--mide-surface-2); }
  .conv-filter-panel[hidden] { display: none; }
  .conv-filter { display: grid; gap: var(--mide-space-1); color: var(--mide-muted); font-size: var(--mide-text-xs); }
  .conv-thread-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .conv-thread-list { display: grid; gap: 2px; padding: 0 var(--mide-space-2) var(--mide-space-2); }
  .conv-thread-list[hidden] { display: none; }
  .conv-list-state:empty { display: none; }
  .conv-list-stale { padding: var(--mide-space-3) var(--mide-space-3) 0; }
  .conv-list-stale:empty { display: none; }
  .conv-list-state { padding: var(--mide-space-6) var(--mide-space-4); }
  .conv-thread-item { display: block; }
  .conv-thread { display: flex; align-items: flex-start; gap: var(--mide-space-3); width: 100%; min-height: 64px; margin: 0; padding: var(--mide-space-3); border: 0; border-radius: var(--mide-radius); background: transparent; box-shadow: none; color: var(--mide-ink); text-align: left; font: inherit; cursor: pointer; }
  .conv-thread:hover { background: var(--mide-surface-hover); }
  .conv-thread:focus-visible { outline: 2px solid var(--mide-focus-ring); outline-offset: -2px; }
  .conv-thread.active { background: var(--mide-blue-50); box-shadow: inset 3px 0 0 var(--mide-blue-600); }
  .conv-thread-main { display: grid; gap: var(--mide-space-1); flex: 1 1 auto; min-width: 0; }
  .conv-thread-title { display: flex; align-items: center; gap: var(--mide-space-2); min-width: 0; }
  .conv-thread-title strong { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--mide-heading); font-size: var(--mide-text-md); font-weight: var(--mide-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
  .conv-thread.unread .conv-thread-title strong { font-weight: var(--mide-weight-heavy); }
  .conv-thread-time { flex: 0 0 auto; color: var(--mide-muted); font-size: var(--mide-text-xs); }
  .conv-thread-sub { display: flex; align-items: center; gap: var(--mide-space-2); min-width: 0; }
  .conv-thread-preview { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--mide-ink-2); font-size: var(--mide-text-sm); text-overflow: ellipsis; white-space: nowrap; }
  .conv-unread { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin: 0; padding: 0 6px; border-radius: var(--mide-radius-pill); background: var(--mide-ok); color: var(--mide-on-accent); font-size: var(--mide-text-xs); font-weight: var(--mide-weight-bold); }
  .conv-avatar-anonymous { background: var(--mide-surface-hover); color: var(--mide-muted); }
  .conv-avatar-anonymous .ui-icon { width: 18px; height: 18px; }
  .conv-pager { display: grid; gap: var(--mide-space-2); padding: var(--mide-space-2) var(--mide-space-4) var(--mide-space-3); }
  .conv-pager:not(:has(.conv-meta:not(:empty), .ui-button:not([hidden]))) { display: none; }
  .conv-pager .conv-meta:empty { display: none; }
  .conv-pager .ui-button[hidden] { display: none; }

  /* ---------- chat ---------- */
  .conv-chat-header { display: grid; height: auto; gap: var(--mide-space-2); padding: var(--mide-space-3) var(--mide-space-4); border-bottom: 1px solid var(--mide-line); background: var(--mide-surface); }
  .conv-chat-identity { display: flex; align-items: center; gap: var(--mide-space-3); min-width: 0; }
  .conv-chat-title { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
  .conv-chat-title strong { overflow: hidden; color: var(--mide-heading); font-size: var(--mide-text-lg); font-weight: var(--mide-weight-bold); text-overflow: ellipsis; white-space: nowrap; }
  .conv-chat-title small { overflow: hidden; color: var(--mide-muted); font-size: var(--mide-text-sm); text-overflow: ellipsis; white-space: nowrap; }
  .conv-chips { display: flex; flex-wrap: wrap; gap: var(--mide-space-1); margin-top: var(--mide-space-1); }
  .conv-chat-actions { display: flex; flex-wrap: wrap; gap: var(--mide-space-2); }
  /* Review of PR 1139: 44 px targets for the thread actions on every width (selectors of this view only). */
  .conv-chat-actions .ui-button { min-height: 44px; min-width: 44px; }
  .conv-chat-header .mobile-chat-back, .conv-context-back { display: none; }
  .conv-action-strip { display: grid; gap: var(--mide-space-2); padding: 0 var(--mide-space-4); background: var(--mide-surface); }
  .conv-action-strip:not(:has(.conv-meta:not(:empty), .conv-confirm)) { display: none; }
  .conv-action-strip > :first-child { margin-top: var(--mide-space-2); }
  .conv-action-strip > :last-child { margin-bottom: var(--mide-space-2); }
  .conv-chat-body { display: flex; flex-direction: column; gap: var(--mide-space-3); flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--mide-space-5); background: var(--mide-canvas); }
  .conv-separator { display: flex; justify-content: center; margin: 0; color: var(--mide-muted); font-size: var(--mide-text-xs); }
  /* «Historial disponible · …» (issue 1133 Fase 2): 12 px muted ink (AA), wraps at 390 instead of a 9 px pill. */
  .conv-separator span { max-width: 100%; padding: 2px var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-pill); background: var(--mide-surface); color: var(--mide-muted); font-size: var(--mide-text-xs); line-height: 1.4; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .conv-bubble { display: grid; gap: var(--mide-space-1); max-width: min(78%, 560px); margin: 0; padding: var(--mide-space-3) var(--mide-space-4); border: 1px solid var(--mide-line); border-radius: var(--mide-radius); background: var(--mide-surface); box-shadow: none; color: var(--mide-ink); }
  .conv-bubble.inbound { align-self: flex-start; border-top-left-radius: var(--mide-space-1); }
  .conv-bubble.outbound { align-self: flex-end; border-color: transparent; border-top-right-radius: var(--mide-space-1); background: var(--mide-green-50); }
  .conv-bubble[data-source="AUTOMATION"] { background: var(--mide-data-ai-bg); }
  .conv-bubble p { margin: 0; font-size: var(--mide-text-md); line-height: var(--mide-leading); white-space: pre-wrap; overflow-wrap: anywhere; }
  .conv-bubble-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mide-space-2); }
  .conv-bubble time { color: var(--mide-muted); font-size: var(--mide-text-xs); white-space: nowrap; }
  /* Conversation media (WA-11, AU-01..03): image, voice note with its transcription, video, document, placeholders. */
  .conv-bubble-media { width: min(78%, 360px); }
  .conv-media { display: grid; min-width: 0; }
  .conv-media-image-link { position: relative; display: block; overflow: hidden; border-radius: var(--mide-radius-sm); background: var(--mide-surface-2); }
  .conv-media-image-link:focus-visible { outline: 2px solid var(--mide-focus-ring); outline-offset: 2px; }
  .conv-media-image { display: block; width: 100%; max-height: 280px; object-fit: cover; }
  .conv-media-open { position: absolute; inset-inline-end: var(--mide-space-2); inset-block-end: var(--mide-space-2); padding: 2px var(--mide-space-2); border-radius: var(--mide-radius-pill); background: var(--mide-surface); color: var(--mide-ink); font-size: var(--mide-text-xs); font-weight: var(--mide-weight-semibold); }
  .conv-media-audio, .conv-media-video { width: 100%; max-width: 100%; }
  .conv-media-idle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-2); color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  /* Action icons follow the accent (the tenant's colour with a theme, violet without); the AI transcription keeps violet. */
  .conv-media-idle .ui-icon { color: var(--mide-accent); }
  .conv-media-idle .ui-button { margin-inline-start: auto; }
  .conv-media-video { max-height: 280px; border-radius: var(--mide-radius-sm); background: var(--mide-ink-900); }
  .conv-bubble .conv-media-note { display: flex; align-items: center; gap: var(--mide-space-2); margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .conv-media-note[data-media-state="unavailable"] { color: var(--mide-ink-2); }
  .conv-media-note .ui-icon { flex: none; color: var(--mide-muted); }
  /* A file that could not be loaded: title, reason and, only when a new attempt can work, «Reintentar». */
  .conv-bubble .conv-media-failed { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--mide-space-1) var(--mide-space-2); }
  .conv-media-failed .ui-icon { margin-top: 2px; color: var(--mide-danger); }
  .conv-media-failed-text { display: grid; gap: 2px; min-width: 0; }
  .conv-media-failed-text strong { color: var(--mide-ink); font-weight: var(--mide-weight-semibold); }
  .conv-media-failed > .ui-button { grid-column: 2; justify-self: start; }
  .conv-media-document { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--mide-space-2) var(--mide-space-3); padding: var(--mide-space-2) var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface-2); }
  .conv-media-document > .ui-icon { color: var(--mide-accent); }
  .conv-media-document-text { display: grid; min-width: 0; }
  .conv-media-document-text strong { font-size: var(--mide-text-sm); font-weight: var(--mide-weight-semibold); line-height: var(--mide-leading-snug); overflow-wrap: break-word; word-break: normal; }
  /* The download button sits on its own row: the file name keeps the full width of the card. */
  .conv-media-document > .ui-button { grid-column: 1 / -1; justify-self: start; }
  .conv-media-document-text span { color: var(--mide-muted); font-size: var(--mide-text-xs); }
  .conv-media-feedback { grid-column: 1 / -1; color: var(--mide-ink-2); font-size: var(--mide-text-xs); }
  .conv-media-feedback:empty { display: none; }
  .conv-transcription { display: grid; gap: var(--mide-space-1); padding: var(--mide-space-2) var(--mide-space-3); border-inline-start: 3px solid var(--mide-violet); border-radius: var(--mide-radius-sm); background: var(--mide-violet-50); }
  .conv-transcription[data-transcription="FAILED"] { border-inline-start-color: var(--mide-line-strong); background: var(--mide-surface-2); }
  .conv-transcription[data-transcription="PENDING"] { border-inline-start-color: var(--mide-line-strong); background: var(--mide-surface-2); }
  .conv-bubble .conv-transcription-notice { display: flex; align-items: flex-start; gap: var(--mide-space-1); margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-xs); font-weight: var(--mide-weight-medium); line-height: var(--mide-leading-snug); }
  .conv-transcription-notice .ui-icon { inline-size: 14px; block-size: 14px; }
  .conv-transcription-notice .ui-icon svg { inline-size: 100%; block-size: 100%; }
  .conv-transcription-notice .ui-icon { flex: none; color: var(--mide-violet-700); }
  .conv-transcription[data-transcription="FAILED"] .conv-transcription-notice .ui-icon, .conv-transcription[data-transcription="PENDING"] .conv-transcription-notice .ui-icon { color: var(--mide-muted); }
  .conv-bubble .conv-transcription-text { font-size: var(--mide-text-md); line-height: var(--mide-leading-snug); }

  /* Closed 24 h window: template strip right above the composer (finding 3). */
  /* P0 10-nov: the closed-window notice never shrinks under the composer (the flex column used to squeeze it to one line on phones). */
  .conv-template-strip { display: grid; flex: 0 0 auto; gap: var(--mide-space-3); padding: var(--mide-space-3) var(--mide-space-4); border-top: 1px solid var(--mide-line); background: var(--mide-warn-bg); }
  .conv-template-strip { flex: 0 0 auto; min-height: 0; max-height: 62%; overflow-y: auto; overscroll-behavior: contain; }
  .conv-chat[data-window-closed='true'] .conv-chat-body { flex: 1 1 48px; min-height: 48px; }
  /* Closed window: the template strip is the only composer (no second, disabled one). */
  .conv-chat[data-window-closed='true'] .conv-composer:not([data-mode='note']) [data-composer-pane='message'] { display: none; }
  .conv-template-form .ui-button:disabled { opacity: 1; background: var(--mide-surface-2); border-color: var(--mide-line-strong); color: var(--mide-ink-2); }
  .conv-template-form .conv-template-reason, .conv-template-form .conv-template-help { grid-column: 1 / -1; }
  .conv-template-help { margin: 0; }
  .conv-template-head-short { display: none; }
  .conv-template-strip[hidden] { display: none; }
  .conv-template-head { display: flex; align-items: flex-start; gap: var(--mide-space-3); color: var(--mide-warn); }
  .conv-template-head .ui-icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
  .conv-template-head strong { display: block; color: var(--mide-heading); font-size: var(--mide-text-md); }
  .conv-template-head p, .conv-template-empty p { margin: 2px 0 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  .conv-template-empty { display: grid; justify-items: start; gap: var(--mide-space-1); padding: var(--mide-space-3); border: 1px dashed var(--mide-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface); }
  .conv-template-empty strong { color: var(--mide-heading); font-size: var(--mide-text-sm); }
  .conv-template-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--mide-space-2); }
  .conv-template-form .ui-select-menu { grid-column: 1; min-width: 0; }
  .conv-template-form > .ui-button { grid-column: 2; grid-row: 1; }
  .conv-template-field { display: grid; gap: var(--mide-space-1); min-width: 0; }
  .conv-template-field-label { color: var(--mide-ink-2); font-size: var(--mide-text-sm); font-weight: 600; overflow-wrap: anywhere; }
  .conv-template-preview { display: grid; grid-column: 1 / -1; gap: var(--mide-space-1); padding: var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface); }
  .conv-template-preview-title { color: var(--mide-heading); font-size: var(--mide-text-sm); }
  .conv-template-preview-body { margin: 0; color: var(--mide-ink); font-size: var(--mide-text-md); line-height: var(--mide-leading); white-space: pre-wrap; overflow-wrap: anywhere; }
  .conv-template-preview-header { margin: 0; color: var(--mide-ink); font-size: var(--mide-text-md); font-weight: var(--mide-weight-bold); line-height: var(--mide-leading); overflow-wrap: anywhere; }
  .conv-template-preview-footer { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .conv-template-preview-list { margin: 0; padding-left: var(--mide-space-4); color: var(--mide-ink); font-size: var(--mide-text-sm); overflow-wrap: anywhere; }
  .conv-template-reason, .conv-template-feedback[data-tone='error'] { display: flex; align-items: center; gap: var(--mide-space-2); margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .conv-template-reason[hidden] { display: none; }
  .conv-template-reason .ui-icon, .conv-template-feedback .ui-icon { flex: 0 0 auto; width: 16px; height: 16px; }
  .conv-template-feedback[data-tone='error'] { color: var(--mide-danger); }
  .conv-template-parameters { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--mide-space-2); }
  .conv-template-parameters:empty { display: none; }
  .conv-template-parameters .ui-input { min-width: 0; min-height: 36px; }

  .conv-composer { display: grid; gap: var(--mide-space-1); margin: 0; padding: var(--mide-space-3) var(--mide-space-4); border-top: 1px solid var(--mide-line); background: var(--mide-surface); }
  .conv-composer[hidden] { display: none; }
  .conv-composer-row { display: flex; gap: var(--mide-space-2); }
  .conv-composer-line { display: flex; align-items: center; gap: var(--mide-space-1); min-width: 0; }
  .conv-composer-line > .conv-composer-row { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; }
  .conv-composer-input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
  .conv-composer-note:empty { display: none; }
  /* The reason of a locked composer is its placeholder (visible) and its description (aria-describedby), on every width. */
  .conv-composer-reason { display: none; margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  /* Review of PR 1139: a locked field stays legible (AA), never the faint default disabled text. */
  .conv-composer-input:disabled { border-color: var(--mide-line-strong); background: var(--mide-surface-2); color: var(--mide-ink-2); }
  .conv-composer-input:disabled::placeholder { color: var(--mide-ink-2); opacity: 1; }
  @media (max-width: 720px) {
    .conv-composer-input:disabled::placeholder { font-size: var(--mide-text-sm); }
  }

  /* ---------- "⋯" menu ---------- */
  .conv-menu-wrap { position: relative; flex: 0 0 auto; align-self: flex-start; }
  .conv-menu-wrap > .ui-button { color: var(--mide-ink-2); }
  /* The panel: a dropdown under the whole header, right-aligned with «⋯» (follow-up of PR 1161: never over the
     header's chips or actions); on phones a bottom sheet (below). The list inside is the ARIA menu. */
  .conv-chat-header { position: relative; }
  .conv-chat-identity .conv-menu-wrap { position: static; }
  .conv-menu-sheet { position: absolute; top: calc(100% + var(--mide-space-1)); right: var(--conv-menu-right, var(--mide-space-4)); z-index: 20; display: grid; gap: var(--mide-space-1); min-width: 240px; padding: var(--mide-space-1); border: 1px solid var(--mide-panel-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface); box-shadow: var(--mide-shadow-lg); }
  .conv-menu-sheet[hidden], .conv-menu-veil[hidden] { display: none; }
  .conv-menu-sheet-head { display: none; }
  .conv-menu-veil { display: none; }
  .conv-menu { display: grid; }
  .conv-menu-item { display: flex; align-items: center; gap: var(--mide-space-2); min-height: 40px; padding: 0 var(--mide-space-3); border: 0; border-radius: 6px; background: none; color: var(--mide-ink); font: var(--mide-weight-medium) var(--mide-text-sm)/1.2 var(--mide-font); text-align: left; cursor: pointer; }
  .conv-menu-item:hover, .conv-menu-item:focus-visible { background: var(--mide-surface-hover); outline: none; }
  .conv-menu-item .ui-icon { width: 18px; height: 18px; color: var(--mide-muted); }

  /* ---------- context ---------- */
  /* The tab strip is the panel's fixed edge: a stronger bottom border separates it from content scrolling under it. */
  .conv-context .conv-context-tabs { flex: 0 0 auto; gap: var(--mide-space-5); padding: var(--mide-space-2) var(--mide-space-5) 0; border-bottom-color: var(--mide-line-strong); }
  /* 16 px of room after the last control when scrolled to the end, on every width (the card's border is never cut). */
  .conv-context-body { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: var(--mide-space-4); scroll-padding-bottom: var(--mide-space-4); }
  /* Scroll edges. Top: once the content is scrolled, its first 16 px under the tabs FADE out (mask) instead of showing
     text cut in half; `scroll-padding-top` keeps keyboard focus and scrollIntoView below that fade. Bottom: a subtle
     8 px shade while there is content below. Driven by the scroller's own scroll timeline; where scroll-driven
     animations are missing, conversations-view.js sets `data-scrolled` (fade only) and the tabs keep their border. */
  .conv-context-body { scroll-padding-top: var(--mide-space-4); --conv-context-fade: 0px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--mide-ink) var(--conv-context-fade));
    mask-image: linear-gradient(to bottom, transparent 0, var(--mide-ink) var(--conv-context-fade)); }
  .conv-context-body[data-scrolled="true"] { --conv-context-fade: var(--mide-space-4); }
  .conv-context-body::after { content: ""; position: sticky; z-index: 2; display: block; height: var(--mide-space-2); bottom: calc(-1 * var(--mide-space-4)); margin-top: calc(-1 * var(--mide-space-2)); pointer-events: none; opacity: 0; background: linear-gradient(to top, var(--mide-line-strong), transparent); }
  @supports (animation-timeline: scroll()) {
    .conv-context-body { scroll-timeline: --conv-context-scroll block; animation: conv-context-fade-in linear both; animation-timeline: --conv-context-scroll; animation-range: 0 var(--mide-space-4); }
    .conv-context-body::after { animation: conv-context-edge-out linear both; animation-timeline: --conv-context-scroll; animation-range: calc(100% - var(--mide-space-4)) 100%; }
  }
  @keyframes conv-context-fade-in { from { --conv-context-fade: 0px; } to { --conv-context-fade: var(--mide-space-4); } }
  @keyframes conv-context-edge-out { from { opacity: 1; } to { opacity: 0; } }
  .conv-context-panel { display: grid; align-content: start; }
  .conv-context-panel[hidden] { display: none; }
  .conv-section { display: grid; gap: var(--mide-space-2); margin: 0; padding: var(--mide-space-4) var(--mide-space-5); border-bottom: 1px solid var(--mide-line); }
  .conv-section:last-child { border-bottom: 0; }
  .conv-section p { margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  .conv-section-title { margin: 0; color: var(--mide-heading); font-size: var(--mide-text-md); font-weight: var(--mide-weight-bold); }
  .conv-eyebrow { margin: 0; color: var(--mide-muted); font-size: var(--mide-text-xs); text-transform: uppercase; }
  .conv-contact { display: flex; align-items: center; gap: var(--mide-space-3); min-width: 0; }
  .conv-contact > div { display: grid; min-width: 0; }
  .conv-contact-name { overflow: hidden; color: var(--mide-heading); font-size: var(--mide-text-lg); text-overflow: ellipsis; white-space: nowrap; }
  .conv-contact-phone { color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .conv-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--mide-space-2) var(--mide-space-4); margin: 0; font-size: var(--mide-text-sm); }
  .conv-facts > div { display: contents; }
  .conv-facts dt { color: var(--mide-muted); }
  .conv-facts dd { margin: 0; color: var(--mide-ink); font-weight: var(--mide-weight-semibold); text-align: right; overflow-wrap: anywhere; }
  .conv-assignment { color: var(--mide-ink); font-weight: var(--mide-weight-semibold); }
  .conv-meta { margin: 0; color: var(--mide-muted); font-size: var(--mide-text-xs); }
  .conv-meta:empty { display: none; }
  .conv-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-2); padding: var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface-2); }
  .conv-confirm p { flex-basis: 100%; margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .conv-transfer { display: grid; gap: var(--mide-space-3); }
  .conv-field { display: grid; gap: var(--mide-space-1); color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .conv-check { display: flex; align-items: center; gap: var(--mide-space-2); color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  /* 44 px touch area through the label, without enlarging the box itself. */
  @media (max-width: 640px), (pointer: coarse) { .conv-check { min-height: 44px; } .conv-inbox-stale .ui-button { min-height: 44px; } }
  .conv-inbox-stale .ui-button { flex-basis: 100%; justify-content: center; }
  .conv-section > .ui-button, .conv-transfer .ui-button { justify-self: start; }
  /* OH-SUNNY: WA-06 · no destinations: why, and the way out (Equipo, «Asumir conversación»), next to the control. */
  .conv-transfer-help { display: grid; gap: var(--mide-space-1); margin-top: var(--mide-space-1); color: var(--mide-ink-2); font-size: var(--mide-text-sm); line-height: 1.4; }
  .conv-transfer-help p { display: flex; align-items: flex-start; gap: var(--mide-space-2); margin: 0; }
  .conv-transfer-help p:first-child { color: var(--mide-ink); }
  .conv-transfer-help .ui-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
  .conv-transfer-link { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; color: var(--mide-link); font-weight: var(--mide-weight-semibold); text-decoration: underline; text-underline-offset: 2px; }
  /* Directory that could not be read: persistent alert with a 44 px «Reintentar» (issue 1133 pattern). */
  .conv-transfer .conv-transfer-retry { min-height: 44px; justify-self: auto; }
  /* «Transferir» is a 44 px target on phones (review of PR 1154: it measured ~28 px at 390). */
  @media (max-width: 640px), (pointer: coarse) { .conv-transfer .conv-transfer-submit { min-height: 44px; min-width: 44px; } }
  .conv-transfer-error .ui-icon { flex: 0 0 auto; width: 16px; height: 16px; }
  /* Only one source failed: the other's destinations still work, so it is a warning, not an error. */
  .conv-transfer-error[data-transfer-directory-error="partial"] { border-width: 2px; border-color: var(--mide-warn); background: var(--mide-warn-bg); color: var(--mide-warn); }
  /* Cotizaciones (ADR 012, conversation-quotes-panel.js) */
  .conv-quotes-header { display: flex; align-items: center; justify-content: space-between; gap: var(--mide-space-2); }
  .conv-quote { display: grid; gap: var(--mide-space-2); padding: var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface); }
  .conv-quote-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mide-space-2); color: var(--mide-heading); }
  .conv-quote-stay { color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .conv-quote-total { padding-top: var(--mide-space-2); border-top: 1px solid var(--mide-line); }
  .conv-quote-total dd { font-size: var(--mide-text-md); }
  .conv-quote-actions { flex-wrap: wrap; }

  /* ---------- 901–1280 px: two columns; the context opens in place of the chat ---------- */
  @media (max-width: 1280px) {
    .conv-layout { grid-template-columns: minmax(280px, 38fr) minmax(0, 62fr); }
    /* Same specificity as `.conv-layout > .ui-card` above, declared later (finding 2). */
    .conv-layout > .conv-context { display: none; }
    .conv-layout[data-panel="context"] > .conv-chat { display: none; }
    .conv-layout[data-panel="context"] > .conv-context { display: flex; }
    .conv-layout[data-panel="context"] .conv-context-back { display: inline-flex; justify-self: start; margin: var(--mide-space-3) var(--mide-space-4) 0; }
  }
  /* ---------- phones: one panel at a time (list → chat → context) ---------- */
  @media (max-width: 900px) {
    /* While a conversation is open the page header gives its room to the conversation. */
    .conv-view:has(.conv-layout:not([data-panel="list"])) > .ui-page-header { display: none; }
    .conv-layout { min-height: 420px; }
    .conv-layout, .conv-layout[data-panel="context"] { display: block; min-height: 0; }
    .conv-layout > .ui-card, .conv-layout > .conv-context { display: none; height: 100%; min-height: 0; }
    .conv-layout[data-panel="list"] > .conv-list, .conv-layout[data-panel="chat"] > .conv-chat, .conv-layout[data-panel="context"] > .conv-context { display: flex; }
    .conv-chat-header { gap: var(--mide-space-2); padding: var(--mide-space-2) var(--mide-space-3); }
    .conv-chat-header .mobile-chat-back { display: inline-flex; min-width: 44px; min-height: 44px; }
    .conv-chat-title strong { font-size: var(--mide-text-md); }
    .conv-chat-title .conv-chips { display: none; }
    .conv-chat-header .ui-avatar { flex-basis: 32px; width: 32px; height: 32px; }
    /* Review of PR 1139: every action keeps its visible label and a 44 px target; they wrap to a second line instead of shrinking to icons. */
    .conv-chat-actions { flex-wrap: wrap; }
    .conv-chat-actions .ui-button { padding-inline: var(--mide-space-3); }
    /* The pending chip of the thread header: short form on phones, the full text stays the accessible text. */
    .conv-chat-attention .conv-chip-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .conv-chat-attention .conv-chip-short { display: inline; }
    .conv-chat-body { padding: var(--mide-space-3); }
    .conv-bubble { max-width: 88%; }
    .conv-bubble-media { width: 88%; }
    /* Visual review of PR 1132: two columns on phones, so the results stay in view under the selects. */
    .conv-filter-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--mide-space-2) var(--mide-space-3); max-height: min(34dvh, 250px); overflow-y: auto; overscroll-behavior: contain; }
    /* One full conversation row always stays visible under the open filters. */
    /* 1099 PR 8: rows may carry a meta line (attention + tags), so the panel gives way to a whole row. */
    .conv-list .conv-thread-scroll { min-height: 136px; }
    /* The counter stays in view while the panel scrolls. */
    .conv-filter-summary { position: sticky; top: calc(var(--mide-space-2) * -1); z-index: 1; margin-block: calc(var(--mide-space-2) * -1) 0; padding-block: var(--mide-space-2) var(--mide-space-1); background: var(--mide-surface-2); }
    .conv-filter-panel .ui-select-menu-trigger { min-width: 0; }
    .conv-template-strip { max-height: 72%; }
    .conv-template-head-long { display: none; }
    .conv-template-head .conv-template-head-short { display: block; }
    .conv-chat[data-window-closed='true'] .conv-chat-header { padding-block: var(--mide-space-1); }
  }

  /* ---------- annotations (OH-SUNNY WA-02, WA-07, WA-13): tokens only ---------- */
  /* Tags: chips with icon + name (never colour alone); two per inbox row, then «+N». */
  .conv-thread-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-1); min-width: 0; }
  .conv-thread-tags .ui-chip, .conv-header-tags .ui-chip { max-width: 100%; font-size: var(--mide-text-xs); }
  .conv-thread-tags .ui-chip span:last-child, .conv-header-tags .ui-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conv-tag-more { font-size: var(--mide-text-xs); }
  .conv-tag.is-filtered { box-shadow: inset 0 0 0 1.5px var(--tone); font-weight: var(--mide-weight-bold); }
  .conv-filter-summary { grid-column: 1 / -1; margin: 0; color: var(--mide-ink); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-semibold); }
  .conv-filter-panel > .ui-button { grid-column: 1 / -1; justify-self: start; min-height: 44px; }
  .conv-header-tags { display: flex; flex-wrap: wrap; gap: var(--mide-space-1); }
  .conv-tag-toggles { display: flex; flex-wrap: wrap; gap: var(--mide-space-2); }
  .conv-tag-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--mide-radius-pill); }
  .conv-tag-toggle .ui-chip { border: 1px dashed var(--mide-line-strong); background: var(--mide-surface); color: var(--mide-ink-2); }
  .conv-tag-toggle.is-on .ui-chip { border: 1px solid var(--tone); background: var(--tone-bg); color: var(--tone); font-weight: var(--mide-weight-semibold); }
  .conv-tag-toggle:disabled { cursor: not-allowed; opacity: .6; }
  .conv-tag-toggle:focus-visible { outline: 2px solid var(--mide-focus); outline-offset: 2px; }

  /* Internal note in the thread: centred, amber band, lock + «Nota interna · solo tu equipo». */
  .conv-note { display: grid; gap: var(--mide-space-1); align-self: center; width: min(92%, 560px); margin: 0; padding: var(--mide-space-3) var(--mide-space-4); border: 1px dashed var(--mide-warn); border-radius: var(--mide-radius); background: var(--mide-warn-bg); color: var(--mide-ink); }
  .conv-note-head { display: flex; align-items: center; gap: var(--mide-space-2); color: var(--mide-ink); font-size: var(--mide-text-xs); font-weight: var(--mide-weight-bold); text-transform: uppercase; letter-spacing: .02em; }
  .conv-note-body { margin: 0; font-size: var(--mide-text-md); line-height: var(--mide-leading); white-space: pre-wrap; overflow-wrap: anywhere; }
  .conv-note-meta time { color: var(--mide-ink-2); font-size: var(--mide-text-xs); }

  /* Composer: «Mensaje | Nota interna», the quick-reply picker above the message row. */
  .conv-composer { position: relative; }
  .conv-composer-modes { display: flex; gap: var(--mide-space-1); }
  .conv-composer-modes[hidden], .conv-composer-pane[hidden], .conv-quick-picker[hidden], .conv-quick-button[hidden] { display: none; }
  /* Mode tabs: both neutral; the active one filled (violet-50), full-contrast text and a violet underline. */
  .conv-composer-modes .ui-button { color: var(--mide-ink-2); background: transparent; border: 1px solid transparent; font-weight: var(--mide-weight-medium); }
  .conv-composer-modes .ui-button .ui-icon { color: currentColor; }
  /* «Mensaje | Nota interna» follows the accent (tenant colour with a theme, violet without), like the composer's actions (review of 1132, B1). */
  .conv-composer-modes .ui-button[aria-pressed="true"] { background: color-mix(in srgb, var(--mide-accent) 10%, transparent); border-color: color-mix(in srgb, var(--mide-accent) 30%, transparent); color: var(--mide-ink); font-weight: var(--mide-weight-bold); box-shadow: inset 0 -2px 0 var(--mide-accent); }
  .conv-composer-modes .ui-button:focus-visible { outline-color: var(--mide-accent); }
  .conv-destination { display: flex; align-items: center; gap: var(--mide-space-1); margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-xs); font-weight: var(--mide-weight-semibold); }
  .conv-destination .ui-icon { color: var(--mide-ok); }
  .conv-composer-pane { display: grid; gap: var(--mide-space-1); min-width: 0; }
  .conv-quick-button { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
  .conv-note-pane { padding: var(--mide-space-2); border: 1px dashed var(--mide-warn); border-radius: var(--mide-radius); background: var(--mide-warn-bg); }
  .conv-note-notice { display: flex; align-items: center; gap: var(--mide-space-2); margin: 0; color: var(--mide-ink); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-medium); }
  .conv-note-input { width: 100%; min-height: 72px; max-height: 160px; resize: vertical; background: var(--mide-surface); }
  .conv-note-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--mide-space-2); }
  .conv-note-count { color: var(--mide-ink-2); font-size: var(--mide-text-xs); }
  .conv-note-feedback:empty { display: none; }
  .conv-note-hint { display: flex; align-items: flex-start; gap: var(--mide-space-1); margin: 0; color: var(--mide-ink); font-size: var(--mide-text-xs); line-height: var(--mide-leading-snug); }
  /* Errors: danger tokens on their own surface (AA, not muted grey on amber), icon + text + Reintentar. */
  .conv-note-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-2); padding: var(--mide-space-2) var(--mide-space-3); border: 1px solid var(--mide-danger); border-radius: var(--mide-radius-sm); background: var(--mide-danger-bg); color: var(--mide-danger); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-semibold); }
  .conv-note-error[hidden] { display: none; }
  /* Review of PR 1139: outcome of take over / return / «Aceptar». Error = alert like .conv-note-error; success = status with a check. */
  .conv-feedback { display: flex; align-items: flex-start; gap: var(--mide-space-2); margin: 0; padding: var(--mide-space-2) var(--mide-space-3); border: 1px solid; border-radius: var(--mide-radius-sm); font-size: var(--mide-text-md); font-weight: var(--mide-weight-semibold); }
  .conv-feedback .ui-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
  .conv-feedback-text { flex: 1 1 auto; min-width: 0; color: var(--mide-ink); }
  .conv-feedback-error { border-color: var(--mide-danger); background: var(--mide-danger-bg); color: var(--mide-danger); }
  .conv-feedback-success { border-color: var(--mide-ok); background: var(--mide-ok-bg); color: var(--mide-ok); }
  @media (max-width: 720px) { .conv-feedback { font-size: var(--mide-text-sm); } }
  .conv-note-error-text { flex: 1 1 12rem; min-width: 0; color: var(--mide-ink); }
  .conv-note-error .ui-button[hidden] { display: none; }
  .conv-note-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mide-space-2); }
  .conv-chat { position: relative; }
  .conv-quick-picker { position: absolute; z-index: 5; inset-inline: var(--mide-space-4); bottom: calc(var(--conv-composer-h, 120px) - var(--mide-space-2)); display: grid; gap: var(--mide-space-2); max-height: min(320px, 50vh); padding: var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius); background: var(--mide-surface); box-shadow: var(--mide-shadow-lg); }
  .conv-quick-head { display: grid; gap: 2px; }
  .conv-quick-head strong { font-size: var(--mide-text-sm); }
  .conv-quick-search[hidden] { display: none; }
  .conv-quick-list { display: grid; gap: 2px; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
  .conv-quick-list[hidden] { display: none; }
  .conv-quick-option { display: grid; gap: 2px; min-height: 44px; padding: var(--mide-space-2) var(--mide-space-3); border-radius: var(--mide-radius-sm); cursor: pointer; }
  .conv-quick-option span { overflow: hidden; color: var(--mide-ink-2); font-size: var(--mide-text-sm); text-overflow: ellipsis; white-space: nowrap; }
  .conv-quick-option:hover, .conv-quick-option.is-active { background: var(--mide-surface-hover); box-shadow: inset 3px 0 0 var(--mide-accent); }
  .conv-quick-empty { margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .conv-quick-empty:empty { display: none; }

  /* Configuración › Respuestas y etiquetas (conversation-catalog.js). */
  .cc-admin { display: grid; gap: var(--mide-space-4); }
  .cc-hint { margin: 0 0 var(--mide-space-3); color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .cc-hint code { padding: 0 var(--mide-space-1); border-radius: var(--mide-radius-sm); background: var(--mide-neutral-bg); color: var(--mide-ink); font-size: var(--mide-text-sm); }
  .cc-list { display: grid; gap: var(--mide-space-3); margin: 0; padding: 0; list-style: none; }
  .cc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--mide-space-2); padding: var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius); }
  .cc-row-invalid { border-color: var(--mide-danger); }
  .cc-row > .ui-field-error { grid-column: 1 / -1; margin: 0; }
  .cc-row-fields { display: grid; gap: var(--mide-space-3); min-width: 0; }
  .cc-row-fields-reply { grid-template-columns: minmax(140px, 1fr) minmax(0, 2.4fr); }
  .cc-row-fields-tag { grid-template-columns: minmax(0, 1.4fr) minmax(120px, 1fr) 10rem; align-items: end; }
  .cc-row-fields .ui-field { margin: 0; min-width: 0; }
  .cc-preview { display: inline-flex; align-items: center; min-width: 0; min-height: 44px; overflow: hidden; }
  .cc-remove { min-width: 44px; min-height: 44px; }
  .cc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mide-space-2); margin-top: var(--mide-space-3); }
  .cc-count { color: var(--mide-ink-2); font-size: var(--mide-text-xs); }
  .cc-status { margin: var(--mide-space-2) 0 0; font-size: var(--mide-text-sm); }
  .cc-status:empty { display: none; }
  .cc-status-ok { color: var(--mide-ok); }
  .cc-status-error { color: var(--mide-danger); }
  /* Save button of the catalog cards: «Sin cambios» while nothing changed, neutral fog with dark text (not a faded gradient). */
  .settings-view .sv-card > .ui-card-head .ui-button-primary:disabled,
  .cc-card [data-catalog-save]:disabled { background: var(--mide-surface-100); border-color: var(--mide-line); color: var(--mide-ink-2); opacity: 1; box-shadow: none; }
  /* A control brought into view (focus, scrollIntoView) never lands under the sticky top bar. */
  .settings-view :is(button, input, select, textarea) { scroll-margin-top: calc(var(--mx-topbar-h, 72px) + var(--mide-space-6)); }
  @media (max-width: 720px) {
    .settings-view :is(button, input, select, textarea) { scroll-margin-top: 12rem; }
    /* Settings cards on phones: the action on its own full-width row under the description. */
    .settings-view .sv-card > .ui-card-head { flex-wrap: wrap; }
    .settings-view .sv-card > .ui-card-head > .ui-actions { flex: 1 0 100%; }
    .settings-view .sv-card > .ui-card-head > .ui-actions > *, .settings-view .sv-card > .ui-card-head > .ui-actions .ui-button { width: 100%; justify-content: center; }
    .cc-row-fields-reply, .cc-row-fields-tag { grid-template-columns: minmax(0, 1fr); }
    .conv-quick-picker { inset-inline: var(--mide-space-2); }
    .conv-note-input { min-height: 56px; max-height: 120px; }
  }

  /* ---------- attention (issue 1099 PR 8; OH-SUNNY WA-03, WA-06): area, responsible, acceptance ---------- */
  /* States carry an icon and a word (never colour alone); the line is absent when it has nothing to say. */
  .conv-thread-attention, .conv-chat-attention { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-1); min-width: 0; }
  .conv-chat-attention { margin-top: var(--mide-space-1); }
  .conv-thread-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-1) var(--mide-space-2); min-width: 0; }
  .conv-thread-meta > .conv-thread-attention, .conv-thread-meta > .conv-thread-tags { display: contents; }
  /* A long state («Pendiente de aceptación · quedan 12 min») wraps inside its chip instead of overflowing on phones. */
  .conv-thread-attention .ui-chip, .conv-chat-attention .ui-chip { min-width: 0; max-width: 100%; font-size: var(--mide-text-xs); white-space: normal; overflow-wrap: anywhere; }
  .conv-thread-attention .ui-chip .ui-icon, .conv-chat-attention .ui-chip .ui-icon { flex: 0 0 auto; }
  .conv-attention-who { display: inline-flex; align-items: center; gap: var(--mide-space-1); min-width: 0; max-width: 100%; color: var(--mide-ink-2); font-size: var(--mide-text-xs); }
  .conv-attention-who .ui-icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--mide-muted); }
  .conv-attention-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Review of PR 1139: in the thread header «Responsable: …» is never cut; it wraps. */
  .conv-chat-attention .conv-attention-who { align-items: flex-start; }
  .conv-chat-attention .conv-attention-who span { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
  .conv-chip-short { display: none; }
  .conv-quick-filters { display: flex; flex-wrap: wrap; gap: var(--mide-space-2); padding: 0 var(--mide-space-4) var(--mide-space-2); }
  .conv-quick-filters[hidden] { display: none; }
  .conv-quick-filter { display: inline-flex; align-items: center; gap: var(--mide-space-2); min-height: 44px; padding: 0 var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-pill); background: var(--mide-surface); color: var(--mide-ink); font: inherit; font-size: var(--mide-text-sm); cursor: pointer; }
  .conv-quick-filter:hover { background: var(--mide-surface-hover); }
  .conv-quick-filter:focus-visible { outline: 2px solid var(--mide-focus-ring); outline-offset: 2px; }
  .conv-quick-filter .ui-icon { width: 16px; height: 16px; }
  .conv-quick-filter[aria-pressed="true"] { border-color: var(--mide-accent); background: var(--mide-accent-soft); color: var(--mide-accent); font-weight: var(--mide-weight-semibold); }
  .conv-quick-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--mide-radius-pill); background: var(--mide-surface-2); color: var(--mide-ink); font-size: var(--mide-text-xs); font-weight: var(--mide-weight-bold); }
  @media (max-width: 900px) {
    .conv-quick-filters { padding: 0 var(--mide-space-3) var(--mide-space-2); }
  }

  /* Issue 1099 archive: 44 px touch targets for the thread menu and the in-panel confirmations. */
  .conv-menu-item { min-height: 44px; }
  .conv-confirm .ui-button { min-height: 44px; }
  /* «Archivadas»: its own view of the list; the four bandejas keep their grid. */
  .conv-archived-head { display: flex; align-items: center; gap: var(--mide-space-2); margin: var(--mide-space-4) var(--mide-space-4) 0; padding: var(--mide-space-1); border-radius: var(--mide-radius-sm); background: var(--mide-surface-hover); }
  .conv-archived-head[hidden], .conv-list .conv-segmented[hidden], .conv-archived-open[hidden] { display: none; }
  .conv-archived-head .ui-button { min-height: 44px; }
  .conv-archived-title { display: inline-flex; align-items: center; gap: var(--mide-space-2); margin: 0; color: var(--mide-ink); font-size: var(--mide-text-md); font-weight: var(--mide-weight-semibold); }
  .conv-archived-title .ui-icon { width: 18px; height: 18px; color: var(--mide-muted); }
  .conv-archived-count { color: var(--mide-muted); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-semibold); }
  /* Review of PR 1161: the search has its own line (placeholder whole); «Archivadas» and «Filtros» share the second, 44 px each. */
  .conv-list .conv-search-row { flex-wrap: wrap; }
  .conv-list .conv-search-row > .conv-search { flex: 1 1 100%; min-width: 0; }
  .conv-list .conv-search-row .search { min-height: 44px; }
  .conv-list .conv-search-row > .ui-button { flex: 0 0 auto; min-height: 44px; min-width: 44px; }
  .conv-list .conv-search-row > .conv-archived-open { margin-right: auto; }
  /* An archive outcome that could not be confirmed: persistent alert with its own «Reintentar». */
  .archive-feedback.conv-feedback { flex-wrap: wrap; align-items: center; padding-bottom: var(--mide-space-3); }
  .archive-feedback .ui-button { min-height: 44px; margin-left: auto; }
  .archive-feedback.conv-feedback-error .ui-button { margin-top: var(--mide-space-2); }
  .archive-feedback .conv-feedback-text { display: grid; gap: 2px; flex: 1 1 calc(100% - 2rem); min-width: 0; }
  .conv-feedback-detail { color: var(--mide-muted); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-medium); }
  /* «Archivada»: neutral information (niebla, box icon); green is only for the transient «restaurada». */
  .conv-feedback-info { border-color: var(--mide-line); background: var(--mide-surface-2); color: var(--mide-muted); }
  /* Visual QA of PR 1161: the «⋯» trigger reaches 3:1 (gris/tinta token) and «Volver» is a 44 × 44 target. */
  .conv-chat-identity .conv-menu-wrap > .ui-button { color: var(--mide-ink-2); }
  .conv-chat-identity .mobile-chat-back { min-width: 44px; min-height: 44px; }
  /* Visual QA of PR 1161 (round 2): «⋯» reads as a control at rest (niebla + border, ink icon) and is 44 × 44. */
  .conv-chat-identity .conv-menu-wrap > .conv-menu-trigger { min-width: 44px; min-height: 44px; border: 1px solid var(--mide-line-strong); background: var(--mide-surface-2); color: var(--mide-ink); }
  .conv-chat-identity .conv-menu-wrap > .conv-menu-trigger .mide-icon { stroke-width: 3; }
  .conv-state-archived { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mide-space-1); }
  /* Phones: the thread menu is a bottom sheet over a token veil, with a visible «Cerrar». */
  @media (max-width: 480px) {
    .conv-chat-identity .conv-menu-veil:not([hidden]) { position: fixed; inset: 0; z-index: 59; display: block; background: var(--mide-overlay); }
    .conv-chat-identity .conv-menu-sheet { position: fixed; top: auto; right: var(--mide-space-3); bottom: var(--mide-space-3); left: var(--mide-space-3); z-index: 60; min-width: 0; padding: var(--mide-space-3); border-radius: var(--mide-radius-md, var(--mide-radius-sm)); }
    .conv-chat-identity .conv-menu-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mide-space-2); padding: 0 var(--mide-space-1) var(--mide-space-2); border-bottom: 1px solid var(--mide-line); }
    .conv-menu-sheet-title { color: var(--mide-heading); font-size: var(--mide-text-md); font-weight: var(--mide-weight-bold); }
    .conv-chat-identity .conv-menu-sheet-head .ui-button { min-height: 44px; }
    .conv-chat-identity .conv-menu-item { min-height: 48px; font-size: var(--mide-text-md); }
  }
  /* Header chips on phones: «WhatsApp» and «Archivada» stay (they say where the thread is and its state). */
  @media (max-width: 900px) {
    .conv-chat-title .conv-chips { display: flex; flex-wrap: wrap; }
    .conv-chat-title .conv-chips .ui-chip { font-size: var(--mide-text-xs); }
  }
  /* Closed 24 h window: a compact header (one chip row, no wrap) so the template form keeps the room. */
  .conv-chat[data-window-closed='true'] .conv-chat-title .conv-chips { flex-wrap: nowrap; overflow: hidden; margin-top: 0; }
  .conv-chat[data-window-closed='true'] .conv-chat-title .conv-chips .ui-chip:nth-child(n+3) { display: none; }
  .conv-chat[data-window-closed='true'] .conv-chat-header { padding-block: var(--mide-space-2); gap: var(--mide-space-1); }
  /* Desktop header: the avatar sits on the name and phone lines, not on the middle of the whole block. */
  .conv-chat-identity { align-items: flex-start; }
  .conv-chat-identity > .ui-avatar, .conv-chat-identity > .conv-avatar-anonymous { margin-top: var(--mide-space-1); }
  .conv-chat-identity .mobile-chat-back { align-self: flex-start; }
  /* Every header action (Restaurar included) keeps a 44 px target on phones too (visual QA of PR 1166). */
  .conv-chat-header .conv-chat-actions .ui-button { min-height: 44px; }
}

/* Registered so the fade under the context tabs animates smoothly with the scroll (see .conv-context-body). */
@property --conv-context-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }