:root {
    --primary: #22c55e;
    --bg: #f8fafc;
    --card: rgba(255, 255, 255, 0.8);
    --text: #1e293b;
    --border: rgba(0,0,0,0.05);
}

body { margin: 0; font-family: -apple-system, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }

.screen { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; position: absolute; transition: 0.3s; }
.hidden { display: none !important; }

.glass-card {
    background: var(--card);
    backdrop-filter: blur(10px);
    border: 1px solid white;
    padding: 2rem;
    border-radius: 24px;
    width: 85%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center;
    position: relative;
}

.qr-box { background: white; padding: 10px; display: inline-block; border-radius: 12px; margin: 15px 0; }
.qr-box img { width: 180px; height: 180px; }

.manual-box { display: flex; background: #eee; border-radius: 8px; overflow: hidden; margin: 10px 0; }
.manual-box input { flex: 1; border: none; background: transparent; padding: 8px; font-size: 11px; }
.manual-box button { background: var(--primary); color: white; border: none; padding: 0 15px; cursor: pointer; }

textarea { width: 100%; height: 60px; border-radius: 8px; border: 1px solid #ddd; margin: 10px 0; padding: 8px; font-size: 11px; }

.btn-primary { background: var(--primary); color: white; border: none; width: 100%; padding: 12px; border-radius: 12px; font-weight: bold; cursor: pointer; margin-top: 10px; }
.btn-secondary { background: transparent; color: var(--primary); border: 2px solid var(--primary); width: 100%; padding: 10px; border-radius: 12px; font-weight: bold; margin-top: 10px; cursor: pointer; }
.btn-back { position: absolute; top: 15px; left: 15px; border: none; background: none; font-size: 18px; cursor: pointer; }

/* Chat UI */
#chat-screen { flex-direction: column; }
.glass-nav { width: 100%; padding: 15px; background: var(--card); display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); }
.status-info { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dot { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; }

#chat-messages { flex: 1; width: 100%; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;}
.msg { padding: 10px 15px; border-radius: 15px; max-width: 80%; word-wrap: break-word; }
.msg.sent { align-self: flex-end; background: var(--primary); color: white; }
.msg.received { align-self: flex-start; background: white; border: 1px solid var(--border); }

.chat-input-area { width: 100%; padding: 15px; background: white; display: flex; gap: 10px; box-sizing: border-box; }
#msg-input { flex: 1; border: 1px solid #ddd; border-radius: 20px; padding: 10px 15px; outline: none; }
#btn-send { background: var(--primary); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }

#reader-host, #reader-answer { width: 100%; border-radius: 12px; overflow: hidden; background: #000; }
.qr-box {
    min-height: 200px;
    min-width: 200px;
    background: white;
    padding: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin: 15px 0;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}