/* style.css - FINAL COMPLETE VERSION */

:root {
    --bubble-sent: #0084ff;
    --bubble-received: #e4e6eb;
    --text-primary: #050505;
    --text-secondary: #65676b;
    --border-color: #ced0d4;
    --panel-bg: #f5f6f7;
    --app-bg: #ffffff;
    --accent-color-light: #e7f1ff;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: var(--app-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.chat-container { display: flex; width: 95vw; height: 95vh; max-width: 1400px; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); background-color: var(--app-bg); }

/* --- SIDEBAR STYLES --- */
.sidebar { width: 30%; min-width: 300px; max-width: 360px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; background-color: #fcfcfc; }
.sidebar-header { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); }
.sidebar-header h2 { margin: 0; font-size: 24px; }
#new-chat-btn { background-color: var(--panel-bg); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 50%; width: 32px; height: 32px; font-size: 20px; cursor: pointer; }
#new-chat-btn:hover { background-color: #e8e8e8; }
.conversation-list { list-style-type: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; }
.conversation-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.conversation-item:hover { background-color: var(--panel-bg); }
.conversation-item.active { background-color: var(--accent-color-light); }
.conversation-info { display: flex; justify-content: space-between; align-items: center; }
.conversation-name { font-weight: 600; color: var(--text-primary); }
.notification-badge { background-color: var(--bubble-sent); color: white; font-size: 12px; font-weight: bold; padding: 3px 8px; border-radius: 12px; }

/* --- CHAT PANEL STYLES --- */
.chat-panel { width: 70%; display: flex; flex-direction: column; }
.chat-header { padding: 10px 16px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.chat-header-actions { margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.message-area { flex-grow: 1; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; }
.date-separator { text-align: center; font-size: 12px; color: var(--text-secondary); margin: 12px 0; font-weight: 500; }
.message-wrapper { display: flex; align-items: flex-end; margin: 1px 0; max-width: 70%; position: relative; }
.message-wrapper.sent { margin-left: auto; flex-direction: row-reverse; }
.message-wrapper.received { margin-right: auto; }
.message-wrapper.is-last { margin-bottom: 8px; }
.message-avatar { width: 28px; height: 28px; border-radius: 50%; margin: 0 8px; flex-shrink: 0; }
.message-wrapper.is-first .message-avatar, .message-wrapper.is-middle .message-avatar { visibility: hidden; }
.message-content-wrapper { display: flex; flex-direction: column; max-width: 100%; }
.sender-name { font-size: 12px; color: var(--text-secondary); margin: 0 0 4px 0; }
.message { padding: 8px 12px; border-radius: 18px; overflow-wrap: anywhere; line-height: 1.35; font-size: 15px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.05); }
.message.sent { background-color: var(--bubble-sent); color: white; }
.message.received { background-color: var(--bubble-received); color: var(--text-primary); }
.message p { margin: 0; }
.message-ticks { position: absolute; bottom: 6px; right: 10px; display: flex; align-items: center; color: rgba(255,255,255,0.7); }
.message-ticks.read { color: #4fc3f7; }
.message.sent p { padding-right: 30px; }
.message-actions { display: flex; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.2s; z-index: 10; }
.message-wrapper:hover .message-actions { opacity: 1; }
.message-wrapper.sent .message-actions { right: 100%; margin-right: 8px; }
.message-wrapper.received .message-actions { left: 100%; margin-left: 8px; }
.action-btn { width: 28px; height: 28px; border-radius: 50%; border: none; background-color: var(--app-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.15); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); margin: 0 2px; }
.message-input-area { padding: 10px 16px; border-top: 1px solid var(--border-color); background-color: #fdfdfd; }
#message-form { display: flex; align-items: center; }
#message-input { flex-grow: 1; border: none; background-color: var(--panel-bg); border-radius: 20px; padding: 8px 15px; font-size: 15px; }
#message-form button { margin-left: 10px; padding: 8px 16px; border: none; background-color: var(--bubble-sent); color: white; border-radius: 20px; cursor: pointer; font-size: 15px; font-weight: bold; }
.thread-toggle { display: block; font-size: 13px; font-weight: 600; color: var(--bubble-sent); text-decoration: none; padding: 4px 0 0 0; cursor: pointer; }
.message-thread { padding-left: 15px; margin-top: 5px; border-left: 2px solid #e4e6eb; }
.reply-to-container { padding: 8px 16px; background-color: var(--accent-color-light); border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.reply-to-container button { background: none; border: none; font-size: 20px; cursor: pointer; }

/* --- MODAL STYLES --- */
.modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
.modal-content { background-color: #fefefe; padding: 20px; border-radius: 8px; width: 90%; max-width: 400px; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.close-button { color: #aaa; position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; cursor: pointer; }
.chat-type-selection { display: flex; margin-bottom: 15px; }
.chat-type-btn { flex: 1; padding: 10px; border: 1px solid var(--border-color); background-color: #fff; cursor: pointer; font-size: 14px; }
.chat-type-btn:first-child { border-radius: 4px 0 0 4px; }
.chat-type-btn:last-child { border-radius: 0 4px 4px 0; }
.chat-type-btn.active { background-color: var(--accent-color-light); border-color: var(--bubble-sent); color: var(--bubble-sent); font-weight: bold; }
#group-creation-section input, #user-search-section input { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 15px; }
#search-results { list-style-type: none; padding: 0; margin: 0; max-height: 150px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 4px; }
#search-results li { padding: 8px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
#search-results li:hover { background-color: #f1f1f1; }
#selected-users { margin-bottom: 15px; padding: 5px; min-height: 28px; }
.user-tag { background: var(--bubble-received); padding: 4px 8px; border-radius: 12px; margin-right: 5px; font-size: 13px; display: inline-block; cursor: pointer; }
#modal-footer { text-align: right; margin-top: 20px; }
#create-group-submit-btn { background: var(--bubble-sent); color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 15px; font-weight: bold; }
h2 { margin-top: 0; }
.hidden { display: none !important; }

/* Emoji Picker styles */
emoji-picker { position: fixed; z-index: 1001; }

.message-menu { position:absolute; z-index:1000; background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.15); display:flex; flex-direction:column; min-width:120px; overflow:hidden; }
.message-menu.hidden { display:none; }
.message-menu button { background:none; border:0; padding:8px 14px; text-align:left; cursor:pointer; font-size:14px; }
.message-menu button:hover { background:#f2f2f2; }
.message-menu button[data-action="delete"] { color:#c0392b; }
.message-content.deleted { font-style:italic; opacity:.6; }
.edited-label { font-size:11px; opacity:.6; margin-right:4px; }

#attach-btn { background:none; border:0; font-size:20px; cursor:pointer; padding:0 8px; }
.attachment-preview { display:flex; align-items:center; gap:8px; padding:6px 12px; background:#f4f6f8; border-top:1px solid #e3e3e3; font-size:13px; }
.attachment-preview.hidden { display:none; }
.attachment-preview button { background:none; border:0; font-size:18px; cursor:pointer; }
.message-image { display:block; max-width:260px; max-height:260px; border-radius:8px; margin-top:4px; object-fit:cover; }
.message-file { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; margin-top:4px; background:rgba(0,0,0,.05); border-radius:6px; text-decoration:none; color:inherit; font-size:13px; }
.message-file small { opacity:.6; }

.profile-chip { display:flex; align-items:center; gap:8px; min-width:0; flex:1; margin-right:12px; padding:4px 6px; border:0; background:transparent; cursor:pointer; text-align:left; border-radius:8px; }
.profile-chip:hover { background:var(--panel-bg); }
.profile-chip-text { display:flex; flex-direction:column; min-width:0; }
.profile-chip-text strong { font-size:14px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-chip-text small { font-size:12px; color:var(--text-secondary); }
.profile-avatar, .profile-fallback, .convo-avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.profile-fallback, .convo-avatar.fallback { display:inline-flex; align-items:center; justify-content:center; background:#d8dde3; color:#3a3f45; font-weight:700; font-size:14px; }
.profile-fallback.large, .profile-preview { width:72px; height:72px; border-radius:50%; object-fit:cover; }
.profile-fallback.large { font-size:28px; }
.conversation-person { display:flex; align-items:center; gap:10px; min-width:0; }
.conversation-person .conversation-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-title { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.chat-title h3 { margin:0; }
.profile-photo-row { display:flex; align-items:center; gap:14px; margin:12px 0; }
.profile-photo-actions { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.profile-upload { display:inline-block; padding:8px 12px; border:1px solid var(--border-color); border-radius:6px; cursor:pointer; background:var(--panel-bg); }
.profile-remove { background:none; border:0; padding:0; color:#c0392b; cursor:pointer; font-size:13px; }
.profile-field { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; }
.profile-field input { font-weight:400; font-size:15px; padding:8px 10px; border:1px solid var(--border-color); border-radius:6px; }
.profile-hint { color:var(--text-secondary); font-size:13px; }
#profile-save { margin-top:8px; background:var(--bubble-sent); color:#fff; border:0; border-radius:6px; padding:8px 16px; cursor:pointer; }
#profile-save:disabled { opacity:.6; cursor:default; }
.message-file { margin-bottom:14px; }
.profile-error { color:#c0392b; font-size:13px; margin:6px 0 0; }
.profile-error.hidden { display:none; }
.mobile-back { display:none; background:none; border:0; font-size:22px; padding:0 10px 0 0; cursor:pointer; }
.message-wrapper.show-actions .message-actions { opacity:1; }
@media (hover: none) {
    .message-wrapper .message-actions { opacity:0; pointer-events:none; }
    .message-wrapper.show-actions .message-actions { opacity:1; pointer-events:auto; }
}
@media (max-width: 768px) {
    body { padding:0; margin:0; display:block; }
    .chat-container { width:100vw; height:100vh; height:100dvh; max-width:none; border-radius:0; box-shadow:none; }
    .sidebar, .chat-panel { width:100%; min-width:0; max-width:none; }
    .chat-panel { display:none; }
    .sidebar { display:flex; }
    body.mobile-chat-open .sidebar { display:none; }
    body.mobile-chat-open .chat-panel { display:flex; }
    .message-wrapper { max-width:85%; }
    .message-image { max-width:70vw; }
    .modal-content { width:92vw; max-height:85dvh; overflow-y:auto; }
    #message-input { font-size:16px; }
    .message-input-area { padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
    .mobile-back { display:inline-block; }
    .message-wrapper .message-actions { position:absolute; top:auto; bottom:100%; transform:none; background:#fff; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,.15); padding:2px 6px; }
    .message-wrapper.sent .message-actions { right:0; left:auto; margin:0 0 4px; }
    .message-wrapper.received .message-actions { left:0; right:auto; margin:0 0 4px; }
    .action-btn { min-width:36px; min-height:36px; font-size:18px; }
    #emoji-picker { position:fixed !important; left:0 !important; right:0; bottom:0; top:auto !important; width:100vw; }
    .chat-header { display:flex; align-items:center; gap:8px; }
    .chat-title { min-width:0; }
    .chat-title h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    .conversation-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    .reply-to-container, .attachment-preview { min-width:0; }
    .reply-to-content { min-width:0; overflow:hidden; flex:1; }
    #reply-to-text, #attachment-name { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #search-results-list { flex:1; }
    .sidebar-search input { font-size:16px; }
    .tasks-panel { position:fixed; inset:0; width:100%; z-index:2000; }
    .task-form input[type=text] { font-size:16px; }
}
.message-wrapper.sent .message-reactions { align-self:flex-end; }
.sidebar-search { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--border-color); }
.sidebar-search input, .chat-search-bar input { flex:1; padding:8px 10px; border:1px solid #ddd; border-radius:18px; font-size:14px; min-width:0; }
.search-results-list { list-style:none; margin:0; padding:0; overflow-y:auto; }
#search-results-list { flex:1; min-height:0; }
.search-results-list li { padding:10px 14px; border-bottom:1px solid #f0f0f0; cursor:pointer; font-size:13px; }
.search-results-list li:hover { background:#f6f6f6; }
.search-results-list mark { background:#ffe58a; padding:0 1px; border-radius:2px; }
.chat-search-bar { position:relative; display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px; border-bottom:1px solid var(--border-color); background:#fafafa; }
.chat-search-bar.hidden { display:none; }
.chat-search-bar .search-results-list { flex-basis:100%; max-height:40vh; background:#fff; }
#chat-search-btn { background:none; border:0; font-size:18px; cursor:pointer; }
.jump-highlight .message { box-shadow:0 0 0 3px #ffd43b; transition:box-shadow .3s; }
#pin-chat-btn { background:none; border:0; font-size:18px; cursor:pointer; opacity:.45; }
#pin-chat-btn.active { opacity:1; }
.conversation-pin { font-size:12px; margin-left:4px; }
.pinned-bar { display:flex; align-items:center; gap:8px; padding:6px 12px; background:#fff8e1; border-bottom:1px solid #f1e3a6; font-size:13px; min-width:0; }
.pinned-bar.hidden { display:none; }
.pinned-bar #pinned-bar-text { flex:1; min-width:0; background:none; border:0; text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
#pinned-count { cursor:pointer; opacity:.7; font-size:12px; }
.pin-mark { font-size:11px; margin-right:4px; }
#tasks-btn { background:none; border:1px solid #ddd; border-radius:14px; padding:2px 10px; font-size:14px; cursor:pointer; }
.chat-panel { position:relative; }
.tasks-panel { position:absolute; top:0; right:0; bottom:0; width:340px; background:#fff; box-shadow:-4px 0 16px rgba(0,0,0,.12); display:flex; flex-direction:column; z-index:50; }
.tasks-panel.hidden { display:none; }
.tasks-head { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid #eee; }
.tasks-head button { background:none; border:0; font-size:20px; cursor:pointer; }
.task-form { padding:10px 14px; border-bottom:1px solid #eee; display:flex; flex-direction:column; gap:8px; }
.task-form input[type=text] { padding:8px 10px; border:1px solid #ddd; border-radius:8px; font-size:14px; }
.task-form-row { display:flex; gap:6px; flex-wrap:wrap; }
.task-form-row select, .task-form-row input[type=date] { flex:1; min-width:110px; padding:6px; border:1px solid #ddd; border-radius:8px; font-size:13px; }
.task-form-row button { padding:6px 12px; border:0; border-radius:8px; background:#007bff; color:#fff; cursor:pointer; }
#task-cancel-edit { background:#eee; color:#333; }
.task-error { color:#c0392b; font-size:12px; margin:0; } .task-error.hidden { display:none; }
.task-list { list-style:none; margin:0; padding:0; overflow-y:auto; }
#task-list { flex:1; }
.task-list li { display:flex; gap:8px; padding:10px 14px; border-bottom:1px solid #f3f3f3; font-size:14px; }
.task-list li.done .task-title { text-decoration:line-through; opacity:.6; }
.task-meta { font-size:12px; opacity:.75; margin-top:2px; }
.task-meta .overdue { color:#c0392b; font-weight:600; opacity:1; }
.task-actions button, .task-actions a { background:none; border:0; color:#007bff; font-size:12px; cursor:pointer; padding:0 6px 0 0; }
.task-done-wrap { border-top:1px solid #eee; padding:6px 14px; font-size:13px; max-height:35%; overflow-y:auto; }
@media (max-width: 768px) {
    .tasks-panel { position:fixed; inset:0; width:100%; z-index:2000; }
    .task-form input[type=text] { font-size:16px; }
}
@media (min-width: 769px) {
    .tasks-panel { top: var(--chat-header-h, 56px); }
    .chat-panel.tasks-open .message-area,
    .chat-panel.tasks-open #pinned-bar,
    .chat-panel.tasks-open #chat-search-bar,
    .chat-panel.tasks-open #reply-to-container,
    .chat-panel.tasks-open #attachment-preview,
    .chat-panel.tasks-open .message-input-area,
    .chat-panel.tasks-open #typing-indicator { padding-right: 340px; }
}
.typing-indicator { font-size:12px; font-style:italic; color:#666; padding:2px 16px 4px; }
.typing-indicator.hidden { display:none; }
#admin-link { margin-left: auto; margin-right: 8px; font-size: 13px; color: var(--bubble-sent); text-decoration: none; white-space: nowrap; }
#must-change-modal { z-index: 5000; }
body.admin-page { display: block; height: auto; min-height: 100vh; background: var(--panel-bg); padding: 24px; color: var(--text-primary); }
.admin-card { max-width: 900px; margin: 0 auto; padding: 24px; background: var(--app-bg); border-radius: 8px; box-shadow: 0 5px 25px rgba(0,0,0,0.1); }
.admin-card h1 { margin-top: 0; }
.admin-card form, .admin-card .row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-card input { padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; }
.admin-card table { width: 100%; border-collapse: collapse; }
.admin-card th { background: var(--accent-color-light); text-align: left; padding: 8px; }
.admin-card td { padding: 8px; border-bottom: 1px solid var(--border-color); }
.admin-card tbody tr:hover td { background: var(--panel-bg); }
.admin-card button { padding: 8px 16px; border: none; background: var(--bubble-sent); color: #fff; border-radius: 20px; cursor: pointer; font-weight: bold; }
.admin-card button.text-danger { background: none; color: #c0392b; }
.admin-card button.text-ok { background: none; color: #1e7e34; }
.admin-status { min-height: 1.2em; }
.admin-status.error { color: #c0392b; }
.admin-status.ok { color: #1e7e34; }