:root {--bg: #000;--card: #000;--txt:#e7ecff;--muted:#98a2ff;--accent:#7aa2ff;}
*{ box-sizing:border-box }
html,body{height:100%;margin:0;background:var(--bg);color:var(--txt);font-family:Vazirmatn, system-ui, sans-serif;position: relative;}
.app{display: flex;grid-template-columns: 460px 1fr;gap:16px;padding:16px;align-content: stretch;flex-direction: column;}
header{ grid-column:1/-1; }
header h1{ margin:0 0 4px; font-weight:800 }
header .sub{ margin:0; color:var(--muted); }

.ui{background:var(--card);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;display: none;}
.controls{ display:flex; align-items:center; gap:8px; }
.controls button{ background:var(--accent); color:#0b1020; border:0; padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer }
.controls button[disabled]{ opacity:.5; cursor:not-allowed }
#recStatus{ margin-inline-start:auto; color:var(--muted); }

.prompt textarea{ width:100%; height:110px; background:#0f1730; color:var(--txt); border:1px solid #223; border-radius:12px; padding:10px; }
.prompt button{ margin-top:8px; background:#2fe3a0; color:#021; border:0; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer }

.chatlog{ background:#0f1730; border-radius:12px; padding:8px; height:280px; overflow:auto; }
.chatlog .row{ display:grid; grid-template-columns: 84px 1fr; gap:8px; padding:8px; border-bottom:1px dashed #243; }
.chatlog .row .who{ color:#8af; font-weight:800; }
.chatlog .row .msg{ line-height:1.8; }

.avatar-wrap{ background:var(--card); border-radius:16px; padding:16px; position:relative; }
#threeContainer{width:100%;height: calc(100vh - 210px);border-radius:12px;overflow:hidden;background:radial-gradient(60% 60% at 50% 50%, #101b3c, #0a0f24);}
#ttsPlayer{ width:100%; margin-top:8px; }

@media (max-width: 960px){ .app{ grid-template-columns: 1fr; } }
footer {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000000;
    padding: 24px;
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#btnStartRec,#btnStopRec {
    cursor: pointer;
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-top: -60px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 60px;
    padding: 8px;
}
#btnStartRec img, #btnStopRec img{
    width: 44px;
}
#btnStopRec {
    background: #eee;
}

/* Modal برای ثبت‌نام چهره */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-content {
    background: var(--card);
    border-radius: 16px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-content h2 {
    margin: 0 0 16px;
    color: var(--txt);
    font-weight: 700;
}

.modal-content p {
    margin: 0 0 20px;
    color: var(--muted);
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--txt);
    font-weight: 600;
}

.form-group input {
    width: 100%;
    padding: 12px;
    background: #0f1730;
    color: var(--txt);
    border: 1px solid #223;
    border-radius: 8px;
    font-family: Vazirmatn, system-ui, sans-serif;
    font-size: 14px;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.form-actions button {
    flex: 1;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-family: Vazirmatn, system-ui, sans-serif;
}

#btnRegister {
    background: var(--accent);
    color: #0b1020;
}

#btnCancelRegister {
    background: #333;
    color: var(--txt);
}

#btnRegister:hover {
    background: #8bb3ff;
}

#btnCancelRegister:hover {
    background: #444;
}

#facePhotoCanvas {
    border: 2px solid var(--accent);
    background: #0f1730;
}