*{box-sizing:border-box}:root{--bg-main:#070b14;--bg-card:#0f172a;--bg-card-soft:#111c33;--bg-messages:#0b1220;--bg-input:#111827;--border-soft:rgba(148,163,184,.18);--text-main:#f8fafc;--text-muted:#94a3b8;--green:#22c55e;--orange:#f59e0b}
body{margin:0;font-family:Arial,sans-serif;background:radial-gradient(circle at top left,rgba(14,165,233,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(245,158,11,.12),transparent 36%),var(--bg-main);color:var(--text-main)}.is-hidden{display:none!important}
.chat-page{min-height:100vh;height:100vh;display:flex;align-items:stretch;justify-content:center;padding:0}.chat-box{width:80%;min-width:320px;height:100vh;background:var(--bg-card);border-left:1px solid var(--border-soft);border-right:1px solid var(--border-soft);box-shadow:0 0 55px rgba(0,0,0,.42);display:flex;flex-direction:column;overflow:hidden}
.chat-header{min-height:92px;padding:18px 24px;background:linear-gradient(135deg,#08111f 0%,#0f1b32 100%);display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--border-soft)}.header-left{display:flex;align-items:center;gap:16px;min-width:0}.logo-slot{width:150px;height:54px;flex:0 0 150px;display:flex;align-items:center}.logo-slot img{max-width:150px;max-height:54px;object-fit:contain}.logo-placeholder{width:150px;height:54px;border:1px dashed rgba(148,163,184,.55);border-radius:14px;display:none;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px;letter-spacing:1.5px;background:rgba(15,23,42,.72)}
.chat-header h1{margin:0 0 6px;font-size:26px;line-height:1}.chat-header p{margin:0;font-size:14px;color:var(--text-muted)}.header-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:12px;margin-left:auto;white-space:nowrap}.profile-btn,.online-counter{border-radius:999px;padding:8px 12px;font-size:13px;background:rgba(15,23,42,.78);border:1px solid rgba(148,163,184,.16);color:#cbd5e1}
.status-dot{width:16px;height:16px;border-radius:50%;background:#64748b;box-shadow:0 0 0 6px rgba(100,116,139,.12);flex:0 0 auto}.status-dot.waiting{background:var(--orange);box-shadow:0 0 0 6px rgba(245,158,11,.14),0 0 18px rgba(245,158,11,.35)}.status-dot.connected{background:var(--green);box-shadow:0 0 0 6px rgba(34,197,94,.14),0 0 18px rgba(34,197,94,.35)}
.messages{flex:1;overflow-y:auto;padding:22px 24px;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),var(--bg-messages);background-size:32px 32px}.message{max-width:72%;margin-bottom:12px;padding:12px 15px;border-radius:16px;line-height:1.4;word-wrap:break-word;white-space:pre-wrap;font-size:15px;box-shadow:0 8px 20px rgba(0,0,0,.16)}.message.mine{margin-left:auto;background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%);color:#fff;border-bottom-right-radius:5px}.message.theirs{margin-right:auto;background:#1e293b;color:#e5e7eb;border:1px solid rgba(148,163,184,.16);border-bottom-left-radius:5px}.system-message,.error-message{width:fit-content;max-width:80%;text-align:center;margin:14px auto;padding:9px 13px;font-size:14px;border-radius:999px;background:rgba(15,23,42,.82);border:1px solid rgba(148,163,184,.16);color:#cbd5e1}.error-message{color:#fecaca;background:rgba(127,29,29,.42);border-color:rgba(248,113,113,.22)}
.message-form{display:flex;align-items:center;gap:12px;padding:16px 18px;border-top:1px solid var(--border-soft);background:var(--bg-card-soft)}input,select{border:1px solid rgba(148,163,184,.22);border-radius:14px;color:var(--text-main);background:var(--bg-input);outline:none}.message-form input{flex:1;padding:14px 15px;font-size:15px}.message-form input:disabled{background:#0b1220;color:#64748b}button{border:none;border-radius:14px;padding:13px 18px;font-size:15px;font-weight:700;cursor:pointer;background:#334155;color:white;transition:transform .12s ease,filter .12s ease}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)}button:disabled{background:#334155;color:#94a3b8;cursor:not-allowed;opacity:.55}.action-btn{min-width:112px;flex:0 0 auto}.action-btn.start-mode{background:linear-gradient(135deg,#22c55e 0%,#15803d 100%)}.action-btn.waiting-mode{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}.action-btn.end-mode,.danger-btn{background:linear-gradient(135deg,#f97316 0%,#dc2626 100%)}.action-btn.next-mode,#sendBtn,#saveProfileBtn{background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%)}
.modal-overlay{position:fixed;inset:0;z-index:50;background:rgba(3,7,18,.84);display:flex;align-items:center;justify-content:center;padding:24px}.profile-modal,.confirm-modal{width:min(920px,100%);max-height:92vh;overflow-y:auto;background:#0f172a;border:1px solid rgba(148,163,184,.22);border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.55);padding:26px}.confirm-modal{width:min(460px,100%)}.profile-modal h2,.confirm-modal h2{margin:0 0 8px;font-size:25px}.modal-intro,.confirm-modal p{color:var(--text-muted);margin:0 0 20px;line-height:1.45}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}fieldset{border:1px solid rgba(148,163,184,.18);border-radius:18px;padding:18px;margin:0}legend{color:#e2e8f0;font-weight:700;padding:0 8px}.profile-modal label{display:flex;flex-direction:column;gap:8px;margin:12px 0;color:#cbd5e1;font-size:14px}.profile-modal input,.profile-modal select{width:100%;padding:12px 13px;font-size:15px}.check-row{display:flex;align-items:center;gap:10px;margin:12px 0}.check-row input{width:auto}.check-row label{margin:0}.age-range{display:grid;grid-template-columns:1fr 1fr;gap:12px}.profile-error{min-height:22px;margin-top:14px;color:#fecaca}.modal-actions,.confirm-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}.secondary-btn{background:#334155}
@media(max-width:900px){.chat-box{width:100%}.profile-grid{grid-template-columns:1fr}.message{max-width:86%}}@media(max-width:660px){.profile-btn{display:none}}@media(max-width:560px){.logo-slot{width:88px;height:36px;flex-basis:88px}.logo-slot img,.logo-placeholder{max-width:88px;width:88px;height:36px}.chat-header h1{font-size:20px}.chat-header p{font-size:12px}.message-form{padding:12px;gap:8px}.action-btn{min-width:86px}.online-counter{font-size:11px;padding:5px 8px}button{padding:12px 13px}}@media(max-width:430px){.online-counter{display:none}.action-btn{min-width:78px;padding-left:10px;padding-right:10px}}


/* FIX: ukrywanie wskaźnika pisania i pojedynczy stały błąd */
.typing-indicator.is-hidden {
    display: none !important;
}

.persistent-error {
    position: sticky;
    bottom: 8px;
    z-index: 3;
}


/* Aktualizacja wizualna: ikona preferencji i podpisy skrótów */
.profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.gear-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    opacity: 0.9;
}

.button-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}

.button-wrap button {
    width: 100%;
}

.action-wrap {
    min-width: 112px;
}

.send-wrap {
    min-width: 82px;
}

.key-hint {
    min-height: 13px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.2px;
    user-select: none;
}

.action-btn.waiting-mode:disabled {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #cbd5e1;
    opacity: 0.8;
    cursor: wait;
}

.action-btn.waiting-mode:disabled:hover {
    transform: none;
    filter: none;
}

@media (max-width: 560px) {
    .action-wrap {
        min-width: 86px;
    }

    .send-wrap {
        min-width: 70px;
    }

    .key-hint {
        font-size: 10px;
    }
}


/* Poprawka przycisków: skróty wewnątrz przycisku */
.profile-btn {
    gap: 0;
}

.gear-icon {
    margin-right: 0;
}

#sendBtn,
.action-btn.end-mode,
.action-btn.next-mode {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.05;
}

.btn-main {
    display: block;
    line-height: 1.05;
}

.btn-key {
    display: block;
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.72);
    letter-spacing: 0.15px;
    margin-top: 2px;
}

#sendBtn .btn-key {
    font-size: 8.5px;
    color: rgba(226, 232, 240, 0.68);
}

.key-hint {
    display: none !important;
}

.button-wrap {
    display: contents;
}


/* Poprawka odstępu między zębatką a napisem Preferencje */
.profile-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.profile-btn .gear-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 9px !important;
    flex: 0 0 auto;
}


/* Zgłaszanie rozmówcy */
.report-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(127, 29, 29, 0.92);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.32);
    font-size: 18px;
    line-height: 1;
}

.report-btn:hover:not(:disabled) {
    background: #dc2626;
    color: #fff;
}

.report-btn:disabled,
.report-btn.is-reported {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.report-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 16px 0 4px;
    color: #e2e8f0;
}

.report-check input {
    width: auto;
    accent-color: #dc2626;
}