/* Sadeed — instrument surface: phone layout, empty states, details, notices.
   Loaded last so its phone block overrides the base rules by order, not by
   specificity. */

/* ---------- phone ------------------------------------------------------ */

/* Base state first: a later bare rule of equal specificity would otherwise
   override the media query below at every width. */
.menu-button,
.nav-group-title { display: none; }

@media (max-width: 900px) {
  /* Reclaiming the screen for the conversation.
     Before: header, five-tab strip and thread bar together took roughly a
     third of the viewport before a single message could appear. The strip's
     five destinations move into the drawer behind the menu button, which
     costs one tap and returns the whole strip's height to the transcript. */
  .main-navigation { display: none; }
  .app-shell { grid-template-areas: "header" "workspace"; grid-template-rows: auto minmax(0, 1fr); }

  .menu-button { display: inline-flex; }
  .nav-group-title { display: block; }
  .global-header { gap: var(--space-2); }

  /* Marketing copy has no claim on the most valuable strip of a phone. */
  .wordmark small { display: none; }
  .brand-latin { letter-spacing: 0.3em; text-indent: 0.3em; font-size: var(--text-xs); }
  .brand-mark { inline-size: 2.35rem; block-size: 2.35rem; }
  .wordmark strong { font-size: var(--text-lg); }

  body::before { background-size: 3.25rem 3.25rem; }

  /* The drawer: a panel that slides from the leading edge, not a full page. */
  .nav-rail { gap: var(--space-1); padding: var(--space-3); }
  .nav-group-title {
    color: var(--mineral-400);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    margin-block: var(--space-3) var(--space-1);
    padding-inline: var(--space-2);
  }
  .nav-group-title:first-child { margin-block-start: 0; }
  .nav-rail .rail-button {
    justify-content: flex-start;
    gap: var(--space-3);
    inline-size: 100%;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
  }
  .nav-rail .rail-button:hover { background: var(--emerald-wash); }

  /* Two mutually exclusive modes belong in one segmented control. Stacked as
     a grid they read as two unrelated items, one of which happened to be
     styled as a pill. */

  /* The account sits at the foot of the drawer, on its own rule, where a
     phone menu is expected to keep it. */
  .nav-rail .rail-spacer { min-block-size: var(--space-4); }
  .nav-rail .rail-avatar {
    align-self: stretch;
    inline-size: 100%;
    min-block-size: var(--touch-target);
    border-radius: var(--radius-md);
    border-block-start: 1px solid var(--border-mid);
    padding-block-start: var(--space-3);
  }
}

/* ---------- empty states ------------------------------------------------ */

/* An empty list is a slot waiting for a part: an engraved outline, not a
   sad sentence in the middle of nothing. Each slot offers the next action. */
.empty-mini,
.empty-slot {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(270deg, var(--emerald-wash), transparent 40%),
    transparent;
  color: var(--limestone-300);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.empty-mini > span:first-child,
.empty-slot > span:first-child { display: flex; align-items: center; gap: var(--space-2); }
.empty-mini [data-icon] { color: var(--emerald-300); flex-shrink: 0; }
.empty-slot code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--mineral-1000);
  color: var(--limestone-100);
  unicode-bidi: isolate;
}
.empty-slot .link-button { justify-self: start; min-block-size: var(--touch-target); background: none; border: 0; padding: 0; color: var(--emerald-300); font: inherit; font-weight: 700; cursor: pointer; }

/* ---------- the details panel ------------------------------------------- */

/* Section labels are engraved: small, emerald, with a hairline running out
   to the panel edge so the eye reads a ruled sheet rather than a list. */
.inspector-section h3,
.section-title h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  color: var(--emerald-300);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
}
.inspector-section > h3::after { content: ""; flex: 1; block-size: 1px; background: linear-gradient(270deg, var(--border-strong), transparent); }
.inspector-section { border-block-start: 0; }

/* Facts as key/value rows: keys quiet, values in mono, aligned on one grid. */
.detail-list div {
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-block-start: 1px solid var(--border-soft);
}
.detail-list div:first-child { border-block-start: 0; }
.detail-list div > span { color: var(--limestone-300); font-size: var(--text-xs); }
.detail-list div > code,
.detail-list div > b { font-size: var(--text-sm); min-inline-size: 0; overflow-wrap: anywhere; }
.detail-list div > code { font-family: var(--font-mono); color: var(--limestone-100); }
.detail-card b { display: block; }
.detail-card small { color: var(--limestone-300); font-size: var(--text-xs); }

/* Activity: a tick per entry on the leading edge, the same mark the
   suggestions carry, so "happened" reads the same everywhere. */
.activity-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-inline-start: 2px solid var(--emerald-400);
  border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm);
  background: var(--mineral-1000);
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
}
.activity-item b { min-inline-size: 0; overflow-wrap: anywhere; font-weight: 600; }
.activity-item span { color: var(--limestone-300); font-family: var(--font-mono); font-size: var(--text-xs); }
.live-label { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--emerald-300); font-size: var(--text-xs); }
.live-label i { inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: var(--emerald-400); animation: instrument-pulse 2.6s var(--ease-out) infinite; }

/* ---------- notices ------------------------------------------------------ */

/* A toast is a note clipped to the edge of the instrument: a leading rule in
   gold marks it as the machine speaking, not the conversation. */
.toast {
  border-inline-start: 2px solid var(--gold-400);
  border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md);
  background: linear-gradient(270deg, var(--gold-wash), transparent 40%), var(--mineral-750);
}