/* N1 message box, round 2 (product default on desktop ≥850px; body.composer-n1 is set
   by composer-n1.js only at 850 px and up, so phone layouts never see these rules).
   One box the full conversation width, 8 px corners, 16 px icons. A formatting row on top
   opens with Aa (and in the expanded editor); the bottom row always reads attach, GIF,
   emoji, Aa, @ (groups), mic | hint, expand, Send. Every rule that changes the old
   composer is scoped under body.composer-n1.
   Revision 1 (Chris, 2026-11-04): in light and dark (non-glass) the box IS the current
   composer's .compose-pill: its background, shadow, corners, focus ring and text come from
   styles.css untouched, and N1 only lays it out. Icons, hint and Send take the current
   composer's values (the source rule is named on each token). Glass keeps the round-2
   look (tokens follow composer-mockups/round2/src/composer-r2.css). */

.n1-row,
.n1-strip,
.n1-send-label { display: none; }

body.composer-n1 .n1-hide { display: none !important; }

body.composer-n1 {
  --n1-bg: #ffffff;
  --n1-line: #d1d5db;
  --n1-focus: #007aff;             /* .compose-pill:focus-within, .compose-dictate-btn:focus-visible */
  --n1-ink: #1a1a2e;               /* .compose-pill-input, .compose-dictate-btn:hover */
  --n1-icon: var(--text-secondary); /* .compose-plus-btn / .compose-dictate-btn glyphs */
  --n1-hint: #9ca3af;              /* .compose-pill-input:empty::before */
  --n1-hover: #e5e7eb;             /* .compose-plus-btn:hover */
  --n1-on: rgba(0, 122, 255, 0.12);
  --n1-on-ink: #007aff;
  --n1-accent: #007aff;            /* .compose-send-btn */
  --n1-accent-hover: #0066d6;      /* .compose-send-btn:hover */
  --n1-accent-ink: #ffffff;
  --n1-sep: var(--border-color);
  --n1-code: rgba(100, 116, 139, 0.14);
  --n1-float: #ffffff;
  --n1-float-line: #e5e7eb;
  --n1-float-shadow: 0 8px 24px rgba(15, 23, 42, 0.14), 0 1px 3px rgba(15, 23, 42, 0.08);
  --n1-blur: none;
}
html.dark body.composer-n1 {
  --n1-bg: #111827;
  --n1-line: #4b5563;
  --n1-focus: #3b82f6;             /* .dark .compose-pill:focus-within */
  --n1-ink: #f3f4f6;               /* .dark .compose-pill-input */
  --n1-icon: #9ca3af;              /* .dark .compose-plus-btn / .compose-dictate-btn */
  --n1-hint: #6b7280;              /* .dark .compose-pill-input:empty::before */
  --n1-hover: #4b5563;             /* .dark .compose-plus-btn:hover */
  --n1-on: rgba(59, 130, 246, 0.22);
  --n1-on-ink: #93c5fd;
  --n1-accent: #3b82f6;            /* .dark .compose-send-btn */
  --n1-accent-hover: #2563eb;      /* .dark .compose-send-btn:hover */
  --n1-sep: rgba(255, 255, 255, 0.08);
  --n1-code: rgba(148, 163, 184, 0.18);
  --n1-float: #1f2937;
  --n1-float-line: #374151;
  --n1-float-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
html.theme-glass body.composer-n1 {
  --n1-focus: #2563eb;
  --n1-on-ink: #1d4ed8;
  --n1-accent: #2563eb;
  --n1-accent-hover: #1d4ed8;
  --n1-bg: var(--glass-panel-strong);
  --n1-line: rgba(15, 23, 42, 0.14);
  --n1-ink: var(--glass-ink);
  --n1-icon: var(--glass-ink-2);
  --n1-hint: var(--glass-ink-3);
  --n1-hover: var(--glass-hover);
  --n1-on: var(--glass-select);
  --n1-sep: rgba(15, 23, 42, 0.10);
  --n1-float: var(--glass-float);
  --n1-float-line: var(--glass-float-border);
  --n1-float-shadow: var(--glass-float-shadow);
  --n1-blur: blur(20px) saturate(160%);
}
html.dark.theme-glass body.composer-n1 {
  --n1-focus: #3b82f6;
  --n1-on-ink: #93c5fd;
  --n1-accent: #3b82f6;
  --n1-accent-hover: #2563eb;
  --n1-line: rgba(255, 255, 255, 0.14);
  --n1-sep: rgba(255, 255, 255, 0.10);
}

/* ---- the box: layout for every theme; its look is the .compose-pill's own outside glass ---- */
body.composer-n1 .message-compose-area .compose-pill {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 0;
  overflow: visible;
}
/* Outside glass: the pill's look with its own corners. The pill's 20 px reads as a pill
   on a two-row box (revision 2, Chris 2026-11-04: "a bit too rounded"). */
html:not(.theme-glass) body.composer-n1 .message-compose-area .compose-pill { border-radius: 12px; }
/* Flat light: the pill's fill is the bar's (#f8f9fa, 1.00:1), so the typing area did not
   stand out (revision 3, Chris 2026-11-04). The box is white with a 1 px gray-300 ring, the
   app's input border (1.40:1 against the bar, 1.47:1 against the box), over the pill's own
   drop shadow. A shadow ring keeps the box's size; focused, the pill's blue ring replaces it. */
html:not(.theme-glass):not(.dark) body.composer-n1 .message-compose-area .compose-pill,
html:not(.theme-glass):not(.dark) body.composer-n1 .message-compose-area .compose-pill:focus-within { background: #ffffff; }
html:not(.theme-glass):not(.dark) body.composer-n1 .message-compose-area .compose-pill:not(:focus-within) {
  box-shadow: 0 0 0 1px #d1d5db, 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Glass: the round-2 box, (0,4,2) and up, above glass-theme.css's (0,2,1) pill. */
html.theme-glass body.composer-n1 .message-compose-area .compose-pill,
html.theme-glass body.composer-n1 .message-compose-area .compose-pill:focus-within {
  border-radius: 8px;
  border: 1px solid var(--n1-line);
  background: var(--n1-bg);
  -webkit-backdrop-filter: var(--n1-blur);
  backdrop-filter: var(--n1-blur);
}
html.theme-glass body.composer-n1 .message-compose-area .compose-pill:focus-within {
  border-color: var(--n1-focus);
}
html.theme-glass body.composer-n1 .message-compose-area .compose-pill {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
html.theme-glass body.composer-n1 .message-compose-area .compose-pill:focus-within {
  box-shadow: 0 0 0 1px var(--n1-focus), 0 4px 16px rgba(15, 23, 42, 0.08);
}
html.dark.theme-glass body.composer-n1 .message-compose-area .compose-pill {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.composer-n1 .message-compose-area .compose-pill-inner {
  order: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 6px;
}
/* Outside glass the text starts where the current pill starts it (14 px in). */
html:not(.theme-glass) body.composer-n1 .message-compose-area .compose-pill-inner { padding: 8px 14px 4px; }
body.composer-n1 .message-compose-area .compose-pill-input {
  flex: 1 1 auto;
  padding: 0;
  min-height: 20px;
}
/* Font, size, ink and placeholder are the current .compose-pill-input's outside glass. */
html.theme-glass body.composer-n1 .message-compose-area .compose-pill-input {
  font-size: 14px;
  line-height: 20px;
  color: var(--n1-ink);
}
html.theme-glass body.composer-n1 .message-compose-area .compose-pill-input:empty::before { color: var(--n1-hint); }

/* Real formatting, in the box. */
body.composer-n1 .compose-pill-input strong { font-weight: 700; }
body.composer-n1 .compose-pill-input em { font-style: italic; }
body.composer-n1 .compose-pill-input code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0 3px;
  border-radius: 4px;
  background: var(--n1-code);
}

/* ---- expanded: the height is set by composer-n1.js; the text scrolls inside ---- */
body.composer-n1 .message-compose-area .compose-pill.n1-expanded .compose-pill-inner {
  flex: 1 1 0;
  padding: 12px 14px;
}
body.composer-n1 .message-compose-area .compose-pill.n1-expanded .compose-pill-input {
  max-height: none !important;
  overflow-y: auto !important;
}

/* ---- buttons: 32 px targets, 16 px glyphs ---- */
body.composer-n1 .n1-btn,
body.composer-n1 #n1Row .compose-dictate-btn {
  flex: none;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--n1-icon);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
/* Outside glass the icon buttons are round, like the current + and mic. */
html:not(.theme-glass) body.composer-n1 .n1-btn,
html:not(.theme-glass) body.composer-n1 #n1Row .compose-dictate-btn { border-radius: 50%; }
body.composer-n1 .n1-btn > i,
body.composer-n1 #n1Row .compose-dictate-btn > i { font-size: 16px; }
body.composer-n1 .n1-btn.hidden,
body.composer-n1 #n1Row .compose-dictate-btn.hidden { display: none; }
body.composer-n1 .n1-btn:hover,
body.composer-n1 #n1Row .compose-dictate-btn:hover { background: var(--n1-hover); color: var(--n1-ink); }
body.composer-n1 .n1-btn:focus-visible,
body.composer-n1 #n1Row .compose-dictate-btn:focus-visible,
body.composer-n1 #n1Row .compose-send-btn:focus-visible { outline: 2px solid var(--n1-focus); outline-offset: 1px; }
body.composer-n1 .n1-btn.is-on,
body.composer-n1 .n1-btn.is-on:hover,
body.composer-n1 .n1-strip .n1-btn.is-active,
body.composer-n1 .n1-strip .n1-btn.is-active:hover { background: var(--n1-on); color: var(--n1-on-ink); }

body.composer-n1 .n1-btn-aa { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; font-family: Inter, system-ui, sans-serif; }
body.composer-n1 .n1-btn-gif {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 3px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  line-height: 12px;
}
body.composer-n1 .n1-glyph-b { font-size: 16px; font-weight: 700; font-family: Inter, system-ui, sans-serif; }
body.composer-n1 .n1-glyph-i { font-size: 17px; font-weight: 600; font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
body.composer-n1 .n1-sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--n1-sep); }

/* ---- the formatting row: top of the box, only while Aa is on (or expanded) ---- */
body.composer-n1 .n1-strip.is-open {
  order: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--n1-sep);
}
/* Expanded in a window too short for it as well: the row steps aside (composer-n1.js). */
body.composer-n1 .n1-strip.is-open.is-squeezed { display: none; }
body.composer-n1 .n1-strip .n1-btn { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }

/* ---- the bottom row ---- */
/* Spaced like iOS: 11 px between targets, so 27 px between glyphs (1.5x round 2's 18 px).
   Narrow windows: the hint drops first, then the gap tightens (composer-n1.js fitRow). */
body.composer-n1 .n1-row {
  order: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 6px 6px;
  min-width: 0;
}
body.composer-n1 .n1-hint {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  margin-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  line-height: 16px;
  color: var(--n1-hint);
}
/* Narrow: the hint drops first (composer-n1.js sets this when it would not fit whole). */
body.composer-n1 .n1-hint.is-dropped { display: none; }
body.composer-n1 .n1-row.is-tight-1 { gap: 6px; }
body.composer-n1 .n1-row.is-tight-2 { gap: 2px; }
body.composer-n1 .n1-hint.is-dropped + #n1ExpandBtn { margin-left: auto; }
body.composer-n1 #n1ExpandBtn { margin-right: 0; }

/* ---- Send: always there, text + plane, disabled until there is something to send ---- */
body.composer-n1 #n1Row .compose-send-btn,
body.composer-n1.has-dictate-morph #n1Row .compose-send-btn,
body.composer-n1 #n1Row .compose-send-btn.compose-send-hidden {
  display: inline-flex !important;
  flex: none;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: var(--n1-accent);
  color: var(--n1-accent-ink);
  font: 600 13px/1 Inter, system-ui, sans-serif;
  white-space: nowrap;
  opacity: 1;
  transform: none;
  align-self: auto;
}
/* Outside glass: the current Send's round ends and 28 px height, label kept (Chris, 2026-11-04). */
html:not(.theme-glass) body.composer-n1 #n1Row .compose-send-btn,
html:not(.theme-glass) body.composer-n1.has-dictate-morph #n1Row .compose-send-btn,
html:not(.theme-glass) body.composer-n1 #n1Row .compose-send-btn.compose-send-hidden {
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 9999px;
  gap: 6px;
}
html:not(.theme-glass) body.composer-n1 #n1Row .compose-send-btn .n1-send-label { gap: 6px; }
html:not(.theme-glass) body.composer-n1 #n1Row .compose-send-btn .n1-send-label i { font-size: 12px; }
body.composer-n1 #n1Row .compose-send-btn:hover:not(:disabled) { background: var(--n1-accent-hover); }
body.composer-n1 #n1Row .compose-send-btn:disabled { opacity: 0.5; cursor: default; }
body.composer-n1 #n1Row .compose-send-btn > .fa-arrow-up { display: none; }
body.composer-n1 #n1Row .compose-send-btn .n1-send-label { display: inline-flex; align-items: center; gap: 8px; }
body.composer-n1 #n1Row .compose-send-btn .n1-send-label i { font-size: 14px; }
body.composer-n1 .compose-pill.is-dictating #n1Row .compose-send-btn { opacity: 0.5; }

/* ---- the mic ---- */
body.composer-n1 #n1Row .compose-dictate-btn.is-recording,
body.composer-n1 #n1Row .compose-dictate-btn.is-recording:hover {
  background: #dc2626;
  color: #ffffff;
  animation: dictateRecPulse 1.2s ease-in-out infinite;
}
html.dark body.composer-n1 #n1Row .compose-dictate-btn.is-recording,
html.dark body.composer-n1 #n1Row .compose-dictate-btn.is-recording:hover {
  background: #ef4444;
  color: #ffffff;
  animation: dictateRecPulse 1.2s ease-in-out infinite;
}
/* Silence: an amber ring that shrinks away over the 2s before the stop. */
body.composer-n1 #n1Row .compose-dictate-btn.is-recording.is-soft-stopping,
html.dark body.composer-n1 #n1Row .compose-dictate-btn.is-recording.is-soft-stopping {
  color: #ffffff;
  animation: n1SoftStopRing 2s linear forwards;
}
@keyframes n1SoftStopRing {
  0%   { box-shadow: 0 0 0 5px #d97706; }
  100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.35); }
}

/* ---- link pop-up (Link in the formatting row): floats above the box ---- */
.n1-link-pop {
  position: fixed;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  width: 300px;
  background: var(--n1-float);
  border: 1px solid var(--n1-float-line);
  border-radius: 8px;
  box-shadow: var(--n1-float-shadow);
  -webkit-backdrop-filter: var(--n1-blur);
  backdrop-filter: var(--n1-blur);
}
.n1-link-pop input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--n1-line);
  border-radius: 6px;
  background: transparent;
  color: var(--n1-ink);
  font-size: 13px;
  outline: none;
}
.n1-link-pop input:focus { border-color: var(--n1-focus); }
.n1-link-pop button {
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: var(--n1-accent);
  color: var(--n1-accent-ink);
  font: 600 13px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}