/*
============================================================================
 EventHorizon Collab Room - Identity Layer Styles
 public/collab/identity.css
============================================================================
 Sections:
   1. Beacon pull tab (replaces the .orb sphere inside #chatTab)
   2. Calm Thread message rows + collapsed system clusters
   3. Participant tooltip card
   4. Edit Participants panel
   5. Composer send button (neon blue up arrow)
 Palette:
   deep bg #060B14 · panel #0A1424 · line #17294A / #23406B
   brand blue #4DA6FF · neon #00D4FF · text #E8F1FA / #8FA8C4 / #5C728F
============================================================================
*/

/* ==========================================================================
   SECTION 1: beacon pull tab
   ========================================================================== */
#chatTab { background: #0A1730 !important; border: 1px solid #23406B !important;
  border-right: none !important; border-radius: 22px 0 0 22px !important;
  width: 44px !important; height: 96px !important; display: flex !important;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; }
#chatTab .orb, #chatTab .chev, #chatTab .lbl { display: none !important; }
#chatTab .ehBeaconArc { width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #00D4FF; border-left-color: #23406B;
  border-bottom-color: #23406B; box-shadow: 0 0 10px rgba(0,212,255,.35); }
#chatTab .ehBeaconMark { font: 500 10px/1 system-ui, sans-serif;
  letter-spacing: 1px; color: #7FB7E8; }
#chatTab .ehBeaconDots { display: flex; gap: 3px; }
#chatTab .ehBeaconDots span { width: 4px; height: 4px; border-radius: 50%;
  background: #2E5F9E; transition: background .3s; }
#chatTab .ehBeaconDots span.on { background: #00D4FF; }
/* Pulse ONLY while an agent is responding (body.eh-agents-busy is toggled) */
@keyframes ehPulse { 0%,100% { box-shadow: 0 0 6px rgba(0,212,255,.25); }
  50% { box-shadow: 0 0 16px rgba(0,212,255,.75); } }
body.eh-agents-busy #chatTab .ehBeaconArc { animation: ehPulse 1.6s ease-in-out infinite; }

/* ==========================================================================
   SECTION 2: calm thread rows
   ========================================================================== */
.ehMsg { display: flex; gap: 10px; padding: 7px 0; }
.ehAvatar { width: 30px; height: 30px; flex: 0 0 30px; display: flex;
  align-items: center; justify-content: center; font: 500 12px/1 system-ui, sans-serif;
  overflow: hidden; cursor: default; }
.ehAvatar.img { border-radius: 8px; }                 /* logo tiles: rounded square */
.ehAvatar.initials { border-radius: 50%; }            /* people: circle             */
.ehAvatar img, .ehAvatar svg { width: 66%; height: 66%; display: block; }
.ehMsgHead { font-size: 12px; color: #8FA8C4; display: flex; gap: 6px; align-items: center; }
.ehMsgHead .ti { font-size: 12px; color: #3D5A80; }
.ehMsgBody { font-size: 13px; color: #E8F1FA; line-height: 1.55; margin-top: 2px; }
.ehMsgVerdict { font-size: 11px; color: #00D4FF; margin-top: 3px; }
/* demoted audit metadata: hidden until the row is expanded */
.ehMsg .ehMeta { display: none; margin-top: 6px; }
.ehMsg.open .ehMeta { display: flex; flex-wrap: wrap; gap: 6px; }
.ehMeta span { font: 400 10.5px/1 ui-monospace, monospace; color: #6E8BB0;
  background: #0C1B31; border-radius: 5px; padding: 3px 8px; }
/* collapsed system cluster */
.ehCluster { display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  margin: 4px 0; background: #0A1322; border-radius: 8px; cursor: pointer;
  font-size: 12px; color: #8FA8C4; }
.ehCluster .ti { font-size: 13px; color: #5C728F; transition: transform .2s; }
.ehCluster.open .ti { transform: rotate(90deg); }
.ehClusterItems { display: none; padding-left: 18px; }
.ehCluster.open + .ehClusterItems { display: block; }
.ehClusterItems .ehSysRow { font: 400 11.5px/1.9 ui-monospace, monospace; color: #6E8BB0; }

/* ==========================================================================
   SECTION 3: participant tooltip
   ========================================================================== */
.ehTip { position: absolute; z-index: 60; width: 290px; background: #0B1B33;
  border: 1px solid #23406B; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.ehTipHead { display: flex; align-items: center; gap: 10px; }
.ehTipHead .ehAvatar { width: 34px; height: 34px; flex-basis: 34px; }
.ehTipName { font-size: 13px; font-weight: 500; color: #EAF3FD; }
.ehTipRole { font-size: 11px; color: #7FB7E8; }
.ehTipLive { margin-left: auto; font-size: 10.5px; padding: 2px 8px;
  border-radius: 20px; background: #08243A; color: #00D4FF; }
.ehTipBody { border-top: 1px solid #17294A; margin-top: 10px; padding-top: 8px;
  font-size: 11.5px; color: #8FA8C4; line-height: 1.7; }
.ehTipBody b { color: #CFE4F8; font-weight: 500; }
.ehTipBody .ehModelSwitch { color: #00D4FF; cursor: pointer; }

/* ==========================================================================
   SECTION 4: edit participants panel
   ========================================================================== */
.ehEditorScrim { position: fixed; inset: 0; background: rgba(2,6,12,.6); z-index: 70; }
.ehEditor { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 71; width: min(420px, 92vw); max-height: 84vh; overflow: auto;
  background: #060B14; border: 1px solid #23406B; border-radius: 14px; padding: 16px; }
.ehEditor h3 { margin: 0 0 12px; font: 500 14px/1 system-ui, sans-serif; color: #E8F1FA; }
.ehEdRow { display: flex; align-items: center; gap: 10px; background: #0A1424;
  border: 1px solid #17294A; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.ehEdRow .grow { flex: 1; min-width: 0; }
.ehEdName { font-size: 12px; color: #E8F1FA; }
.ehEdSub { font-size: 10.5px; color: #6E8BB0; }
.ehEdRow .ti { color: #5C728F; cursor: pointer; font-size: 15px; }
.ehEdForm label { display: block; font-size: 11px; color: #7FB7E8; margin: 10px 0 4px; }
.ehEdForm input[type=text] { width: 100%; box-sizing: border-box; background: #0A1424;
  border: 1px solid #23406B; border-radius: 8px; color: #E8F1FA; font-size: 13px;
  padding: 8px 10px; outline: none; }
.ehEdForm input[type=color] { width: 44px; height: 30px; border: none;
  background: none; padding: 0; cursor: pointer; }
.ehEdBtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.ehBtn { border: 1px solid #23406B; background: #0A1424; color: #CFE4F8;
  border-radius: 8px; padding: 7px 14px; font-size: 12px; cursor: pointer; }
.ehBtn.primary { background: #00D4FF; border-color: #00D4FF; color: #04121F; font-weight: 500; }
.ehEdNote { font-size: 10.5px; color: #45587A; line-height: 1.6; margin-top: 8px; }

/* ==========================================================================
   SECTION 5: composer send button
   ========================================================================== */
.ehSend { width: 28px; height: 28px; border: none; border-radius: 8px;
  background: #00D4FF; color: #04121F; display: flex; align-items: center;
  justify-content: center; cursor: pointer; }
.ehSend:hover { box-shadow: 0 0 12px rgba(0,212,255,.5); }
.ehSend svg { width: 15px; height: 15px; }

/* ==========================================================================
   SECTION 6: Calm Thread redesign — quiet, spacious, one accent.
   Overrides the native command-channel chrome so the drawer reads clean
   and elegant. Nothing is removed from the DOM (function intact); the noise
   is simply hidden until a row is tapped, and typography does the work.
   ========================================================================== */

/* -- panel + header -------------------------------------------------------- */
aside.drawer, #drawer { background: #0B0E15 !important; }
.cd-head { padding: 16px 18px !important; gap: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.cd-head .orb, .cd-head .scaf { display: none !important; }      /* drop orb + orange live badge */
.cd-head .t { font: 500 16px/1 system-ui, -apple-system, sans-serif !important;
  letter-spacing: .01em !important; text-transform: none !important; color: #EAF0F8 !important; }
.cc-scaf { display: none !important; }                            /* drop the busy sub-header */
#ehEditOpen { margin-left: auto !important; }
#ehEditOpen, #chatClose { color: #58708F !important; }
#ehEditOpen:hover, #chatClose:hover { color: #A6BCD8 !important; }

/* -- thread + rows: air and calm ------------------------------------------ */
.thread { padding: 14px 18px 10px !important; gap: 0 !important; background: transparent !important; }
.cmsg { gap: 12px !important; padding: 11px 0 !important; align-items: flex-start !important; }
.ehAvatar { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; }
.ehAvatar.img { border-radius: 9px !important; }
.ehAvatar.initials { border-radius: 50% !important; font-weight: 600 !important; }
.cwho { gap: 8px !important; align-items: baseline !important; }
.cwho .nm { font: 500 14px/1.3 system-ui, -apple-system, sans-serif !important; color: #E9EFF7 !important; }
.cwho .rl { display: none !important; }                          /* role line lives in the tooltip */
.hwhen { margin-left: 0 !important; text-transform: none !important; letter-spacing: 0 !important;
  font: 400 12px/1.3 system-ui, -apple-system, sans-serif !important; color: #5C7290 !important; }
.ctext { font-size: 14px !important; line-height: 1.62 !important; color: #D6E0ED !important; margin-top: 3px !important; }
.ctext b, .ctext strong { color: #EFF4FB !important; font-weight: 600 !important; }
.ehModelLine { font: 400 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: #566A85 !important; margin-top: 6px !important; }

/* hide the busy audit chips by default; a tap on the row reveals them */
.cmsg .htags, .cmsg .cites, .cmsg .hashchip, .cmsg .cprov { display: none !important; }
.cmsg.ehMsg.open .htags { display: flex !important; margin-top: 8px !important; }
.cmsg.ehMsg.open .cites { display: flex !important; margin-top: 6px !important; }

/* route bar removed (broadcasts to all agents; switch a model from its avatar tooltip) */
#routebar { display: none !important; }

/* history/live divider + system lines: barely there */
.hdiv { color: #3B4A63 !important; opacity: .55 !important; }
.sysline { border-left-color: rgba(255,255,255,.08) !important; color: #63788F !important; }

/* -- system cluster: one quiet line --------------------------------------- */
.ehCluster { background: rgba(255,255,255,.035) !important; border: none !important;
  border-radius: 10px !important; padding: 9px 12px !important; margin: 8px 0 !important;
  color: #7186A2 !important; font-size: 12.5px !important; gap: 9px !important; }
.ehCluster .ehChev { color: #45587A !important; font-size: 10px !important; }
.ehClusterItems .ehSysRow { color: #63788F !important; }

/* -- composer: quiet field, single neon control --------------------------- */
#composer { border-top: 1px solid rgba(255,255,255,.06) !important; padding: 12px 14px !important;
  gap: 10px !important; background: transparent !important; }
#chatInput, #composer textarea { background: transparent !important; border: none !important;
  color: #E9EFF7 !important; font-size: 14px !important; }
#chatInput::placeholder, #composer textarea::placeholder { color: #4E627D !important; }
.ehSend { width: 34px !important; height: 34px !important; border-radius: 9px !important;
  background: #14C2FF !important; }
.ehSend svg { width: 16px !important; height: 16px !important; }
.ehSend:hover { box-shadow: 0 0 14px rgba(20,194,255,.5) !important; }

/* -- floating rounded panel (matches the mockup's card) ------------------- */
aside.drawer { top: 16px !important; bottom: 16px !important; right: 16px !important;
  height: auto !important; border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55) !important; overflow: hidden !important; }

/* quick-command chip bar hidden for calm (kept in DOM/function; type instead) */
#acts, .acts { display: none !important; }

/* ==========================================================================
   SECTION 7: motion — gentle and iOS-like. New content grows in from its
   seed; agents visibly "think"; the view follows softly. Subtle, not showy.
   ========================================================================== */

/* a new message grows in from the avatar's seed */
@keyframes ehGrowIn {
  from { opacity: 0; transform: translateY(7px) scale(.965); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.cmsg.ehEnter { animation: ehGrowIn .42s cubic-bezier(.22,.61,.36,1) both;
  transform-origin: 17px 22px; }

/* agent typing indicator — three gently bouncing dots */
.ehTyping { display: inline-flex; gap: 5px; align-items: center; padding: 3px 0; }
.ehTyping > span { width: 6px; height: 6px; border-radius: 50%; background: #6E86A6;
  animation: ehType 1.25s infinite ease-in-out both; }
.ehTyping > span:nth-child(2) { animation-delay: .16s; }
.ehTyping > span:nth-child(3) { animation-delay: .32s; }
@keyframes ehType { 0%,70%,100% { transform: translateY(0); opacity: .3; }
  35% { transform: translateY(-4px); opacity: .95; } }

/* tooltip: soft pop */
.ehTip { animation: ehPop .16s cubic-bezier(.22,.61,.36,1) both; transform-origin: top left; }
@keyframes ehPop { from { opacity: 0; transform: scale(.96) translateY(-3px); }
  to { opacity: 1; transform: scale(1) translateY(0); } }

/* edit panel + scrim: fade / scale in */
.ehEditorScrim { animation: ehFade .18s ease both; }
.ehEditor { animation: ehPanelIn .26s cubic-bezier(.22,.61,.36,1) both; }
@keyframes ehFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ehPanelIn { from { opacity: 0; transform: translate(-50%,-48%) scale(.97); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

/* ease small state changes */
.ehCluster { transition: background .2s ease; }
.cmsg .htags, .cmsg .cites { transition: opacity .2s ease; }
#chatTab .ehBeaconArc { transition: box-shadow .3s ease; }

/* honor the reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .cmsg.ehEnter, .ehTip, .ehEditor, .ehEditorScrim { animation: none !important; }
  .ehTyping > span { animation: none !important; opacity: .55 !important; }
}

/* ==========================================================================
   SECTION 8: refinements — fuller avatars, roomier drawer, energized beacon.
   ========================================================================== */

/* the logo / initials fill the tile */
.ehAvatar img, .ehAvatar svg { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.ehAvatar.initials { font-size: 15px !important; font-weight: 700 !important; letter-spacing: .3px !important; }

/* roomier drawer — about an inch more legroom to chat */
aside.drawer { width: min(516px, 94%) !important; }

/* -- energized beacon pull tab: brighter, bolder, alive ------------------- */
/* keep the base position:fixed (right edge); just add a clip + glow context */
#chatTab { overflow: hidden !important;
  background: linear-gradient(180deg, #0D2447, #0A1830) !important;
  border: 1px solid #2E78CE !important; border-right: none !important;
  box-shadow: -6px 0 26px rgba(20,194,255,.30) !important;
  animation: ehBeaconBreath 3.2s ease-in-out infinite !important; }
@keyframes ehBeaconBreath {
  0%,100% { box-shadow: -5px 0 18px rgba(20,194,255,.22); }
  50%     { box-shadow: -8px 0 40px rgba(20,194,255,.60); } }
/* an energy pulse travels up through the tab */
#chatTab::before { content:''; position:absolute; left:0; right:0; height:46%;
  background: linear-gradient(180deg, transparent, rgba(46,214,255,.42), transparent);
  animation: ehBeaconSweep 2.8s ease-in-out infinite; pointer-events:none; z-index:0; }
@keyframes ehBeaconSweep {
  0%   { transform: translateY(160%); opacity:0; }
  16%  { opacity:1; } 84% { opacity:1; }
  100% { transform: translateY(-200%); opacity:0; } }
#chatTab .ehBeaconArc, #chatTab .ehBeaconMark, #chatTab .ehBeaconDots { position: relative; z-index: 1; }
/* brighter, bolder arc with a pulsing glow */
#chatTab .ehBeaconArc { width:24px !important; height:24px !important; border-width:2.5px !important;
  border-color:#3BE0FF !important; border-left-color:rgba(59,224,255,.16) !important; border-bottom-color:rgba(59,224,255,.16) !important;
  animation: ehArcGlow 3.2s ease-in-out infinite !important; }
@keyframes ehArcGlow { 0%,100% { box-shadow:0 0 8px rgba(59,224,255,.5); } 50% { box-shadow:0 0 18px rgba(59,224,255,.95); } }
#chatTab .ehBeaconMark { color:#A9E4FF !important; font-weight:600 !important; text-shadow:0 0 10px rgba(59,224,255,.5) !important; }
/* energy flows through the dots in sequence */
#chatTab .ehBeaconDots span { background:#1D4E86 !important; animation: ehDotFlow 1.8s ease-in-out infinite !important; }
#chatTab .ehBeaconDots span:nth-child(2){ animation-delay:.24s !important; }
#chatTab .ehBeaconDots span:nth-child(3){ animation-delay:.48s !important; }
@keyframes ehDotFlow { 0%,100% { background:#1D4E86; box-shadow:none; } 50% { background:#3BE0FF; box-shadow:0 0 8px rgba(59,224,255,.9); } }
/* busy: intensify the energy */
body.eh-agents-busy #chatTab { animation-duration: 1.4s !important; }
body.eh-agents-busy #chatTab::before { animation-duration: 1.2s !important; }
body.eh-agents-busy #chatTab .ehBeaconArc { animation-duration: .9s !important; }
@media (prefers-reduced-motion: reduce) {
  #chatTab, #chatTab::before, #chatTab .ehBeaconArc, #chatTab .ehBeaconDots span { animation: none !important; }
  #chatTab::before { opacity: 0 !important; }
}