@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
  /* Zalo Dark Theme Palette */
  --app-vh: 1vh;
  --z-bg-nav: #0d1218;
  --z-bg-side: #181d24;
  --z-bg-chat: #10141a;
  --z-border: #29303c;
  --z-hover: #262c36;
  --z-text: #e2e8f0;
  --z-text-muted: #94a3b8;
  --z-primary: #0068ff;
  --z-primary-hover: #0056cc;
  --z-message-mine: #1f3762;
  --z-message-file: #212833;
  --z-danger: #ef4444;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Global dark scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: var(--z-bg-chat);
  color: var(--z-text);
  height: calc(var(--app-vh, 1vh) * 100);
  overflow: hidden;
}

body.mobile-rs-open {
  overflow: hidden;
}

/* Base Layout */
.app-container {
  display: flex;
  height: calc(var(--app-vh, 1vh) * 100);
  width: 100vw;
  min-height: 0;
}

/* Nav Strip */
.nav-strip {
  width: 64px;
  background-color: var(--z-bg-nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  flex-shrink: 0;
  border-right: 1px solid var(--z-border);
}

.nav-top, .nav-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.nav-avatar img {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.nav-btn {
  background: transparent;
  border: none;
  color: var(--z-text-muted);
  font-size: 22px;
  width: 44px; height: 44px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}

.nav-btn:hover { background-color: var(--z-hover); color: var(--z-text); }
.nav-btn.active { color: var(--z-primary); background-color: rgba(0, 104, 255, 0.1); }
.nav-btn.danger:hover { color: var(--z-danger); background-color: rgba(239,68,68,0.1); }

.badge {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--z-danger); color: white;
  font-size: 10px; font-weight: bold;
  padding: 2px 5px; border-radius: 10px;
}

/* Left Sidebar */
.left-sidebar {
  width: 320px;
  background-color: var(--z-bg-side);
  border-right: 1px solid var(--z-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-header-search {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--z-border);
}

.search-wrapper {
  flex: 1;
  position: relative;
}

.search-box {
  display: flex;
  align-items: center;
  background: var(--z-hover);
  border-radius: 6px;
  padding: 0 10px;
  height: 36px;
}

.search-box input {
  flex: 1; background: transparent; border: none;
  color: var(--z-text); padding: 0 8px; outline: none; font-size: 13px;
}
.search-box .search-icon { color: var(--z-text-muted); font-size: 13px; }
.search-clear {
  background: transparent; border: none; color: var(--z-text-muted);
  cursor: pointer; font-size: 13px; padding: 0;
}
.search-clear:hover { color: var(--z-text); }

/* Search Results Dropdown */
.search-results-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #1e2633;
  border: 1px solid var(--z-border);
  border-radius: 8px;
  max-height: 65vh;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.search-result-conv-group {
  border-bottom: 1px solid var(--z-border);
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.search-result-conv-label {
  font-size: 11px; font-weight: 600; color: var(--z-primary);
  padding: 10px 14px 4px; letter-spacing: 0.05em; text-transform: uppercase;
}
.search-result-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 14px; cursor: pointer; transition: background 0.15s;
}
.search-result-item:hover { background: var(--z-hover); }
.search-result-item .sri-icon { color: var(--z-text-muted); min-width: 16px; margin-top: 2px; font-size: 13px; }
.search-result-item .sri-body { flex: 1; overflow: hidden; }
.search-result-item .sri-preview {
  font-size: 13px; color: var(--z-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-item .sri-preview mark { background: none; color: var(--z-primary); font-weight: 700; }
.search-result-item .sri-time { font-size: 11px; color: var(--z-text-muted); margin-top: 3px; }
.search-no-result { padding: 20px; text-align: center; font-size: 13px; color: var(--z-text-muted); }

.icon-btn-gray {
  background: transparent; border: none; color: var(--z-text-muted);
  cursor: pointer; font-size: 16px; padding: 6px;
  border-radius: 4px;
}
.icon-btn-gray:hover { background: var(--z-hover); color: var(--z-text); }

.filter-tabs {
  display: flex; align-items: center; padding: 10px 16px;
  border-bottom: 1px solid var(--z-border); gap: 16px; font-size: 13px; font-weight: 500;
}
.filter-tab { color: var(--z-text-muted); cursor: pointer; }
.filter-tab.active { color: var(--z-primary); border-bottom: 2px solid var(--z-primary); padding-bottom: 4px; }
.filter-tab-right { margin-left: auto; color: var(--z-text-muted); cursor: pointer; font-size: 12px; }

.zcloud-promo {
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--z-border); cursor: pointer;
}
.zcloud-text strong { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.zcloud-text a { font-size: 12px; color: var(--z-primary); text-decoration: none; }
.zcloud-icon { width: 32px; height: 32px; background: rgba(0,104,255,0.1); color: var(--z-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; }

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

/* Pinned icon on conversation card */
.conv-pin-icon {
  color: var(--z-primary);
  font-size: 12px;
  flex-shrink: 0;
}

.conv-item {
  display: flex; padding: 10px 12px 10px 16px; cursor: pointer;
  transition: background 0.2s; align-items: center; gap: 12px;
  position: relative;
}
.conv-item:hover { background-color: var(--z-hover); }
.conv-item.active { background-color: rgba(0, 104, 255, 0.1); }

/* Action button (three dots) on each conv card */
.conv-action-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: var(--z-bg-side); border: 1px solid var(--z-border);
  color: var(--z-text-muted); border-radius: 50%;
  width: 28px; height: 28px; font-size: 13px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
}
.conv-item:hover .conv-action-btn { display: flex; }
.conv-action-btn:hover { color: var(--z-text); background: var(--z-hover); }

/* Conversation action dropdown */
.conv-action-menu {
  position: fixed;
  background: #1e2633;
  border: 1px solid var(--z-border);
  border-radius: 8px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 500;
  padding: 6px 0;
  opacity: 0; transform: scale(0.95); transition: all 0.15s; pointer-events: none;
}
.conv-action-menu.active { opacity: 1; transform: scale(1); pointer-events: all; }
.conv-action-menu-item {
  padding: 10px 16px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; gap: 10px; transition: background 0.15s;
}
.conv-action-menu-item:hover { background: var(--z-hover); }
.conv-action-menu-item.danger { color: var(--z-danger); }
.conv-action-menu-item.danger:hover { background: rgba(239,68,68,0.1); }
.conv-avatar {
  width: 48px; height: 48px; border-radius: 50%; display:flex; align-items:center; justify-content:center; flex-shrink: 0;
}
.conv-avatar.cloud { background: var(--z-primary); color: white; font-size: 20px;}
.conv-avatar.normal { background: var(--z-hover); color: var(--z-text); font-size: 20px; }

.conv-info { flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.conv-meta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 10px; }
.conv-title { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--z-text); }
.conv-time { font-size: 12px; color: var(--z-text-muted); }
.conv-preview { font-size: 13px; color: var(--z-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Main Chat Area */
.chat-area { flex: 1; display: flex; flex-direction: column; background: url('https://chat.zalo.me/assets/inapp-welcome-screen-02.mac.e415b3a4a2e57f502d3345efee4a3c61.jpg') center/cover no-repeat; min-width: 0; min-height: 0; position: relative;}
.chat-area::before { content: ''; position: absolute; inset: 0; background: var(--z-bg-chat); opacity: 0.85; z-index: 0; }
.chat-area > * { z-index: 1; }

.chat-header {
  height: 64px; background-color: var(--z-bg-side); border-bottom: 1px solid var(--z-border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0;
}
.chat-header-left { display: flex; align-items: center; gap: 12px; }
.cloud-avatar-main { width: 44px; height: 44px; background: var(--z-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.chat-header-info h1 { font-size: 16px; font-weight: 600; line-height: 1.2; }
.status-text { font-size: 12px; color: var(--z-text-muted); }
.status-text.status-busy { color: var(--z-primary); font-weight: 600; }
.chat-header-right { display: flex; gap: 8px; }
.icon-btn { background: transparent; border: none; width: 36px; height: 36px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--z-text); font-size: 18px; cursor: pointer; }
.icon-btn:hover { background-color: var(--z-hover); }

/* Messages */
.messages-container {
  flex: 1; overflow-y: auto;
  padding: 16px 8px 16px 8%;  /* right: tight to edge, left: breathing room */
  display: flex; flex-direction: column;
  min-height: 0;
}
/* Dark scrollbar */
.messages-container::-webkit-scrollbar { width: 5px; }
.messages-container::-webkit-scrollbar-track { background: transparent; }
.messages-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.messages-container::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }


/* Pinned bar now outside messages-container, so it spans full chat width */
.pinned-messages {
  background-color: var(--z-bg-side); border-bottom: 2px solid var(--z-primary);
  padding: 10px 20px; display: flex; align-items: center; gap: 12px;
  flex-shrink: 0; cursor: pointer;
}
.pinned-icon { color: var(--z-primary); font-size: 16px; flex-shrink: 0; }
.pinned-content { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unpin-btn { background: transparent; border: none; color: var(--z-text-muted); font-size: 16px; cursor: pointer; flex-shrink: 0; padding: 4px; border-radius: 4px; }
.unpin-btn:hover { color: var(--z-text); background: var(--z-hover); }

/* In-chat search bar */
.chat-search-bar { background: var(--z-bg-side); border-bottom: 1px solid var(--z-border); padding: 10px 16px; flex-shrink: 0; }
.chat-search-inner { display: flex; align-items: center; gap: 10px; background: var(--z-bg-chat); border-radius: 8px; padding: 6px 12px; }
.chat-search-inner > i { color: var(--z-text-muted); font-size: 14px; }
.chat-search-inner input { flex: 1; background: transparent; border: none; outline: none; color: var(--z-text); font-size: 14px; }
.chat-search-count { font-size: 12px; color: var(--z-text-muted); white-space: nowrap; min-width: 48px; text-align: center; }
.chat-search-nav { background: transparent; border: none; color: var(--z-text-muted); cursor: pointer; width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.chat-search-nav:hover { background: var(--z-hover); color: var(--z-text); }
.chat-search-close { background: transparent; border: none; color: var(--z-text-muted); cursor: pointer; font-size: 16px; padding: 4px; border-radius: 4px; }
.chat-search-close:hover { color: var(--z-text); background: var(--z-hover); }

/* Search / navigation highlight on message */
@keyframes msgPulse {
  0%   { box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 0 24px rgba(0,104,255,0.8); }
  50%  { box-shadow: 0 0 0 4px rgba(255,255,255,0.4), 0 0 36px rgba(0,104,255,0.5); }
  100% { box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 0 24px rgba(0,104,255,0.8); }
}
.message-wrapper.search-active .message {
  background: linear-gradient(145deg, #0068ff 0%, #0052cc 100%) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 0 24px rgba(0,104,255,0.8) !important;
  animation: msgPulse 1.5s ease-in-out 3;
}



.message {
  max-width: 65%; min-width: 80px; background-color: var(--z-message-mine); color: var(--z-message-mine-text);
  padding: 10px 14px; border-radius: 12px 12px 0 12px; font-size: 15px; line-height: 1.5;
  box-shadow: var(--shadow-sm); position: relative; word-wrap: break-word;
}
.message-time { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 4px; text-align: right; display: block; }

.reply-indicator { background-color: rgba(0,0,0,0.2); border-left: 3px solid var(--z-primary); padding: 6px 10px; margin-bottom: 8px; border-radius: 4px; font-size: 13px; cursor: pointer; }
.reply-indicator .reply-text { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* File / Image Messages */
.message.file { background-color: var(--z-message-file); border: 1px solid var(--z-border); }
.file-info { display: flex; align-items: center; gap: 12px; }
.file-icon { background-color: rgba(0,104,255,0.15); color:var(--z-primary); width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.file-details { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.file-name { font-weight: 500; font-size: 14px; word-break: break-all; }
.download-link { font-size: 12px; color: var(--z-primary); text-decoration: none; font-weight: 500; margin-top: 4px; }

.message.image { padding: 4px; background-color: transparent; box-shadow: none; border: none; max-width: min(72vw, 360px); }
.image-preview {
  width: 100%;
  height: auto;
  max-width: min(72vw, 360px);
  max-height: min(52vh, 420px);
  border-radius: 8px;
  cursor: pointer;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.2);
  display: block;
}

.message.image-group {
  padding: 6px;
  background-color: transparent;
  box-shadow: none;
  border: none;
  max-width: 520px;
}
.image-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 6px;
}
.image-group-item {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}
.image-group-caption {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.28);
  font-size: 13px;
  color: var(--z-text);
}

.message-wrapper.active-message .message {
  box-shadow: 0 0 0 2px rgba(14,165,233,0.75), 0 12px 30px rgba(14,165,233,0.25);
  animation: focusGlow 1.2s ease-out 1;
}
.message-wrapper.active-message .message.image,
.message-wrapper.active-message .message.image-group {
  box-shadow: none;
}
.message-wrapper.active-message .image-preview,
.message-wrapper.active-message .image-group-item {
  box-shadow: 0 0 0 2px rgba(14,165,233,0.75), 0 8px 24px rgba(14,165,233,0.3);
}
@keyframes focusGlow {
  0% { transform: translateY(2px) scale(0.995); filter: saturate(0.9); }
  100% { transform: translateY(0) scale(1); filter: saturate(1); }
}

/* Message action button inline flex sibling, appears left of bubble on hover */
.message-wrapper {
  display: flex; justify-content: flex-end; align-items: flex-start;
  margin-bottom: 12px; position: relative; gap: 4px;
}
/* Only animate newly sent messages */
.message-wrapper.message-new { animation: slideUp 0.25s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.message-utils {
  /* NOT absolute: sits in the flex row, to the left of the message bubble */
  width: 28px; height: 28px; flex-shrink: 0; align-self: flex-start; margin-top: 6px;
  background: var(--z-bg-side); border: 1px solid var(--z-border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s; color: var(--z-text-muted);
}
.message-wrapper:hover .message-utils { opacity: 1; }
.message-utils:hover { color: var(--z-text); background: var(--z-hover); }

/* Input Area */
.input-area {
  background-color: var(--z-bg-side);
  border-top: 1px solid var(--z-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.input-toolbar { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--z-border); }
.toolbar-btn { background: transparent; border: none; color: var(--z-text-muted); font-size: 20px; cursor: pointer; width: 32px; height: 32px; border-radius: 4px; }
.toolbar-btn:hover { color: var(--z-text); background: var(--z-hover);}
.toolbar-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.toolbar-btn:disabled:hover { color: var(--z-text-muted); background: transparent; }

.input-wrapper { display: flex; align-items: center; padding: 8px 16px; gap: 12px; background: var(--z-bg-side);}
.message-input { flex: 1; background: transparent; border: none; outline: none; padding: 8px 0; font-size: 15px; color: var(--z-text); resize: none; max-height: 120px; font-family: inherit; line-height: 1.5; }
.message-input::placeholder { color: var(--z-text-muted); }
.input-actions-right { display: flex; align-items: center; gap: 8px; }
.send-btn { background-color: var(--z-primary); color: white; border: none; border-radius: 4px; width: 36px; height: 36px; font-size: 16px; cursor: pointer; }
.send-btn:hover:not(:disabled) { background-color: var(--z-primary-hover); }
.send-btn:disabled { background-color: var(--z-hover); color: var(--z-text-muted); cursor: not-allowed; }

.paste-images-preview {
  margin: 8px 16px 2px 16px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--z-border);
  background: rgba(255,255,255,0.02);
}
.paste-images-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--z-text-muted);
}
.paste-clear-btn {
  background: transparent;
  color: var(--z-danger);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 6px;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}
.paste-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}
.paste-image-item {
  position: relative;
  aspect-ratio: 1;
}
.paste-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
}
.paste-image-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--z-danger);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reply */
.reply-preview { display: none; background-color: var(--z-bg-chat); border-left: 3px solid var(--z-primary); padding: 8px 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--z-border);}
.reply-preview.active { display: flex; }
.reply-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--z-text-muted); }
.reply-close { background: transparent; border: none; color: var(--z-text-muted); font-size: 16px; cursor: pointer; }

/* Right Sidebar collapsible on desktop too */
.right-sidebar {
  width: 320px; background-color: var(--z-bg-side); border-left: 1px solid var(--z-border);
  display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto;
  transition: width 0.25s ease, opacity 0.25s ease;
}
.right-sidebar.sidebar-hidden { width: 0; overflow: hidden; opacity: 0; pointer-events: none; border-left: none; }
.rs-header { height: 64px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--z-border); font-size: 16px; font-weight: 600; flex-shrink: 0; }
.rs-profile { padding: 24px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; border-bottom: 8px solid var(--z-bg-chat); }
.rs-avatar { width: 64px; height: 64px; background: var(--z-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 12px; }
.rs-profile h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.rs-profile p { font-size: 13px; color: var(--z-text-muted); line-height: 1.4; }

.rs-storage-card { padding: 16px; border-bottom: 8px solid var(--z-bg-chat); }
.storage-header { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.storage-bar { height: 8px; border-radius: 4px; display: flex; overflow: hidden; margin-bottom: 12px; background: var(--z-hover);}
.bar-img { background: #f59e0b; }
.bar-vid { background: #10b981; }
.bar-file { background: #3b82f6; }
.bar-other { background: #6b7280; }
.storage-legend { display: flex; gap: 12px; font-size: 12px; color: var(--z-text-muted); margin-bottom: 16px; flex-wrap: wrap;}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.img-dot { background: #f59e0b; }
.vid-dot { background: #10b981; }
.file-dot { background: #3b82f6; }
.other-dot { background: #6b7280; }
.clean-btn { width: 100%; background: var(--z-hover); border: none; color: var(--z-text); padding: 8px 0; border-radius: 6px; font-weight: 500; cursor: pointer; margin-bottom: 16px; font-size: 13px;}

.upgrade-alert { background: rgba(0, 104, 255, 0.1); border: 1px solid rgba(0, 104, 255, 0.2); border-radius: 8px; padding: 12px; display: flex; gap: 12px; }
.alert-icon { color: var(--z-primary); margin-top: 2px; }
.alert-content strong { display: block; font-size: 13px; margin-bottom: 4px; color: var(--z-text);}
.alert-content span { display: block; font-size: 12px; color: var(--z-text-muted); margin-bottom: 12px; line-height: 1.4;}
.upgrade-btn { background: var(--z-primary); color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer;}

.rs-section { border-bottom: 1px solid var(--z-border); padding: 12px 16px; }
.rs-section-header { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; cursor: pointer; }
.rs-section-header i.arrow { font-size: 12px; color: var(--z-text-muted); }
.media-grid-rs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; }
.media-grid-rs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; cursor: pointer; }
.view-all-btn { width: 100%; background: var(--z-hover); border: none; color: var(--z-text); padding: 8px 0; border-radius: 6px; font-weight: 500; cursor: pointer; font-size: 13px; margin-top: 12px;}

.files-list-rs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rs-file-item { display: flex; align-items: center; gap: 12px; background: var(--z-bg-chat); padding: 8px; border-radius: 6px; text-decoration: none; color: inherit; border: 1px solid var(--z-border);}
.rs-file-icon { font-size: 20px; color: var(--z-primary); }
.rs-file-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; color: var(--z-text);}
.rs-file-date { font-size: 11px; color: var(--z-text-muted); }

/* Context/Modals */
.context-menu { position: fixed; background: var(--z-bg-side); border: 1px solid var(--z-border); border-radius: 8px; box-shadow: var(--shadow-lg); z-index: 1000; min-width: 180px; padding: 8px 0; opacity: 0; transform: scale(0.95); transition: all 0.15s ease; pointer-events: none; }
.context-menu.active { opacity: 1; transform: scale(1); pointer-events: all; }
.context-menu-item { padding: 10px 16px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 12px; transition: background-color 0.2s; }
.context-menu-item:hover { background-color: var(--z-hover); }
.context-menu-divider { height: 1px; background-color: var(--z-border); margin: 4px 0; }
.context-menu-item.danger { color: var(--z-danger); }
.context-menu-item.danger:hover { background-color: rgba(239, 68, 68, 0.1); }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal { background: var(--z-bg-side); border-radius: 12px; padding: 24px; width: 400px; border: 1px solid var(--z-border); box-shadow: 0 20px 60px rgba(0,0,0,0.6); transform: scale(0.95); transition: transform 0.2s; }
.modal-overlay.active .modal { transform: scale(1); }
.modal-header { font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.modal-input { width: 100%; padding: 10px 12px; background: var(--z-bg-chat); border: 1px solid var(--z-border); color: var(--z-text); border-radius: 6px; outline: none; margin-bottom: 16px; font-size: 14px; }
.modal-input:focus { border-color: var(--z-primary); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-btn { padding: 9px 20px; border-radius: 6px; border: none; font-weight: 500; cursor: pointer; font-size: 14px; transition: opacity 0.15s; }
.modal-btn:hover { opacity: 0.85; }
.modal-btn.primary { background: var(--z-primary); color: white; }
.modal-btn.secondary { background: var(--z-hover); color: var(--z-text); }
.modal-btn.danger-btn { background: var(--z-danger); color: white; }

/* Confirm modal specific */
.confirm-modal { text-align: center; }
.confirm-icon { font-size: 44px; margin-bottom: 12px; }
.confirm-icon.icon-danger { color: var(--z-danger); }
.confirm-icon.icon-info { color: var(--z-primary); }
.confirm-icon.icon-warn { color: #f59e0b; }
.confirm-body { font-size: 14px; color: var(--z-text-muted); margin-bottom: 24px; line-height: 1.6; }
.confirm-modal .modal-actions { justify-content: center; gap: 16px; }
.confirm-modal .modal-btn { min-width: 110px; }

.image-popup-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 3000; justify-content: center; align-items: center; }
.image-popup-box { position: relative; max-width: 90vw; max-height: 90vh; }
.image-popup-img { max-width: 90vw; max-height: 80vh; }
.image-popup-actions { position: absolute; top: -40px; right: 0; display: flex; gap: 12px; }
.icon-btn-light { background: rgba(255,255,255,0.2); border: none; color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; }

/* Back button: desktop hidden, mobile visible */
.back-btn { display: none; }

/* Mobile overlay for right sidebar */
.rs-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 18; }
.rs-overlay.active { display: block; }

/* Responsive adjustments */
@media (max-width: 1200px) {
  .right-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    height: calc(var(--app-vh, 1vh) * 100);
    width: min(88vw, 360px) !important;
    z-index: 20;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto !important;
    opacity: 1 !important;
    pointer-events: all !important;
    border-left: 1px solid var(--z-border) !important;
  }

  .right-sidebar.sidebar-hidden {
    width: min(88vw, 360px) !important;
    transform: translateX(100%);
    opacity: 1 !important;
    pointer-events: all !important;
    border-left: 1px solid var(--z-border) !important;
  }

  .right-sidebar.mobile-rs-active {
    transform: translateX(0);
  }
}

@media (max-width: 900px) {
  .nav-strip { display: none; }

  /* Mobile: left sidebar always shown, chat area hidden by default */
  .app-container { position: relative; overflow: hidden; }
  .left-sidebar {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 100%; z-index: 10;
    transform: translateX(0); transition: transform 0.3s;
  }
  .left-sidebar.mobile-hidden { transform: translateX(-100%); }

  .chat-area {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 100%; z-index: 9;
    transform: translateX(100%); transition: transform 0.3s;
    height: calc(var(--app-vh, 1vh) * 100);
  }
  .chat-area.mobile-active {
    transform: translateX(0);
  }

  /* Mobile right sidebar as full overlay */
  .right-sidebar {
    position: fixed; right: 0; top: 0; bottom: 0;
    width: min(92vw, 360px) !important;
    z-index: 20;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto !important;
    opacity: 1 !important;
    pointer-events: all !important;
    border-left: 1px solid var(--z-border) !important;
  }
  .right-sidebar.mobile-rs-active { transform: translateX(0); }

  /* Show back button on mobile */
  .back-btn { display: flex; }
  #renameHeaderBtn,
  #changeBgBtn { display: none; }

  /* Narrow message bubbles on mobile */
  .chat-header { padding: 0 10px; }
  .chat-header-info h1 { font-size: 15px; }
  .status-text { font-size: 11px; line-height: 1.2; }
  .chat-header-right { gap: 4px; }
  .icon-btn { width: 32px; height: 32px; font-size: 16px; }

  .message { max-width: 92%; min-width: 0; }
  .message.image,
  .message.image-group { max-width: 92%; }
  .image-preview {
    max-width: 100%;
    max-height: min(46vh, 340px);
  }
  .image-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .messages-container {
    padding: 12px 4%;
    overscroll-behavior: contain;
  }

  /* Make input area full bottom */
  .input-area {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding-bottom: max(env(safe-area-inset-bottom), 8px);
  }
  .input-toolbar {
    padding: 6px 10px;
    gap: 6px;
    overflow-x: auto;
  }
  .input-wrapper {
    padding: 6px 10px;
    gap: 8px;
  }
  .message-input {
    font-size: 16px; /* Prevent iOS zoom + keeps keyboard behavior stable */
    max-height: 30vh;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .nav-strip { width: 56px; }
  .left-sidebar { width: 290px; }
  .right-sidebar { width: 290px; }
  .chat-header { padding: 0 12px; }
  .chat-header-right { gap: 6px; }
  .icon-btn { width: 34px; height: 34px; font-size: 17px; }
  .message { max-width: 78%; }
  .message.image { max-width: min(48vw, 360px); }
}

/* Always hide native file inputs (triggered programmatically) */
.hidden-file-input { display: none !important; }

/* Phase 2.1 UI Enhancements */
.storage-viewer-modal {
  width: min(920px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.storage-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.storage-viewer-body {
  overflow: auto;
  border-top: 1px solid var(--z-border);
  padding-top: 12px;
}
.storage-viewer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.storage-viewer-grid img,
.storage-viewer-grid video {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--z-border);
}
.storage-viewer-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.storage-viewer-empty {
  text-align: center;
  color: var(--z-text-muted);
  font-size: 14px;
  padding: 24px 8px;
}
#storageUsageText.storage-over-limit {
  color: var(--z-danger);
  font-weight: 700;
}
.message-day-separator {
  align-self: center;
  margin: 8px 0 14px;
  background: rgba(30, 38, 51, 0.92);
  border: 1px solid var(--z-border);
  color: var(--z-text-muted);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
  .storage-viewer-modal {
    width: 96vw;
    max-height: 90vh;
    padding: 12px;
  }
  .storage-viewer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Login Page */
body.login-page {
  min-height: 100vh;
  height: auto;
  overflow: auto;
  background:
    radial-gradient(1000px 450px at 10% -20%, rgba(0, 104, 255, 0.22), transparent 60%),
    radial-gradient(900px 400px at 90% 120%, rgba(16, 185, 129, 0.14), transparent 60%),
    var(--z-bg-chat);
}

.login-page .login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.login-page .login-card {
  width: min(560px, 100%);
  border-radius: 18px;
  border: 1px solid var(--z-border);
  background: linear-gradient(155deg, rgba(24, 29, 36, 0.96), rgba(16, 20, 26, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.login-page .auth-panel {
  display: none;
  padding: 32px 30px 30px;
}

.login-page .auth-panel.active {
  display: block;
}

.login-page .login-title {
  font-size: 30px;
  line-height: 1.15;
  margin-bottom: 8px;
  color: #f8fafc;
}

.login-page .login-subtitle {
  color: var(--z-text-muted);
  font-size: 15px;
  margin-bottom: 24px;
}

.login-page .login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-page .login-alert {
  display: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid transparent;
}

.login-page .login-alert.alert-error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fecaca;
}

.login-page .login-alert.alert-success {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: #a7f3d0;
}

.login-page .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-page .form-label {
  font-size: 13px;
  color: var(--z-text-muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.login-page .form-input {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--z-border);
  background: rgba(8, 12, 18, 0.85);
  color: var(--z-text);
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.login-page .form-input:focus {
  border-color: rgba(0, 104, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(0, 104, 255, 0.22);
  background: rgba(8, 12, 18, 0.95);
}

.login-page .form-input::placeholder {
  color: #64748b;
}

.login-page .vault-code-input {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-page .btn-primary {
  margin-top: 6px;
  height: 44px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(120deg, #0068ff 0%, #0ea5e9 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, filter 0.2s, opacity 0.2s;
}

.login-page .btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.login-page .btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.login-page .btn-create {
  background: linear-gradient(120deg, #10b981 0%, #06b6d4 100%);
}

.login-page .auth-switch {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--z-text-muted);
}

.login-page .auth-link {
  background: none;
  border: none;
  color: #7dd3fc;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  padding: 0;
}

.login-page .auth-link:hover {
  text-decoration: underline;
}

.login-page .loader {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .login-page .login-container {
    padding: 16px;
  }

  .login-page .auth-panel {
    padding: 22px 18px;
  }

  .login-page .login-title {
    font-size: 24px;
  }
}