/* Live Chat widget -- human support, separate from the Agent Rigel AI
   widget. Reuses the :root variables/font already declared globally by
   rigel-widget.css (both stylesheets are loaded on every page), and adds
   its own accent color so it reads as a distinct, "a person is on the
   other end" surface next to Rigel's AI orb. */
:root {
  --human: #6EE7B7;
  --human-dim: #2F8F6B;
  --human-line: rgba(110, 231, 183, 0.16);
}

/* ---------- ORB (stacked directly above the Agent Rigel orb) ---------- */
#lc-orb-wrap {
  position: fixed; right: 26px; bottom: 100px; z-index: 999;
}
#lc-orb {
  width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #EAFBF3, var(--human) 42%, var(--human-dim) 78%, var(--navy) 100%);
  box-shadow: 0 0 0 1px var(--human-line), 0 6px 20px rgba(0,0,0,0.45), 0 0 20px rgba(110,231,183,0.3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform .18s ease;
  color: #0B1020;
}
#lc-orb:hover { transform: scale(1.06); }
#lc-orb:active { transform: scale(0.97); }
#lc-orb svg { width: 22px; height: 22px; }
#lc-orb.open svg.icon-chat { display: none; }
#lc-orb:not(.open) svg.icon-close { display: none; }

#lc-presence-dot {
  position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--void); background: #6b7280;
}
#lc-presence-dot.online { background: #22c55e; }

#lc-unread {
  position: absolute; top: -3px; left: -3px; min-width: 16px; height: 16px; border-radius: 999px;
  background: #FF8B5E; color: #241206; font-size: 10px; font-weight: 700;
  display: none; align-items: center; justify-content: center; padding: 0 4px;
}
#lc-unread.show { display: flex; }

/* ---------- PANEL ---------- */
#lc-panel {
  position: fixed; right: 26px; bottom: 164px; z-index: 1000;
  width: 340px; max-width: calc(100vw - 40px);
  height: 460px; max-height: calc(100vh - 210px);
  background: linear-gradient(180deg, var(--panel), var(--navy));
  border: 1px solid var(--human-line);
  border-radius: 20px 20px 16px 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(0.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  font-family: var(--font);
  color: var(--text);
}
#lc-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

#lc-head {
  padding: 13px 15px; display: flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
#lc-head .lc-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #EAFBF3, var(--human) 60%, var(--human-dim) 100%);
  display: flex; align-items: center; justify-content: center; color: #0B1020;
}
#lc-head .titles { flex: 1; min-width: 0; }
#lc-head h1 { font-size: 14.5px; margin: 0; font-weight: 600; letter-spacing: 0.2px; }
#lc-head p { font-size: 11px; margin: 1px 0 0; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
#lc-head p .dot { width: 7px; height: 7px; border-radius: 50%; background: #6b7280; flex-shrink: 0; }
#lc-head p .dot.online { background: #22c55e; }
#lc-head button {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  width: 26px; height: 26px; border-radius: 8px; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
#lc-head button:hover { background: rgba(255,255,255,0.06); color: var(--text); }

#lc-messages {
  flex: 1; overflow-y: auto; padding: 14px 15px; display: flex; flex-direction: column; gap: 9px;
}
#lc-messages::-webkit-scrollbar { width: 6px; }
#lc-messages::-webkit-scrollbar-thumb { background: rgba(110,231,183,0.2); border-radius: 6px; }

.lc-msg { max-width: 86%; font-size: 13px; line-height: 1.5; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; word-break: break-word; }
.lc-msg.visitor { align-self: flex-end; background: var(--human-dim); color: #fff; border-bottom-right-radius: 4px; }
.lc-msg.admin { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.lc-msg.admin .lc-author { font-size: 10.5px; font-weight: 600; opacity: 0.65; margin-bottom: 2px; }
.lc-msg.system { align-self: center; color: var(--text-muted); font-size: 11px; text-align: center; max-width: 95%; }

#lc-inputrow { display: flex; gap: 8px; padding: 11px 15px; border-top: 1px solid var(--line); flex-shrink: 0; }
#lc-inputrow input {
  flex: 1; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 9px 11px; font-size: 13px; font-family: var(--font); min-width: 0;
}
#lc-inputrow input:focus { outline: none; border-color: var(--human-dim); }
#lc-inputrow input:disabled { opacity: 0.5; }
#lc-send-btn {
  font-family: var(--font); border: none; cursor: pointer; border-radius: 9px;
  font-size: 12.5px; padding: 0 13px; font-weight: 500;
  background: var(--human); color: #0B1020; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
#lc-send-btn:disabled { opacity: 0.4; cursor: default; }

#lc-restart-row { padding: 10px 15px; border-top: 1px solid var(--line); flex-shrink: 0; }
#lc-restart-row button {
  width: 100%; font-family: var(--font); border: 1px solid var(--line); cursor: pointer; border-radius: 9px;
  font-size: 12.5px; padding: 8px; font-weight: 500; background: transparent; color: var(--text-muted);
}
#lc-restart-row button:hover { color: var(--text); }

@media (max-width: 480px) {
  #lc-orb-wrap { right: 18px; bottom: 88px; }
  #lc-panel { right: 12px; bottom: 148px; width: calc(100vw - 24px); }
}