/* ==========================================================================
   x.Insight Photo & Feedback Recorder + Telemetry Guard Styles for x.ERP
   Claude Design v3.0 Light-First Brand Contract:
   - Surface: #FFFFFF, Page/Raised: #F2F6FA, Sunken: #E6EDF4
   - Text: #00203F (never used as surface in light mode), Muted: #3D566E
   - Border: 1px solid rgba(0, 32, 63, 0.14)
   - Primary CTA: #E3541F, Accent: #FC6735, Active chip bg: #FFF5F0
   - Minimum font-size: 12px across all elements
   ========================================================================== */

:root {
  --xi-surface: #FFFFFF;
  --xi-raised: #F2F6FA;
  --xi-sunken: #E6EDF4;
  --xi-border: rgba(0, 32, 63, 0.14);
  --xi-text: #00203F;
  --xi-muted: #3D566E;
  --xi-caption: rgba(0, 32, 63, 0.62);
  --xi-accent: #FC6735;
  --xi-on-bg: #E3541F;
  --xi-on-fg: #FFFFFF;
  --xi-error: #DC2626;
  --xi-warning-mark: #D97706;
  --xi-info: #FC6735;
  --xi-success: #25C55E;
  --xi-inverse-bg: #FFFFFF;
  --xi-inverse-fg: #00203F;
  --xi-cursor-halo: rgba(0, 32, 63, 0.25);
}

body.dark,
.x.dark {
  --xi-surface: #00203F;
  --xi-raised: #072B52;
  --xi-sunken: #001529;
  --xi-border: rgba(242, 246, 250, 0.16);
  --xi-text: #FFFFFF;
  --xi-muted: rgba(242, 246, 250, 0.78);
  --xi-caption: rgba(242, 246, 250, 0.64);
  --xi-accent: #FC6735;
  --xi-on-bg: #FC6735;
  --xi-on-fg: #00203F;
  --xi-error: #DC2626;
  --xi-warning-mark: #D97706;
  --xi-info: #FC6735;
  --xi-success: #25C55E;
  --xi-inverse-bg: #001529;
  --xi-inverse-fg: #F2F6FA;
  --xi-cursor-halo: rgba(0, 21, 41, 0.85);
}

/* Header Entry Group (Capture + Replay Toggle + Session Counter — Light-First #FFFFFF / #F2F6FA) */
#xinsightHeaderGroup,
#xiHeaderGroup,
.xi-header-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  color: #00203F;
  border: 1px solid rgba(0, 32, 63, 0.14);
  border-radius: 4px;
  padding: 3px 6px;
  margin-left: 0;
}

#xinsightHeaderBtn,
#xiBtnCaptureNow,
.xi-btn-capture {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  color: #00203F;
  border: 1px solid rgba(0, 32, 63, 0.14);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#xinsightHeaderBtn:hover,
#xiBtnCaptureNow:hover,
.xi-btn-capture:hover {
  background: #FFF5F0;
  color: #00203F;
  border-color: #FC6735;
}

#xinsightHeaderBtn svg,
.xi-btn-capture svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.xi-shortcut-kbd {
  font-size: 12px;
  font-family: "IBM Plex Mono", monospace;
  color: #3D566E;
  background: #F2F6FA;
  border: 1px solid rgba(0, 32, 63, 0.14);
  border-radius: 4px;
  padding: 1px 5px;
}

#xinsightReplayBtn,
#xiBtnReplayToggle,
.xi-btn-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 8px;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid rgba(0, 32, 63, 0.14);
  background: #F2F6FA;
  color: #00203F;
  cursor: pointer;
}

#xinsightReplayBtn[data-replay="on"],
#xiBtnReplayToggle[data-replay="on"],
.xi-btn-replay[data-replay="on"] {
  background: #FFF5F0;
  color: #E3541F;
  border-color: #FC6735;
}

#xinsightIncidentCountBadge,
#xiBtnCaptureCount,
.xi-capture-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  font-family: "IBM Plex Mono", monospace;
  border-radius: 4px;
  background: #F2F6FA;
  color: #00203F;
  border: 1px solid rgba(0, 32, 63, 0.14);
  cursor: pointer;
}

/* Quiet status-bar indicator */
.xi-quiet-status {
  position: fixed;
  left: 16px;
  bottom: 12px;
  z-index: 2147482000;
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--xi-surface);
  color: var(--xi-text);
  border: 1px solid var(--xi-border);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: "IBM Plex Mono", monospace;
  box-shadow: 0 4px 14px rgba(0, 32, 63, 0.12);
}

.xi-quiet-status.visible {
  display: inline-flex;
}

.xi-quiet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--xi-success);
}

/* Live Full-Screen Transparent Overlay & Floating HUD (Never blocks viewing/navigating the screen!) */
.xi-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: transparent !important;
  display: none;
  pointer-events: none;
}

.xi-modal-backdrop.open {
  display: block;
}

.xi-recorder-window {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background: transparent !important;
  color: var(--xi-text);
  border: 2px solid rgba(252, 103, 53, 0.65);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none !important;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  pointer-events: none;
}

.xi-modal-backdrop.passthrough-mode .xi-recorder-window {
  border-color: rgba(37, 197, 94, 0.75);
  border-style: dashed;
}

/* Floating Top HUD Toolbar */
.xi-toolbar {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483005;
  width: min(calc(100vw - 20px), 1560px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 12px;
  background: var(--xi-surface);
  border: 1.5px solid #FC6735;
  border-top: 3px solid #FC6735;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 32, 63, 0.22);
  flex-shrink: 0;
  pointer-events: auto;
}

.xi-tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.xi-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--xi-text);
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.xi-tool-btn:hover {
  background: #FFF5F0;
  border-color: #FC6735;
}

.xi-tool-btn.active {
  background: var(--xi-on-bg);
  color: var(--xi-on-fg);
  border-color: var(--xi-accent);
}

.xi-tool-btn.xi-mode-nav-btn {
  border: 1px solid rgba(37, 197, 94, 0.45);
  background: #ECFDF5;
  color: #166534;
}

.xi-tool-btn.xi-mode-nav-btn.active {
  background: #16A34A;
  color: #FFFFFF;
  border-color: #15803D;
}

.xi-tool-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.xi-tool-sep {
  width: 1px;
  height: 20px;
  background: var(--xi-border);
  margin: 0 4px;
}

.xi-colour-select {
  height: 32px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid var(--xi-border);
  background: var(--xi-surface);
  color: var(--xi-text);
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  cursor: pointer;
}

.xi-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--xi-muted);
}

/* Main Body: Transparent Full-Screen Canvas Stage + Floating Collapsible Side Panel */
.xi-body {
  position: fixed;
  inset: 0;
  display: block;
  pointer-events: none;
}

.xi-canvas-stage {
  position: fixed;
  inset: 0;
  background: transparent !important;
  padding: 0;
  overflow: hidden;
  user-select: none;
  pointer-events: auto;
}

.xi-modal-backdrop.passthrough-mode .xi-canvas-stage,
.xi-modal-backdrop.passthrough-mode #xiMarkupCanvas {
  pointer-events: none !important;
}

#xiMarkupCanvas {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border: none;
  border-radius: 0;
  cursor: crosshair;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto;
}

/* Floating Collapsible & Dockable Side Panel */
.xi-side-panel {
  position: fixed;
  top: 66px;
  right: 12px;
  bottom: 14px;
  width: 340px;
  max-height: calc(100vh - 80px);
  z-index: 2147483004;
  background: var(--xi-surface);
  border: 1.5px solid var(--xi-border);
  border-top: 3px solid #FC6735;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 32, 63, 0.24);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  pointer-events: auto;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.xi-side-panel.dock-left {
  right: auto;
  left: 12px;
}

.xi-side-panel.collapsed-panel {
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

.xi-side-panel.dock-left.collapsed-panel {
  transform: translateX(calc(-100% - 24px));
}

.xi-side-scroll {
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.xi-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--xi-muted);
  margin-bottom: 4px;
}

.xi-select,
.xi-textarea {
  width: 100%;
  background: var(--xi-surface);
  color: var(--xi-text);
  border: 1px solid var(--xi-border);
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 12px;
  font-family: "Archivo", sans-serif;
}

.xi-textarea {
  min-height: 78px;
  resize: vertical;
}

.xi-select:focus,
.xi-textarea:focus {
  outline: none;
  border-color: var(--xi-accent);
}

/* Quick Preset Note Chips for Accounting & OCR Feedback */
.xi-preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.xi-preset-chip {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--xi-surface);
  color: var(--xi-text);
  border: 1px solid var(--xi-border);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
}

.xi-preset-chip:hover {
  border-color: var(--xi-accent);
  background: #FFF5F0;
}

/* Context Auto-Capture Summary Box */
.xi-context-box {
  background: var(--xi-surface);
  border: 1px solid var(--xi-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.xi-context-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.xi-context-row span {
  color: var(--xi-muted);
}

.xi-context-row strong {
  color: var(--xi-text);
  font-family: "IBM Plex Mono", monospace;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Voice Note Recorder */
.xi-voice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--xi-surface);
  border: 1px solid var(--xi-border);
  border-radius: 8px;
  padding: 6px 9px;
}

.xi-btn-voice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--xi-raised);
  color: var(--xi-text);
  border: 1px solid var(--xi-border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.xi-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--xi-muted);
}

.xi-btn-voice[data-recording="true"] .xi-rec-dot {
  background: var(--xi-error);
  animation: xiGentlePulse 1.6s ease-in-out infinite;
}

@keyframes xiGentlePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.88); }
}

.xi-muted-line {
  font-size: 12px;
  color: var(--xi-muted);
  line-height: 1.4;
}

/* Mini x.Insight Telemetry & Reliability Card */
.xi-telemetry-card {
  background: var(--xi-surface);
  border: 1px solid var(--xi-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.xi-telemetry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: var(--xi-text);
  margin-bottom: 2px;
}

.xi-guard-badge {
  font-size: 12px;
  font-family: "IBM Plex Mono", monospace;
  padding: 1px 6px;
  border-radius: 4px;
  background: #ECFDF5;
  color: #16A34A;
  border: 1px solid rgba(37, 197, 94, 0.35);
}

/* Sticky Footer Buttons (Save Ctrl+Enter / Cancel) */
.xi-side-footer {
  padding: 10px 12px;
  background: var(--xi-surface);
  border-top: 1px solid var(--xi-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.xi-btn-save {
  background: var(--xi-on-bg);
  color: var(--xi-on-fg);
  border: 1px solid var(--xi-accent);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.xi-btn-save:hover {
  background: #FC6735;
}

.xi-btn-cancel {
  background: var(--xi-surface);
  color: var(--xi-text);
  border: 1px solid var(--xi-border);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Low Screen (<800px height): toolbar icons-only, side panel scrolls with Save/Cancel fixed */
@media (max-height: 800px) {
  .xi-recorder-window {
    height: 94vh;
  }
  .xi-tool-btn .xi-tool-label {
    display: none;
  }
}

/* Narrow Screen (<1280px width): side panel moves below picture so comment stays reachable */
@media (max-width: 1280px) {
  .xi-recorder-window {
    width: 95vw;
    height: 92vh;
  }
  .xi-body {
    flex-direction: column;
  }
  .xi-side-panel {
    width: 100%;
    max-height: 46%;
    border-left: none;
    border-top: 1px solid var(--xi-border);
  }
}