@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body, html { width: 100%; height: 100%; background: #000; overflow: hidden; user-select: none; }

/* CÂMERA */
#camera-feed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scaleX(-1); }

/* MARCA D'ÁGUA */
.watermark { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.5); font-size: 14px; z-index: 100; font-weight: bold; text-shadow: 0 0 5px black; pointer-events: auto; cursor: pointer; padding: 5px 15px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.3); }

/* PAINEL SECRETO */
.secret-panel { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(15,15,15,0.98); padding: 25px; border-radius: 20px; z-index: 9999; color: white; border: 1px solid #333; width: 90%; max-width: 350px; text-align: center; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.8); }
.secret-panel h3 { margin-bottom: 15px; font-size: 18px; }

#lang-selector { width: 100%; padding: 12px; margin-bottom: 15px; border-radius: 8px; background: #222; color: white; border: 1px solid #555; font-weight: bold; font-size: 14px; outline: none; }

.host-editor { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; margin-bottom: 15px; text-align: left; }
.host-editor input[type="text"] { width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 6px; border: none; background: #fff; color: #000; font-weight: bold; outline: none; }
.host-editor label { display: block; font-size: 12px; margin-bottom: 5px; color: #ccc; }
.host-editor input[type="file"] { width: 100%; font-size: 12px; color: #ccc; margin-bottom: 10px; outline: none; }

/* Botões do Painel */
.secret-panel button { display: block; width: 100%; margin: 8px 0; padding: 14px; border-radius: 10px; border: none; font-weight: bold; font-size: 14px; cursor: pointer; background: #333; color: white; transition: 0.1s; }
.secret-panel button:active { transform: scale(0.98); opacity: 0.8; }
.secret-panel button.btn-primary { background: #2563eb; }
.secret-panel button.btn-green { background: #10b981; }
.secret-panel button.danger { background: #e11d48; }
.secret-panel button.special { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.secret-panel button.btn-outline { background: transparent; border: 1px solid #555; }

/* UI OVERLAY */
.ig-ui { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }

/* TOPO */
.top-bar { padding: 15px; display: flex; justify-content: space-between; align-items: center; pointer-events: auto; margin-top: env(safe-area-inset-top); }
.host-info { display: flex; align-items: center; gap: 10px; cursor: pointer; background: rgba(0,0,0,0.3); padding: 5px 10px 5px 5px; border-radius: 30px; }
.host-info .avatar img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid white; object-fit: cover; }
.host-info .username { color: white; font-weight: 600; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); display: flex; align-items: center; gap: 5px; }

.metrics { display: flex; align-items: center; gap: 8px; }
.live-badge { background: linear-gradient(45deg, #ff007b, #ff003c); color: white; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.viewer-count { background: rgba(0,0,0,0.5); color: white; padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.close-btn { color: white; font-size: 24px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); margin-left: 5px; }

/* ÁREA INFERIOR */
.bottom-area { padding: 15px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); position: relative; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 100%); pointer-events: auto; width: 100%; }

/* CHAT */
.chat-stream { max-height: 280px; overflow-y: hidden; display: flex; flex-direction: column; justify-content: flex-end; mask-image: linear-gradient(to top, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%); margin-bottom: 15px; }
.chat-msg { color: white; font-size: 14px; line-height: 1.4; margin-bottom: 12px; text-shadow: 0 1px 2px rgba(0,0,0,0.8); animation: slideUp 0.3s ease-out forwards; display: flex; gap: 10px; align-items: flex-start; }
.chat-msg .avatar-small img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.chat-msg span.user { font-weight: 700; opacity: 0.9; }

@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* EVENTOS DO SISTEMA */
.sys-msg { color: #facc15; font-weight: bold; font-size: 14px; text-align: center; margin: 10px 0; background: rgba(0,0,0,0.5); padding: 5px; border-radius: 10px; }
.event-msg { color: rgba(255,255,255,0.7); font-size: 13px; margin-bottom: 10px; padding-left: 5px; font-weight: 500; }
.request-msg { background: rgba(255,255,255,0.15); padding: 8px 10px; border-radius: 10px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.request-msg span { font-size: 13px; opacity: 0.9; color: white; line-height: 1.3; }

/* CONTROLES INFERIORES */
.input-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; }
.comment-input { flex: 1; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 30px; padding: 12px 20px; color: rgba(255,255,255,0.8); font-size: 14px; transition: opacity 0.1s; cursor: pointer; }
.comment-input:active { opacity: 0.5; }

.action-icons { display: flex; gap: 18px; color: white; font-size: 22px; align-items: center; }
.action-icons i { transition: transform 0.1s ease; cursor: pointer; }
.action-icons i:active { transform: scale(0.7); opacity: 0.7; }

/* CORAÇÕES */
.heart-container { position: absolute; bottom: 80px; right: 20px; width: 50px; height: 300px; pointer-events: none; z-index: 5; }
.floating-heart { position: absolute; bottom: 0; font-size: 24px; color: #ff003c; animation: floatUp 2.5s ease-in forwards; opacity: 0; text-shadow: 0 0 2px white; }
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1) translateX(0); } 50% { transform: translateY(-150px) scale(1.2) translateX(15px); } 100% { opacity: 0; transform: translateY(-300px) scale(1) translateX(-15px); } }