:root {
  --bg: #101014;
  --panel: #181824;
  --text: #f5f5f7;
  --muted: #aaa7b7;
  --accent: #3797f0;
  --bubble-source: #3797f0;
  --bubble-dest: #262630;
  --phone: #000;
  --chat-bg: #000;
  --header-bg: #050505;
  --footer-bg: #050505;
  --border: #2b2b39;
  --source-text: #fff;
  --dest-text: #fff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #2b1749 0%, var(--bg) 42%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.page-zlcube {
  background:
    radial-gradient(circle at top, rgba(139,112,255,.26), transparent 42%),
    linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.86)),
    url('assets/bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Poppins', Inter, system-ui, sans-serif;
}

body.page-zlcube::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(139,112,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,112,255,.055) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: zlcubeMatrix 14s linear infinite;
  z-index: -1;
}

body.page-zlcube .controls {
  background: rgba(9, 7, 16, .84);
  border-color: rgba(139,112,255,.25);
  backdrop-filter: blur(18px);
}

body.page-zlcube button {
  background: linear-gradient(135deg, #9a7cff, #5c35ff);
  box-shadow: 0 0 16px rgba(139,112,255,.18);
}

body.page-zlcube .floating { background: rgba(40, 28, 74, .86); }

@keyframes zlcubeMatrix {
  from { transform: translateY(0); }
  to { transform: translateY(42px); }
}
.app { display: grid; grid-template-columns: minmax(320px, 540px) 1fr; gap: 24px; padding: 24px; min-height: 100vh; }
.controls { background: rgba(24, 24, 36, 0.92); border: 1px solid var(--border); border-radius: 24px; padding: 22px; height: fit-content; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.controls h1 { margin: 0 0 6px; }
.controls p { color: var(--muted); margin-top: 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.full { margin-top: 12px; }
input, textarea, select { width: 100%; color: var(--text); background: #0f0f18; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; outline: none; }
textarea { min-height: 250px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
button { border: 0; border-radius: 999px; padding: 10px 16px; color: white; background: #6f35ff; cursor: pointer; font-weight: 700; }
button:hover { filter: brightness(1.12); }
.hint { font-size: 12px; margin-top: 14px !important; }
.stage { display: grid; place-items: center; position: relative; min-height: calc(100vh - 48px); background: transparent; transition: background .18s ease; }
.floating { position: fixed; right: 24px; top: 24px; z-index: 10; background: #252535; }
.phone { width: min(430px, 92vw); height: min(860px, 92vh); background: var(--phone); border: 10px solid rgba(24,20,35,.95); border-radius: 44px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 38px rgba(139,112,255,.14); display: grid; grid-template-rows: 76px 1fr 60px; }
.chatHeader { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.09); background: var(--header-bg); }
.backIcon { display: none; font-size: 34px; line-height: 1; opacity: .85; }
.chatHeader img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #222; }
.chatHeader strong { display: block; font-size: 15px; }
.chatHeader span { color: var(--muted); font-size: 12px; }
.headerIcons { margin-left: auto; color: #ddd; letter-spacing: 8px; white-space: nowrap; }
.chatArea { padding: 18px 14px; overflow-y: auto; background: var(--chat-bg); display: flex; flex-direction: column; gap: 12px; }
.messageRow { display: flex; align-items: flex-end; gap: 8px; animation: pop .24s ease both; }
.messageRow.source { justify-content: flex-end; }
.messageRow.dest { justify-content: flex-start; }
.messageContent { display: grid; gap: 4px; max-width: 72%; }
.source .messageContent { justify-items: end; }
.dest .messageContent { justify-items: start; }
.senderName { font-size: 11px; color: var(--muted); padding: 0 6px; line-height: 1; }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #222; }
.bubble { max-width: 100%; padding: 10px 13px; line-height: 1.28; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.source .bubble { background: var(--bubble-source); color: var(--source-text); border-radius: 18px 18px 4px 18px; }
.dest .bubble { background: var(--bubble-dest); color: var(--dest-text); border-radius: 18px 18px 18px 4px; }
.typing .bubble { min-width: 52px; color: var(--muted); letter-spacing: 2px; }
.chatFooter { border-top: 1px solid rgba(255,255,255,.09); background: var(--footer-bg); display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.chatFooter span { flex: 1; color: #777; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 9px 14px; }
.chatFooter b { font-size: 24px; }
body.hide-controls .controls { display: none; }
body.hide-controls .app { grid-template-columns: 1fr; }
body.hide-controls .stage { min-height: 100vh; }
body.chroma-active { background: var(--chroma, #00ff00); }
body.chroma-active .stage { background: var(--chroma, #00ff00); }
body.chroma-active .app { background: var(--chroma, #00ff00); }
body.chroma-active.hide-controls .floating { background: rgba(0,0,0,.55); }

/* Themes */

body.theme-instagram { --accent:#3797f0; --bubble-source:#3797f0; --bubble-dest:#262630; --chat-bg:#000; --header-bg:#050505; --footer-bg:#050505; --muted:#9a9a9f; }
body.theme-whatsapp { --accent:#25d366; --bubble-source:#005c4b; --bubble-dest:#202c33; --chat-bg:#0b141a; --header-bg:#202c33; --footer-bg:#202c33; --muted:#aebac1; }
body.theme-whatsapp .chatArea { background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 18px 18px; }
body.theme-whatsapp .headerIcons { letter-spacing: 4px; }
body.theme-telegram { --accent:#2aabee; --bubble-source:#2b5278; --bubble-dest:#182533; --chat-bg:#0e1621; --header-bg:#17212b; --footer-bg:#17212b; --muted:#8aa1b4; }
body.theme-teams { --accent:#6264a7; --bubble-source:#6264a7; --bubble-dest:#2f2f3a; --chat-bg:#1b1a24; --header-bg:#252438; --footer-bg:#252438; --muted:#c8c6d8; }
body.theme-teams .bubble { border-radius: 8px; }
body.theme-teams .source .bubble { border-radius: 8px 8px 2px 8px; }
body.theme-twitter { --accent:#1d9bf0; --bubble-source:#1d9bf0; --bubble-dest:#2f3336; --chat-bg:#000; --header-bg:#000; --footer-bg:#000; --muted:#71767b; }
body.theme-twitter .backIcon { display:block; }
body.theme-twitter .bubble { border-radius: 22px; }
body.theme-twitter .source .bubble { border-radius: 22px 22px 4px 22px; }

@keyframes pop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.messageRow.no-avatar .avatar { display:none; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .grid { grid-template-columns: 1fr; } }