/* ===== UX Repair Console =====
 * Consumes the Olly design tokens (olly-ui/tokens.css, synced from the claude.ai/design
 * project via /design-sync). Colors/lines/radius/type are token-driven so design-system
 * updates flow straight through here; hex fallbacks keep the look if tokens ever fail to load. */
.uxr-sheet {
  position: fixed; inset: 0; z-index: 11000; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(0,0,0,0.45);
}
.uxr-panel {
  background: var(--olly-surface, #fff); width: 100%; max-width: 560px; max-height: 92vh; display: flex;
  flex-direction: column; border-radius: 18px 18px 0 0; overflow: hidden;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
}
.uxr-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--olly-line, #f0f0f0);
}
.uxr-head strong { font-size: 1.05rem; color: var(--olly-ink, #1a1a1a); }
.uxr-meta { font-size: var(--olly-fs-2xs, 0.72rem); color: var(--olly-muted-2, #888); margin-top: 2px; word-break: break-all; }
.uxr-x { border: none; background: none; font-size: 1.1rem; color: var(--olly-muted-2, #888); cursor: pointer; padding: 4px 8px; }
.uxr-head-actions { display: flex; align-items: center; gap: 0.5rem; }

.uxr-capwrap { padding: 0.5rem 1rem; overflow: auto; }
.uxr-cap-note { color: var(--olly-muted-2, #888); font-size: var(--olly-fs-sm, 0.85rem); padding: 1rem 0; text-align: center; }
.uxr-canvas-holder { position: relative; margin: 0 auto; border: 1px solid var(--olly-line, #eee); border-radius: 8px; overflow: hidden; }
.uxr-canvas-base, .uxr-canvas-draw { position: absolute; inset: 0; display: block; }
.uxr-canvas-draw { touch-action: none; cursor: crosshair; }

.uxr-tools { display: flex; gap: 0.4rem; padding: 0.4rem 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--olly-line, #f5f5f5); }
.uxr-tools button {
  border: 1px solid var(--olly-line-2, #e5e5e5); background: var(--olly-bg, #fafafa); border-radius: 8px; padding: 0.3rem 0.6rem;
  font-size: var(--olly-fs-sm, 0.8rem); cursor: pointer; color: var(--olly-ink, #333);
}
.uxr-tool.active { background: var(--olly-primary, #1a1a1a); color: var(--olly-on-primary, #fff); border-color: var(--olly-primary, #1a1a1a); }
.uxr-rec.recording { background: var(--olly-bad, #e53e3e); color: var(--olly-on-primary, #fff); border-color: var(--olly-bad, #e53e3e); }

.uxr-chat { flex: 1; min-height: 120px; overflow-y: auto; padding: 0.75rem 1rem; }
.uxr-msgs { display: flex; flex-direction: column; gap: 0.5rem; }
.uxr-msg { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 14px; font-size: var(--olly-fs-md, 0.9rem); line-height: 1.35; white-space: pre-wrap; }
.uxr-user { align-self: flex-end; background: var(--olly-primary, #1a1a1a); color: var(--olly-on-primary, #fff); border-bottom-right-radius: 4px; }
.uxr-bot { align-self: flex-start; background: var(--olly-line, #f0f0f0); color: var(--olly-ink, #1a1a1a); border-bottom-left-radius: 4px; }

.uxr-compose { display: flex; gap: 0.5rem; padding: 0.6rem 1rem; border-top: 1px solid var(--olly-line, #f0f0f0); }
.uxr-input { flex: 1; padding: 0.6rem 0.85rem; border: 1px solid var(--olly-line-2, #e5e5e5); border-radius: var(--olly-r-pill, 20px); font-size: 0.95rem; outline: none; }
.uxr-send { border: none; background: var(--olly-primary, #1a1a1a); color: var(--olly-on-primary, #fff); border-radius: var(--olly-r-pill, 20px); padding: 0 1rem; font-weight: 600; cursor: pointer; }

.uxr-foot { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--olly-line, #f0f0f0); }
.uxr-post { flex: 1; background: var(--olly-bad, #e53e3e); color: var(--olly-on-primary, #fff); border: none; border-radius: var(--olly-r-md, 12px); padding: 0.7rem; font-weight: 600; cursor: pointer; }
.uxr-post:disabled { opacity: 0.45; cursor: default; }
.uxr-cancel { background: none; border: 1px solid var(--olly-line-2, #e5e5e5); border-radius: var(--olly-r-md, 12px); padding: 0.7rem 1rem; color: var(--olly-muted, #666); cursor: pointer; }

/* Board */
.uxr-board { align-items: stretch; }
.uxr-board-panel { max-width: 960px; border-radius: 0; max-height: 100vh; }
.uxr-push { background: var(--olly-bad, #e53e3e); color: var(--olly-on-primary, #fff); border: none; border-radius: var(--olly-r-sm, 10px); padding: 0.5rem 0.9rem; font-weight: 600; cursor: pointer; }
.uxr-push:disabled { opacity: 0.45; }
.uxr-cols { display: flex; gap: 0.75rem; padding: 1rem; overflow-x: auto; flex: 1; }
.uxr-col { min-width: 220px; flex: 1; background: var(--olly-bg, #f7f7f7); border-radius: var(--olly-r-md, 12px); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.uxr-col-head { font-size: var(--olly-fs-sm, 0.8rem); font-weight: 700; color: var(--olly-muted, #444); text-transform: uppercase; letter-spacing: 0.03em; display: flex; justify-content: space-between; }
.uxr-col-head span { background: var(--olly-line-3, #e0e0e0); border-radius: var(--olly-r-sm, 10px); padding: 0 0.5rem; font-size: var(--olly-fs-xs, 0.75rem); }
.uxr-card { background: var(--olly-surface, #fff); border-radius: var(--olly-r-sm, 10px); padding: 0.6rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-left: 3px solid var(--olly-faint, #ccc); }
.uxr-card.sev-critical { border-left-color: var(--olly-bad, #e53e3e); }
.uxr-card.sev-major { border-left-color: var(--olly-warn, #d97706); }
.uxr-card.sev-minor { border-left-color: var(--olly-info, #0284c7); }
.uxr-card.sev-nit { border-left-color: var(--olly-faint, #999); }
.uxr-thumb { width: 100%; border-radius: 6px; margin-bottom: 0.4rem; display: block; }
.uxr-card-title { font-weight: 600; font-size: var(--olly-fs-md, 0.9rem); color: var(--olly-ink, #1a1a1a); }
.uxr-card-meta { font-size: var(--olly-fs-2xs, 0.72rem); color: var(--olly-muted-2, #888); margin-top: 2px; }
.uxr-card-review { font-size: var(--olly-fs-xs, 0.75rem); color: var(--olly-muted, #555); margin-top: 0.4rem; background: var(--olly-bg, #f5f5f5); border-radius: 6px; padding: 0.35rem 0.5rem; }
.uxr-card-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.uxr-mini { border: none; background: var(--olly-primary, #1a1a1a); color: var(--olly-on-primary, #fff); border-radius: 8px; padding: 0.3rem 0.6rem; font-size: 0.78rem; cursor: pointer; }
.uxr-mini.ghost { background: var(--olly-surface, #fff); color: var(--olly-muted, #666); border: 1px solid var(--olly-line-3, #e0e0e0); }
.uxr-empty { color: var(--olly-muted-2, #888); padding: 2rem; text-align: center; }

/* Site-wide deploy banner */
.uxr-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 12000; display: flex; align-items: center;
  gap: 0.75rem; padding: 0.6rem 1rem; background: var(--olly-primary, #1a1a1a); color: var(--olly-on-primary, #fff);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25); animation: uxr-slidedown 0.25s ease;
}
@keyframes uxr-slidedown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.uxr-banner-text { flex: 1; font-size: var(--olly-fs-md, 0.9rem); font-weight: 500; }
.uxr-banner-go { background: var(--olly-bad, #e53e3e); color: var(--olly-on-primary, #fff); border: none; border-radius: 8px; padding: 0.45rem 0.9rem; font-weight: 600; cursor: pointer; }
.uxr-banner-go:disabled { opacity: 0.5; }
.uxr-banner-dismiss { background: none; border: none; color: var(--olly-faint, #aaa); font-size: 1rem; cursor: pointer; }
/* Post-deploy summary: a greener confirmation variant of the banner. */
.uxr-deploy-summary { background: var(--olly-good, #16794b); }
.uxr-deploy-summary .uxr-banner-go { background: rgba(255,255,255,0.18); }
.uxr-deploy-titles { font-weight: 600; opacity: 0.95; font-size: 0.82rem; }
.uxr-deploy-files { opacity: 0.75; font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.uxr-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 13000;
  background: var(--olly-primary, #1a1a1a); color: var(--olly-on-primary, #fff); padding: 0.6rem 1rem; border-radius: var(--olly-r-sm, 10px); font-size: var(--olly-fs-sm, 0.85rem);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* UX Repair — screen-record countdown + REC pill */
.uxr-countdown {
  position: fixed; inset: 0; z-index: 13500; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.72); color: var(--olly-on-primary, #fff); font-size: 6rem; font-weight: 800;
  animation: uxr-cdpop 1s ease infinite;
}
@keyframes uxr-cdpop { 0% { transform: scale(0.7); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.2); opacity: 0.3; } }
.uxr-recpill {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 13500;
  background: var(--olly-bad, #e53e3e); color: var(--olly-on-primary, #fff); padding: 0.4rem 0.9rem; border-radius: var(--olly-r-pill, 20px);
  font-size: var(--olly-fs-sm, 0.85rem); font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  animation: uxr-blink 1s steps(2, start) infinite;
}
@keyframes uxr-blink { 50% { opacity: 0.55; } }
.uxr-rec.recorded { background: var(--olly-good, #059669); color: var(--olly-on-primary, #fff); border-color: var(--olly-good, #059669); }

/* UX Repair — reopened-chat detail + card hint */
.uxr-summary { padding: 0.6rem 1rem; margin: 0; font-size: var(--olly-fs-sm, 0.85rem); color: var(--olly-muted, #555); background: var(--olly-bg, #f7f7f7); border-bottom: 1px solid var(--olly-line, #f0f0f0); }
.uxr-card-hint { font-size: var(--olly-fs-2xs, 0.68rem); color: var(--olly-faint, #b0b0b0); margin-top: 0.35rem; }

/* UX Repair — Push-to-Repair selection picker */
.uxr-picklist { flex: 1; overflow-y: auto; padding: 0 1rem 0.5rem; }
.uxr-pickrow {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--olly-line, #f0f0f0); cursor: pointer; font-size: var(--olly-fs-md, 0.9rem);
}
.uxr-pickall-row { padding: 0.6rem 1rem; border-bottom: 1px solid var(--olly-line-2, #e8e8e8); font-weight: 600; }
.uxr-pickrow input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--olly-primary, #1a1a1a); }
.uxr-pick-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--olly-info, #0284c7); }
.uxr-pick-dot.sev-critical { background: var(--olly-bad, #e53e3e); }
.uxr-pick-dot.sev-major { background: var(--olly-warn, #d97706); }
.uxr-pick-dot.sev-minor { background: var(--olly-info, #0284c7); }
.uxr-pick-dot.sev-nit { background: var(--olly-faint, #999); }
.uxr-pick-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--olly-ink, #1a1a1a); }
.uxr-pick-area { font-size: var(--olly-fs-2xs, 0.72rem); color: var(--olly-muted-2, #888); flex-shrink: 0; }

/* UX Repair — pufu settings menu (5s press-anywhere) */
.uxr-menu {
  position: fixed; inset: 0; z-index: 12500; display: flex; align-items: flex-end; justify-content: center;
}
.uxr-menu-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.uxr-menu-panel {
  position: relative; background: var(--olly-surface, #fff); width: 100%; max-width: 480px;
  border-radius: 18px 18px 0 0; overflow: hidden; box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
  padding-bottom: env(safe-area-inset-bottom, 0px); animation: uxr-slideup 0.2s ease;
}
@keyframes uxr-slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.uxr-menu-head {
  display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--olly-line, #f0f0f0);
}
.uxr-menu-head strong { font-size: 1.05rem; color: var(--olly-ink, #1a1a1a); letter-spacing: 0.01em; }
.uxr-menu-list { display: flex; flex-direction: column; padding: 0.4rem; }
.uxr-menu-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0.75rem; border: none;
  background: none; cursor: pointer; border-radius: var(--olly-r-md, 12px); text-align: left; width: 100%;
  font-family: inherit; color: var(--olly-ink, #1a1a1a);
}
.uxr-menu-item:active { background: var(--olly-bg, #f5f5f5); }
.uxr-menu-item .material-icons-outlined { font-size: 1.5rem; color: var(--olly-bad, #e53e3e); flex-shrink: 0; }
.uxr-menu-text { display: flex; flex-direction: column; }
.uxr-menu-text strong { font-size: var(--olly-fs-md, 0.95rem); font-weight: 600; }
.uxr-menu-text span { font-size: var(--olly-fs-xs, 0.75rem); color: var(--olly-muted-2, #888); margin-top: 1px; }

/* pufu floating button — subtle, draggable trigger (bottom-right; opaque on hover/press) */
.uxr-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 12000;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--olly-primary, #1a1a1a); color: var(--olly-on-primary, #fff);
  box-shadow: 0 2px 10px rgba(0,0,0,0.28); opacity: 0.42;
  transition: opacity 0.15s ease, transform 0.1s ease; touch-action: none; -webkit-tap-highlight-color: transparent;
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.uxr-fab:hover { opacity: 0.95; }
.uxr-fab:active { opacity: 1; transform: scale(0.94); }
.uxr-fab .material-icons-outlined { font-size: 22px; line-height: 1; }

/* ---- diagnose failure (Claude Code) ---- */
.uxr-diag-foot { align-items: center; }
.uxr-diag-status { flex: 1; font-size: var(--olly-fs-sm, 0.82rem); color: var(--olly-muted, #555); }
.uxr-diag-action {
  border: none; background: var(--olly-primary, #1a1a1a); color: var(--olly-on-primary, #fff);
  border-radius: var(--olly-r-md, 12px); padding: 0.6rem 1rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.uxr-diag-action:disabled { opacity: 0.45; cursor: default; }
/* subtle "still working in the background" pulse under the instant interim reply */
.uxr-msg.uxr-working { opacity: 0.6; font-style: italic; animation: uxr-pulse 1.3s ease-in-out infinite; }
@keyframes uxr-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.85; } }

/* ---- diag log ---- */
.uxr-log-list { flex: 1; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.uxr-log-row {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem;
  background: var(--olly-surface, #fff); border: 1px solid var(--olly-line, #f0f0f0);
  border-radius: var(--olly-r-md, 12px); cursor: pointer;
}
.uxr-log-row:active { background: var(--olly-bg, #f7f7f7); }
.uxr-log-main { flex: 1; min-width: 0; }
.uxr-log-main strong { font-size: var(--olly-fs-md, 0.9rem); color: var(--olly-ink, #1a1a1a); }
.uxr-log-pill {
  flex-shrink: 0; font-size: var(--olly-fs-2xs, 0.7rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; border-radius: var(--olly-r-pill, 20px); padding: 0.2rem 0.6rem;
  background: var(--olly-line-3, #e0e0e0); color: var(--olly-muted, #555);
}
.uxr-log-pill.uxr-st-diagnosed { background: var(--olly-info, #0284c7); color: #fff; }
.uxr-log-pill.uxr-st-repairing { background: var(--olly-warn, #d97706); color: #fff; }
.uxr-log-pill.uxr-st-repaired { background: var(--olly-warn, #d97706); color: #fff; }
.uxr-log-pill.uxr-st-deployed { background: var(--olly-primary, #1a1a1a); color: #fff; }
.uxr-log-pill.uxr-st-fix_confirmed { background: var(--olly-good, #16a34a); color: #fff; }
.uxr-log-pill.uxr-st-failed { background: var(--olly-bad, #e53e3e); color: #fff; }
.uxr-log-pill.uxr-st-queued { background: var(--olly-warn, #d97706); color: #fff; }
.uxr-log-pill.uxr-st-promoted { background: var(--olly-info, #0284c7); color: #fff; }
.uxr-log-pill.uxr-st-dismissed { background: var(--olly-line-3, #e0e0e0); color: var(--olly-muted, #555); }

/* Diag Log tabs + queue + pattern report */
.uxr-diag-tabs { display: flex; gap: 0.4rem; padding: 0.5rem 0.75rem 0; }
.uxr-diag-tab {
  border: none; background: none; padding: 0.4rem 0.7rem; border-radius: var(--olly-r-sm, 8px);
  font-size: var(--olly-fs-sm, 0.85rem); font-weight: 600; color: var(--olly-muted, #666); cursor: pointer;
}
.uxr-diag-tab.active { background: var(--olly-primary, #1a1a1a); color: var(--olly-on-primary, #fff); }
.uxr-q-acts { display: flex; gap: 0.35rem; flex-shrink: 0; }
.uxr-report {
  white-space: pre-wrap; word-break: break-word; font-size: var(--olly-fs-sm, 0.82rem);
  line-height: 1.45; color: var(--olly-ink, #1a1a1a); padding: 0.75rem; margin: 0;
  font-family: var(--olly-font-mono, ui-monospace, Menlo, monospace);
}
.uxr-head-actions { display: flex; align-items: center; gap: 0.5rem; }