:root {
    --bg: #000;
    --card-bg: #080808;
    --accent: #ffffff;
    --danger: #ff4444;
    --border: rgba(255, 255, 255, 0.1);
    --text-secondary: #888;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    /* Critical for Mobile PTT: Prevents long-press menus and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body, html { 
    width: 100%; height: 100%; 
    background: var(--bg); color: #fff; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

/* Allow inputs to be selectable so users can actually type their names */
input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* --- Gatekeeper --- */
.gatekeeper-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    z-index: 9999;
    display: flex; justify-content: center; align-items: center;
}

.gatekeeper-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 40px; width: 90%; max-width: 400px;
    text-align: center; border-radius: 4px;
}

#gatekeeper-form input {
    width: 100%; background: #111; border: 1px solid #333;
    padding: 15px; color: #fff; margin-bottom: 15px;
    border-radius: 4px; outline: none; font-size: 16px;
}

.enter-btn {
    width: 100%; padding: 15px; background: var(--accent);
    color: #000; border: none; font-weight: 700;
    text-transform: uppercase; cursor: pointer; border-radius: 4px;
}

/* --- Main App UI --- */
#webcam {
    position: absolute; top: 0; left: 0;
    width: 100vw; height: 100vh; object-fit: cover; z-index: 1;
}

.overlay { position: absolute; z-index: 10; width: 100%; padding: 20px; }
.top-bar { top: 0; display: flex; justify-content: space-between; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); }
.bottom-bar { bottom: 0; text-align: center; padding-bottom: 40px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #444; margin-left: 8px; }
.status-dot.active { background: #4BB543; box-shadow: 0 0 10px #4BB543; }
.status-dot.recording { background: var(--danger); animation: pulse 1s infinite; }

#ptt-button {
    background: var(--accent); color: #000;
    border: none; padding: 20px 60px; font-weight: 700;
    border-radius: 4px; cursor: pointer;
    touch-action: none; /* Prevents scrolling while holding button */
    -webkit-tap-highlight-color: transparent;
}

#feedback-text { margin-bottom: 20px; font-size: 14px; min-height: 1.2em; color: #ccc; }

#log-container {
    position: absolute; right: 20px; top: 80px; width: 280px; 
    max-height: 50vh; background: rgba(0,0,0,0.85);
    border: 1px solid var(--border); padding: 15px;
    overflow-y: auto; font-size: 13px; border-radius: 4px; z-index: 20;
}

.hidden { display: none !important; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

@media (max-width: 600px) {
    #ptt-button { width: 100%; padding: 25px; font-size: 18px; }
}