/* Logs Garden Voice Portal · UI skin v1.0
   Original SimpleVoice-Geyser 0.1.4 UI + JS remain in place.
   Theme only: no audio protocol, authentication or WebSocket changes. */
:root {
  color-scheme: dark;
  --lg-cyan: #22d3ee;
  --lg-purple: #a78bfa;
  --lg-muted: #94a3b8;
  --lg-line: rgba(142, 172, 210, .16);
  --lg-field: #0f1b2e;
}
*, *::before, *::after { box-sizing: border-box; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
html { min-height:100%; background: #070c17; }
body.mcDirtBackground.flexContainer {
  position: relative; isolation: isolate; width:100%; min-height:100svh; height:auto;
  margin:0; padding:0; overflow-x:hidden; align-items:stretch; justify-content:flex-start;
  color:#e8f0ff; background:
    radial-gradient(ellipse 45% 47% at 82% 36%, rgba(95,67,174,.20),transparent 75%),
    radial-gradient(ellipse 43% 35% at 18% 74%, rgba(20,112,151,.17),transparent 75%),
    linear-gradient(138deg,#080e1b 0%,#0b1424 54%,#070d18 100%) !important;
  background-size:auto !important; image-rendering:auto !important;
}
.lg-page-glow {position:fixed; z-index:-1; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(116,176,216,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(116,176,216,.045) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:linear-gradient(to bottom,transparent 0%,black 23%,black 80%,transparent 100%);
}
.lg-page-glow::after {content:"";position:absolute; top:12%; right:7%; width:300px; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle,rgba(167,139,250,.10),transparent 67%);filter:blur(28px);}
.lg-header {width:min(1220px,calc(100% - 72px));margin:0 auto;padding:28px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid rgba(146,164,203,.12);}
.lg-brand {display:flex;align-items:center;gap:13px;text-decoration:none;color:#f8fbff;}
.lg-brand-mark {width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(34,211,238,.35);border-radius:13px;
  background:linear-gradient(140deg,rgba(34,211,238,.13),rgba(154,93,255,.19));box-shadow:0 0 28px rgba(34,211,238,.08);}
.lg-brand-spark {font-size:29px;color:var(--lg-cyan);text-shadow:0 0 16px rgba(34,211,238,.48);}
.lg-brand-text {display:flex; flex-direction:column;gap:2px;}
.lg-brand-text strong {font-size:16px;letter-spacing:.075em;white-space:nowrap;}
.lg-brand-text strong em {font-style:normal;color:var(--lg-cyan);}
.lg-brand-text small {font-size:9px;letter-spacing:.26em;color:#8d9fb9;font-weight:700;}
.lg-header-right {display:flex;align-items:center;gap:9px;color:#acbbd0;font-size:10px;font-weight:750;letter-spacing:.16em;}
.lg-pulse,.lg-card-tag-dot,.lg-connected-signal span {width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 12px rgba(52,211,153,.7);display:inline-block;flex:none;}
.lg-beta {margin-left:7px;padding:6px 9px;font-size:9px;color:#b7a3ff;border:1px solid rgba(167,139,250,.27);border-radius:6px;background:rgba(167,139,250,.09);}
main.flexContainer {flex:1;min-height:0;width:100%;height:auto;padding:clamp(36px,6vh,68px) 0 58px;align-items:center;}
.lg-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.94fr);gap:clamp(32px,6.5vw,110px);width:min(1120px,calc(100% - 72px));align-items:center;margin:auto;}
.lg-intro {max-width:565px;padding:18px 0 10px;}
.lg-eyebrow {color:#5dcfe0;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.23em;font-weight:850;}
.lg-eyebrow-line {width:27px;height:2px;background:linear-gradient(90deg,#22d3ee,#a78bfa);}
.lg-intro h1 {margin:26px 0 20px; font-size:clamp(49px,5.4vw,76px);line-height:1.07;letter-spacing:-.065em;font-weight:830;color:#f5f8ff;}
.lg-intro h1 span {background:linear-gradient(93deg,#22d3ee 9%,#79b8ff 46%,#bc8efa 94%);color:transparent;background-clip:text;-webkit-background-clip:text;}
.lg-intro-copy {max-width:490px;font-size:16px;line-height:1.8;color:#9bacc5;margin:0 0 24px;}
.lg-chips {display:flex;flex-wrap:wrap;gap:11px;margin:0 0 42px;}
.lg-chips span {padding:9px 12px;border:1px solid rgba(34,211,238,.17);background:rgba(34,211,238,.045);border-radius:7px;font-size:10px;font-weight:750;letter-spacing:.09em;color:#b9e7ed;display:flex;align-items:center;gap:9px;}
.lg-chips i {display:block;width:6px;height:6px;border-radius:50%;background:var(--lg-cyan);}
.lg-guide {background:linear-gradient(120deg,rgba(18,32,51,.64),rgba(15,26,45,.36));border:1px solid rgba(131,162,210,.14);border-radius:14px;padding:23px 25px;max-width:480px;}
.lg-guide-title,.lg-device-heading {display:flex;justify-content:space-between;align-items:center;gap:8px;color:#b7c9df;font-size:10px;font-weight:850;letter-spacing:.14em;}
.lg-guide-title span,.lg-device-heading span {color:#647b96;font-weight:750;font-size:9px;letter-spacing:.08em;}
.lg-guide-step {display:flex;gap:19px;align-items:baseline;color:#9daec6;font-size:12.5px;line-height:1.6;padding-top:16px;}
.lg-guide-step b {color:#55cbe7;font-size:12px;letter-spacing:.045em;}
.lg-guide-step strong {color:#dfedff;font-weight:650;}
.lg-guide-step code {background:rgba(34,211,238,.10);color:#73dfed;border:1px solid rgba(34,211,238,.14);padding:2px 6px;border-radius:5px;font-size:12px;white-space:nowrap;}
.mainContainer.mcContainerStyle {--color1:#10192b;--color2:#101a2b;--color3:#263c56;--color4:#172943;--color5:#152037;--color6:#e8f6ff;
  width:100%;max-width:510px;min-width:0;border:1px solid rgba(140,173,217,.24);border-radius:20px;padding:28px 31px 27px;
  background:linear-gradient(155deg,rgba(24,39,63,.95),rgba(13,23,42,.97));
  box-shadow:0 26px 85px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.05);clip-path:none;overflow:visible;
}
.lg-card-top {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;}
.lg-card-icon {width:47px;height:47px;border-radius:12px;border:1px solid rgba(34,211,238,.24);display:grid;place-items:center;color:#53deee;background:rgba(34,211,238,.085);}
.lg-card-tag {display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.14em;font-weight:850;color:#91a7c6;}
.lg-card-tag-dot {width:6px;height:6px;}
.joinSec.flexContainer {padding:0;text-align:left;align-items:stretch;}
.joinLabel {font-size:28px;line-height:1.3;letter-spacing:-.035em;font-weight:800;color:#f0f6ff;margin:0 0 8px;}
.lg-form-lead {margin:0 0 23px;font-size:12px;line-height:1.6;color:#8f9fb9;}
.lg-sr-only {position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;}
.joinSec .flexSpacer,.joinForm .flexSpacer {display:none;}
.joinForm.flexContainer {display:flex;align-items:stretch;justify-content:flex-start;gap:17px;flex:initial;width:100%;height:auto;margin:0;color:#c6d7ed;}
.joinForm .usernameContainer,.joinForm .passwordContainer,.joinForm .micContainer,.joinForm .speakerContainer {display:flex;flex-direction:column;align-items:stretch;gap:7px;width:100%;}
.joinForm .joinFormLabel {padding:0;font-size:11px;color:#adbed8;letter-spacing:.03em;font-weight:650;}
.joinForm .mcTextboxStyle,.joinForm .mcButtonStyle {image-rendering:auto;box-shadow:none;min-width:0;}
.joinForm .mcTextboxStyle {cursor:text;width:100%;height:45px;padding:0 13px;background:var(--lg-field);border:1px solid #2b3e58;border-radius:8px;color:#eff8ff;font-size:13px;transition:background .15s,border-color .15s,box-shadow .15s;}
.joinForm .mcTextboxStyle:hover {background:#122039;color:#eff8ff;border-color:#49627c;}
.joinForm .mcTextboxStyle:focus,.connectedSec input:focus {background:#101e33;color:#fff;outline:none;border-color:var(--lg-cyan);box-shadow:0 0 0 3px rgba(34,211,238,.13);}
.lg-device-heading {margin:5px 0 -4px;padding-top:20px;border-top:1px solid var(--lg-line);}
.joinForm .micSelect,.joinForm .speakerSelect {width:100%;height:44px;display:block;border:1px solid #2b3e58;border-radius:8px;background:#101b30;box-shadow:none;}
.joinForm .micSelect:hover,.joinForm .speakerSelect:hover {border-color:#5d718f;background:#15243a;}
.joinForm .micSelect select,.joinForm .speakerSelect select {padding:0 34px 0 12px;width:100%;height:100%;font-size:12px;color:#dfebff;text-shadow:none;background:transparent;box-shadow:none;outline-offset:-2px;border:0;border-radius:8px;cursor:pointer;}
.joinForm select option,.connectedSec select option {background:#12223a;color:#eef7ff;}
.joinForm .joinContainer {display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.joinForm .joinBtnContainer.mcButtonStyle {height:48px;width:100%;border:0;border-radius:9px;box-shadow:0 8px 23px rgba(34,211,238,.10);background:linear-gradient(100deg,#22d3ee,#61b6f8 56%,#8b82f6);}
.joinForm .joinBtnContainer:hover {filter:brightness(1.08);}
.joinForm .joinBtnContainer .mcButtonStyleInner {width:100%;padding:0 16px;color:#07111e;font-weight:850;letter-spacing:.025em;text-shadow:none;border:0;border-radius:9px;box-shadow:none;background:transparent;font-size:13px;}
.joinForm .joinBtnContainer .mcButtonStyleInner:focus-visible {outline:3px solid white;outline-offset:3px;}
.lg-https-hint {font-size:11px;line-height:1.65;color:#899bb7;background:rgba(79,116,160,.08);border:1px solid rgba(137,171,218,.10);border-radius:8px;padding:10px 12px;display:flex;align-items:flex-start;gap:8px;}
.lg-https-hint span {color:#73dcea;font-weight:700;}
/* Connected state uses the same controls, no hidden functionality. */
.lg-connected-heading {display:none;margin:2px 0 22px;}
.lg-connected-heading h2 {font-size:28px;color:#f0f6ff;margin:11px 0 4px;letter-spacing:-.035em;}
.lg-connected-heading p {font-size:12px;color:#93a9c4;margin:0;}
.lg-connected-signal {display:flex;align-items:center;gap:9px;letter-spacing:.14em;font-weight:800;color:#7ee2b5;font-size:10px;}
body.connected .lg-layout {display:flex;width:min(700px,calc(100% - 72px));justify-content:center;}
body.connected .mainContainer {max-width:700px;}
body.connected .lg-connected-heading {display:block;}
body.connected .joinForm {gap:8px;}
body.connected .joinSec {padding:0;}
body.connected .joinForm .joinBtnContainer {width:auto;min-width:170px;margin-top:0;height:42px;background:#273650;border:1px solid #35455f;box-shadow:none;}
body.connected .joinForm .joinBtnContainer .mcButtonStyleInner {color:#dae7fa;}
body.connected .joinContainer {justify-content:space-between;}
.statusLabel.connected {color:#6de0b3;font-size:12px;}
.statusLabel.disconnected {color:#fb8787;font-size:12px;}
.connectedSec {padding:18px 0 0;border-top:1px solid var(--lg-line);margin-top:17px;color:#bbcee7;gap:12px;}
.connectedSec .flexDivider {height:10px;width:10px;}
.connectedSec .mcTextStyle1 {font-size:12px;color:#b6c8df;}
.connectedSec .mcButtonStyle,.pttFullscreenSec .mcButtonStyle {height:auto;min-height:40px;border:1px solid #354b67;border-radius:8px;box-shadow:none;background:#142641;image-rendering:auto;}
.connectedSec .mcButtonStyle .mcButtonStyleInner,.pttFullscreenSec .mcButtonStyle .mcButtonStyleInner {min-height:39px;height:auto;padding:9px 13px;background:transparent;box-shadow:none;color:#dcefff;text-shadow:none;border:0;border-radius:7px;font-size:12px;}
.connectedSec .mcButtonStyle:hover,.pttFullscreenSec .mcButtonStyle:hover {background:#1e385a;border-color:#4997b1;}
.connectedSec .mcButtonStyle .mcButtonStyleInner:focus-visible,.pttFullscreenSec button:focus-visible {outline:2px solid var(--lg-cyan);outline-offset:2px;}
.connectedSec .mcTextviewStyle {width:100%;min-height:160px;height:210px;padding:14px;color:#adbed9;background:#0d1729;border:1px solid #253a55;border-radius:9px;box-shadow:none;font:12px/1.65 ui-monospace,Consolas,monospace;overflow-wrap:anywhere;}
.connectedSec .mcTextboxStyle {height:42px;min-width:0;color:#dfe9fa;background:#0e1b30;border:1px solid #2e425f;border-radius:8px;box-shadow:none;font-size:12px;}
.connectedSec .micActivityIndicator {filter:brightness(1);box-shadow:none;}
.connectedSec .micActivityIndicator.active {filter:drop-shadow(0 0 8px rgba(34,211,238,.5));}
.connectedSec .mcCheckboxStyle {background:none;border:0;height:32px;}
.connectedSec .mcCheckboxStyleInner {border-radius:7px;border:1px solid #4a607c;background:#142641;box-shadow:none;height:28px;width:28px;}
.connectedSec .mcCheckboxStyle input:checked + .mcCheckboxStyleInner {background:var(--lg-cyan);}
.pttFullscreenSec.mcDirtBackground {background:linear-gradient(130deg,#080e1b,#111d36) !important;}
.pttFullscreenBtn {border:1px solid rgba(34,211,238,.3)!important;background:rgba(34,211,238,.1)!important;}
.alertOverlay {background:rgba(10,17,31,.96)!important;background-image:none!important;border-bottom:1px solid rgba(247,117,117,.35);color:#f2bdc6;}
.alertOverlayInner {padding:12px 0;}
.alertOverlay h3 {font-size:12px;color:#e8b8bd;text-shadow:none;font-weight:650;}
.mcIconButtonStyle {min-width:0;height:auto;background:#172943;border:1px solid rgba(119,153,197,.18);border-radius:9px;box-shadow:none;image-rendering:auto;}
.mcIconButtonStyle .mcIconButtonStyleInner {padding:8px;display:grid;place-items:center;box-shadow:none;background:transparent;color:#d2dff2;}
.mcIconButtonStyle .mcIconButtonStyleInner:hover {background:rgba(34,211,238,.13);text-shadow:none;border-radius:8px;}
.mcIconButtonStyle .mcIconButtonStyleInner img {width:19px;height:19px;object-fit:contain;image-rendering:auto;}
.lg-footer {width:min(1220px,calc(100% - 72px));margin:0 auto;padding:17px 0 25px;border-top:1px solid rgba(146,164,203,.1);gap:16px;justify-content:flex-start;flex-wrap:wrap;}
.lg-footer-copyright {font-size:10px;letter-spacing:.14em;font-weight:750;color:#667b98;margin-right:auto;}
.lg-footer-copyright span {color:var(--lg-purple);padding:0 4px;}
.footerLink {color:#7c91ae;text-decoration:none;font-size:10px;gap:6px;white-space:nowrap;}
.footerLink:hover {color:#c7e9fb;}
.footerLinkImg {width:14px;height:14px;object-fit:contain;}
.floatingWidgetsOverlay {position:fixed;right:20px;bottom:22px;width:auto;z-index:50;gap:8px;background:rgba(8,14,28,.65);padding:5px;border:1px solid rgba(134,160,199,.12);border-radius:11px;backdrop-filter:blur(10px);}
.floatingWidgetsOverlay .flexSpacer {display:none;}
.floatingWidgetsOverlay .mcIconButtonStyle {background:transparent;border:0;}
.floatingWidgetsOverlay .mcIconButtonStyle .mcIconButtonStyleInner {padding:5px;}
@media (max-width: 980px) {
  .lg-layout {grid-template-columns:minmax(0,1fr) minmax(350px,1fr);gap:28px;}
  .lg-intro h1 {font-size:clamp(43px,5vw,62px);}
  .mainContainer.mcContainerStyle {padding:25px;}
  .lg-guide {padding:20px;}
}
@media (max-width: 760px) {
  .lg-header {width:calc(100% - 38px);padding:17px 0;}
  .lg-header-right {font-size:0;gap:8px;}
  .lg-header-right .lg-beta {font-size:9px;}
  main.flexContainer {padding:26px 0 40px;}
  .lg-layout {display:flex;flex-direction:column;gap:27px;width:calc(100% - 32px);}
  .lg-intro {width:100%;max-width:510px;padding:0;}
  .lg-intro h1 {font-size:clamp(45px,9vw,64px);margin:16px 0 10px;}
  .lg-intro-copy {font-size:14px;line-height:1.65;margin-bottom:15px;}
  .lg-chips {margin-bottom:18px;}
  .lg-guide {display:none;}
  .mainContainer.mcContainerStyle {max-width:510px;width:100%;}
  body.connected .lg-layout {width:calc(100% - 32px);}
  .lg-footer {width:calc(100% - 36px);padding-bottom:80px;justify-content:center;}
  .lg-footer-copyright {width:100%;text-align:center;margin:0 0 8px;}
  .floatingWidgetsOverlay {bottom:11px;right:12px;}
}
@media (max-width: 520px) {
  .lg-brand-text strong {font-size:13px;}
  .lg-brand-mark {width:38px;height:38px;}
  .lg-header-right .lg-beta {margin-left:0;}
  .lg-eyebrow {font-size:9px;}
  .lg-intro h1 {font-size:clamp(43px,12vw,55px);}
  .lg-intro-copy {font-size:13px;}
  .lg-chips span {font-size:9px;padding:7px 9px;}
  .mainContainer.mcContainerStyle {padding:22px 18px 21px;border-radius:16px;}
  .joinForm .usernameContainer,.joinForm .passwordContainer,.joinForm .micContainer,.joinForm .speakerContainer {width:100%;max-width:none;}
  .joinForm .mcTextboxStyle {width:100%;}
  .joinForm .micSelect,.joinForm .speakerSelect {width:100%;}
  .joinLabel {font-size:25px;}
  .lg-device-heading span {font-size:8px;}
  body.connected .connectedSec > .flexRowContainer {flex-wrap:wrap;gap:8px;}
  .footerLinkText {display:inline;}
}
@media (prefers-reduced-motion: no-preference) {
  .lg-pulse,.lg-connected-signal span {animation:lg-breathe 2.4s ease-in-out infinite;}
  @keyframes lg-breathe {50%{opacity:.45;box-shadow:0 0 3px rgba(52,211,153,.28);}}
}