/* moglight's own UI, recreated: the launcher panel, search bar, sections, rows, keycaps, footer,
   the agent chat and the Ghostty terminal. Measured in the app's points: every length is
   calc(n * var(--u)), and --u is one point at the scale set by --s on any ancestor
   (.mog { --s: 1.2 }). Built by js/ui.js. */

.mog {
  --s: 1;
  --u: calc(var(--s) * 1px);
  --mog-bg: rgb(28, 28, 30);
  --mog-glass: rgba(26, 26, 29, 0.86);
  --mog-text: rgba(255, 255, 255, 0.86);
  --mog-strong: rgba(255, 255, 255, 0.92);
  --mog-secondary: rgba(255, 255, 255, 0.55);
  --mog-tertiary: rgba(255, 255, 255, 0.32);
  --mog-placeholder: rgba(255, 255, 255, 0.4);
  --mog-separator: rgba(255, 255, 255, 0.09);
  --mog-selection: rgba(255, 255, 255, 0.11);
  --mog-keycap: rgba(255, 255, 255, 0.11);
  --mog-tag: rgba(255, 255, 255, 0.08);
  --mog-link: rgb(64, 156, 255);
  --mog-purple: rgb(163, 92, 242);
  --mog-term-bg: rgb(40, 44, 52);
  --mog-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --mog-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-family: var(--mog-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--mog-text);
  letter-spacing: 0;
  line-height: normal;
  text-align: left;
}

/* ───────── the window */

.mog-panel {
  position: relative;
  width: calc(750 * var(--u));
  max-width: 100%;
  height: calc(474 * var(--u));
  border-radius: calc(16 * var(--u));
  overflow: hidden;
  background: var(--mog-bg);
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
    0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.55),
    0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.mog-panel.is-glass {
  background: var(--mog-glass);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  backdrop-filter: blur(40px) saturate(160%);
}
.mog-panel[hidden] { display: none; }
.mog-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.mog-list { position: absolute; inset: 0 0 auto; padding-top: calc(6 * var(--u)); }

/* ───────── search bar */

.mog-search {
  position: relative;
  flex: none;
  height: calc(58 * var(--u));
  border-bottom: 1px solid var(--mog-separator);
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: 0 calc(20 * var(--u));
}
.mog-search.has-back { padding-left: calc(16 * var(--u)); }
.mog-query {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: calc(19 * var(--u));
  color: var(--mog-strong);
  letter-spacing: -0.1px;
  white-space: pre;
  overflow: hidden;
}
.mog-query.is-empty { color: var(--mog-placeholder); }
.mog-query input {
  all: unset;
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--mog-strong);
  caret-color: #fff;
}
.mog-query input::placeholder { color: var(--mog-placeholder); opacity: 1; }
.mog-caret {
  flex: none;
  width: calc(2 * var(--u));
  height: calc(21 * var(--u));
  margin-left: 1px;
  border-radius: 1px;
  background: #fff;
  animation: mog-blink 1.06s steps(1) infinite;
}
.mog-query.is-empty .mog-caret { order: -1; margin: 0 1px 0 -1px; }
.mog-caret.is-steady { animation: none; }
@keyframes mog-blink { 50% { opacity: 0; } }
/* Carets blink only in the scene on screen (Scenes marks it .is-live), not in every panel down the page. */
.mog-caret { animation-play-state: paused; }
.is-live .mog-caret { animation-play-state: running; }

.mog-back[hidden] { display: none; }
.mog-back {
  flex: none;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: calc(7 * var(--u));
  background: var(--mog-keycap);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.6);
}
.mog-back svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.mog-mic { flex: none; color: var(--mog-tertiary); display: grid; place-items: center; }
.mog-mic svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* ───────── sections and rows */

.mog-section {
  height: calc(30 * var(--u));
  padding: 0 0 calc(7 * var(--u)) calc(20 * var(--u));
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  color: var(--mog-secondary);
}
.mog-row {
  position: relative;
  height: calc(42 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  padding: 0 calc(20 * var(--u)) 0 calc(20 * var(--u));
  white-space: nowrap;
}
.mog-row::before {
  content: "";
  position: absolute;
  inset: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--mog-selection);
  opacity: 0;
}
.mog-row.is-selected::before { opacity: 1; }
.mog-row > * { position: relative; }
.mog-icon {
  flex: none;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  margin-right: calc(3 * var(--u));
  display: block;
  object-fit: contain;
}
.mog-title { font-size: calc(14 * var(--u)); color: var(--mog-text); flex: none; }
.mog-title b { font-weight: 650; color: #fff; }
.mog-subtitle {
  font-size: calc(13 * var(--u));
  color: var(--mog-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.mog-spacer { flex: 1; min-width: 0; }
.mog-accessory { font-size: calc(12.5 * var(--u)); color: var(--mog-tertiary); flex: none; }
.mog-hotkey { font-size: calc(12.5 * var(--u)); color: var(--mog-tertiary); letter-spacing: 1px; flex: none; }
.mog-tag {
  flex: none;
  height: calc(20 * var(--u));
  padding: 0 calc(7 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--mog-tag);
  color: var(--mog-secondary);
  font-size: calc(12 * var(--u));
  font-weight: 500;
  display: flex;
  align-items: center;
}
.mog-tag.is-default { background: rgba(163, 92, 242, 0.22); color: rgb(178, 118, 250); }
.mog-tag.is-green { background: rgba(71, 194, 120, 0.2); color: rgb(96, 214, 142); }
.mog-tag.is-blue { background: rgba(64, 133, 245, 0.22); color: rgb(110, 165, 255); }
.mog-tag.is-orange { background: rgba(247, 143, 56, 0.2); color: rgb(250, 165, 90); }

/* ───────── keycaps */

.mog-keys { display: flex; gap: calc(4 * var(--u)); flex: none; }
.mog-key {
  height: calc(20 * var(--u));
  min-width: calc(20 * var(--u));
  padding: 0 calc(5 * var(--u));
  box-sizing: border-box;
  border-radius: calc(5 * var(--u));
  background: var(--mog-keycap);
  color: rgba(255, 255, 255, 0.74);
  font-size: calc(13 * var(--u));
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.mog-key.is-glyph { padding: 0; }
.mog-key.is-mod { font-size: calc(15 * var(--u)); }
.mog-key.is-lit { background: rgba(97, 233, 251, 0.34); box-shadow: 0 0 calc(16 * var(--u)) rgba(97, 233, 251, 0.45); color: #fff; }

/* ───────── footer */

.mog-footer {
  position: relative;
  flex: none;
  height: calc(40 * var(--u));
  border-top: 1px solid var(--mog-separator);
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(16 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  white-space: nowrap;
}
.mog-footer-left { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; color: var(--mog-secondary); }
.mog-footer-left > span:not(.mog-eyes) { overflow: hidden; text-overflow: ellipsis; }
.mog-footer-left .mog-icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: 0; }
.mog-footer .mog-primary { color: var(--mog-text); }
.mog-footer .mog-label { color: var(--mog-secondary); }
.mog-footer .mog-sep { width: 1px; height: calc(16 * var(--u)); background: var(--mog-separator); flex: none; }
.mog-footer .mog-glyph { color: var(--mog-secondary); opacity: 0.85; display: grid; place-items: center; }
.mog-footer .mog-glyph svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.mog-thinking { display: flex; align-items: center; gap: calc(9 * var(--u)); min-width: 0; }
.mog-thinking .mog-verb { color: var(--mog-text); overflow: hidden; text-overflow: ellipsis; }
.mog-thinking .mog-seconds { color: var(--mog-secondary); font-variant-numeric: tabular-nums; }

/* The cat's eyes (an SVG drawn by ui.js): the footer mark, the thinking line, the empty chat. */
.mog-eyes { position: relative; flex: none; display: block; overflow: visible; }
.mog-eyes svg { position: absolute; overflow: visible; pointer-events: none; }
/* base.css caps svg at max-width 100%: the kit's glyphs and the eyes' glow-padded svg must keep their size. */
.mog svg { max-width: none; flex: none; }

/* ───────── agent chat */

.mog-composer-bar {
  flex: none;
  display: flex;
  gap: calc(13 * var(--u));
  padding: calc(13.5 * var(--u)) calc(13 * var(--u)) calc(13 * var(--u)) calc(16 * var(--u));
  border-bottom: 1px solid var(--mog-separator);
}
.mog-composer-bar .mog-back { margin-top: calc(5 * var(--u)); }
.mog-composer {
  flex: 1;
  min-width: 0;
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  padding: calc(11 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
}
.mog-draft {
  min-height: calc(22 * var(--u));
  display: flex;
  align-items: center;
  font-size: calc(16 * var(--u));
  color: var(--mog-strong);
  white-space: pre-wrap;
}
.mog-draft.is-empty { color: var(--mog-placeholder); }
.mog-draft .mog-caret { height: calc(19 * var(--u)); width: calc(1.6 * var(--u)); }
.mog-draft.is-empty .mog-caret { order: -1; margin: 0 1px 0 0; }
/* Typed text flows as one block with the caret inline after it, so a prompt that wraps keeps its
   caret after the last character (the caret takes no width, so it never wraps alone). */
.mog-draft:not(.is-empty) { display: block; line-height: calc(22 * var(--u)); }
.mog-draft:not(.is-empty) .mog-caret { display: inline-block; vertical-align: text-bottom; margin-right: calc(-1.6 * var(--u) - 1px); }
.mog-tools {
  display: flex;
  align-items: center;
  gap: calc(17 * var(--u));
  margin-top: calc(6 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: var(--mog-secondary);
  white-space: nowrap;
}
.mog-tool { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.mog-tool svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); opacity: 0.75; }
.mog-tool .mog-chev { width: calc(9 * var(--u)); height: calc(9 * var(--u)); opacity: 0.55; }
.mog-tool.is-fast-on { color: rgb(64, 140, 255); }
.mog-round {
  flex: none;
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.35);
}
.mog-round svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.mog-round.is-on { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); }
.mog-round.is-send { background: rgba(255, 255, 255, 0.9); color: rgb(28, 28, 30); }

.mog-transcript { position: absolute; inset: 0; padding: calc(8 * var(--u)) 0 calc(12 * var(--u)); overflow: hidden; display: flex; flex-direction: column; }
.mog-transcript.is-bottom { justify-content: flex-end; }
/* The transcript is a flex column: once it overflows, rows must keep their height, not shrink. */
.mog-transcript > * { flex-shrink: 0; }
.mog-msg-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u)) calc(80 * var(--u));
}
.mog-bubble {
  font-size: calc(14.5 * var(--u));
  line-height: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.12);
  color: var(--mog-strong);
  border-radius: calc(18 * var(--u));
  padding: calc(9 * var(--u)) calc(14 * var(--u));
}
.mog-bubble.is-waiting { background: none; border: 1px dashed rgba(255, 255, 255, 0.25); }
.mog-note { font-size: calc(11.5 * var(--u)); color: var(--mog-tertiary); }
.mog-note a, .mog-note .mog-link { color: var(--mog-link); }
.mog-attach {
  width: calc(150 * var(--u));
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  display: block;
}
.mog-msg-text {
  font-size: calc(14.5 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--mog-text);
  padding: calc(6 * var(--u)) calc(22 * var(--u));
}
.mog-msg-text code {
  font-family: var(--mog-mono);
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.06);
  border-radius: calc(4 * var(--u));
  padding: 0 calc(3 * var(--u));
}
.mog-msg-text ol, .mog-msg-text ul { margin: calc(4 * var(--u)) 0 0; padding-left: calc(20 * var(--u)); }
.mog-step {
  margin: calc(4 * var(--u)) calc(18 * var(--u));
  height: calc(30 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(10 * var(--u));
  font-size: calc(13 * var(--u));
  white-space: nowrap;
}
.mog-step svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); opacity: 0.5; flex: none; }
.mog-step .mog-verb { font-weight: 600; color: var(--mog-text); }
.mog-step .mog-detail { font-family: var(--mog-mono); font-size: calc(12 * var(--u)); color: var(--mog-secondary); overflow: hidden; text-overflow: ellipsis; }
.mog-step .mog-count { color: var(--mog-secondary); margin-left: auto; flex: none; }
.mog-image-card {
  margin: calc(6 * var(--u)) calc(18 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  padding: calc(8 * var(--u));
}
.mog-image-card .mog-step { margin: 0 0 calc(8 * var(--u)); background: none; box-shadow: none; padding: 0 calc(2 * var(--u)); }
.mog-approval {
  margin: calc(6 * var(--u)) calc(18 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: calc(12 * var(--u)) calc(14 * var(--u));
}

.mog-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  padding-bottom: calc(10 * var(--u));
}
.mog-greeting { font-size: calc(15.5 * var(--u)); font-weight: 600; color: var(--mog-text); margin-top: calc(8 * var(--u)); }
.mog-hints { font-size: calc(12.5 * var(--u)); color: var(--mog-secondary); }

/* ───────── terminal (Ghostty) */

.mog-tabs {
  flex: none;
  height: calc(38 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  padding: 0 calc(12 * var(--u));
  background: var(--mog-bg);
}
.mog-tabs .mog-back { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.mog-tab {
  flex: 0 1 calc(190 * var(--u));
  min-width: 0;
  height: calc(25 * var(--u));
  border-radius: calc(7 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: 0 calc(10 * var(--u));
  font-family: var(--mog-mono);
  font-size: calc(11.5 * var(--u));
  font-weight: 500;
  color: var(--mog-secondary);
}
.mog-tab span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mog-tab.is-active { background: rgba(255, 255, 255, 0.11); box-shadow: none; color: rgba(255, 255, 255, 0.9); }
.mog-tab svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); opacity: 0.45; flex: none; }
.mog-tabs > .mog-plus { color: rgba(255, 255, 255, 0.45); display: grid; place-items: center; margin-left: calc(4 * var(--u)); }
.mog-tabs > .mog-plus svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.mog-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--term-bg, var(--mog-term-bg));
  color: var(--term-fg, rgb(220, 223, 228));
  font-family: var(--mog-mono);
  font-size: calc(12.5 * var(--u));
  line-height: calc(17.5 * var(--u));
  padding: calc(12 * var(--u)) calc(15 * var(--u));
  /* A row longer than the panel soft-wraps onto the next, as in Ghostty (here at a word, so a
     narrow panel still reads well). */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* The rows (MogUI.Terminal scrolls them to the newest), clipped to whole rows inside the padding. */
.mog-screen .mog-rows { height: 100%; height: round(down, 100%, calc(17.5 * var(--u))); overflow: hidden; }
.mog-screen .mog-line { min-height: calc(17.5 * var(--u)); }
.mog-cursor {
  display: inline-block;
  width: calc(7.5 * var(--u));
  height: calc(15 * var(--u));
  vertical-align: calc(-3 * var(--u));
  background: var(--term-cursor, rgba(220, 223, 228, 0.85));
  margin-left: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .mog-caret { animation: none; }
}

/* ───────── forced colors (Windows High Contrast): fills and shadows are dropped there, so the
   window's edge, its cards and keys, and the selection (what ↵ opens) are drawn as outlines inside
   their boxes instead (nothing moves, nothing is clipped). Covers the live moglight's features too. */
@media (forced-colors: active) {
  .mog-panel, .mog-composer, .mog-bubble, .mog-approval, .mog-image-card, .mog-key, .mog-back,
  .aic-ap, .camera-actions, .clip-actions, .clip-menu, .clip-confirm, .st-tb {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
  /* The Settings window takes the focus itself and hides its ring (settings.css): its edge wins. */
  .settings-win { outline: 1px solid CanvasText !important; outline-offset: -1px; }
  /* The selection is the rounded rect the row's ::before draws (the emoji grid's too). */
  .mog-row.is-selected::before, .emoji-cell.is-selected::before,
  .is-sel, .mog-tab.is-active, .st-tab[aria-selected="true"], .st-tb-row.is-hi, .clip-menu-item.is-hot {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .mog-caret, .mog-cursor { forced-color-adjust: none; background: CanvasText; }
  /* Settings' controls (css/demo/settings.css draws them with fills alone): the switches' knobs,
     filled while on, the fields, buttons and segments. Its focus ring still shows over these. */
  .st-switch, .st-btn, .st-seg { outline: 1px solid CanvasText; outline-offset: -1px; }
  .st-seg button[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .st-hk:not(:focus-visible) { outline: 1px solid CanvasText !important; outline-offset: -1px; }
  .st-switch i { forced-color-adjust: none; background: CanvasText !important; box-shadow: none; }
  .st-switch[aria-checked="true"] { forced-color-adjust: none; background: Highlight !important; outline-color: Highlight; }
  .st-switch[aria-checked="true"] i { background: HighlightText !important; }
}