/* Upchatty Kit (2026-10-01) — one look for Upchatty Messenger + Upchatty Meet.
   Dark = "Night Deck", light = "Day Deck". Tokens keep the old variable names so every page themes by variables alone.
   Loaded by index.html and meet.html; bump ?v= on every change (Hostinger caches css/js for days). */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap');

html[data-theme="dark"], html:not([data-theme]) {
  color-scheme: dark;
  --bg:#050816; --bg2:#080d20; --bg3:#0c1330;
  --card:#0b1226; --card2:#101a38; --card3:#16224a;
  --border:#24346a; --border2:#172349;
  --text:#e8eeff; --muted:#93a4d3; --muted2:#5d6c9c;
  --blue:#5b8cff; --blue-l:#8fb2ff; --blue-d:#2f5fe6; --blue-bg:rgba(91,140,255,.14);
  --green:#2ee6a6; --green-bg:rgba(46,230,166,.13);
  --red:#ff5470; --red-bg:rgba(255,84,112,.14);
  --yellow:#ffb84d; --yellow-bg:rgba(255,184,77,.14);
  --purple:#a98bff; --purple-bg:rgba(169,139,255,.15);
  --cyan:#37e0ff; --cyan-bg:rgba(55,224,255,.12);
  --on-accent:#fff;
  --glass:rgba(11,18,38,.72); --glass-line:rgba(120,150,255,.22);
  --stage:#02040c; --shadow:0 18px 50px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(91,140,255,.35), 0 0 22px rgba(91,140,255,.28);
  --grid-line:rgba(91,140,255,.07);
  --sky-a:rgba(59,110,255,.55); --sky-b:rgba(169,139,255,.42); --sky-c:rgba(55,224,255,.30); --sky-wave:.55; --sky-flow:.34;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg:#eef2fb; --bg2:#f6f8fe; --bg3:#e6ecf9;
  --card:#ffffff; --card2:#f3f6fd; --card3:#e8eefb;
  --border:#c3cfec; --border2:#dbe3f5;
  --text:#0c1533; --muted:#52608a; --muted2:#8390b3;
  --blue:#2f63f0; --blue-l:#2552d0; --blue-d:#1f47c2; --blue-bg:rgba(47,99,240,.10);
  --green:#0a9a6b; --green-bg:rgba(10,154,107,.11);
  --red:#dc2550; --red-bg:rgba(220,37,80,.09);
  --yellow:#b86c00; --yellow-bg:rgba(184,108,0,.11);
  --purple:#6d45e0; --purple-bg:rgba(109,69,224,.10);
  --cyan:#0786a8; --cyan-bg:rgba(7,134,168,.10);
  --on-accent:#fff;
  --glass:rgba(255,255,255,.82); --glass-line:rgba(47,99,240,.20);
  --stage:#dfe6f6; --shadow:0 16px 40px rgba(28,45,100,.16);
  --glow:0 0 0 1px rgba(47,99,240,.35), 0 0 18px rgba(47,99,240,.18);
  --grid-line:rgba(47,99,240,.06);
  --sky-a:rgba(47,99,240,.30); --sky-b:rgba(109,69,224,.24); --sky-c:rgba(7,134,168,.20); --sky-wave:.42; --sky-flow:.30;
}
:root { --uc-display:'Chakra Petch', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
        --uc-body:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif; }

/* icons: every icon is paired with a word. <svg class="ic"><use href="#i-mic"/></svg> */
.ic { width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em }
.ic.lg { width:26px; height:26px } .ic.sm { width:16px; height:16px }

/* brand lockup: mark + Upchatty + product word */
.uc-lockup { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); min-width:0 }
.uc-lockup img { width:38px; height:38px; flex:none; filter:drop-shadow(0 6px 12px rgba(59,91,255,.35)) }
.uc-lockup .w { display:flex; flex-direction:column; line-height:1.05; min-width:0 }
.uc-lockup .w b { font-family:var(--uc-display); font-weight:700; -webkit-text-fill-color:currentColor; font-size:19px; letter-spacing:.01em; white-space:nowrap }
.uc-lockup .w b i { font-style:normal; -webkit-text-fill-color:transparent; background:linear-gradient(90deg,var(--blue),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent }
.uc-lockup .w span { font-weight:500; font-family:var(--uc-body); -webkit-text-fill-color:currentColor; font-size:11px; color:var(--muted); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.uc-lockup.sm img { width:28px; height:28px } .uc-lockup.sm .w b { font-size:15px } .uc-lockup.sm .w span { display:none }

.uc-theme-btn { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 12px; border-radius:999px; border:1.5px solid var(--border);
  background:var(--card2); color:var(--muted); font:600 12px var(--uc-display); letter-spacing:.03em; cursor:pointer }
.uc-theme-btn:hover { color:var(--text); border-color:var(--blue) }
html[data-theme="light"] .uc-theme-btn .i-dark, html[data-theme="dark"] .uc-theme-btn .i-light, html:not([data-theme]) .uc-theme-btn .i-light { display:none }

:focus-visible { outline:2px solid var(--cyan); outline-offset:2px }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important } }

/* ── Page backdrop "Signal" (2026-10-01, replaces the grid and the plain orbit lines) ─────────────────────────────
   uc-kit.js builds #uc-sky inside <body class="uc-sky">: three drifting colour glows, three layers of voice-wave
   ribbons along the bottom, and a faint map of how Upchatty flows: Chat → Meet → Transcript → Minutes → AI team. */
body.uc-sky { background:var(--bg) }
#uc-sky { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; contain:strict }
#uc-sky .blob { position:absolute; border-radius:50%; filter:blur(80px); animation:uc-float 28s ease-in-out infinite alternate; will-change:transform }
#uc-sky .b1 { width:52vw; height:52vw; left:-14vw; top:-22vw; background:var(--sky-a) }
#uc-sky .b2 { width:44vw; height:44vw; right:-12vw; top:-16vw; background:var(--sky-b); animation-duration:34s; animation-delay:-9s }
#uc-sky .b3 { width:56vw; height:40vw; left:22vw; bottom:-26vw; background:var(--sky-c); animation-duration:40s; animation-delay:-17s }
@keyframes uc-float { from { transform:translate3d(0,0,0) scale(1) } to { transform:translate3d(4vw,3vw,0) scale(1.12) } }
#uc-sky .wave { position:absolute; left:0; bottom:0; width:200%; height:46vh; min-height:250px; opacity:var(--sky-wave); animation:uc-drift 70s linear infinite; will-change:transform }
#uc-sky .wave.w2 { height:38vh; animation-duration:110s; animation-direction:reverse; opacity:calc(var(--sky-wave) * .8) }
#uc-sky .wave.w3 { height:30vh; animation-duration:150s; opacity:calc(var(--sky-wave) * .65) }
@keyframes uc-drift { to { transform:translate3d(-50%,0,0) } }
#uc-sky .wave path { fill:none; vector-effect:non-scaling-stroke }
#uc-sky .wave .glow { stroke-width:9; opacity:.22 }
#uc-sky .wave .line { stroke-width:1.8 }
#uc-sky .wave .fill { stroke:none; opacity:.5 }
#uc-sky .flow { position:absolute; left:0; right:0; bottom:13vh; width:100%; height:min(34vh,300px); opacity:var(--sky-flow); color:var(--blue-l) }
#uc-sky .flow .trail { fill:none; stroke:currentColor; stroke-width:1.6; stroke-dasharray:3 10; stroke-linecap:round; animation:uc-dash 2.4s linear infinite }
@keyframes uc-dash { to { stroke-dashoffset:-26 } }
#uc-sky .flow .node circle { fill:var(--card); stroke:currentColor; stroke-width:1.6 }
#uc-sky .flow .node svg { fill:none; stroke:var(--cyan); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
#uc-sky .flow text { font:600 15px var(--uc-display); fill:var(--muted); text-anchor:middle }
body.uc-calm #uc-sky .blob, body.uc-calm #uc-sky .wave, body.uc-calm #uc-sky .flow .trail { animation-play-state:paused }
body.uc-calm #uc-sky .flow { display:none }
@media (max-width:700px) { #uc-sky .flow { display:none } #uc-sky .blob { filter:blur(50px) } }
@media (prefers-reduced-motion: reduce) { #uc-sky .blob, #uc-sky .wave, #uc-sky .flow .trail { animation:none } }