/* The Aegis panel on the home page. Every measure is the desktop app's (glass-lab web/src/app/aegis/AegisPanel.tsx,
   aegis.css, and the glass the panel stands in, measured in the running app 29/10). Dark = the house's grey #1C1C1E,
   light = #F5F5F7. Blue only in the question, the send button and the actions. All text white in dark and ink in
   light, never grey. No hover effects (the house rule); pressed is opacity, as AegisCapsuleStyle. */

.ae {
  --ae-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --ae-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --ae-ink: #ffffff;
  --ae-floor: #1c1c1e;
  --ae-card: rgba(255, 255, 255, 0.07);
  --ae-card-edge: rgba(255, 255, 255, 0.06);
  --ae-card-shadow: 0 0 0 transparent;
  --ae-hair: rgba(255, 255, 255, 0.09);
  --ae-chip: rgba(255, 255, 255, 0.1);
  --ae-bubble: #2d6fd8;
  --ae-send: #0a84ff;
  --ae-send-off: rgba(255, 255, 255, 0.18);
  --ae-obs: #ffd60a;
  --ae-avatar: #0a2540;
  /* The panel's glass (regular, active, dark): the veil, the inner ring and the drop. */
  --ae-glass: rgba(25, 25, 25, 0.667);
  --ae-glass-ring: rgba(255, 255, 255, 0.13);
  --ae-glass-drop: 0 8px 34px rgba(0, 0, 0, 0.165);
  --ae-field-glass: rgba(45, 45, 45, 0.647);
  --ae-field-drop: 0 7.5px 36px rgba(0, 0, 0, 0.04);
  --ae-spring: cubic-bezier(0.2, 0.9, 0.3, 1);
  position: relative;
  flex: 0 1 452px;
  width: 452px;
  max-width: 100%;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--ae-font);
  letter-spacing: normal;
}
@media (prefers-color-scheme: light) {
  .ae {
    --ae-ink: #1d1d1f;
    --ae-floor: #f5f5f7;
    --ae-card: #ffffff;
    --ae-card-edge: rgba(0, 0, 0, 0.06);
    --ae-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    --ae-hair: rgba(0, 0, 0, 0.08);
    --ae-chip: rgba(0, 0, 0, 0.05);
    --ae-send-off: rgba(29, 29, 31, 0.18);
    --ae-obs: #b25000;
    --ae-glass: rgba(255, 255, 255, 0.706);
    --ae-glass-ring: rgba(255, 255, 255, 0.32);
    --ae-glass-drop: 0 8px 37px rgba(0, 0, 0, 0.09);
    --ae-field-glass: rgba(248, 248, 248, 0.71);
    --ae-field-drop: 0 7.5px 34px rgba(0, 0, 0, 0.175);
  }
}
.ae *, .ae *::before, .ae *::after { box-sizing: border-box; }
.ae [hidden] { display: none !important; }
.ae-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ae-i { display: block; flex: none; overflow: visible; }
.ae-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* MARK: The panel: glass with 6 inside, radius 26; the top (52) in glass, the reading floor dense, radius 20. */
.ae-panel {
  position: relative;
  height: 720px; /* 800 with the composer; autoplay has none (Benjamin 29/10) */
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 26px;
  color: var(--ae-ink);
  background: var(--ae-glass);
  -webkit-backdrop-filter: blur(9.75px) saturate(1.89);
  backdrop-filter: blur(9.75px) saturate(1.89);
  box-shadow: inset 0 0 0 1px var(--ae-glass-ring), var(--ae-glass-drop);
}
.ae-head { height: 52px; flex: none; display: flex; align-items: center; padding: 0 14px; }
.ae-title { margin: 0; flex: 1; font: 700 20px/1 var(--ae-font); letter-spacing: normal; color: var(--ae-ink); }
.ae-headcaps { display: flex; gap: 8px; }
.ae-floor {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--ae-floor);
}
.ae-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 20px 20px 0 0;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.ae-scroll::-webkit-scrollbar { display: none; }
.ae-scroll:focus-visible { outline: 2px solid var(--ae-send); outline-offset: -2px; }
.ae-col { padding: 12px 20px; display: flex; flex-direction: column; gap: 28px; }

/* MARK: Buttons: the capsule (32 high, 13.5 semibold), prominent in the send blue. Disabled looks the same (Swift). */
.ae-cap {
  appearance: none;
  border: 0;
  margin: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  white-space: nowrap;
  cursor: default;
  height: 32px;
  padding: 0 13px;
  font: 600 13.5px/1 var(--ae-font);
  letter-spacing: normal;
  color: var(--ae-ink);
  background: var(--ae-chip);
  -webkit-tap-highlight-color: transparent;
}
.ae-cap-pro { color: #ffffff; background: var(--ae-send); }
.ae-cap:active, .ae-ib:active { opacity: 0.75; }
.ae-cap:focus-visible, .ae-ib:focus-visible, .ae-send:focus-visible { outline: 2px solid var(--ae-send); outline-offset: 2px; }
.ae-chip { background: var(--ae-chip); border-radius: 999px; color: var(--ae-ink); }

/* MARK: One turn: the question right in the blue bubble, the answer under it. */
.ae-turn { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.ae-q { display: flex; justify-content: flex-end; padding-left: 80px; }
.ae-bubble {
  max-width: 300px;
  background: var(--ae-bubble);
  color: #ffffff;
  border-radius: 18px;
  padding: 9px 14px;
  font: 400 13px/16px var(--ae-font);
  overflow-wrap: anywhere;
}
.ae-bubble.ae-sent { opacity: 0.75; }
.ae-step { display: flex; align-items: center; gap: 10px; }
.ae-step > span:first-of-type { font: 500 15px/1.2 var(--ae-font); }
.ae-detail { font: 500 13px/22px var(--ae-font); height: 22px; padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ae-spin { display: block; flex: none; animation: ae-spin 1s steps(12) infinite; }
@keyframes ae-spin { to { transform: rotate(360deg); } }

.ae-reply, .ae-rest { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; max-width: 100%; }
.ae-turn, .ae-col > *, .ae-rest > * { min-width: 0; max-width: 100%; }
.ae-reply > .ae-rest { align-self: stretch; }
.ae-vrow { display: flex; align-items: flex-start; gap: 10px; }
.ae-mark { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.ae-verdict { font: 600 19px/23px var(--ae-font); }
.ae-caret { color: var(--ae-send); }
.ae-support { font: 400 15px/18px var(--ae-font); }
.ae-card { background: var(--ae-card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ae-card-edge), var(--ae-card-shadow); }
.ae-hair { height: 1px; background: var(--ae-hair); }
.ae-hair-in { margin-left: 104px; }

/* The players card: the column stands 408 with a players card (AegisShot), 4 out on each side. */
.ae-players { width: calc(100% + 8px); max-width: none; margin: 0 -4px; padding: 4px 0; }
.ae-prow { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.ae-ring { position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.ae-ring > svg { position: absolute; inset: 0; }
.ae-ring-track { stroke: var(--ae-hair); }
.ae-ring-n { position: relative; font: 700 13px/1 var(--ae-rounded); font-variant-numeric: tabular-nums; }
.ae-ring-g { position: relative; display: grid; place-items: center; }
.ae-obs { color: var(--ae-obs); }
.ae-face { position: relative; display: block; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; background: var(--ae-avatar); }
/* The picture is cut at build time to the circle the app shows (scripts/aegis-faces.py), so it simply fills it. */
.ae-face img { width: 100%; height: 100%; }
.ae-face img.ae-mono { filter: grayscale(1); }
.ae-pbody { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.ae-pname { display: flex; align-items: center; gap: 8px; font: 600 15px/19px var(--ae-font); }
.ae-word { background: var(--ae-chip); border-radius: 999px; font: 600 12px/20px var(--ae-font); height: 20px; padding: 0 7px; white-space: nowrap; }
.ae-chips { display: flex; flex-direction: row; align-items: flex-start; gap: 6px; max-width: 100%; min-width: 0; }
.ae-chips-col { flex-direction: column; gap: 4px; }
.ae-rchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ae-chip);
  font: 600 11.5px/22px var(--ae-font);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  flex: none;
}
.ae-rchip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ae-figs { display: flex; gap: 10px; flex-wrap: wrap; }
.ae-fig { padding: 10px 14px; min-width: 120px; }
.ae-fig-v { display: flex; align-items: baseline; gap: 4px; }
.ae-fig-n { font: 600 26px/1.1 var(--ae-rounded); font-variant-numeric: tabular-nums; }
.ae-fig-u { font: 600 12px/1 var(--ae-font); }
.ae-fig-l { font: 500 12px/1.3 var(--ae-font); margin-top: 2px; }

.ae-tablecard { width: 100%; max-width: 560px; padding-bottom: 8px; }
.ae-ttitle { font: 600 13px/16px var(--ae-font); padding: 12px 14px 8px; }
.ae-table { border-collapse: collapse; margin: 0 14px; width: calc(100% - 28px); font: 400 14px/1.2 var(--ae-font); font-variant-numeric: tabular-nums; color: var(--ae-ink); }
.ae-table th { font: 600 12px/15px var(--ae-font); padding: 0 0 6px 18px; white-space: nowrap; text-align: left; }
.ae-table td { padding: 7px 0 7px 18px; border-top: 1px solid var(--ae-hair); white-space: nowrap; text-align: left; }
.ae-table th:first-child, .ae-table td:first-child { padding-left: 0; white-space: normal; width: 100%; }
.ae-table td:first-child { font-weight: 500; }
.ae-table .ae-num { text-align: right; }

.ae-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ae-source { display: flex; align-items: flex-start; gap: 6px; font: 500 12px/1.3 var(--ae-font); font-variant-numeric: tabular-nums; }
.ae-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ae-ib {
  appearance: none; border: 0; margin: 0; padding: 0; background: transparent; color: var(--ae-ink); cursor: default;
  width: 30px; height: 28px; display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.ae-ib .ae-on { display: none; }
.ae-ib[aria-pressed="true"] .ae-on { display: block; }
.ae-ib[aria-pressed="true"] .ae-off { display: none; }
.ae-copied { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/28px var(--ae-font); height: 28px; padding: 0 10px; }
.ae-fu { display: flex; gap: 8px; flex-wrap: wrap; }

.ae-empty { padding-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ae-empty-t { font: 600 22px/1.2 var(--ae-font); }
.ae-empty-q { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* MARK: The composer: glass (radius 20) on the floor, 10 around it; plus and send 34 round. */
.ae-note { margin: 0; padding: 8px 20px 0; font: 500 13px/18px var(--ae-font); color: var(--ae-ink); flex: none; }
.ae-note a { color: var(--ae-ink); text-decoration: underline; text-underline-offset: 0.18em; }
.ae-composer-pad { padding: 10px; flex: none; }
.ae-composer {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 9px 9px 9px 10px;
  border-radius: 20px;
  background: var(--ae-field-glass);
  -webkit-backdrop-filter: blur(3.5625px) saturate(1.89);
  backdrop-filter: blur(3.5625px) saturate(1.89);
  box-shadow: inset 0 0 0 1px var(--ae-glass-ring), var(--ae-field-drop);
}
.ae-plus { width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; flex: none; background: var(--ae-chip); color: var(--ae-ink); }
.ae-field {
  flex: 1;
  min-width: 0;
  height: 35px;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ae-ink);
  font: 400 16px/21px var(--ae-font);
  letter-spacing: normal;
  padding: 7px 0;
  margin: 0;
  overflow: hidden;
}
.ae-field::placeholder { color: var(--ae-ink); opacity: 0.6; }
.ae-composer:focus-within { box-shadow: inset 0 0 0 1px var(--ae-glass-ring), 0 0 0 2px var(--ae-send), var(--ae-field-drop); }
.ae-send {
  appearance: none; border: 0; margin: 0; padding: 0; cursor: default;
  width: 34px; height: 34px; border-radius: 17px; flex: none; display: grid; place-items: center;
  color: #ffffff; background: var(--ae-send);
}
.ae-send:disabled { background: var(--ae-send-off); }

/* MARK: The questions under the panel (only with JavaScript; without it the first answer stands alone). */
.ae-ask { display: none; flex-direction: column; gap: 10px; }
.ae.ae-on .ae-ask { display: flex; }
.ae-ask-t { margin: 0; font: 600 15px/1.2 var(--ae-font); color: var(--ink, var(--ae-ink)); }
.ae-ask-q { display: flex; flex-wrap: wrap; gap: 8px; }
.ae-ask .ae-cap { color: var(--ink, var(--ae-ink)); background: var(--glass, var(--ae-chip)); box-shadow: inset 0 0 0 1px var(--glass-edge, transparent); }
.ae-ask .ae-cap[aria-pressed="true"] { color: #ffffff; background: var(--ae-bubble); box-shadow: none; }
.ae-caption { margin: 0; font: 400 13px/1.4 var(--ae-font); color: var(--body, var(--ae-ink)); }

/* MARK: Motion. A new turn: opacity with offset(y: 10), Motion.standard; the rest of the answer fades in. Reduce
   Motion: opacity only, and aegis.js goes straight to the answer. */
@keyframes ae-turn-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ae-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ae-in { animation: ae-turn-in 400ms var(--ae-spring) both; }
.ae-fade { animation: ae-fade-in 320ms cubic-bezier(0, 0, 0.58, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .ae-in, .ae-fade { animation: ae-fade-in 200ms cubic-bezier(0, 0, 0.58, 1) both; }
  .ae-spin { animation-duration: 3s; }
}

/* Between phone and desktop the text and the panel stand one over the other, so the panel keeps its 452. */
@media (min-width: 834px) {
  .ae { flex-shrink: 0; }
}
@media (min-width: 834px) and (max-width: 1100px) {
  .split.aegis { flex-direction: column; align-items: stretch; }
  .split.aegis .aegis-text { flex-basis: auto; max-width: 720px; }
  .ae { margin: 0 auto; }
}

/* MARK: Phone width: the panel takes the column, a little shorter. */
@media (max-width: 833px) {
  .ae { flex-basis: auto; width: 100%; margin-left: 0; }
  .ae-panel { height: 640px; }
  .ae-players { width: 100%; margin: 0; }
  /* A reason is never cut on a phone: it wraps inside its chip instead. */
  .ae-rchip { white-space: normal; height: auto; min-height: 22px; line-height: 16px; padding: 3px 8px; border-radius: 11px; }
  .ae-rchip > span { overflow: visible; }
  .ae-col { padding: 12px 14px; }
  .ae-q { padding-left: 40px; }
  .ae-prow { gap: 10px; padding: 8px 10px; }
  .ae-hair-in { margin-left: 96px; }
  .ae-headcaps { gap: 6px; }
  .ae-head .ae-cap { padding: 0 10px; }
}
@media (max-width: 380px) {
  .ae-head .ae-cap svg { display: none; }
}