/* discord-ai-assistant.html - the ad landing page, on the Signal foundation.
   The fold is the recorded run (the panel: a Discord-like thread, the trace
   of its tool calls, the file it posted), then the headline that matches the
   ad, the two actions and the five checks. Everything below the fold uses
   signal-read.css (sections, bento cards, the closing call). The page keeps
   its fold order and its measurements (see discord-ai-assistant-page.jsx);
   this sheet only draws it with the foundation's tokens. The site header is
   in the flow, so the fold no longer pads for a fixed bar. */

.ad-fold { padding: 36px 0 56px; border-bottom: 1px solid var(--line); }
.ad-fold + .install-section { padding-top: 56px; border-top: 0; }

/* The panel. */
.ad-stage { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.ad-chrome { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
.ad-tabs { display: flex; gap: 4px; min-width: 0; }
.ad-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--radius-xs); font-size: 12px; color: var(--muted); }
.ad-tab.is-on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ad-tab svg { flex: none; width: 13px; height: 13px; }
.ad-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ad-meta b { font-weight: 650; color: var(--ink); }
.ad-body { display: grid; grid-template-columns: 1.12fr .88fr; min-height: 466px; }
.ad-thread { min-width: 0; padding: 18px 20px 16px; border-right: 1px solid var(--line); }
.ad-output { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; background: var(--paper); }
.ad-where { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ad-where::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ad-msg { display: grid; grid-template-columns: 32px 1fr; gap: 12px; margin-bottom: 10px; }
.ad-msg > div:last-child { min-width: 0; }
.ad-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; }
.ad-av svg { width: 16px; height: 16px; }
.ad-av-u { background: #4a4b52; }
.ad-av-b { background: #3b3a48; }
.ad-who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.ad-n { font-size: 14px; font-weight: 600; color: var(--ink); }
.ad-app { padding: 2px 5px; border-radius: 3px; background: var(--soft); font-size: 9px; font-weight: 700; letter-spacing: .07em; color: var(--muted); }
.ad-say { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.ad-at { padding: 0 3px; border-radius: 3px; background: var(--tint); color: var(--violet); }
.ad-trace { overflow: hidden; margin: 8px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-xs); }
.ad-trace-h { display: flex; justify-content: space-between; gap: 8px; padding: 7px 11px; border-bottom: 1px solid var(--line); background: var(--soft); font: 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ad-trace-r { display: grid; grid-template-columns: 14px 118px 1fr; gap: 9px; align-items: center; padding: 4px 11px; border-bottom: 1px solid var(--line); font: 11.5px/1.5 var(--mono); }
.ad-trace-r:last-child { border-bottom: 0; }
.ad-k { font-size: 10px; color: var(--green); }
.ad-name { color: var(--ink); }
.ad-arg { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.ad-bullets { margin: 7px 0 0; padding: 0; list-style: none; }
.ad-bullets li { position: relative; padding-left: 15px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.ad-bullets li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.ad-bullets li b { font-weight: 700; color: var(--ink); }
.ad-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ad-file { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--soft); }
.ad-file svg { flex: none; width: 14px; height: 14px; color: var(--muted); }
.ad-fn { font: 11.5px var(--mono); color: var(--ink); }
.ad-fs { font: 10.5px var(--mono); color: var(--muted); }
.ad-out-label { margin-bottom: 11px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ad-frame { display: block; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); transition: border-color .2s; }
.ad-frame:hover { border-color: #55565d; }
.ad-frame-bar { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line); background: var(--soft); }
.ad-dots { display: flex; gap: 5px; }
.ad-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #4a4b52; }
.ad-frame-url { flex: 1; min-width: 0; overflow: hidden; padding: 3px 8px; border-radius: 5px; background: var(--paper); font: 10.5px var(--mono); color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.ad-frame img { display: block; width: 100%; }
.ad-out-note { margin: auto 0 0; padding-top: 14px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.ad-out-note b { font-weight: 650; color: var(--ink); }

/* The pitch under the panel: headline and sub on the left, actions right. */
.ad-pitch { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: max-content 1fr; column-gap: 56px; align-items: start; margin-top: 22px; }
.ad-h1 { grid-column: 1; grid-row: 1; margin: 0; font-size: 36px; line-height: 1.15; }
.ad-sub { grid-column: 1; grid-row: 2; max-width: 56ch; margin: 11px 0 0; font-size: 15px; line-height: 1.62; color: var(--muted); }
.ad-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding-top: 4px; }
.ad-acts .sg-btn { white-space: normal; }
.ad-checks { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.ad-checks span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.ad-checks svg { flex: none; width: 11px; height: 11px; color: var(--green); }

@media (max-width: 900px) {
  .ad-body { grid-template-columns: 1fr; min-height: 0; }
  .ad-thread { border-right: 0; }
  .ad-output { border-top: 1px solid var(--line); }
  .ad-pitch { display: flex; flex-direction: column; gap: 16px; }
  .ad-h1, .ad-sub, .ad-acts { grid-column: auto; grid-row: auto; }
  .ad-sub { margin-top: 0; }
  .ad-acts { padding-top: 0; }
  .ad-out-note { margin-top: 12px; }
}
/* On a phone the fold keeps the panel, the headline, both actions and the
   checks above the ~660px a phone shows (the page's own measurement). */
@media (max-width: 768px) {
  .ad-fold { padding: 12px 0 40px; }
  .ad-stage { border-radius: var(--radius-md); }
  .ad-chrome { height: 30px; padding: 0 8px; }
  .ad-tab { gap: 5px; padding: 4px 7px; font-size: 10.5px; }
  .ad-tab span { display: none; }
  .ad-tab.is-on span { display: inline; }
  .ad-meta { font-size: 10px; }
  .ad-meta .ad-wide { display: none; }
  .ad-thread { padding: 8px 12px 6px; }
  .ad-where { display: none; }
  .ad-msg { grid-template-columns: 24px 1fr; gap: 8px; margin-bottom: 6px; }
  .ad-av { width: 24px; height: 24px; }
  .ad-av svg { width: 13px; height: 13px; }
  .ad-who { margin-bottom: 2px; }
  .ad-who-u { display: none; }
  .ad-n { font-size: 12.5px; }
  .ad-app { padding: 1px 4px; font-size: 8px; }
  .ad-say { font-size: 12.5px; line-height: 1.4; }
  .ad-bullets { display: none; }
  .ad-trace { margin: 6px 0; }
  .ad-trace-h { padding: 3px 9px; font-size: 9px; }
  .ad-trace-r { grid-template-columns: 11px 100px 1fr; gap: 6px; padding: 2px 9px; font-size: 9px; line-height: 1.35; }
  .ad-files { margin-top: 5px; }
  .ad-file { gap: 6px; padding: 3px 8px; }
  .ad-fn { font-size: 10px; }
  .ad-fs { font-size: 9px; }
  .ad-file:nth-child(2) { display: none; }
  .ad-output { padding: 8px 12px; }
  .ad-out-label { margin-bottom: 5px; font-size: 9.5px; }
  .ad-out-note { display: none; }
  .ad-frame-bar { gap: 6px; padding: 4px 8px; }
  .ad-dots i { width: 6px; height: 6px; }
  .ad-frame-url { padding: 2px 6px; font-size: 9.5px; }
  .ad-frame img { height: 78px; object-fit: cover; object-position: top center; }
  .ad-pitch { gap: 8px; margin-top: 10px; }
  .ad-h1 { order: 1; font-size: 24px; letter-spacing: -.03em; }
  .ad-acts { order: 2; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; }
  .ad-sub { order: 3; margin-top: 2px; font-size: 13px; line-height: 1.5; }
  .ad-acts .sg-btn { flex: 1 1 0; min-width: 0; padding: 12px 6px; font-size: 12px; }
  .ad-acts .sg-btn--primary { flex-grow: 1.1; }
  .ad-checks { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; width: 100%; margin-top: 2px; }
  .ad-checks span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-frame { transition: none; }
}