:root {
  color-scheme: dark;
  --bg: #020806;
  --panel: #06130e;
  --panel2: #0a1b14;
  --line: #24513c;
  --line-bright: #5ecf91;
  --text: #d6f7df;
  --muted: #78a98a;
  --accent: #72e6a0;
  --accent-hot: #c2ffd2;
  --danger: #ff8b8b;
  --amber: #d0c57b;
  --shadow: rgba(72, 255, 143, .25);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #000; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 8%, rgba(25, 86, 55, .16), transparent 34%),
    linear-gradient(#010604, #000);
  color: var(--text);
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .17;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(110,255,165,.15) 4px);
  mix-blend-mode: screen;
}
button, textarea, input { font: inherit; }
.app { width: min(860px, 100%); margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 16px 36px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; border-bottom: 1px solid #163525; padding: 0 2px 10px; }
h1 { margin: 0; font-size: clamp(28px, 6vw, 45px); line-height: .9; letter-spacing: .08em; text-shadow: 0 0 16px var(--shadow); }
h1 span { color: var(--accent); }
.presence { display: flex; gap: 8px; align-items: center; border: 1px solid #244a37; padding: 7px 10px; font-size: 11px; background: rgba(4,18,12,.85); }
.presence span, .dot { width: 8px; height: 8px; border-radius: 50%; background: #426153; display: inline-block; }
.presence.online span, .dot { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.presence.busy span { background: var(--amber); box-shadow: 0 0 12px var(--amber); }

.codecDisplay {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(175px, .86fr) minmax(120px, 1fr);
  gap: clamp(10px, 3vw, 30px);
  align-items: center;
  padding: 18px clamp(10px, 2.5vw, 24px);
  border: 1px solid #173527;
  border-bottom-color: #2b5d43;
  background: linear-gradient(180deg, rgba(5,17,12,.9), rgba(1,8,5,.96));
  box-shadow: inset 0 0 45px rgba(27,95,58,.07), 0 0 30px rgba(0,0,0,.7);
  overflow: hidden;
}
.codecDisplay::before, .codecDisplay::after {
  content: "";
  position: absolute;
  left: 26%; right: 26%; height: 1px;
  background: linear-gradient(90deg, transparent, #2f7350, transparent);
}
.codecDisplay::before { top: 18px; }
.codecDisplay::after { bottom: 18px; }
.portraitFrame { position: relative; min-width: 0; filter: drop-shadow(0 0 7px rgba(95,255,150,.16)); }
.portraitLabel { height: 22px; border: 1px solid #2a6749; border-bottom: 0; display: flex; align-items: center; justify-content: center; color: #9deab6; background: #07150f; font-size: 11px; letter-spacing: .12em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 7px; }
.portraitScreen { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 2px solid #3a8b5e; background: #020805; box-shadow: inset 0 0 22px rgba(67,202,115,.22), 0 0 8px rgba(73,225,126,.2); }
.portraitScreen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(135,255,173,.07), transparent 18%, transparent 82%, rgba(135,255,173,.07)), repeating-linear-gradient(to bottom, transparent 0 4px, rgba(130,255,171,.09) 5px); }
.portraitScreen video, .portraitScreen img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) sepia(.35) hue-rotate(78deg) saturate(1.4) contrast(1.15) brightness(.82); }
.portraitScreen video { transform: scaleX(-1); }
.portraitScreen img { transform: none; }
.portraitStandby { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: #4d8965; font-size: 10px; letter-spacing: .1em; text-align: center; }
.operatorPortrait { display: flex; align-items: center; justify-content: center; }
.operatorPortrait img { width: 100%; height: 100%; object-fit: contain; padding: 10%; transform: none; filter: grayscale(1) sepia(.55) hue-rotate(76deg) saturate(2.1) contrast(1.25) brightness(.82) drop-shadow(0 0 8px rgba(106,255,157,.35)); }
.silhouette { width: 46%; aspect-ratio: 1; border: 1px solid #28573f; border-radius: 50%; position: relative; opacity: .62; }
.silhouette::before { content: ""; position: absolute; left: 31%; top: 18%; width: 38%; height: 38%; border-radius: 50%; background: #2c6848; }
.silhouette::after { content: ""; position: absolute; left: 17%; bottom: 8%; width: 66%; height: 39%; border-radius: 48% 48% 15% 15%; background: #24563d; }
.privacyPanel { position: relative; z-index: 1; text-align: center; color: var(--accent); display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 9px; }
.privacyLabel { border: 1px solid #24583e; background: #06130e; color: #d1ffdf; padding: 12px 6px; font-size: clamp(13px, 2.8vw, 20px); font-weight: 700; letter-spacing: .12em; line-height: 1.15; text-shadow: 0 0 9px rgba(107,255,157,.65); box-shadow: inset 0 0 20px rgba(68,196,111,.13); }
.signalBars { height: 28px; display: flex; align-items: end; justify-content: center; gap: 3px; }
.signalBars i { width: 7%; background: #66d88f; opacity: .65; box-shadow: 0 0 5px rgba(91,233,140,.4); }
.signalBars i:nth-child(1), .signalBars i:nth-child(8) { height: 25%; }
.signalBars i:nth-child(2), .signalBars i:nth-child(7) { height: 40%; }
.signalBars i:nth-child(3), .signalBars i:nth-child(6) { height: 58%; }
.signalBars i:nth-child(4), .signalBars i:nth-child(5) { height: 80%; }

.panel { border: 1px solid #1c412e; border-top: 0; padding: 20px; background: rgba(3,12,8,.94); }
.panel h2 { margin: 0 0 12px; color: #caffd8; font-size: 18px; letter-spacing: .12em; }
.centered { text-align: center; padding-block: 44px; }
.nameRow { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; border-bottom: 1px solid #193b2a; padding-bottom: 14px; }
.nameRow label { font-size: 11px; color: var(--muted); letter-spacing: .12em; }
.nameRow input { min-width: 0; border: 1px solid #2b5a40; background: #020805; color: var(--accent-hot); padding: 9px 10px; outline: none; text-transform: none; }
.nameRow input:focus { border-color: var(--accent); box-shadow: 0 0 8px rgba(74,219,124,.16); }
.systemText { color: #9bc3a8; font-size: 13px; }
.notice { color: #648c72; font-size: 11px; line-height: 1.6; }
.actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; margin-top: 16px; }
button { border: 1px solid #2b6547; border-radius: 0; padding: 12px 14px; cursor: pointer; letter-spacing: .08em; }
button:disabled { cursor: not-allowed; opacity: .3; }
.primary { background: #6ad991; color: #031009; border-color: #8ef2af; font-weight: 900; box-shadow: inset 0 0 8px rgba(255,255,255,.2), 0 0 10px rgba(75,220,124,.12); }
.secondary { background: #081a12; color: #a7d8b6; }
.danger { color: var(--danger); border-color: #673f3f; }
.ghost { background: transparent; }
.full { width: calc(100% - 24px); margin: 0 12px 12px; }
.codecPulse { height: 30px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 16px; }
.codecPulse span { width: 7px; height: 16px; background: var(--accent); animation: signal 1s infinite ease-in-out; }
.codecPulse span:nth-child(2) { animation-delay: .14s; }
.codecPulse span:nth-child(3) { animation-delay: .28s; }
@keyframes signal { 0%,100%{ height:8px;opacity:.35 } 50%{ height:28px;opacity:1;box-shadow:0 0 9px var(--accent) } }
.chatPanel { padding: 0; overflow: hidden; }
.chatHeader { display: flex; justify-content: space-between; border-bottom: 1px solid #204a34; padding: 12px 14px; color: #aee8bf; font-size: 12px; letter-spacing: .08em; }
.messages { min-height: 240px; max-height: 42vh; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: repeating-linear-gradient(to bottom, rgba(8,28,18,.24) 0 24px, rgba(4,14,9,.24) 25px); }
.message { max-width: 87%; padding: 9px 11px; border: 1px solid #244c36; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; }
.message.operator { align-self: flex-start; background: #0a1d14; color: #c5f4d1; }
.message.visitor { align-self: flex-end; background: #0d2a1b; color: #d5ffe0; border-color: #347350; }
.message.system { align-self: center; color: var(--muted); font-size: 11px; padding: 3px; border: 0; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; border-top: 1px solid #204a34; }
textarea { resize: none; border: 1px solid #2b5a40; padding: 9px; background: #020805; color: var(--text); outline: none; }
textarea:focus { border-color: var(--accent); }
footer { margin-top: 9px; color: #315943; text-align: right; font-size: 9px; letter-spacing: .12em; }
@media (max-width: 620px) {
  body { font-size: 16px; }
  .app { padding-inline: 8px; }
  .codecDisplay { grid-template-columns: 1fr .92fr 1fr; gap: 7px; padding-inline: 7px; }
  .portraitLabel { font-size: 10px; height: 21px; letter-spacing: .08em; }
  .privacyLabel { font-size: clamp(12px, 3.4vw, 16px); padding: 10px 4px; letter-spacing: .08em; }
  .signalBars { height: 22px; }
  .portraitStandby { font-size: 9px; }
  .panel { padding: 16px; }
  .panel h2 { font-size: 21px; }
  .nameRow { grid-template-columns: 1fr; gap: 7px; }
  .nameRow label { font-size: 13px; }
  .nameRow input { font-size: 16px; padding: 12px; }
  .systemText { font-size: 15px; line-height: 1.5; }
  .notice { font-size: 13px; line-height: 1.65; }
  .actions { grid-template-columns: 1fr; }
  button { font-size: 15px; padding: 14px; }
  .chatHeader { font-size: 14px; }
  .message { font-size: 15px; line-height: 1.55; }
  .message.system { font-size: 13px; }
  textarea { font-size: 16px; line-height: 1.5; }
  footer { font-size: 10px; }
}