@import url("/dominion-cinematic-01.css?v=30");
@import url("/dominion-cinematic-02.css?v=30");
@import url("/dominion-cinematic-03.css?v=31");
@import url("/dominion-cinematic-04.css?v=34");
@import url("/dominion-cinematic-05.css?v=30");
@import url("/dominion-cinematic-06.css?v=30");
@import url("/dominion-rendered-v2.css?v=41");

/* ---- Pre-send cost chip (docs/CLOUD-MIGRATION.md §6) ------------------------------------------
   A live estimate under the composer: what THIS turn will cost before you send it. Kept visible on
   mobile (the composer-label row is hidden there), right-aligned, monospaced, colour-coded by
   backend: green = free/always-on, brass = a paid cloud model, warn-amber = the on-demand heavy GPU
   (cold = spinning up). Non-intrusive: it collapses to nothing when the composer is empty. */
.cost-row { display: flex; justify-content: flex-end; align-items: center; min-height: 0; margin: 0 2px 5px; }
.cost-row:has(.cost-chip[hidden]) { margin: 0; }
.cost-chip {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%; padding: 3px 10px;
  border: 1px solid rgba(143, 208, 244, .3);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 60%), rgba(2, 11, 18, .6);
  color: #bcd7e6;
  font: 600 10.5px/1.3 "Cascadia Mono", "Consolas", monospace;
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(210, 240, 255, .08); transition: opacity .15s ease, border-color .15s ease;
}
.cost-chip[hidden] { display: none; }
.cost-chip .cc-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.cost-chip .cc-cost { color: #eaf6ff; font-weight: 700; }
.cost-chip .cc-lat { opacity: .68; font-weight: 500; }
.cost-chip.cc-loading { opacity: .5; }
/* free / always-on local light tier */
.cost-chip.cc-free { border-color: rgba(118, 255, 104, .34); color: #a7e79a; }
/* paid cloud model — brass */
.cost-chip.cc-cloud { border-color: rgba(247, 177, 112, .42); color: #f2c48f; }
/* on-demand heavy GPU */
.cost-chip.cc-heavy { border-color: rgba(255, 174, 103, .5); color: #ffbf94; }
.cost-chip.cc-heavy.cc-cold { border-color: rgba(255, 116, 100, .6); color: #ff9f86; animation: cc-cold-pulse 1.8s ease-in-out infinite; }
@keyframes cc-cold-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(210, 240, 255, .08); } 50% { box-shadow: inset 0 1px 0 rgba(210, 240, 255, .08), 0 0 12px rgba(255, 120, 90, .28); } }

/* ---- Attachments (pictures + files in the composer and transcript) ---------------------------
   Staging strip above the command bar, honest vision-gate warning, thumbnails inside sent
   bubbles. Same glass-and-brass language as the rest of the console. */
.attach-strip {
  display: flex; gap: 8px; margin: 0 0 8px; padding: 2px 2px 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.attach-strip[hidden], .attach-warn[hidden] { display: none; }
.att-cell { position: relative; flex: none; }
.att-cell img {
  display: block; width: 58px; height: 58px; object-fit: cover; cursor: zoom-in;
  border: 1px solid rgba(179, 226, 255, .34);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: rgba(2, 10, 17, .7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(235, 250, 255, .12);
}
.att-file {
  display: inline-flex; align-items: center; max-width: 190px; height: 30px; padding: 0 10px;
  border: 1px solid rgba(247, 177, 112, .38); color: #f2c48f;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 60%), rgba(2, 11, 18, .66);
  font: 600 10.5px/1.2 "Cascadia Mono", "Consolas", monospace; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.att-cell .att-file { height: 58px; max-width: 160px; }
.att-x {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; display: grid; place-items: center;
  border: 1px solid rgba(255, 140, 120, .55); border-radius: 50%; cursor: pointer;
  color: #ffb0a0; background: rgba(8, 4, 4, .92); font: 700 12px/1 "Cascadia Mono", monospace;
  box-shadow: 0 0 8px rgba(255, 100, 80, .3);
}
.att-x:hover { color: #fff; border-color: rgba(255, 160, 140, .8); }
.attach-warn {
  margin: 0 0 8px; padding: 7px 11px;
  border: 1px solid rgba(255, 174, 103, .5); color: #ffbf94;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 60%), rgba(20, 8, 2, .72);
  font: 600 11px/1.4 "Cascadia Mono", "Consolas", monospace; letter-spacing: .03em;
}
.attach-warn.shake { animation: att-shake .35s ease; }

/* ---- Pace warning: "this setup will be slow", said before the wait ---------------------------
   Small and red by Fred's instruction, and deliberately quieter than the attachment warning: it
   is a heads-up about a choice the user made, not a refusal. One line at rest; tapping it opens
   the reasons and the three controls that make it faster. */
.pace-warn { margin: 0 0 8px; }
.pace-warn[hidden] { display: none; }
.pace-line {
  display: flex; align-items: baseline; gap: 7px; width: 100%; cursor: pointer; text-align: left;
  padding: 6px 10px;
  border: 1px solid rgba(255, 120, 96, .42); color: #ff9d84;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 60%), rgba(24, 6, 4, .74);
  font: 600 10.5px/1.45 "Cascadia Mono", "Consolas", monospace; letter-spacing: .03em;
}
.pace-line:hover { color: #ffb9a6; border-color: rgba(255, 150, 128, .6); }
.pace-line .pace-caret { margin-left: auto; opacity: .75; }
.pace-body {
  padding: 8px 11px 9px;
  border: 1px solid rgba(255, 120, 96, .26); border-top: 0;
  background: rgba(14, 4, 3, .8);
  color: #d9b6ac;
  font: 500 10.5px/1.55 "Cascadia Mono", "Consolas", monospace;
}
.pace-body ul { margin: 0 0 7px; padding-left: 15px; }
.pace-body li { margin: 0 0 3px; }
.pace-body .pace-fix { color: #a7e79a; }
.pace-body .pace-measured { display: block; margin-top: 6px; color: #9fb6c4; }
/* the one-tap fix inside the vision-gate warning */
.att-ocr {
  margin-left: 8px; padding: 4px 12px; cursor: pointer;
  border: 1px solid rgba(118, 255, 104, .45); color: #a7e79a;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 60%), rgba(4, 18, 8, .8);
  font: 700 10.5px/1.2 "Cascadia Mono", "Consolas", monospace; letter-spacing: .04em;
  box-shadow: 0 0 10px rgba(100, 255, 90, .14), inset 0 1px 0 rgba(220, 255, 216, .12);
}
.att-ocr:hover { color: #eaffe8; border-color: rgba(150, 255, 138, .7); box-shadow: 0 0 16px rgba(100, 255, 90, .3); }
.att-ocr:active { transform: translateY(1px); }
@keyframes att-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.neural-glass > footer.att-drag { outline: 2px dashed rgba(118, 255, 104, .55); outline-offset: -6px; }
/* sent-message gallery inside the bubble */
.att-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 9px; }
.att-gallery img {
  display: block; max-width: min(230px, 62vw); max-height: 230px; cursor: zoom-in;
  border: 1px solid rgba(179, 226, 255, .3);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
/* vision badge in the model panel rows (sits beside the doing/chatting bench glyph) */
.mr-bench { letter-spacing: .06em; }
/* the attach control leans amber like the other auxiliary console keys */
#attach { color: #ffc28a; }
@media (max-width: 620px) {
  /* rendered-v2 turns .bar into a 3-column grid with an empty slot at row 2 col 1; the attach
     key takes that slot so nothing else moves */
  #attach { grid-column: 1; grid-row: 2; justify-self: start; width: 43px; height: 43px; }
  .att-cell img, .att-cell .att-file { width: 50px; height: 50px; }
  .att-cell .att-file { width: auto; }
}

/* ---- Send to Crucible (Fred, 2026-07-30): the open space at the bottom left of the chat field.
   Quiet until it matters — it appears only once the conversation is about something — and worded
   rather than iconic, because "this becomes a project" is not a thing a glyph can say. ---- */
#bar-mid { display: flex; align-items: center; min-width: 0; }
#to-crucible {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; margin: 0 4px;
  font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; white-space: nowrap;
  cursor: pointer; border-radius: 9px;
  color: #d8ecff;
  border: 1px solid rgba(139, 205, 244, .38);
  background: linear-gradient(145deg, rgba(18, 52, 78, .85), rgba(4, 14, 24, .92));
  box-shadow: inset 0 1px 0 rgba(219, 241, 255, .16), 0 6px 18px rgba(0, 0, 0, .45);
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
#to-crucible:hover { color: #fff; border-color: rgba(157, 255, 146, .55); box-shadow: 0 0 18px rgba(100, 255, 90, .16), inset 0 1px 0 rgba(219, 241, 255, .2); }
#to-crucible:active { transform: translateY(1px); }
#to-crucible:disabled { opacity: .6; cursor: default; }
#to-crucible[hidden] { display: none; }
#to-crucible .tc-spark {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle, #d4ffc4 0%, #79ff52 55%, #1c8f3c 100%);
  box-shadow: 0 0 6px 1px rgba(121, 255, 82, .8);
}
/* The phone layout for this button lives at the END of dominion-tenant.css, not here: the Option 1
   strip block there sets `html body #bar-mid { display: none }` at the same specificity in a LATER
   file, so a rule written here would lose the cascade and the button would simply never appear. */