/*
Theme Name: Talking Theme — Talkly Original Base
Theme URI: https://example.com/talkly
Author: Moon Lab Studio
Author URI: https://example.com
Description: Fork of the RoomNuvo theme, dedicated to the talkly-knowledge-base bundle. Same vibrant landing-page look/PWA/multi-language support — renamed and re-versioned as part of this bundle. Homepage "persona" stats/showcase blocks gracefully show zero/hide if RoomNuvo Chat Engine isn't installed (this bundle doesn't need it) — see functions.php's function_exists() guards. page-templates/page-chat.php and page-rooms.php are also left in from the original theme but require that optional plugin to do anything; talkly-knowledge-base provides its own chat page template independently (see that plugin's includes/content-pages.php) and does not use these two.
Version: 0.8.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: talkly
*/

:root{
  --bg:#0b0b1e;
  --bg-2:#12122b;
  --violet:#7c5cff;
  --pink:#ff5da2;
  --orange:#ffa64d;
  --teal:#3fe0c5;
  --text:#f6f4ff;
  --muted:#a29dc4;
  --line: rgba(246,244,255,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
}
.mono{ font-family:'JetBrains Mono', monospace; letter-spacing:0.02em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.blob{
  position:fixed;
  border-radius:50%;
  filter: blur(90px);
  opacity:0.45;
  z-index:0;
  pointer-events:none;
}
.blob-1{ width:520px; height:520px; background:var(--violet); top:-180px; left:-140px; animation: float1 22s ease-in-out infinite; }
.blob-2{ width:460px; height:460px; background:var(--pink); top:20%; right:-180px; animation: float2 26s ease-in-out infinite; }
.blob-3{ width:400px; height:400px; background:var(--teal); bottom:-160px; left:20%; animation: float3 30s ease-in-out infinite; }
@keyframes float1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(60px,80px);} }
@keyframes float2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-70px,50px);} }
@keyframes float3{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(50px,-60px);} }

nav, section, footer{ position:relative; z-index:1; }

nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 6vw;
  flex-wrap:wrap; gap:14px;
}
.logo{
  font-family:'Space Grotesk', sans-serif;
  font-size:22px; font-weight:700;
  display:flex; align-items:center; gap:9px;
}
.logo-mark{
  width:26px; height:26px;
  display:block; flex-shrink:0;
  object-fit:contain;
}
.nav-links{ display:flex; gap:32px; font-size:14px; font-weight:600; color:var(--muted); list-style:none; }
.nav-links a:hover{ color:var(--text); }

/* Hamburger toggle — hidden by default, only shown ≤980px (see media
   query below, alongside where .nav-links collapses into a panel). */
.talkly-nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  border:1px solid var(--line); background:rgba(255,255,255,0.03);
  color:var(--text); cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
}
.talkly-nav-toggle svg{ width:20px; height:20px; }
.talkly-nav-toggle .icon-close{ display:none; }
.talkly-nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.talkly-nav-toggle[aria-expanded="true"] .icon-close{ display:block; }
.talkly-nav-toggle:hover{ border-color:rgba(246,244,255,0.4); background:rgba(255,255,255,0.06); }

.nav-cta{
  font-size:14px; font-weight:700;
  padding:11px 24px;
  border-radius:100px;
  background: linear-gradient(90deg, var(--violet), var(--pink));
  color:#fff;
  box-shadow: 0 8px 24px -8px rgba(124,92,255,0.6);
  transition: transform .2s ease;
}
.nav-cta:hover{ transform:translateY(-2px); }

.hero{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:50px;
  padding:60px 6vw 110px;
  align-items:center;
  min-height:78vh;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
  padding:7px 16px 7px 8px;
  border-radius:100px;
  background: rgba(124,92,255,0.12);
  border:1px solid rgba(124,92,255,0.3);
  color:#c9bfff;
  margin-bottom:24px;
}
.eyebrow .flag-dot{
  width:18px;height:18px;border-radius:50%;
  background: conic-gradient(var(--violet), var(--pink), var(--orange), var(--teal), var(--violet));
}
.hero h1{ font-size:clamp(38px, 5vw, 66px); line-height:1.06; margin-bottom:24px; }
.grad-text{
  background: linear-gradient(90deg, var(--violet), var(--pink) 45%, var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ font-size:18px; line-height:1.7; color:var(--muted); max-width:480px; margin-bottom:36px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.btn-primary{
  background: linear-gradient(90deg, var(--violet), var(--pink));
  color:#fff; font-weight:700; font-size:16px;
  padding:16px 32px; border-radius:100px;
  display:inline-flex; align-items:center; gap:10px;
  box-shadow: 0 10px 30px -10px rgba(124,92,255,0.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow: 0 16px 36px -10px rgba(255,93,162,0.55); }
.btn-ghost{
  padding:16px 28px; border-radius:100px;
  border:1px solid var(--line); font-weight:600; font-size:16px;
  transition: border-color .2s ease, background .2s ease;
}
.btn-ghost:hover{ border-color:rgba(246,244,255,0.4); background:rgba(255,255,255,0.04); }
#talkly-mic-btn:hover{ color:var(--text); background:rgba(255,255,255,0.06); }

/* Social share widget — single toggle button + popover panel */
.talkly-share{ position:relative; display:inline-block; }
.talkly-share-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:100px;
  border:1px solid var(--line); background:rgba(255,255,255,0.03);
  color:var(--text); font-weight:600; font-size:13px; font-family:inherit;
  cursor:pointer; transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.talkly-share-toggle svg{ width:16px; height:16px; flex-shrink:0; color:var(--muted); transition:color .2s ease; }
.talkly-share-toggle:hover{ border-color:rgba(246,244,255,0.4); background:rgba(255,255,255,0.06); }
.talkly-share-toggle:hover svg{ color:var(--text); }
.talkly-share-toggle[aria-expanded="true"]{ border-color:var(--violet); background:rgba(124,92,255,0.12); }
.talkly-share-toggle[aria-expanded="true"] svg{ color:var(--violet); }

.talkly-share-panel{
  position:absolute; top:calc(100% + 10px); left:0; z-index:60;
  display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  width:248px; padding:12px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,0.65);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(0.96);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.talkly-share-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.talkly-share-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 4px 8px; border-radius:12px; border:1px solid transparent;
  background:transparent; color:var(--muted); font-family:inherit;
  font-size:10.5px; font-weight:600; line-height:1.2; text-align:center;
  cursor:pointer; transition: background .18s ease, color .18s ease, transform .18s ease;
}
.talkly-share-item svg{ width:20px; height:20px; }
.talkly-share-item:hover{ background:rgba(255,255,255,0.06); color:var(--text); transform:translateY(-2px); }
.talkly-share-item[data-network="line"]:hover{ color:#06C755; }
.talkly-share-item[data-network="facebook"]:hover{ color:#1877F2; }
.talkly-share-item[data-network="x"]:hover{ color:var(--text); }
.talkly-share-item[data-network="whatsapp"]:hover{ color:#25D366; }
.talkly-share-item[data-network="telegram"]:hover{ color:#2AABEE; }
.talkly-copy-link.is-copied{ color:var(--teal); }

@media (max-width:420px){
  .talkly-share-panel{ width:224px; grid-template-columns:repeat(3,1fr); }
}

/* Chat input word-autocomplete suggestion chips */
#talkly-ac-suggestions{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(100% + 10px);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events:none;
}
#talkly-ac-suggestions.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.talkly-ac-chip{
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line);
  border-radius:100px;
  padding:6px 14px;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.talkly-ac-chip:hover,
.talkly-ac-chip:focus-visible{
  border-color:transparent;
  background:linear-gradient(90deg, var(--violet), var(--pink));
  transform:translateY(-1px);
  outline:none;
}
.talkly-ac-chip:active{ transform:translateY(0); }
#talkly-mic-btn.is-listening{ color:#ff5da2; }
#talkly-mic-btn.is-listening::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid #ff5da2; animation:mic-pulse 1.2s ease-out infinite;
}
@keyframes mic-pulse{ 0%{ transform:scale(0.8); opacity:0.8; } 100%{ transform:scale(1.5); opacity:0; } }
#talkly-mic-lang-debug{
  position:absolute; left:0; bottom:calc(100% + 8px);
  background:linear-gradient(135deg, rgba(124,92,255,0.9), rgba(255,93,162,0.9));
  color:#fff; font-size:11px; font-weight:600; letter-spacing:.02em;
  padding:4px 10px; border-radius:100px; white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(255,93,162,0.6);
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
#talkly-mic-lang-debug::after{
  content:''; position:absolute; top:100%; left:14px;
  border:5px solid transparent; border-top-color:#ff5da2;
}
#talkly-mic-lang-debug.is-visible{ opacity:1; transform:translateY(0); }
.lang-strip{ display:flex; gap:10px; flex-wrap:wrap; }
.lang-pill{ font-size:12px; font-weight:600; color:var(--muted); padding:6px 12px; border-radius:100px; border:1px solid var(--line); }

.chat-window{
  background: rgba(18,18,43,0.75);
  backdrop-filter: blur(20px);
  border:1px solid var(--line);
  border-radius:22px; padding:22px; max-width:420px; justify-self:end;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
  position:relative;
}
.chat-header{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.chat-header-id{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto; }
.avatar{ width:36px; height:36px; border-radius:50%; background: conic-gradient(var(--violet), var(--pink), var(--orange), var(--teal), var(--violet)); flex-shrink:0; }
.chat-header-titles{ min-width:0; }
.chat-header .name{
  font-weight:700; font-size:15px; font-family:'Space Grotesk',sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-header .status{
  font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-header .status::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0; }
.chat-header-back{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0; order:2;
  padding:9px 18px 9px 14px; border-radius:100px;
  background: linear-gradient(90deg, rgba(124,92,255,0.18), rgba(255,93,162,0.18));
  border:1px solid rgba(124,92,255,0.4);
  color:var(--text); font-weight:700; font-size:13px; font-family:inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.chat-header-back svg{ width:15px; height:15px; flex-shrink:0; transition: transform .2s ease; }
.chat-header-back:hover{
  border-color: var(--pink);
  background: linear-gradient(90deg, rgba(124,92,255,0.32), rgba(255,93,162,0.32));
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(255,93,162,0.5);
}
.chat-header-back:hover svg{ transform: translateX(-3px); }
.chat-header-back:active{ transform: translateY(0); box-shadow:none; }
.chat-header-quota{
  flex-basis:100%; order:3;
  font-size:12px; color:var(--muted); text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (min-width:481px){
  .chat-header-quota{ flex-basis:auto; margin-left:auto; order:2; }
  .chat-header-back{ order:3; }
}
.bubble{ max-width:82%; padding:12px 16px; border-radius:16px; font-size:14.5px; line-height:1.55; margin-bottom:10px; opacity:0; animation: rise 0.5s ease forwards; }
.bubble.bot{ background: linear-gradient(135deg, rgba(124,92,255,0.25), rgba(255,93,162,0.2)); border:1px solid rgba(124,92,255,0.3); border-bottom-left-radius:4px; }
.bubble-text{ display:block; white-space:pre-wrap; }
/* Report and listen sit at OPPOSITE ends of this row, not grouped
   together on one side — each button's own margin does the positioning
   (see below), not a margin on this container. That matters for bubbles
   with no report button at all (messageId undefined in fillBotBubble(),
   chat.js): listen's own margin-left:auto still pushes it to the right
   on its own, with no group to be part of. */
.bubble-actions{ display:flex; align-items:center; gap:6px; margin-top:6px; }
.bubble-report-btn{ margin-right:auto; }
.bubble-listen-btn{ margin-left:auto; }
.bubble-listen-btn, .bubble-report-btn{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  padding:0; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,0.04); color:rgba(246,244,255,0.55);
  cursor:pointer; transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.bubble-listen-btn:hover:not(:disabled), .bubble-report-btn:hover:not(:disabled){ color:var(--text); background:rgba(255,255,255,0.08); }
.bubble-listen-btn:disabled, .bubble-report-btn:disabled{ opacity:0.3; cursor:not-allowed; }
.bubble-listen-btn.is-speaking{ color:#ff5da2; border-color:rgba(255,93,162,0.4); background:rgba(255,93,162,0.12); }
.bubble-listen-btn.is-speaking svg{ animation: talkly-speak-pulse 1.1s ease-in-out infinite; }
@keyframes talkly-speak-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }
/* Report button, once successfully reported — same muted-pink treatment
   as the listen button's own "active" state above, for visual
   consistency between the two bubble actions. Not re-clickable (see
   the report-click handler in chat.js, which never re-enables the
   button after a successful/duplicate report). */
.bubble-report-btn.is-reported{ color:#ff5da2; border-color:rgba(255,93,162,0.4); background:rgba(255,93,162,0.12); cursor:default; }
/* Edge TTS server round-trip fallback — see talklyEdgeTTS in chat.js.
   Only ever shown briefly between click and audio arriving; Web Speech
   API playback (the .is-speaking state above) never shows this since it
   starts instantly with no network round trip. */
.bubble-listen-btn.is-loading{ color:rgba(246,244,255,0.55); cursor:wait; }
.bubble-listen-btn.is-loading svg{ animation: talkly-listen-spin 0.9s linear infinite; }
@keyframes talkly-listen-spin{ to{ transform: rotate(360deg); } }

/* Static hint under the chat input — shortened per-language text (see
   languages/*.php) is the main fix for not wrapping; the clamp() and
   ellipsis here are a safety net for unusually narrow viewports or a
   visitor's browser zoom, not the primary fix. */
.talkly-lang-hint{
  font-size: clamp(10.5px, 3.2vw, 12px);
  color: var(--muted); margin-top:6px; text-align:center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 12px;
}

/* Network status banner — see chat.js's online/offline listeners.
   Amber while offline (persists, not a toast, since the condition
   persists too); green "back online" confirmation auto-fades since
   that one's just a momentary acknowledgment. */
.offline-banner{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; margin-bottom:10px;
  border-radius:12px; font-size:13px; font-weight:600;
  animation: none;
}
.offline-banner.is-offline{
  background:rgba(255,166,77,0.12); border:1px solid rgba(255,166,77,0.35); color:#ffc98a;
}
.offline-banner.is-online{
  background:rgba(63,224,197,0.12); border:1px solid rgba(63,224,197,0.35); color:var(--teal);
  animation: talkly-banner-fade 3s ease forwards;
}
@keyframes talkly-banner-fade{ 0%,70%{ opacity:1; } 100%{ opacity:0; } }
.bubble.me{ background: rgba(255,255,255,0.06); margin-left:auto; border-bottom-right-radius:4px; }
.bubble.system{ max-width:90%; margin:6px auto 10px; text-align:center; background:rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.15); color:rgba(255,255,255,0.55); font-style:italic; font-size:13px; border-radius:12px; }
.b1{ animation-delay:0.3s; } .b2{ animation-delay:1.1s; } .b3{ animation-delay:1.9s; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.typing{ display:inline-flex; gap:4px; background: rgba(124,92,255,0.25); border:1px solid rgba(124,92,255,0.3); padding:14px 16px; border-radius:16px; border-bottom-left-radius:4px; width:fit-content; opacity:0; animation: rise 0.4s ease forwards; animation-delay:2.6s; }
.typing span{ width:6px; height:6px; border-radius:50%; background:#fff; animation: bounce 1.2s infinite ease-in-out; }
.typing span:nth-child(2){ animation-delay:0.15s; } .typing span:nth-child(3){ animation-delay:0.3s; }
@keyframes bounce{ 0%,60%,100%{ transform:translateY(0); opacity:0.5;} 30%{ transform:translateY(-4px); opacity:1;} }

section{ padding:100px 6vw; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,3.6vw,44px); line-height:1.15; }
.section-head p{ color:var(--muted); font-size:17px; margin-top:18px; line-height:1.7; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:100px; }
.stat{ background:var(--bg-2); padding:32px 26px; }
.stat .num{ font-family:'Space Grotesk',sans-serif; font-size:34px; font-weight:700; }
.stat:nth-child(1) .num{ color:var(--violet); }
.stat:nth-child(2) .num{ color:var(--pink); }
.stat:nth-child(3) .num{ color:var(--orange); }
.stat:nth-child(4) .num{ color:var(--teal); }
.stat .label{ font-size:13px; color:var(--muted); margin-top:6px; }

.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feature{ background: rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:18px; padding:30px 24px; transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.feature:hover{ transform:translateY(-6px); background: rgba(255,255,255,0.05); }
.feature:nth-child(1){ border-color: rgba(124,92,255,0.35); }
.feature:nth-child(2){ border-color: rgba(255,93,162,0.35); }
.feature:nth-child(3){ border-color: rgba(255,166,77,0.35); }
.feature:nth-child(4){ border-color: rgba(63,224,197,0.35); }
.feature-icon{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:18px; }
.feature:nth-child(1) .feature-icon{ background:rgba(124,92,255,0.2); }
.feature:nth-child(2) .feature-icon{ background:rgba(255,93,162,0.2); }
.feature:nth-child(3) .feature-icon{ background:rgba(255,166,77,0.2); }
.feature:nth-child(4) .feature-icon{ background:rgba(63,224,197,0.2); }
.feature h3{ font-size:18px; margin-bottom:10px; font-family:'Space Grotesk',sans-serif; }
.feature p{ font-size:14px; color:var(--muted); line-height:1.6; }

.personas{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.persona-card{ background: rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:18px; padding:26px 22px; transition: transform .3s ease, box-shadow .3s ease; }
.persona-card:hover{ transform:translateY(-6px) scale(1.02); }
.persona-avatar{ width:44px; height:44px; border-radius:50%; margin-bottom:18px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.p1 .persona-avatar{ background:conic-gradient(var(--violet), var(--pink)); box-shadow:0 8px 24px -8px rgba(124,92,255,0.5); }
.p2 .persona-avatar{ background:conic-gradient(var(--pink), var(--orange)); box-shadow:0 8px 24px -8px rgba(255,93,162,0.5); }
.p3 .persona-avatar{ background:conic-gradient(var(--orange), var(--teal)); box-shadow:0 8px 24px -8px rgba(255,166,77,0.5); }
.p4 .persona-avatar{ background:conic-gradient(var(--teal), var(--violet)); box-shadow:0 8px 24px -8px rgba(63,224,197,0.5); }
.p5 .persona-avatar{ background:conic-gradient(var(--violet), var(--orange)); box-shadow:0 8px 24px -8px rgba(124,92,255,0.5); }
.persona-card h3{ font-size:16px; margin-bottom:8px; font-family:'Space Grotesk',sans-serif; }
.persona-card p{ font-size:13.5px; color:var(--muted); line-height:1.6; }
.persona-tag{ display:inline-block; margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:11px; padding:4px 10px; border-radius:100px; border:1px solid var(--line); color:var(--muted); }
.persona-rank-ribbon{
  position:absolute; top:14px; right:14px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;
  padding:4px 10px; border-radius:100px; color:#1a1025;
  background:linear-gradient(90deg, var(--orange), var(--pink));
  box-shadow:0 4px 14px -4px rgba(255,93,162,0.5);
  white-space:nowrap;
}

/* Optional longer write-up on a persona's single page (the_content()) —
   basic paragraph/list/heading spacing since the global reset (*{margin:0})
   otherwise collapses everything from the WP editor together. */
.persona-content p{ margin-bottom:14px; }
.persona-content p:last-child{ margin-bottom:0; }
.persona-content ul, .persona-content ol{ margin:0 0 14px 20px; }
.persona-content li{ margin-bottom:6px; }
.persona-content h2, .persona-content h3{ color:var(--text); margin:20px 0 10px; font-family:'Space Grotesk',sans-serif; }
.persona-content h2:first-child, .persona-content h3:first-child{ margin-top:0; }
.persona-content a{ color:var(--pink); text-decoration:underline; }
.persona-content strong{ color:var(--text); }

/* Blog listing (page-templates/page-blog.php) */
.blog-list{ display:flex; flex-direction:column; gap:16px; max-width:760px; }
.blog-card{
  display:flex; gap:20px; align-items:flex-start;
  background: rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:18px;
  padding:20px; transition: transform .25s ease, border-color .25s ease;
}
.blog-card:hover{ transform:translateY(-3px); border-color:rgba(246,244,255,0.25); }
.blog-card-thumb{ width:120px; height:120px; border-radius:14px; overflow:hidden; flex-shrink:0; }
.blog-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-body{ min-width:0; }
.blog-card-date{ font-size:12px; color:var(--muted); margin-bottom:6px; font-family:'JetBrains Mono',monospace; }
.blog-card h2{ font-size:18px; margin-bottom:8px; font-family:'Space Grotesk',sans-serif; }
.blog-card p{ font-size:14px; color:var(--muted); line-height:1.6; }
.blog-pagination{ display:flex; gap:10px; justify-content:center; margin-top:30px; }
@media (max-width:520px){
  .blog-card{ flex-direction:column; }
  .blog-card-thumb{ width:100%; height:180px; }
}

.cta-band{
  text-align:center;
  background: linear-gradient(160deg, rgba(124,92,255,0.14), rgba(255,93,162,0.10) 50%, rgba(255,166,77,0.08));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:28px; margin:0 6vw; padding:90px 6vw;
}
.cta-band h2{ font-size:clamp(30px,4.4vw,50px); margin-bottom:20px; }
.cta-band p{ color:var(--muted); max-width:480px; margin:0 auto 32px; line-height:1.7; }
.cta-band .btn-primary{ margin:0 auto; }

footer{ padding:40px 6vw; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:13px; flex-wrap:wrap; gap:16px; }
.footer-langs{ display:flex; gap:8px; }
.footer-langs span,.footer-langs a{
  padding:5px 12px; border-radius:100px; font-size:11px; font-weight:600;
  text-decoration:none; color:var(--muted); border:1px solid var(--line);
  letter-spacing:.03em; transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.footer-langs a:hover{ color:var(--text); border-color:rgba(246,244,255,0.35); background:rgba(255,255,255,0.05); }
.footer-langs span.is-current{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--violet), var(--pink));
  box-shadow:0 4px 14px -4px rgba(255,93,162,0.55);
}

.talkly-lang-switcher{ position:relative; display:inline-block; }
.talkly-lang-switcher summary{
  list-style:none; cursor:pointer; user-select:none;
  background:transparent; color:var(--text);
  border:1px solid var(--line); border-radius:100px;
  padding:6px 14px; font-size:12px; font-weight:600; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
  transition:border-color .2s ease, background .2s ease;
}
.talkly-lang-switcher summary::-webkit-details-marker{ display:none; }
.talkly-lang-switcher summary::after{
  content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s ease;
}
.talkly-lang-switcher[open] summary::after{ transform:rotate(-135deg) translateY(1px); }
.talkly-lang-switcher summary:hover{ border-color:rgba(246,244,255,0.35); background:rgba(255,255,255,0.05); }
.talkly-lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:40;
  min-width:140px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:14px; padding:6px; display:flex; flex-direction:column; gap:2px;
  box-shadow:0 20px 45px -15px rgba(0,0,0,0.6);
}
.talkly-lang-menu a,.talkly-lang-menu span{
  display:block; padding:8px 12px; border-radius:9px; font-size:13px; font-weight:500;
  text-decoration:none; color:var(--text);
}
.talkly-lang-menu a:hover{ background:rgba(255,255,255,0.06); }
.talkly-lang-menu span.is-current{
  color:#fff; font-weight:700;
  background:linear-gradient(135deg, var(--violet), var(--pink));
}

@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; padding-top:20px; }
  .chat-window{ justify-self:start; width:100%; max-width:none; }
  .features{ grid-template-columns:1fr 1fr; }
  .personas{ grid-template-columns:repeat(2,1fr); }
  /* Homepage preview only (index.php adds this second class) — horizontal
     swipe instead of stacking into more and more rows as personas are
     added. The full archive page and the My Rooms picker keep the plain
     .personas grid above untouched, since those need to show everything
     in a browsable list, not a curated horizontal taste of it. */
  .personas.personas-scroll{
    display:flex; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    gap:14px; padding-bottom:4px; margin:0 -5vw; padding-left:5vw; padding-right:5vw;
  }
  .personas.personas-scroll::-webkit-scrollbar{ display:none; }
  .personas.personas-scroll .persona-card{
    flex:0 0 auto; width:64vw; max-width:240px; scroll-snap-align:start;
  }
  .stats{ grid-template-columns:1fr 1fr; }
  .talkly-nav-toggle{ display:inline-flex; order:1; }
  .nav-links{
    display:none; order:5; flex-basis:100%;
    flex-direction:column; gap:2px;
    margin-top:14px; padding:10px;
    background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ display:block; padding:12px 14px; border-radius:10px; }
  .nav-links a:hover{ background:rgba(255,255,255,0.06); }
}
@media (max-width: 520px){
  .features{ grid-template-columns:1fr; }
  .personas{ grid-template-columns:1fr; }
  .personas.personas-scroll{ grid-template-columns:none; } /* keep the horizontal-scroll layout from the 980px block; only the plain (non-homepage) grid stacks to 1 column here */
  .stats{ grid-template-columns:1fr; }
  nav{ padding:22px 5vw; }
  section{ padding:70px 5vw; }
  .cta-band{ margin:0 4vw; padding:60px 5vw; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
}
a:focus-visible, button:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }

/* PWA install card — see assets/js/pwa-install.js. Fixed to the bottom
   so it reads as a toast/sheet rather than a blocking modal; the person
   can keep reading/using the page behind it. */
#talkly-install-card{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  max-width:420px; margin:0 auto;
  background: linear-gradient(160deg, var(--bg-2), #1a1a3a);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6);
  opacity:0; transform:translateY(16px);
  transition: opacity .25s ease, transform .25s ease;
}
#talkly-install-card.is-visible{ opacity:1; transform:translateY(0); }
.talkly-install-body{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.talkly-install-icon{ width:44px; height:44px; border-radius:12px; flex-shrink:0; }
.talkly-install-text strong{ display:block; font-size:14.5px; margin-bottom:4px; }
.talkly-install-text p{ font-size:13px; color:var(--muted); line-height:1.5; margin:0; }
.talkly-install-actions{ display:flex; gap:10px; justify-content:flex-end; }
.talkly-install-actions .btn-primary, .talkly-install-actions .btn-ghost{
  padding:9px 18px; font-size:13px;
}
#talkly-install-card .talkly-install-dismiss{
  padding:9px 18px; font-size:13px;
}
#talkly-install-card[role="dialog"] .talkly-install-body + .talkly-install-dismiss{
  width:100%; /* iOS variant: single full-width "Got it" button, no confirm action to pair it with */
}

/* Persistent manual install entry point — e.g. on My Rooms. Hidden by
   default; pwa-install.js reveals it only once it has confirmed there's
   actually something installable (deferredPrompt captured, or iOS
   Safari). A visible-but-broken button would be worse than none. */
#talkly-install-btn{ display:none; }

/* =========================================================
 * AGE-CONFIRMATION GATE (see talkly_render_age_gate() in functions.php)
 * ========================================================= */
#talkly-age-gate{
  position:fixed; inset:0; z-index:9999;
  background: rgba(11,11,30,0.92);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.talkly-age-gate-card{
  max-width:420px; width:100%;
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px 28px;
  text-align:center;
}
.talkly-age-gate-card h2{
  font-size:22px; margin-bottom:14px;
}
.talkly-age-gate-card p{
  color:var(--muted); font-size:15px; line-height:1.6; margin-bottom:22px;
}
.talkly-age-gate-actions{
  display:flex; flex-direction:column; gap:12px; margin-bottom:18px;
}
.talkly-age-gate-actions .btn-primary,
.talkly-age-gate-actions .btn-ghost{
  width:100%; justify-content:center; padding:14px 24px; font-size:15px;
  cursor:pointer; border-width:1px; border-style:solid; border-color:transparent;
  font-family:inherit;
}
.talkly-age-gate-actions .btn-ghost{ border-color:var(--line); background:transparent; color:var(--text); }
.talkly-age-gate-fine{ font-size:12px !important; margin-bottom:0 !important; }
.talkly-age-gate-fine a{ color:var(--teal); text-decoration:underline; }

/* =========================================================
 * COOKIE CONSENT BANNER (see talkly_render_cookie_consent_banner() in
 * functions.php) — bottom bar, not a full-screen blocker like the age
 * gate, since stacking two full-page overlays on entry would be exactly
 * the kind of consent-fatigue dark pattern PDPA's "no pressure" rule is
 * meant to discourage.
 * ========================================================= */
#talkly-cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9998;
  max-width:640px; margin:0 auto;
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 22px;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.5);
}
#talkly-cookie-banner p{
  color:var(--text); font-size:14px; line-height:1.6; margin-bottom:14px;
}
.talkly-cookie-banner-actions{
  display:flex; gap:10px; flex-wrap:wrap;
}
.talkly-cookie-banner-actions .btn-primary,
.talkly-cookie-banner-actions .btn-ghost{
  padding:10px 22px; font-size:14px; cursor:pointer;
  border-width:1px; border-style:solid; border-color:transparent;
  font-family:inherit;
}
.talkly-cookie-banner-actions .btn-ghost{ border-color:var(--line); background:transparent; color:var(--text); }


/* Talking Theme 0.8.0 — minimal bridge only; Talkly original visual rules remain the base. */
.talking-theme-chat-bridge,.talking-theme-rooms-bridge{max-width:640px;margin:0 auto}
.talking-theme-chat-bridge .talking-chat-shell,.talking-theme-rooms-bridge .talking-chat-shell{max-width:none}
.talking-theme-chat-bridge .talking-chat-rooms,.talking-theme-chat-bridge .talking-chat-toolbar,.talking-theme-chat-bridge .talking-chat-actions,.talking-theme-chat-bridge .talking-chat-confirm,.talking-theme-chat-bridge .talking-chat-context-chips{display:none!important}
.talking-theme-rooms-bridge .talking-chat-agent,.talking-theme-rooms-bridge .talking-chat-context-chips,.talking-theme-rooms-bridge .talking-chat-boundary-note,.talking-theme-rooms-bridge .talking-chat-history,.talking-theme-rooms-bridge .talking-chat-composer,.talking-theme-rooms-bridge .talking-chat-actions,.talking-theme-rooms-bridge .talking-chat-status,.talking-theme-rooms-bridge .talking-chat-confirm{display:none!important}
.talking-theme-rooms-bridge .talking-chat-shell{padding:0;border:0;box-shadow:none;background:transparent}