/* The app's shared chrome in the redesign (flag new_ui): the analysis tray, the
   notices, the confirm dialog and the AI picker. They show over every page, so
   they take the same tokens as the pages: Geist, ink buttons, no accent blue,
   no all-caps labels. An AI keeps its color as a dot, as on the pages. */

/* Notices */
body.new-ui .toast {
  font: 400 13.5px/1.45 var(--ui-font); color: var(--ui-ink);
  background: var(--ui-card); border-color: var(--ui-line); border-radius: 12px;
}

/* Analysis tray */
body.new-ui #jobTray { font-family: var(--ui-font); background: var(--ui-card); border-color: var(--ui-line); border-radius: 14px; }
body.new-ui .jt-head {
  background: var(--ui-card); border-bottom-color: var(--ui-line-2);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ui-ink);
}
body.new-ui .jt-btn { color: var(--ui-ink-3); }
body.new-ui .jt-btn:hover:not(:disabled) { background: var(--ui-hover); color: var(--ui-ink); }
body.new-ui .jt-row { border-bottom-color: var(--ui-line-2); }
body.new-ui .jt-main:hover { background: var(--ui-hover); }
body.new-ui .jt-main:hover .jt-domain { color: var(--ui-ink); }
body.new-ui .jt-domain { color: var(--ui-ink); font-weight: 500; }
body.new-ui .jt-note { color: var(--ui-ink-3); font-size: 12px; }
body.new-ui .jt-surf {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; background: none;
  font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ui-ink-2);
}
body.new-ui .jt-surf::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hs); }

/* Dialogs: the confirm and the AI picker */
body.new-ui :is(#confirmModal, #surfModal) .modal {
  font-family: var(--ui-font); background: var(--ui-card); border-color: var(--ui-line); border-radius: 16px;
}
body.new-ui :is(#confirmModal, #surfModal) h2 { color: var(--ui-ink); font-weight: 600; letter-spacing: -.01em; }
body.new-ui :is(#confirmModal, #surfModal) .sub, body.new-ui #surfCost { color: var(--ui-ink-2); }
body.new-ui :is(#confirmModal, #surfModal) .modal-close { color: var(--ui-ink-3); }
body.new-ui :is(#confirmModal, #surfModal) .modal-close:hover:not(:disabled) { color: var(--ui-ink); background: var(--ui-hover); }
body.new-ui #confirmModal button, body.new-ui #surfGo {
  height: 38px; padding: 0 15px; border-radius: 9px; box-shadow: none;
  border: 1px solid var(--ui-ink); background: var(--ui-ink); color: var(--ui-bg); font: 500 14px var(--ui-font);
}
body.new-ui #confirmModal button:hover:not(:disabled), body.new-ui #surfGo:hover:not(:disabled) { background: var(--ui-ink); filter: brightness(1.25); }
body.new-ui #confirmModal #cfCancel { background: var(--ui-card); color: var(--ui-ink); border-color: var(--ui-line); }
body.new-ui #confirmModal #cfCancel:hover:not(:disabled) { background: var(--ui-card); border-color: var(--ui-ink-3); filter: none; }
/* Deleting stays red: it is the one place the color means something. */
body.new-ui #confirmModal .btn-danger { background: var(--ui-neg); border-color: var(--ui-neg); color: var(--ui-paper); }
body.new-ui #surfGo { height: 44px; }
body.new-ui :is(#confirmModal button, #surfGo):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* AI tiles: the chosen one gets an ink border and an ink check. */
body.new-ui .surf-tile { border-color: var(--ui-line); border-radius: 12px; background: var(--ui-card); }
body.new-ui .surf-tile:hover { border-color: var(--ui-ink-3); transform: none; }
body.new-ui .surf-tile.on { border-color: var(--ui-ink); background: var(--ui-paper-2); box-shadow: inset 0 0 0 1px var(--ui-ink); }
body.new-ui .surf-check { background: var(--ui-ink); color: var(--ui-bg); }
body.new-ui .surf-name { color: var(--ui-ink); font-weight: 500; font-size: 12.5px; }
body.new-ui .surf-runs { color: var(--ui-ink-3); font-size: 11px; }
body.new-ui .surf-pill, body.new-ui .surf-human .surf-pill {
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
  background: var(--ui-card); color: var(--ui-ink-2); border-color: var(--ui-line);
}
body.new-ui .surf-human, body.new-ui .surf-human:hover { background: var(--ui-card); }
body.new-ui .surf-tile.soon:hover { border-color: var(--ui-line); }