/* ═══════════════════════════════════════════════
   ANONYMOUS CHAT — FUTURISTIC UI
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --cyan:    #00e5ff;
    --violet:  #7c3aed;
    --blue:    #0072ff;
    --green:   #00ffaa;
    --red:     #ff3d5a;
    --bg:      #060d1a;
    --surface: rgba(255,255,255,0.04);
    --border:  rgba(0,229,255,0.15);
    --text:    #e2e8f0;
    --muted:   rgba(226,232,240,0.45);
    --radius:  16px;
    --font:    'Inter', sans-serif;
}

html { height: 100%; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    height: 100%;
    overflow: hidden; /* prevent body scroll — each screen handles its own */
}

/* ── ANIMATED BACKGROUND ──────────────────────── */
.background {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,229,255,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(124,58,237,0.09) 0%, transparent 60%),
        linear-gradient(160deg, #060d1a 0%, #0a1628 50%, #0d0a1e 100%);
}

/* ══════════════════════════════════════════════
   TWO SCREENS — each covers full viewport
══════════════════════════════════════════════ */

/* ── HOME SCREEN ──────────────────────────────── */
.screen-home {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 10;
}

.screen-home.hidden { display: none !important; }

.home-inner {
    width: 100%;
    max-width: 440px;
    min-height: 100%;
    padding: 24px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(6,13,26,0.65);
    backdrop-filter: blur(24px);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* ── CHAT SCREEN ──────────────────────────────── */
.screen-chat {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    z-index: 20;
    background: var(--bg);
    /* Safe area support */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.screen-chat.hidden { display: none !important; }

/* ── HEADER ───────────────────────────────────── */
header { text-align: center; padding-bottom: 4px; }

header h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: linear-gradient(90deg, var(--cyan), #a78bfa, var(--cyan));
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}

header p { font-size: 12px; color: var(--muted); letter-spacing: 0.5px; margin-top: 4px; }

@keyframes shimmer { 0% { background-position: 0%; } 100% { background-position: 200%; } }

/* ── ONLINE BADGE ─────────────────────────────── */
.online { text-align: center; font-size: 12px; color: var(--muted); }
.online span { color: var(--green); font-weight: 600; }

/* ── HOLO CARD ────────────────────────────────── */
.futuristic { display: flex; justify-content: center; }

.holo-card {
    position: relative;
    width: 100%; height: 110px;
    border-radius: 20px;
    background: linear-gradient(135deg, #060d1a, #0f172a);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 0 30px rgba(0,229,255,0.1);
    animation: float 5s ease-in-out infinite;
}

.holo-card .ring {
    position: absolute; inset: -50%;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top: 1.5px solid var(--cyan);
    border-bottom: 1.5px solid var(--violet);
    animation: spin 7s linear infinite; opacity: 0.5;
}
.holo-card .ring.delay { animation-duration: 11s; animation-direction: reverse; opacity: 0.3; }
.holo-card .content {
    position: relative; z-index: 2; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
}
.holo-card h3 { font-size: 11px; letter-spacing: 4px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
#featureText {
    margin-top: 6px; font-size: 18px; font-weight: 700;
    background: linear-gradient(90deg, var(--cyan), #a78bfa, var(--green));
    background-size: 300%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite, fadeSlide 2.8s ease-in-out infinite;
}
@keyframes fadeSlide { 0%,100% { opacity:0; transform:translateY(6px); } 15%,85% { opacity:1; transform:translateY(0); } }

/* ── JOIN FORM ────────────────────────────────── */
.join { display: flex; flex-direction: column; gap: 12px; }

.join input, .country-select {
    width: 100%; padding: 14px 16px;
    border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    font-size: 15px; font-family: var(--font); outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}
.join input::placeholder { color: var(--muted); }
.join input:focus, .country-select:focus {
    border-color: rgba(0,229,255,0.5);
    box-shadow: 0 0 0 3px rgba(0,229,255,0.08);
}

.gender-box { display: flex; gap: 10px; }
.gender-btn {
    flex: 1; padding: 13px 8px;
    border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--surface); color: var(--muted);
    font-size: 13px; font-family: var(--font); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.2s ease;
}
.gender-btn:hover { border-color: rgba(0,229,255,0.35); color: var(--text); background: rgba(0,229,255,0.06); }
.gender-btn.active { border-color: var(--cyan); background: rgba(0,229,255,0.1); color: var(--cyan); box-shadow: 0 0 12px rgba(0,229,255,0.15); }
.gender-btn span { font-weight: 600; font-size: 12px; }

.country-box { margin: 0; }
.country-select option { background: #0f172a; color: var(--text); }

#startBtn {
    padding: 15px; border-radius: var(--radius); border: none;
    font-size: 15px; font-weight: 700; font-family: var(--font);
    letter-spacing: 0.5px; cursor: pointer;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #fff; transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 0 20px rgba(0,229,255,0.2);
}
#startBtn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 0 28px rgba(0,229,255,0.35); }
#startBtn:active:not(:disabled) { transform: translateY(0); }
#startBtn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
#startBtn.ready { animation: pulseBtn 1.8s ease-in-out infinite; }
@keyframes pulseBtn {
    0%,100% { box-shadow: 0 0 16px rgba(0,229,255,0.25); }
    50%      { box-shadow: 0 0 32px rgba(0,229,255,0.55); }
}

/* ── WAITING BOX (inline, below Start Chat button) ── */
.waiting-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 0 8px;
    animation: msgIn 0.3s ease-out;
}
.waiting-box.hidden { display: none !important; }

/* ── RADAR ────────────────────────────────────── */
.radar {
    position: relative; width: 72px; height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, #0a1628 30%, #060d1a 70%);
    box-shadow: 0 0 20px rgba(0,229,255,0.2);
    overflow: hidden; margin: auto;
}
.beam {
    position: absolute; top: 50%; left: 50%;
    width: 50%; height: 1.5px;
    background: linear-gradient(90deg, rgba(0,229,255,0.9), transparent);
    transform-origin: left center;
    animation: rotateBeam 2s linear infinite;
}
@keyframes rotateBeam { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.radar .ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(0,229,255,0.3);
    inset: auto; top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0.3); opacity: 0;
    animation: pulseRing 2s ease-out infinite;
}
.r1 { width:60px; height:60px; animation-delay:0s; }
.r2 { width:60px; height:60px; animation-delay:0.6s; }
.r3 { width:60px; height:60px; animation-delay:1.2s; }
@keyframes pulseRing {
    0%   { transform:translate(-50%,-50%) scale(0.2); opacity:1; }
    100% { transform:translate(-50%,-50%) scale(1.4); opacity:0; }
}
.core {
    position: absolute; top:50%; left:50%;
    transform: translate(-50%,-50%);
    width:8px; height:8px; border-radius:50%;
    background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
.match-label { font-size:11px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; text-align:center; }
.match-timer { font-size:18px; font-weight:700; color:var(--cyan); text-align:center; font-variant-numeric:tabular-nums; }

/* ── FOOTER ───────────────────────────────────── */
footer { text-align:center; font-size:11px; color:var(--muted); padding-top:4px; }

/* ── CHAT HEADER ──────────────────────────────── */
.chat-header {
    flex-shrink: 0;
    display: flex; justify-content: center; align-items: center;
    gap: 10px; font-size: 13px;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 12px));
    background: rgba(6,13,26,0.97);
    border-bottom: 1px solid var(--border);
    z-index: 2;
}
.chat-header .you     { color: var(--cyan); font-weight: 600; }
.chat-header .partner { color: #a78bfa; font-weight: 600; }
.chat-header .dot     { color: var(--muted); }

/* Gender tags */
.gender-tag { font-size: 11px; font-weight: 700; margin-left: 2px; padding: 1px 5px; border-radius: 6px; }
.gender-tag.male    { color: #60d4ff; background: rgba(0,180,255,0.15); }
.gender-tag.female  { color: #ff80c8; background: rgba(255,80,180,0.15); }
.gender-tag.na      { color: #b0aaff; background: rgba(124,58,237,0.15); }

/* ── MESSAGES ─────────────────────────────────── */
.messages {
    flex: 1;
    min-height: 0;           /* crucial — lets flex child shrink */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    background-image: url("/static/bg/chat-bgg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.messages::-webkit-scrollbar { width: 4px; }
.messages::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); border-radius: 4px; }

.message {
    max-width: 72%; padding: 10px 14px;
    border-radius: 18px; font-size: 14px; line-height: 1.5;
    word-wrap: break-word; word-break: break-word;
    animation: msgIn 0.2s ease-out;
}
@keyframes msgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.message.stranger {
    align-self: flex-start;
    background: rgba(15,25,45,0.92); border: 1px solid rgba(0,229,255,0.12);
    color: var(--text); border-bottom-left-radius: 4px;
}
.message.me {
    align-self: flex-end;
    background: linear-gradient(135deg, #0072ff, #00c6ff);
    color: #fff; border-bottom-right-radius: 4px;
    box-shadow: 0 4px 14px rgba(0,114,255,0.3);
}
.chat-img { max-width: 160px; border-radius: 10px; cursor: pointer; transition: transform 0.2s; }
.chat-img:hover { transform: scale(1.04); }

/* Typing indicator */
.typing-indicator {
    align-self: flex-start;
    background: rgba(15,25,45,0.92); border: 1px solid rgba(0,229,255,0.12);
    border-radius: 18px; border-bottom-left-radius: 4px;
    padding: 10px 16px;
    animation: msgIn 0.2s ease-out;
}
.typing-dots { display: flex; gap: 5px; align-items: center; }
.typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cyan); opacity: 0.4;
    animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%,60%,100% { transform:translateY(0); opacity:0.4; }
    30%          { transform:translateY(-5px); opacity:1; }
}

/* ── EMOJI PANEL ──────────────────────────────── */
.emoji-panel {
    flex-shrink: 0;
    background: rgba(6,13,26,0.98);
    border-top: 1px solid var(--border);
    padding: 8px 10px;
    max-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}
.emoji-panel.hidden { display: none !important; }

.emoji-tabs {
    display: flex; gap: 6px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tab {
    flex-shrink: 0; padding: 4px 10px;
    border-radius: 20px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted);
    font-size: 20px; cursor: pointer; transition: all 0.15s;
}
.emoji-tab:hover { background: rgba(0,229,255,0.08); }
.emoji-tab.active { border-color: var(--cyan); background: rgba(0,229,255,0.12); box-shadow: 0 0 8px rgba(0,229,255,0.2); }

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 2px; overflow-y: auto; flex: 1;
    scrollbar-width: thin; scrollbar-color: rgba(0,229,255,0.2) transparent;
}
.emoji-item {
    font-size: 22px; padding: 5px; border: none;
    background: transparent; cursor: pointer;
    border-radius: 8px; transition: background 0.12s, transform 0.1s;
    line-height: 1; display: flex; align-items: center; justify-content: center;
}
.emoji-item:hover { background: rgba(0,229,255,0.1); transform: scale(1.2); }
.emoji-item:active { transform: scale(0.95); }

/* ── INPUT BOX ────────────────────────────────── */
.input-box {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    /* Keyboard safe area — the KEY fix for mobile */
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
    background: rgba(6,13,26,0.98);
    border-top: 1px solid var(--border);
    z-index: 5;
}

.input-box input {
    flex: 1; min-width: 0;
    padding: 11px 14px;
    border-radius: 22px; border: 1px solid var(--border);
    background: rgba(255,255,255,0.05); color: var(--text);
    font-family: var(--font); outline: none;
    font-size: 16px; /* 16px prevents iOS auto-zoom */
    transition: border-color 0.2s;
}
.input-box input::placeholder { color: var(--muted); }
.input-box input:focus { border-color: rgba(0,229,255,0.4); }

/* Send button */
.input-box > button:last-child {
    flex-shrink: 0; width: 44px; height: 44px;
    border-radius: 14px; border: none;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #fff; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 0 12px rgba(0,229,255,0.2);
}
.input-box > button:last-child:hover  { transform: scale(1.07); }
.input-box > button:last-child:active { transform: scale(0.93); }

/* End Chat btn */
.end-btn {
    flex-shrink: 0; width: 44px; height: 44px;
    border-radius: 14px; border: 1px solid rgba(255,61,90,0.3);
    background: rgba(255,61,90,0.12); color: var(--red);
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; transition: all 0.2s;
}
.end-btn:hover { background: rgba(255,61,90,0.25); border-color: var(--red); box-shadow: 0 0 14px rgba(255,61,90,0.25); }
.end-btn:active { transform: scale(0.93); }

/* Emoji button */
.emoji-btn {
    flex-shrink: 0; width: 44px; height: 44px;
    border-radius: 14px; border: 1px solid rgba(255,200,0,0.2);
    background: rgba(255,200,0,0.06); color: #ffd700;
    font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; transition: all 0.2s;
}
.emoji-btn:hover { background: rgba(255,200,0,0.14); border-color: #ffd700; transform: scale(1.05); }
.emoji-btn:active { transform: scale(0.93); }

/* Media button */
.media-btn {
    flex-shrink: 0; width: 44px; height: 44px;
    border-radius: 14px; border: 1px solid rgba(0,255,170,0.2);
    background: rgba(0,255,170,0.08); color: var(--green);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; transition: all 0.2s;
}
.media-btn svg { stroke: var(--green); }
.media-btn:hover { background: rgba(0,255,170,0.15); border-color: var(--green); transform: scale(1.05); }
.media-btn:active { transform: scale(0.93); }

/* ── TOAST (in messages) ──────────────────────── */
.chat-toast {
    align-self: center; padding: 6px 14px;
    border-radius: 20px; font-size: 12px;
    background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.2);
    color: var(--muted); animation: msgIn 0.3s ease-out;
}
.chat-toast.warn { background: rgba(255,61,90,0.1); border-color: rgba(255,61,90,0.25); color: #ff8fa0; }

/* ── FLOATING TOAST (no-match) ────────────────── */
.float-toast {
    position: fixed; bottom: 32px; left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: rgba(15,25,45,0.97);
    border: 1px solid rgba(255,61,90,0.5);
    color: var(--text); padding: 13px 24px;
    border-radius: 30px; font-size: 14px; font-weight: 600;
    white-space: nowrap; opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 999; box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    pointer-events: none;
}
.float-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.float-toast.hidden { display: none !important; }

/* ── ANIMATIONS ───────────────────────────────── */
@keyframes spin  { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 480px) {
    .home-inner {
        max-width: 100%;
        border: none;
        padding: 16px 14px 24px;
    }

    header h1 { font-size: 21px; }
    .gender-btn { padding: 11px 6px; font-size: 12px; }
    .holo-card { height: 96px; }
    #featureText { font-size: 15px; }
    .match-timer { font-size: 22px; }

    /* Chat screen — already fixed; just make sure it's truly full height */
    .screen-chat {
        /* On iOS, bottom bar is handled by env(safe-area-inset-bottom) */
    }
}