/* Shela Holo core (Paket 21, task I): styles for the "Core" view of Talk to Shela.
   Everything is scoped to .soc-* (the view's own elements) or to #shela-talk-overlay.soc-core (the class exists
   only while Core is mounted), so nothing changes for Neural orb, Anatomy, Graph or Brain View. No element is hidden
   for good: controls are grouped in one pill and moved back on unmount. Original code, MIT license. */

/* ---------- the view's own layer (pointer events off: it never blocks the chat) ---------- */
.soc-root { position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: layout style; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.soc-root * { pointer-events: none; }
.soc-spill-clip { position: absolute; left: 0; right: 0; top: 0; height: 0; overflow: hidden; }
.soc-spill { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.soc-spill-v { background: radial-gradient(closest-side, rgba(154, 107, 255, 0.16), rgba(154, 107, 255, 0.06) 55%, rgba(154, 107, 255, 0) 100%); }
.soc-spill-w { background: radial-gradient(closest-side, rgba(255, 171, 74, 0.18), rgba(255, 171, 74, 0.06) 55%, rgba(255, 171, 74, 0) 100%); }
.soc-beam { position: absolute; left: 0; top: -0.7px; width: 128px; height: 1.4px; transform-origin: 0 50%; opacity: 0; will-change: transform, opacity;
  --c: rgba(255, 233, 201, 0.85); background: repeating-linear-gradient(90deg, var(--c) 0 2px, rgba(0, 0, 0, 0) 2px 6px); }
.soc-bdot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; opacity: 0; will-change: transform, opacity; --c: #ffe9c9; background: var(--c); box-shadow: 0 0 8px var(--c); }
.soc-bmark { position: absolute; left: 0; top: 0; width: 3px; height: 18px; border-radius: 1.5px; opacity: 0; will-change: transform, opacity; background: #ffab4a; box-shadow: 0 0 8px rgba(255, 171, 74, 0.7); }
.soc-beam.soc-inhale { --c: rgba(167, 139, 250, 0.9); height: 1.6px; }
.soc-bdot.soc-inhale { --c: #b69cff; }
.soc-beam.soc-gold { --c: rgba(217, 180, 90, 0.95); }
.soc-bdot.soc-gold { --c: #e8c877; }
.soc-beam.soc-read { --c: rgba(255, 171, 74, 0.9); }
.soc-bdot.soc-read { --c: #ffab4a; }
.soc-beam.soc-reach { --c: rgba(182, 156, 255, 0.85); height: 1.1px; }
.soc-beam.soc-sb { --c: rgba(255, 233, 201, 0.8); height: 1.2px; }
.soc-bdot.soc-sb { width: 5px; height: 5px; }
.soc-ghost { position: absolute; left: 0; top: 0; width: 0; height: 3px; border-radius: 2px; opacity: 0; transform-origin: 50% 50%;
  background: linear-gradient(90deg, rgba(255, 233, 201, 0), rgba(255, 233, 201, 0.9) 30%, #fff 50%, rgba(255, 171, 74, 0.9) 70%, rgba(255, 171, 74, 0));
  box-shadow: 0 0 14px rgba(255, 171, 74, 0.6); }
.soc-orb { position: absolute; left: 0; top: 0; width: 64px; height: 64px; will-change: transform; transition: opacity 0.11s ease; }
.soc-canvas { display: block; width: 100%; height: 100%; }
.soc-fb { position: absolute; left: 0; top: 0; display: none; overflow: visible; }
.soc-chip { position: absolute; left: 50%; top: 50%; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(12, 11, 20, 0.86); border: 1px solid rgba(255, 171, 74, 0.32); color: #ffe9c9; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; opacity: 0; transition: opacity 0.2s ease; }
.soc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ffab4a; box-shadow: 0 0 8px #ffab4a; }
.soc-chip[data-s="idle"]::before { background: #8a82a6; box-shadow: none; }
.soc-chip[data-s="listening"] { border-color: rgba(154, 107, 255, 0.5); }
.soc-chip[data-s="listening"]::before { background: #a78bfa; box-shadow: 0 0 8px #a78bfa; }
.soc-chip[data-s="working"] { border-color: rgba(217, 180, 90, 0.5); }
.soc-chip[data-s="working"]::before { background: #d9b45a; box-shadow: 0 0 8px #d9b45a; }
.soc-tele { position: absolute; left: 50%; top: 50%; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 233, 201, 0.8); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.25s ease; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); }
.soc-tools { position: absolute; left: 0; top: 0; display: flex; gap: 6px; opacity: 0; transition: opacity 0.2s ease; will-change: transform; }
.soc-tool { height: 24px; padding: 0 10px 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
  font-size: 12px; font-weight: 600; color: #ffe9c9; background: rgba(12, 11, 20, 0.86); border: 1px solid rgba(255, 233, 201, 0.2); white-space: nowrap; }
.soc-tool::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 233, 201, 0.7); }
.soc-tool.soc-on { border-color: rgba(255, 171, 74, 0.65); box-shadow: 0 0 16px rgba(255, 171, 74, 0.3); }
.soc-tool.soc-gold { color: #ecd08a; }
.soc-tool.soc-gold::before { background: #d9b45a; }
.soc-tool.soc-gold.soc-on { border-color: rgba(217, 180, 90, 0.8); box-shadow: 0 0 16px rgba(217, 180, 90, 0.35); }

/* ---------- the Talk overlay while Core is shown (floating: chat stays visible and usable) ---------- */
/* shela-uiux-v1.css:91-97 styles every [class*="legend"] as a dark blurred card with !important; B3 adds the class
   "has-legend" to the overlay itself, which turned the whole floating overlay into a dark, blurred full screen layer.
   Core keeps the overlay fully transparent and never blurs the page behind it. */
#shela-talk-overlay.soc-core { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* caption becomes the orb's transcript bubble: violet edge while you speak, amber while Shela speaks */
#shela-talk-overlay.soc-core #shela-talk-caption {
  position: absolute; left: 0; top: 0; right: auto; bottom: auto !important; margin: 0;
  transform: translate3d(-9999px, 0, 0); width: max-content; max-width: 320px; max-height: calc(1.45em * 5 + 20px); overflow: hidden; box-sizing: border-box;
  padding: 10px 14px; border-radius: 16px; text-align: left; font-size: 15px; line-height: 1.45; letter-spacing: 0;
  color: rgba(255, 246, 236, 0.96); background: rgba(13, 10, 22, 0.97); border: 1px solid rgba(255, 171, 74, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 171, 74, 0.14);
  pointer-events: none; z-index: 3; opacity: 1; transition: opacity 0.2s ease, border-color 0.2s ease; will-change: transform;
}
#shela-talk-overlay.soc-core #shela-talk-caption[data-soc-tone="listen"] { border-color: rgba(154, 107, 255, 0.62); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(154, 107, 255, 0.18); color: rgba(240, 232, 255, 0.86); }
#shela-talk-overlay.soc-core #shela-talk-caption[data-soc-tone="dim"] { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); color: rgba(240, 232, 255, 0.8); }
#shela-talk-overlay.soc-core #shela-talk-caption[data-soc-hide="1"],
#shela-talk-overlay.soc-core #shela-talk-caption:empty { opacity: 0; }
::highlight(shela-orb-word) { color: #ffffff; background-color: rgba(255, 171, 74, 0.32); }

/* one compact call pill top centre, below the header: mode label, views, status, pause, END, minimise */
#shela-talk-overlay.soc-core #soc-callpill {
  position: absolute; top: var(--soc-top, 60px); left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 4px; padding: 4px; box-sizing: border-box; max-width: calc(100vw - 24px);
  border-radius: 999px; background: rgba(13, 10, 22, 0.97); border: 1px solid rgba(196, 166, 255, 0.24);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#soc-callpill > * { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; flex: 0 0 auto; }
#soc-callpill #shela-talk-mode-label { padding: 0 6px 0 10px; background: none; border: 0; border-radius: 0; font-size: 10px; letter-spacing: 0.22em; color: rgba(233, 220, 255, 0.78); white-space: nowrap; }
#soc-callpill #talk-view-toggle { background: transparent; border: 0; padding: 0; gap: 2px; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
#soc-callpill #talk-view-toggle button { padding: 7px 12px; color: rgba(233, 220, 255, 0.82); }
#soc-callpill #talk-view-toggle button.active { color: #fff; }
#soc-callpill #shela-talk-status { padding: 0 8px; font-size: 10px; letter-spacing: 0.2em; color: rgba(233, 220, 255, 0.82); white-space: nowrap; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; }
#soc-callpill #shela-talk-status:empty { display: none; }
#soc-callpill #shela-talk-pause-btn, #soc-callpill #shela-talk-close-btn { width: 36px; height: 36px; padding: 0; }
#soc-callpill #shela-talk-end-btn { height: 36px; }

/* legend: desktop top left under the header, collapsed; phone a small chip */
#shela-talk-overlay.soc-core .talk-legend:not([hidden]) {
  top: calc(var(--soc-pill-bottom, 104px) + 8px); bottom: auto !important; left: var(--soc-leg-left, 12px); transform: none; z-index: 5;
  width: var(--soc-leg-w, 260px); max-width: calc(100vw - 24px); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; text-align: left;
  padding: 8px 10px; border-radius: 14px !important; background: rgba(13, 10, 22, 0.95) !important; border: 1px solid rgba(196, 166, 255, 0.18) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
}
#shela-talk-overlay.soc-core .talk-legend .brain-legend-summary,
#shela-talk-overlay.soc-core .talk-legend .brain-legend-stats,
#shela-talk-overlay.soc-core .talk-legend .brain-legend-detail { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#shela-talk-overlay.soc-core .talk-legend .brain-legend-summary { padding: 0 !important; font-size: 11.5px; line-height: 1.45; color: rgba(233, 220, 255, 0.84); }
#shela-talk-overlay.soc-core .talk-legend .brain-legend-stats { justify-content: flex-start; font-size: 10.5px; }
#shela-talk-overlay.soc-core .talk-legend .brain-legend-toggle { padding: 5px 10px; font-size: 9.5px; border-radius: 999px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
#shela-talk-overlay.soc-core .talk-legend .brain-legend-detail { width: 100%; box-sizing: border-box; margin-top: 2px; padding: 4px 0 0 !important; grid-template-columns: 1fr; gap: 6px; border-top: 1px solid rgba(196, 166, 255, 0.14) !important; }
#shela-talk-overlay.soc-core .talk-legend .brain-legend-detail[hidden] { display: none; }

@media (max-width: 767px) {
  #shela-talk-overlay.soc-core #soc-callpill { flex-wrap: wrap; justify-content: center; border-radius: 20px; width: calc(100vw - 24px); padding: 4px 6px; }
  #soc-callpill #talk-view-toggle { flex: 1 1 100%; justify-content: center; }
  #soc-callpill #talk-view-toggle button { padding: 8px 10px; font-size: 10px; min-height: 32px; }
  #soc-callpill #shela-talk-pause-btn, #soc-callpill #shela-talk-close-btn { width: 40px; height: 40px; }
  #soc-callpill #shela-talk-end-btn { height: 40px; }
  #soc-callpill #shela-talk-status { max-width: 46vw; }
  #shela-talk-overlay.soc-core .talk-legend:not([hidden]) { top: calc(var(--soc-pill-bottom, 150px) + 6px); left: 12px; width: auto; max-width: calc(100vw - 24px); padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 999px !important; }
  #shela-talk-overlay.soc-core .talk-legend .brain-legend-toggle { background: rgba(13, 10, 22, 0.95) !important; }
  #shela-talk-overlay.soc-core .talk-legend .brain-legend-summary,
  #shela-talk-overlay.soc-core .talk-legend .brain-legend-stats { display: none; }
  #shela-talk-overlay.soc-core .talk-legend:has(.brain-legend-detail:not([hidden])) { border-radius: 14px !important; padding: 8px 10px; width: min(360px, calc(100vw - 24px)); background: rgba(13, 10, 22, 0.97) !important; border: 1px solid rgba(196, 166, 255, 0.18) !important; }
  #shela-talk-overlay.soc-core .talk-legend:has(.brain-legend-detail:not([hidden])) .brain-legend-summary { display: block; }
}

/* stage: space reserved at the end of the chat while the orb thinks or works there (S + 84 px) */
html[data-shela-orb-stage="200"] [data-shela-orb-scroller] { padding-bottom: 284px !important; }
html[data-shela-orb-stage="240"] [data-shela-orb-scroller] { padding-bottom: 324px !important; }
html[data-shela-orb-stage="300"] [data-shela-orb-scroller] { padding-bottom: 384px !important; }
html[data-shela-orb-stage="360"] [data-shela-orb-scroller] { padding-bottom: 444px !important; }

@media (prefers-reduced-motion: reduce) {
  .soc-chip, .soc-tele, .soc-tools, #shela-talk-overlay.soc-core #shela-talk-caption { transition: none; }
}