/* chat/chat.css - DuoChat Dark Theme & Responsive Layout */

:root {
--bg: #0d1117;
--panel: #161b22;
--card: #21262d;
--border: #30363d;
--text: #c9d1d9;
--fg: #f0f6fc;
--accent: #58a6ff;
--accent-hover: #1f6feb;
--danger: #f85149;
--bubble-sent: #238636;
--bubble-received: #21262d;
}

{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
background-color: var(--bg);
color: var(--text);
height: 100vh;
overflow: hidden;
}

.app-container {
display: flex;
height: 100vh;
width: 100vw;
}

/* Sidebar Styling */
.chat-sidebar {
width: 320px;
background: var(--panel);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
}

.sidebar-header {
padding: 12px 16px;
background: var(--card);
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border);
position: relative;
}

.user-profile {
display: flex;
align-items: center;
gap: 10px;
}

.user-info h3 {
font-size: 14px;
color: var(--fg);
}

.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
flex-shrink: 0;
}

.avatar.sm {
width: 34px;
height: 34px;
font-size: 13px;
}

.status-badge {
font-size: 11px;
color: #3fb950;
}

.status-text {
font-size: 12px;
color: #8b949e;
}

.search-box {
padding: 10px;
border-bottom: 1px solid var(--border);
}

.search-box input, .inline-search {
width: 100%;
padding: 8px 12px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
outline: none;
}

.inline-search {
width: 140px;
}

.contact-list {
flex: 1;
overflow-y: auto;
}

.chat-item {
transition: background 0.2s;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.chat-item:hover {
background: var(--card);
}

/* Main Chat Window */
.chat-main {
flex: 1;
display: flex;
flex-direction: column;
background: var(--bg);
}

.chat-header {
padding: 10px 16px;
background: var(--panel);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}

.chat-header-left {
display: flex;
align-items: center;
gap: 12px;
}

.chat-header-actions {
display: flex;
align-items: center;
gap: 8px;
}

.chat-messages {
flex: 1;
padding: 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
}

.chat-empty {
color: #8b949e;
}

.chat-bubble {
padding: 10px 14px;
border-radius: 12px;
max-width: 100%;
font-size: 14px;
line-height: 1.4;
color: var(--fg);
}

.chat-bubble.sent {
background: var(--bubble-sent);
border-bottom-right-radius: 2px;
}

.chat-bubble.received {
background: var(--bubble-received);
border-bottom-left-radius: 2px;
}

.chat-input-area {
padding: 12px;
background: var(--panel);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 8px;
}

.chat-input-area input {
flex: 1;
padding: 10px 14px;
border-radius: 20px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
outline: none;
}

/* UI Elements & Buttons */
.button, .header-icon-btn, .icon-btn {
border: none;
background: transparent;
color: var(--text);
cursor: pointer;
padding: 6px 10px;
border-radius: 6px;
}

.button.primary {
background: var(--accent);
color: #fff;
font-weight: 600;
}

.button.primary:hover {
background: var(--accent-hover);
}

.button.secondary {
background: var(--card);
border: 1px solid var(--border);
color: var(--fg);
}

.dropdown-menu {
display: none;
position: absolute;
top: 50px;
right: 10px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
z-index: 100;
width: 170px;
}

.dropdown-menu.show {
display: block;
}

.dropdown-item {
padding: 10px 12px;
font-size: 13px;
cursor: pointer;
}

.dropdown-item:hover {
background: var(--card);
}

.text-danger {
color: var(--danger);
}

.hidden {
display: none !important;
}

/* Auth Modal */
.auth-modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 20000;
backdrop-filter: blur(4px);
}

.auth-box {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
width: 340px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.auth-box h2 {
font-size: 18px;
color: var(--fg);
margin-bottom: 4px;
}

.input-group {
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}

.input-group label {
font-size: 12px;
color: var(--text);
}

.input-group input {
padding: 8px 12px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
outline: none;
}

.auth-actions {
display: flex;
gap: 8px;
margin-top: 16px;
}

.auth-actions button {
flex: 1;
}

/* Toast Notifications */
.toast-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}

.toast {
background: var(--card);
color: var(--fg);
padding: 10px 16px;
border-radius: 8px;
border: 1px solid var(--border);
margin-top: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
font-size: 13px;
}

/* Lightbox Modal */
.lightbox-modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.85);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10000;
}

.lightbox-img {
max-width: 90%;
max-height: 80vh;
transition: transform 0.2s ease;
}

.lightbox-tools {
margin-top: 15px;
display: flex;
gap: 10px;
}

/* Mobile Responsive */
@media (max-width: 900px) {
.chat-sidebar {
width: 100%;
}
.mobile-hidden {
display: none !important;
}
}