/* ============ Chat Icon Button ============ */
.nav-btn-chat {
    position: relative;
    padding: 0.5rem;
    color: var(--text-secondary);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn-chat:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.nav-btn-chat .chat-icon-svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-badge {
    position: absolute;
    top: 2px;
    right: 0px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    background: var(--accent-danger);
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
}

.chat-badge.hidden {
    display: none;
}

/* ============ Chat Panel (Dropdown) ============ */
.chat-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 520px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: chatSlideIn 0.2s ease;
}

.chat-panel.hidden {
    display: none;
}

@keyframes chatSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.chat-panel-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.chat-new-btn {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.chat-new-btn:hover {
    background: rgba(139, 92, 246, 0.15);
}

/* Conversation list */
.chat-convo-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chat-convo-list::-webkit-scrollbar { width: 4px; }
.chat-convo-list::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: 4px;
}

.chat-convo-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-primary);
}

.chat-convo-item:last-child {
    border-bottom: none;
}

.chat-convo-item:hover {
    background: var(--bg-tertiary);
}

.chat-convo-item.has-unread {
    background: rgba(139, 92, 246, 0.06);
}

.chat-convo-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.chat-convo-info {
    flex: 1;
    min-width: 0;
}

.chat-convo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-convo-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-convo-time {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.chat-convo-preview {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.chat-convo-unread-pill {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent-primary);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-tertiary);
    text-align: center;
}

.chat-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.chat-empty p {
    font-size: 0.85rem;
    margin: 0;
}

/* ============ New Chat Search Modal ============ */
.chat-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    animation: chatFadeIn 0.15s ease;
}

.chat-search-overlay.hidden {
    display: none;
}

@keyframes chatFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.chat-search-box {
    width: 400px;
    max-width: 95vw;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.chat-search-input-wrap {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-primary);
}

.chat-search-input-wrap span {
    color: var(--text-tertiary);
    font-size: 1rem;
}

.chat-search-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    font-family: inherit;
}

.chat-search-input::placeholder {
    color: var(--text-tertiary);
}

.chat-search-results {
    max-height: 300px;
    overflow-y: auto;
}

.chat-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.chat-search-item:hover {
    background: var(--bg-tertiary);
}

.chat-search-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-search-item span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.chat-search-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

/* ============ Floating Chat Window ============ */
.chat-window {
    position: fixed;
    bottom: 0;
    right: 24px;
    width: 560px;
    height: 480px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.25);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    animation: chatWindowSlideUp 0.25s ease;
}

.chat-window.minimized {
    height: 42px;
    overflow: hidden;
}

.chat-window.hidden {
    display: none;
}

@keyframes chatWindowSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Top titlebar with "Chats" + minimize/close */
.chat-window-titlebar {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border-primary);
    cursor: pointer;
    flex-shrink: 0;
    background: var(--bg-primary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.chat-window-titlebar-text {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.chat-window-actions {
    display: flex;
    gap: 0.25rem;
    position: relative;
    z-index: 2;
}

.chat-window-actions button {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    line-height: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
}

.chat-window-actions button:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.chat-window-actions button:active {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    transform: scale(0.95);
}

/* Two-column body: sidebar + main chat */
.chat-window-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* ─── Sidebar ─── */
.chat-sidebar {
    width: 170px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-primary);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-primary);
}

.chat-sidebar::-webkit-scrollbar { width: 3px; }
.chat-sidebar::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: 3px;
}

.chat-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-primary);
    position: relative;
}

.chat-sidebar-item:last-child { border-bottom: none; }

.chat-sidebar-item:hover {
    background: var(--bg-tertiary);
}

.chat-sidebar-item.active {
    background: rgba(139, 92, 246, 0.12);
    border-left: 3px solid var(--accent-primary);
    padding-left: calc(0.6rem - 3px);
}

.chat-sidebar-item.has-unread .chat-sidebar-name {
    font-weight: 700;
    color: var(--text-primary);
}

.chat-sidebar-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.chat-sidebar-name {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.chat-sidebar-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--accent-primary);
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-sidebar-empty {
    padding: 1.5rem 0.6rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

/* ─── Main chat area (right side) ─── */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Inner header showing current partner */
.chat-window-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.chat-window-header img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-window-header-name {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-window-header-name a {
    color: inherit;
    text-decoration: none;
}

.chat-window-header-name a:hover {
    color: var(--accent-primary);
}

/* Messages area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overscroll-behavior: contain;
}

.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: 4px;
}

.chat-msg {
    max-width: 80%;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    font-size: 0.84rem;
    line-height: 1.45;
    word-break: break-word;
    /* Anchor the hover action bar to the bubble itself. */
    position: relative;
}

/* Flip the action-bar anchor for right-aligned outgoing messages.
   Mine bubbles sit flush against the chat window's right wall, so
   we anchor the bar to the bubble's RIGHT and let it extend LEFT
   into the open chat space. Anchoring left would shoot the bar off
   the right edge for narrow messages like "ok" and clip the
   Unsend button against the window boundary. */
.chat-msg.mine .msg-action-bar { right: 8px; left: auto; }

.chat-msg.mine {
    align-self: flex-end;
    background: var(--accent-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-msg.theirs {
    align-self: flex-start;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chat-msg-images {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.chat-msg-images img {
    max-width: 140px;
    max-height: 140px;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
    transition: opacity 0.15s;
}

.chat-msg-images img:hover {
    opacity: 0.85;
}

.chat-msg-time {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    margin-top: 2px;
    text-align: right;
}

.chat-msg.mine .chat-msg-time {
    color: rgba(255, 255, 255, 0.7);
}

.chat-date-divider {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    padding: 0.5rem 0;
}

.chat-load-older {
    text-align: center;
    padding: 0.5rem;
}

.chat-load-older button {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 0.78rem;
    cursor: pointer;
    font-weight: 500;
}

.chat-load-older button:hover {
    text-decoration: underline;
}

.chat-messages-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 0.84rem;
}

/* Input area */
.chat-input-area {
    border-top: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.chat-image-previews {
    display: flex;
    gap: 6px;
    padding: 6px 10px 0;
}

.chat-image-previews:empty {
    display: none;
}

.chat-img-preview {
    position: relative;
    width: 48px;
    height: 48px;
}

.chat-img-preview img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.chat-img-preview .remove-img {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: var(--accent-danger);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.chat-input-row {
    display: flex;
    /* Center alignment keeps the caret/placeholder visually centered with
       the attach & send buttons on a single-line composer. The textarea
       still auto-grows for multi-line input. */
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
}

.chat-input-row textarea {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    /* Symmetric 0.55rem top/bottom padding keeps a 0.84rem / 1.4 line-height
       text line (~18.8px) centered inside the 34px min-height pill. */
    padding: 0.55rem 0.75rem;
    font-size: 0.84rem;
    font-family: inherit;
    color: var(--text-primary);
    resize: none;
    outline: none;
    max-height: 100px;
    min-height: 34px;
    line-height: 1.4;
    transition: border-color 0.2s;
    display: block;
}

.chat-input-row textarea:focus {
    border-color: var(--accent-primary);
}

.chat-input-row textarea::placeholder {
    color: var(--text-tertiary);
}

.chat-attach-btn,
.chat-send-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Toolbar row sits BELOW the textarea so the input field gets the
   full width. Compact height keeps the popup footer tight. */
.chat-composer-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 0.5rem 4px;
    min-height: 26px;
}
.chat-composer-toolbar .chat-attach-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 0.95rem;
}

.chat-attach-btn {
    color: var(--text-tertiary);
    font-size: 1.1rem;
}

.chat-attach-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.chat-send-btn {
    color: var(--accent-primary);
    font-size: 1.15rem;
}

.chat-send-btn:hover {
    background: rgba(139, 92, 246, 0.15);
}

.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.chat-char-counter {
    font-size: 0.6rem;
    color: var(--text-tertiary);
    text-align: right;
    margin-left: auto;
    padding: 0;
}

.chat-char-counter.near-limit {
    color: var(--accent-warning, #f59e0b);
}

.chat-char-counter.at-limit {
    color: var(--accent-danger);
}

/* ============ Image Lightbox ============ */
.chat-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.chat-lightbox.hidden {
    display: none;
}

.chat-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .chat-window {
        right: 0;
        width: 100%;
        height: 100vh;
        /* On iOS Safari 100vh extends under the toolbar; use the new svh unit
           where supported so the close button is always reachable. */
        height: 100svh;
        border-radius: 0;
    }

    .chat-window-titlebar {
        padding: 0.55rem 0.5rem 0.55rem 0.75rem;
    }

    /* Enlarge the close/minimize tap targets on phones so they meet the
       44px iOS / Material Design minimum. Without this the original 20px
       targets are easy to miss on Mobile Safari, which is what causes the
       "can't close the chat" trap report. */
    .chat-window-actions {
        gap: 0.15rem;
    }

    .chat-window-actions button {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.2rem;
        padding: 0.5rem 0.6rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .chat-sidebar {
        width: 56px;
    }

    .chat-sidebar-name { display: none; }
    .chat-sidebar-item { justify-content: center; padding: 0.55rem 0.35rem; }
    .chat-sidebar-item.active { padding-left: calc(0.35rem - 3px); }
    .chat-sidebar-badge {
        position: absolute;
        top: 4px;
        right: 2px;
        min-width: 14px;
        height: 14px;
        font-size: 0.52rem;
        padding: 0 3px;
    }
}

/* Tablet/landscape-phone range: the nav action row scrolls horizontally, which
   would clip the absolutely-positioned panel. Pin it to the viewport top-right
   so it always shows in full. (Phones get the bottom-sheet treatment below.) */
@media (min-width: 481px) and (max-width: 768px) {
    .chat-panel {
        position: fixed;
        top: calc(var(--navbar-height, 64px) + 6px);
        right: 8px;
        left: auto;
        width: min(360px, calc(100vw - 16px));
        max-height: calc(100vh - 80px);
    }
}

@media (max-width: 480px) {
    .chat-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .chat-search-box {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        height: 100vh;
    }
}

/* ============ Light Theme Overrides ============ */
html[data-theme="light"] .chat-panel,
html[data-theme="light"] .chat-window,
html[data-theme="light"] .chat-search-box {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .chat-msg.theirs {
    background: #f0f0f5;
}

html[data-theme="light"] .chat-window-titlebar,
html[data-theme="light"] .chat-sidebar {
    background: #f8f8fa;
}

html[data-theme="light"] .chat-sidebar-item.active {
    background: rgba(139, 92, 246, 0.08);
}