/* freechat.css - Styling for the secure chat widget */

/* Main Chat Widget Container */
.freechat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 330px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--card-bg, #ffffff);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color, #e0e0e0);
    display: flex;
    flex-direction: column;
    /* Was a fixed max-height:500px with overflow:hidden — sized for the old widget's fixed-height
       body only. The auth/register/guest-PIN popups added on top of that pushed total content past
       500px, so overflow:hidden silently clipped the PIN input off the bottom instead of showing
       it. max-height is now viewport-relative with a floor, and overflow-y:auto means if content
       ever exceeds that anyway, the widget scrolls instead of clipping. */
    max-height: min(640px, calc(100vh - 40px));
    font-family: var(--font-main, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
}

/* Widget when collapsed — width fits its own header content ("Live.Private.Discuss" + the
   Pinwheel tag + toggle chevron) on one line rather than a fixed 200px that used to clip/wrap it. */
.freechat-widget.collapsed {
    height: 50px;
    width: auto;
    min-width: 200px;
}
.freechat-widget.collapsed .freechat-header {
    white-space: nowrap;
}

/* Header styles */
.freechat-header {
    background: linear-gradient(135deg, var(--primary-dark, #8D3287), var(--primary-dark, #9019D2));
    color: var(--text-light, #FFFFFF);
    padding: 12px 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.freechat-header i {
    margin-right: 8px;
}

.freechat-toggle {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.freechat-toggle:hover {
    opacity: 1;
}

/* Security status indicator */
.freechat-security {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 0.8rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    color: var(--secondary-color, #607D8B);
}

.freechat-security.encrypted {
    color: var(--success-color, #4CAF50);
}

.freechat-security i {
    margin-right: 5px;
}

/* Chat content area */
.freechat-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    max-height: calc(500px - 50px - 60px); /* Total height - header - input area */
}

.freechat-body.hidden {
    max-height: 0;
}

/* Messages container */
.freechat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
    background-color: var(--card-secondary-bg, #f9f9f9);
    scrollbar-width: thin;
    scrollbar-color: #4a4d57 #1a1b22;
}
.freechat-messages::-webkit-scrollbar { width: 8px; }
.freechat-messages::-webkit-scrollbar-track { background: #1a1b22; }
.freechat-messages::-webkit-scrollbar-thumb { background-color: #4a4d57; border-radius: 4px; }

.freechat-messages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Message row — matches /live's .sc-msg: one tight flex row per message (username, badges,
   thumbnail, time), not the old stacked-bubble layout with separate block lines and float-based
   left/right bubbles. That stacking plus 10px margins between messages was the "too far apart"
   spacing; this is deliberately dense like /live's own message list. */
.fc-msg-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--text-color, #333);
}
.fc-msg-row:hover { background: rgba(0, 0, 0, 0.035); }
.fc-msg-user { font-weight: 600; color: var(--primary-color, #2196F3); flex-shrink: 0; white-space: nowrap; }
.fc-msg-thumb-wrap { flex: 1; min-width: 0; display: flex; align-items: center; }
.fc-msg-time { font-size: 0.65rem; color: var(--secondary-color, #607D8B); opacity: 0.7; flex-shrink: 0; white-space: nowrap; }

[data-theme="dark"] .fc-msg-row:hover { background: rgba(255, 255, 255, 0.04); }

/* Message clearfix */
.freechat-messages ul::after {
    content: "";
    display: table;
    clear: both;
}

/* Input area */
.freechat-input {
    display: flex;
    padding: 10px;
    background-color: #23252e;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.freechat-input input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 20px;
    background-color: var(--light-color, #F5F5F5);
    margin-right: 8px;
    transition: border-color 0.2s;
}

.freechat-input input:focus {
    outline: none;
    border-color: var(--primary-color, #2196F3);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.freechat-input button {
    background-color: var(--primary-color, #2196F3);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.freechat-input button:hover {
    background-color: var(--primary-dark, #1976D2);
}

/* Admin badge styling */
.admin-badge {
    background-color: var(--warning-color, #FFC107);
    color: var(--dark-color, #212121);
    font-size: 0.65em;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
}

/* System message styling */
.system-message {
    text-align: center;
    margin: 10px 0;
    font-size: 0.8em;
    color: var(--secondary-color, #607D8B);
    clear: both;
}

/* Status indicator */
.user-status {
    font-size: 0.8em;
    color: var(--secondary-color, #607D8B);
}

.user-status.online {
    color: var(--success-color, #4CAF50);
}

.user-status.offline {
    color: var(--danger-color, #F44336);
}

/* Typing indicator */
.typing-indicator {
    display: none;
    padding: 5px 10px;
    margin: 10px 0;
    font-size: 0.8em;
    font-style: italic;
    color: var(--secondary-color, #607D8B);
    clear: both;
}

.typing-indicator.active {
    display: block;
}

.typing-dots {
    display: inline-block;
}

.typing-dots::after {
    content: '...';
    animation: typing-dots 1.5s infinite;
}

@keyframes typing-dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Encryption animation */
.encryption-icon {
    display: inline-block;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* Dark theme support */
[data-theme="dark"] .freechat-widget {
    border-color: var(--border-color, #363A4F);
}

[data-theme="dark"] .fc-msg-row { color: var(--text-color, #DADFE9); }

[data-theme="dark"] .freechat-input input {
    background-color: var(--grey-500, #252836);
    color: var(--text-color, #DADFE9);
    border-color: var(--grey-300, #2E3347);
}

/* Responsive styles */
@media (max-width: 576px) {
    .freechat-widget {
        width: calc(100% - 40px);
        right: 20px;
        left: 20px;
        bottom: 10px;
    }
    
    .freechat-widget.collapsed {
        width: auto;
        max-width: calc(100vw - 40px);
        right: 20px;
        left: auto;
    }
}

/* ================================================================
   PINWHEEL ADDITIONS — auth popup, setup progress, PIN row, PNG
   message thumbnails. The widget is collapsed by default with only
   the header visible; these sections render inside the same shell
   once expanded, gated on auth/handshake state.
   ================================================================ */

.fc-pinwheel-tag {
    font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    background: rgba(255,255,255,0.2); padding: 1px 6px; border-radius: 8px; margin-left: 6px;
}

.hidden { display: none !important; }

/* ---- Auth popup ---- */
.fc-auth-popup { padding: 14px 15px; background: var(--card-bg, #fff); }
.fc-auth-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.fc-auth-tab {
    flex: 1; padding: 7px; border-radius: 6px; border: 1px solid var(--border-color, #e0e0e0);
    background: var(--card-secondary-bg, #f9f9f9); color: var(--text-color, #333); font-size: 0.82rem;
    font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.fc-auth-tab.active { background: var(--primary-color, #2196F3); color: #fff; border-color: var(--primary-color, #2196F3); }
.fc-auth-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.fc-auth-fields input {
    padding: 8px 12px; border: 1px solid var(--border-color, #e0e0e0); border-radius: 8px;
    background: var(--light-color, #F5F5F5); font-size: 0.85rem; outline: none;
}
.fc-auth-fields input:focus { border-color: var(--primary-color, #2196F3); }
.fc-auth-error { font-size: 0.76rem; color: var(--danger-color, #F44336); min-height: 1em; margin-bottom: 6px; }
.fc-auth-submit {
    width: 100%; padding: 9px; border: none; border-radius: 8px; background: var(--primary-color, #2196F3);
    color: #fff; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: background 0.15s;
}
.fc-auth-submit:hover { background: var(--primary-dark, #1976D2); }
.fc-auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.fc-auth-divider { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; font-size: 0.72rem; color: var(--secondary-color, #607D8B); }
.fc-auth-divider::before, .fc-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color, #e0e0e0); }
.fc-auth-guest {
    width: 100%; padding: 9px; border: 1px solid var(--border-color, #e0e0e0); border-radius: 8px;
    background: transparent; color: var(--text-color, #333); font-weight: 600; font-size: 0.85rem; cursor: pointer;
    transition: background 0.15s;
}
.fc-auth-guest:hover { background: var(--card-secondary-bg, #f9f9f9); }
.fc-auth-guest:disabled { opacity: 0.6; cursor: not-allowed; }
.fc-auth-hint { font-size: 0.68rem; color: var(--secondary-color, #607D8B); margin-top: 10px; line-height: 1.4; text-align: center; }

/* ---- Guest PIN popup (shown after "Continue as Guest", before the account is created) ---- */
.fc-guest-pin-popup { padding: 14px 15px; background: var(--card-bg, #fff); }
.fc-guest-pin-label { font-size: 0.88rem; font-weight: 700; margin-bottom: 6px; color: var(--text-color, #333); }
.fc-guest-pin-input {
    width: 100%; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px; background: var(--light-color, #F5F5F5); font-size: 0.85rem; outline: none;
}
.fc-guest-pin-input:focus { border-color: var(--primary-color, #2196F3); }
.fc-guest-pin-error { font-size: 0.76rem; color: var(--danger-color, #F44336); min-height: 1em; margin: 6px 0; }
.fc-guest-pin-submit {
    width: 100%; padding: 9px; border: none; border-radius: 8px; background: var(--primary-color, #2196F3);
    color: #fff; font-weight: 600; font-size: 0.85rem; cursor: pointer; margin-bottom: 8px;
}
.fc-guest-pin-submit:hover { background: var(--primary-dark, #1976D2); }
.fc-guest-pin-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.fc-guest-pin-back {
    width: 100%; padding: 7px; border: none; background: none; color: var(--secondary-color, #607D8B);
    font-size: 0.78rem; cursor: pointer;
}
.fc-guest-pin-back:hover { color: var(--text-color, #333); }
[data-theme="dark"] .fc-guest-pin-popup { background: var(--card-bg, #1e2130); }
[data-theme="dark"] .fc-guest-pin-input { background: var(--grey-500, #252836); color: var(--text-color, #DADFE9); border-color: var(--grey-300, #2E3347); }

/* ---- Setup progress (Pinwheel handshake) ---- */
.fc-setup { padding: 16px 15px; background: var(--card-bg, #fff); font-size: 0.8rem; }
.fc-setup-line {
    position: relative; padding: 6px 0 6px 22px; color: var(--secondary-color, #607D8B); opacity: 0.5;
}
.fc-setup-line::before {
    content: ''; position: absolute; left: 0; top: 9px; width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid var(--border-color, #ccc);
}
.fc-setup-line.active { opacity: 1; }
.fc-setup-line.active::before { border-color: var(--primary-color, #2196F3); box-shadow: 0 0 6px rgba(33,150,243,0.5); }
.fc-setup-line.done { opacity: 1; color: var(--text-color, #333); }
.fc-setup-line.done::before { background: var(--success-color, #4CAF50); border-color: var(--success-color, #4CAF50); }
.fc-setup-line:nth-child(1)::after { content: 'Generating your keypair…'; }
.fc-setup-line:nth-child(2)::after { content: 'Joining pinwheel session…'; }
.fc-setup-line:nth-child(3)::after { content: 'Receiving group key…'; }
.fc-setup-line:nth-child(4)::after { content: 'Synchronizing rolling epoch…'; }
.fc-setup-error {
    display: none; margin-top: 10px; font-size: 0.76rem; color: var(--danger-color, #F44336);
    background: rgba(244,67,54,0.08); border: 1px solid rgba(244,67,54,0.3); border-radius: 8px; padding: 8px 10px;
}
.fc-setup-error.active { display: block; }

/* ---- PIN row (local reveal-gate, matches /live's scPinInput) ---- */
.fc-pin-row { padding: 8px 10px; border-bottom: 1px solid var(--border-color, #e0e0e0); background: var(--card-bg, #fff); }
.fc-pin-input {
    width: 100%; padding: 6px 10px; border: 1px solid var(--border-color, #e0e0e0); border-radius: 16px;
    background: var(--light-color, #F5F5F5); font-size: 0.78rem; outline: none;
}
.fc-pin-input:focus { border-color: var(--primary-color, #2196F3); }
.fc-autodecrypt-toggle {
    display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 0.7rem;
    color: var(--secondary-color, #607D8B); cursor: pointer; user-select: none;
}
.fc-autodecrypt-toggle input { width: auto; cursor: pointer; accent-color: var(--primary-color, #2196F3); }

/* ---- PNG message thumbnails ---- */
.fc-msg-thumb {
    height: 22px; max-width: 100%; min-width: 50px; border-radius: 5px;
    cursor: pointer; background: repeating-linear-gradient(45deg, #dde2e8, #dde2e8 6px, #eceff2 6px, #eceff2 12px);
    object-fit: contain; display: block;
}
.fc-msg-thumb.revealed { cursor: default; background: none; height: auto; max-height: 90px; }
.fc-msg-auth { margin-left: 5px; font-size: 0.85em; }
.fc-msg-auth.ok { color: var(--success-color, #4CAF50); }
.fc-msg-auth.fail { color: var(--danger-color, #F44336); }
.fc-msg-secure { margin-left: 4px; cursor: pointer; font-size: 0.85em; }

[data-theme="dark"] .fc-auth-popup, [data-theme="dark"] .fc-setup, [data-theme="dark"] .fc-pin-row {
    background: var(--card-bg, #1e2130);
}
[data-theme="dark"] .fc-auth-fields input, [data-theme="dark"] .fc-pin-input {
    background: var(--grey-500, #252836); color: var(--text-color, #DADFE9); border-color: var(--grey-300, #2E3347);
}

/* ---- Fullscreen image lightbox (click a revealed message thumbnail) ---- */
.fc-lightbox {
    display: none; position: fixed; inset: 0; z-index: 10050;
    background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 40px; cursor: zoom-out;
}
.fc-lightbox.open { display: flex; }
.fc-lightbox-img {
    max-width: 100%; max-height: 100%; border-radius: 8px; cursor: default;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.fc-lightbox-close {
    position: absolute; top: 18px; right: 24px; font-size: 2rem; line-height: 1; color: #fff;
    opacity: 0.8; cursor: pointer; user-select: none;
}
.fc-lightbox-close:hover { opacity: 1; }