/* ng-mobile-chat.css — make the COUNCIL chat readable on a phone.
 *
 * MEASURED PROBLEM (iPhone 15 Pro, 393x852, 2026-09-04):
 * the chat stream was 230px tall — 27% of the screen. 73% was chrome, stacked
 * between the message list and the top of the phone:
 *
 *     statusbar            48    kept (E-STOP lives there)
 *     .telemetry           42    fleet stats — not chat
 *     .ng-chat-toolbar     38    REPLAY / DIFF, a desktop debug affordance
 *     .view-header         45    an <h1> reading "COUNCIL"...
 *     .tabs                40    ...directly above a nav bar already saying COUNCIL
 *     .sec-hero            122   "FIRST TOKEN —" and three KPIs, two of them em-dashes
 *     .composer            140   input, chips and send each on their OWN line
 *     .bottomnav           64    kept, it is the navigation
 *
 * This file reclaims ~300px of that. Everything here is scoped to #view-chat and
 * to <=600px, so no other view and no desktop layout is touched.
 *
 * Nothing is deleted, only hidden on phones: the hero KPIs, REPLAY/DIFF and the
 * telemetry strip all still exist on tablet and desktop where there is room.
 */
@media (max-width: 600px) {

  /* ---- 1. Debug toolbar. REPLAY/DIFF are for inspecting a turn at a desk. ---- */
  #view-chat .ng-chat-toolbar { display: none; }

  /* ---- 2. The FIRST TOKEN hero. 122px, and on a cold load every number in it
       is an em-dash. The same figures are on HOME and in TELEMETRY. ---- */
  #view-chat .sec-hero.council-hero { display: none; }

  /* ---- 3. The telemetry strip is fleet status, not conversation. Hide it while
       chatting AND pull the view up into the space it was holding, otherwise the
       gap stays empty. :has() is Safari 16.4+ / Chrome 105+, so iOS is covered;
       if it ever fails to match, the layout simply keeps today's behaviour. ---- */
  body:has(#view-chat.active) .telemetry { display: none; }
  body:has(#view-chat.active) #view-chat.active {
    top: calc(48px + env(safe-area-inset-top));
  }

  /* ---- 4. Header. The bottom nav already labels this section COUNCIL in the
       active colour; an <h1> repeating it costs a line of chat. Keep the ops
       chip — it carries live service state — but shrink it. ---- */
  #view-chat .view-header { padding: 6px 14px 2px; }
  #view-chat .view-title { display: none; }
  #view-chat .vh-left { gap: 8px; }
  #view-chat .vh-left .chip { font-size: 10px; padding: 3px 8px; }

  /* ---- 5. Tabs: shorter, and scrollable instead of clipped. DELIBERATE was
       cut off mid-word at 393px with no indication more existed. ---- */
  #view-chat .tabs {
    height: 34px; margin: 0 14px 4px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #view-chat .tabs::-webkit-scrollbar { display: none; }
  #view-chat .tab { height: 34px; padding: 0 11px; font-size: 11px; flex: none; }

  /* ---- 6. Composer. It was 140px because the input's width forced the chips
       and the send button onto lines of their own. Reorder into two rows:
       chips, then input + send side by side. The 200px flex-basis is what makes
       the input refuse to share row 1 with the chips. ---- */
  #view-chat .composer {
    flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 6px 8px; margin: 0 12px calc(6px + env(safe-area-inset-bottom));
  }
  #view-chat .composer > .chip,
  #view-chat .composer > .ngx-attach-btn { order: 1; height: 22px; font-size: 9.5px; }
  #view-chat .composer > .composer-input {
    order: 2; flex: 1 1 200px; min-width: 140px; width: auto;
    height: 42px; font-size: 16px;   /* 16px: anything smaller makes iOS zoom on focus */
  }
  #view-chat .composer > .composer-send {
    order: 3; flex: 0 0 42px; width: 42px; height: 42px; margin-left: auto;
  }

  /* ---- 7. Readability. 13px in a 230px window was the actual complaint. ---- */
  #view-chat .stream { padding: 6px 14px 8px; font-size: 15px; line-height: 1.55; }
  #view-chat .stream .turn { max-width: none; }
  #view-chat .stream p { margin: 0 0 .6em; }
  #view-chat .stream pre,
  #view-chat .stream code { font-size: 12.5px; }
  /* Long tokens (paths, ids, URLs) must wrap rather than widen the whole page. */
  #view-chat .stream pre { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* ---- 8. The ghost toast sat on top of the composer chips. Lift it clear. ---- */
  body:has(#view-chat.active) .ghosts {
    bottom: calc(150px + env(safe-area-inset-bottom));
  }
}

/* ---------------------------------------------------------------------------
 * Chat hyperlinks (2026-09-04). mdInline previously rendered only `code` and
 * **bold** — there was no <a> anywhere in the chat pipeline, so every URL and
 * every [label](url) came out as dead text. These style the anchors it now
 * emits. NOT inside the mobile media query: links must be visible everywhere.
 * ------------------------------------------------------------------------- */
.md-link {
  color: var(--x-cyan, #38e0ff);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--x-cyan, #38e0ff) 45%, transparent);
  /* A long Amazon URL must wrap instead of widening the whole message column. */
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color .12s ease, text-decoration-color .12s ease;
}
.md-link:hover,
.md-link:focus-visible {
  color: var(--x-mint, #3fe0c8);
  text-decoration-color: currentColor;
}
.md-link:focus-visible { outline: 2px solid var(--x-mint, #3fe0c8); outline-offset: 2px; border-radius: 3px; }
/* Mark links that leave the fleet, so a tap is never a surprise. */
.md-link[target="_blank"]::after {
  content: "↗";
  font-size: .8em; opacity: .55; margin-left: 2px; text-decoration: none;
}

@media (max-width: 600px) {
  /* Apple's guidance is a 44px minimum touch target. Inline links can't be 44px
     tall without wrecking line spacing, so buy vertical padding back through
     line-height and give the anchor a little breathing room to be tappable. */
  #view-chat .stream .md-link { padding: 2px 1px; line-height: 1.7; }
}