/* css/lixa-agent.css — Lixa Agent mode (js/lixa-agent/agent-ui.js). Uses the site's
   own tokens (--bg-page, --surface, --accent, …), so light and dark themes both work. */

.lxa[hidden], .lxa-bubble[hidden], .lxa [hidden] { display: none !important; }

.lxa {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 850;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 16px 14px;
  background: var(--bg-page);
  color: var(--text-primary);
  overflow: hidden;
}
.lxa > * { width: 100%; max-width: 720px; }
/* Phone: the three column boxes melt away (their parts are laid out by .lxa itself), in this order. */
.lxa-left, .lxa-center, .lxa-right { display: contents; }
.lxa-top { order: 0; }
.lxa-modes { order: 1; }
.lxa-mode { order: 2; }
.lxa-stage { order: 3; }
.lxa-cards { order: 4; }
.lxa-caption { order: 5; }
.lxa-hint { order: 6; }
.lxa-type { order: 7; }
.lxa-controls { order: 8; }
.lxa-left > *, .lxa-center > *, .lxa-right > * { width: 100%; max-width: 720px; }
.lxa-mode { width: auto; }

.lxa-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lxa-round {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1px solid var(--border-light); background: var(--surface); color: var(--text-primary);
  box-shadow: var(--shadow-sm); cursor: pointer; font-size: 1rem;
}
.lxa-top-right { display: flex; gap: 8px; flex: none; }
/* a caption not seen yet: green dot on the CC button */
.lxa-ctl { position: relative; }
.lxa-ctl.has-new::after { content: ''; position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: #10b981; border: 2px solid var(--surface); }
.lxa-set-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.lxa-set-btn.on { color: var(--accent); background: var(--accent-soft); border: 1.5px solid var(--accent); }
/* "Press again to close" */
.lxa > .lxa-toast {
  position: absolute; top: 66px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: auto; max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 999px;
  background: var(--text-primary); color: var(--bg-page); font-size: 0.85rem; font-weight: 600;
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.18)); pointer-events: none;
  animation: lxa-toast-in .18s ease-out;
}
@keyframes lxa-toast-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.lxa-chip {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border-light); background: var(--surface); box-shadow: var(--shadow-sm);
  font-weight: 600; font-size: 0.95rem;
}
.lxa-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lxa-chip i { color: var(--accent); }

/* Standard | Live, and the red "Mic live" sign while Live hears the microphone */
.lxa-modes { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.lxa-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--surface); box-shadow: var(--shadow-sm); }
.lxa-switch button {
  border: 0; border-radius: 999px; padding: 6px 16px; cursor: pointer; font-weight: 600; font-size: 0.85rem;
  background: transparent; color: var(--text-primary);
}
.lxa-switch button i { color: var(--accent); margin-right: 4px; }
.lxa-switch button.on { background: var(--accent); color: #fff; }
.lxa-switch button.on i { color: #fff; }
.lxa-miclive {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; color: #DC2626; background: rgba(220, 38, 38, 0.1); border: 1px solid rgba(220, 38, 38, 0.5);
}
.lxa-dot { width: 8px; height: 8px; border-radius: 50%; background: #DC2626; animation: lxa-pulse 1.4s ease-in-out infinite; }
@keyframes lxa-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.lxa-mic.live { background: #DC2626; color: #fff; border-color: #DC2626; box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.15); }
.lxa-bubble.mic-live::after {
  content: ""; position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%;
  background: #DC2626; border: 2px solid var(--surface); animation: lxa-pulse 1.4s ease-in-out infinite;
}

.lxa-mode {
  align-self: center; width: auto; max-width: 100%;
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 6px 6px 6px 14px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text-primary); font-size: 0.85rem; font-weight: 600;
}
.lxa-mode i { color: var(--accent); }
.lxa-mode-score { color: var(--text-secondary); font-weight: 500; }
.lxa-mode button { border: 0; border-radius: 999px; padding: 5px 12px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }

.lxa-stage { position: relative; flex: 1 1 0; min-height: 90px; display: flex; align-items: center; justify-content: center; }
/* (sized by agent-ui.js to the largest that fits the stage, keeping the kit's 1736 x 1024 shape) */
.lxa-figure { position: relative; width: min(100%, 560px); }
/* a soft glow on the floor under her, as in the Android app */
.lxa-figure::before {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: -4%; height: 16%; z-index: 0; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, var(--accent-soft), transparent); opacity: 0.9;
}
.lxa-figure > * { position: relative; z-index: 1; }
.lxa-figure > .lxa-working { position: absolute; z-index: 2; }
.lxa-canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }
.lxa-working {
  position: absolute; right: 2%; top: -6%; z-index: 1; max-width: 60%;
  padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lxa-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 100%; overflow: auto; z-index: 2;
  padding: 14px 16px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border-light); box-shadow: var(--shadow-hover);
}
.lxa-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lxa-panel-head button { border: 0; background: none; color: var(--text-secondary); font-size: 1rem; cursor: pointer; }
.lxa-details-body { font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }
.lxa-details-body a { color: var(--accent); }
.lxa-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; flex-wrap: wrap; }
.lxa-row > span { color: var(--text-secondary); font-weight: 600; font-size: 0.88rem; }
.lxa-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.lxa-seg button {
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
  border: 1px solid var(--border-light); background: transparent; color: var(--text-primary);
}
.lxa-seg button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.lxa-small { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
/* the settings in small groups */
.lxa-group { margin: 10px 0 2px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.lxa-group:first-child { margin-top: 0; }
.lxa-voices .lxa-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.lxa-voices .lxa-seg::-webkit-scrollbar { display: none; }
.lxa-voices .lxa-seg button { white-space: nowrap; }
/* the captions panel (what she heard and the hint line), over the bottom of the stage */
.lxa-captions { padding: 10px 14px; }
.lxa-captions .lxa-caption { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.lxa-captions .lxa-hint { text-align: left; }
/* what only the user can act on (her voice waiting, a problem): always in view */
.lxa-alert { order: 5; margin-top: 6px; text-align: center; font-size: 0.82rem; color: var(--text-secondary); }
/* her settings button in the navbar */

.lxa-cards { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; max-height: 42dvh; overflow: auto; flex: none; }
.lxa-cards:empty { display: none; }
.lxa-card { padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); }
.lxa-card b { display: block; font-size: 0.92rem; }
.lxa-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.lxa-card-actions button { padding: 7px 16px; border-radius: 10px; border: 1px solid var(--border-light); background: transparent; color: var(--text-primary); font-weight: 600; cursor: pointer; }
.lxa-card-actions .lxa-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
/* her Confirm card while she works in the background (on a page, or in a box open on it): over everything, the box stays open */
.lxa-float-confirm { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 10100; width: min(420px, calc(100vw - 32px)); box-sizing: border-box; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.28); color: var(--text-primary); }
.lxa-float-confirm[hidden] { display: none; }
.lxa-float-confirm .lxa-small { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.lxa-confirm { border-color: #F59E0B; }
.lxa-warn { border-color: #DC2626; }
.lxa-danger { color: #DC2626; }
.lxa-plan ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lxa-plan li { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-primary); }
.lxa-plan li > span:nth-child(2) { flex: 1; min-width: 0; }
.lxa-plan li small { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; color: #B45309; background: rgba(245, 158, 11, 0.14); }
.lxa-step-mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; border: 1px solid var(--border-light); color: var(--text-secondary);
}
.lxa-plan li.done .lxa-step-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.lxa-plan li.failed .lxa-step-mark { background: #DC2626; border-color: #DC2626; color: #fff; }
.lxa-plan li.done > span:nth-child(2) { color: var(--text-secondary); }
.lxa-found-row {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left;
  margin-top: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-light);
  background: transparent; color: var(--text-primary); cursor: pointer;
}
.lxa-found-row small { color: var(--text-secondary); }

.lxa-caption {
  display: flex; align-items: baseline; gap: 14px; margin-top: 10px;
  padding: 10px 16px; border-radius: 20px; border: 1px solid var(--border-light); background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.lxa-who { color: var(--accent); font-weight: 700; flex: none; }
/* one line: it follows the words as they come and can be scrolled back by hand, so it never pushes the mascot up */
.lxa-heard {
  flex: 1; min-width: 0; color: var(--text-primary); white-space: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lxa-heard::-webkit-scrollbar { display: none; }
.lxa-hint { min-height: 1.3em; margin-top: 6px; text-align: center; font-size: 0.82rem; color: var(--text-secondary); }

.lxa-type { display: flex; gap: 8px; margin-top: 8px; }
.lxa-type input {
  flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; font-size: 16px;
  border: 1px solid var(--border-light); background: var(--surface); color: var(--text-primary);
}
.lxa-type button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer; }

.lxa-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.lxa-ctl {
  width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 1.02rem;
  border: 1px solid var(--border-light); background: var(--surface); color: var(--text-secondary); box-shadow: var(--shadow-sm);
  transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
}
.lxa-ctl.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.lxa-ctl:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
/* the mic: the app's accent, white icon (as in the Android app); red while she is listening */
.lxa-mic {
  width: 70px; height: 70px; border-radius: 50%; cursor: pointer; font-size: 1.45rem;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); box-shadow: var(--shadow-sm);
  transition: background-color .15s, box-shadow .15s;
}
.lxa-mic.on { background: #DC2626; color: #fff; border-color: #DC2626; box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.15); }
.lxa-mic:disabled { opacity: 0.45; cursor: default; }

/* the mascot running in the background */
.lxa-bubble {
  position: fixed; z-index: 880; width: 124px; height: 82px; padding: 4px;
  border-radius: 22px; border: 1px solid var(--border-light); background: var(--surface); box-shadow: var(--shadow-hover);
  cursor: grab; touch-action: none;
}
.lxa-bubble-canvas { display: block; width: 100%; height: 100%; pointer-events: none; }

/* the navbar icon */
.lxa-nav-btn[hidden] { display: none !important; }
.lxa-nav-btn img { display: block; width: 26px; height: 26px; border-radius: 50%; }

/* the Lixa logo on the empty new-chat screen opens agent mode */
#chatMessages .empty-chat-icon { cursor: pointer; }

@media (max-width: 480px) {
  .lxa { padding: 8px 16px 10px; }
  .lxa-controls { gap: 10px; }
  .lxa-ctl { width: 46px; height: 46px; }
  .lxa-mic { width: 64px; height: 64px; }
}

/* Phone and small screens: Lixa first. Cards, caption and controls take less room, and her
   stage never shrinks below a readable size (cards scroll instead). */
@media (max-width: 1023.98px), (max-height: 559.98px) {
  .lxa-top { gap: 8px; }
  .lxa-round { width: 40px; height: 40px; }
  .lxa-chip { padding: 7px 14px; font-size: 0.9rem; }
  .lxa-modes { margin-top: 6px; }
  .lxa-switch button { padding: 5px 14px; }
  .lxa-stage { min-height: 170px; }
  .lxa-cards { max-height: 30vh; max-height: 30dvh; margin-top: 4px; }
  .lxa-card { padding: 10px 12px; }
  .lxa-caption { margin-top: 6px; padding: 8px 14px; }
  .lxa-hint { margin-top: 4px; }
  .lxa-controls { margin-top: 6px; }
}
@media (max-width: 480px) and (max-height: 700px) {
  .lxa-ctl { width: 42px; height: 42px; }
  .lxa-mic { width: 58px; height: 58px; font-size: 1.3rem; }
  .lxa-cards { max-height: 26vh; max-height: 26dvh; }
}

/* Desktop: Lixa in a wide middle column; how she talks and the controls on the left;
   confirmations, plans, results and the settings/details panels on the right. */
@media (min-width: 1024px) and (min-height: 560px) {
  .lxa {
    display: grid; grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(260px, 330px);
    grid-template-rows: auto minmax(0, 1fr); column-gap: 28px; align-items: stretch;
    padding: 14px 28px 20px;
  }
  .lxa > *, .lxa-left > *, .lxa-center > *, .lxa-right > * { max-width: none; }
  .lxa-top { grid-column: 1 / -1; }
  .lxa-left, .lxa-center, .lxa-right { display: flex; flex-direction: column; min-height: 0; }
  .lxa-left { grid-column: 1; grid-row: 2; justify-content: center; gap: 18px; }
  .lxa-center { grid-column: 2; grid-row: 2; }
  .lxa-right { grid-column: 3; grid-row: 2; gap: 10px; overflow-y: auto; padding: 2px; }
  .lxa-modes { margin-top: 0; flex-direction: column; }
  .lxa-mode { align-self: center; margin-top: 0; }
  /* the controls as a small panel: the mic on top, the four others under it */
  .lxa-controls {
    display: grid; grid-template-columns: repeat(2, 54px); grid-template-areas: "mic mic" "set typ" "skp det";
    justify-content: center; gap: 14px; margin-top: 0;
  }
  .lxa-mic { grid-area: mic; justify-self: center; width: 84px; height: 84px; font-size: 1.7rem; }
  .lxa-ctl { width: 54px; height: 54px; }
  .lxa-ctl[data-act="captions"] { grid-area: set; }
  .lxa-ctl[data-act="type"] { grid-area: typ; }
  .lxa-ctl[data-act="skip"] { grid-area: skp; }
  .lxa-ctl[data-act="details"] { grid-area: det; }
  .lxa-stage { flex: 1 1 0; min-height: 200px; }
  .lxa-caption, .lxa-hint, .lxa-type, .lxa-alert { width: 100%; max-width: 760px; align-self: center; }
  .lxa-cards { max-height: none; overflow: visible; }
  .lxa-right .lxa-panel { position: static; max-height: none; overflow: visible; box-shadow: var(--shadow-sm); }
  .lxa-right:empty, .lxa-right:not(:has(> :not([hidden]):not(:empty))) { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .lxa-mic.on, .lxa-mic.live { box-shadow: none; } .lxa-dot, .lxa-bubble.mic-live::after { animation: none; } }