/* DOZ Messenger — full responsive layout, dark/light, no inline styles. */
:root {
  --sidebar-w: 340px;
  /* Fallback for browsers without JS/dvh support; overridden by app.js and
     by 100dvh below on browsers that support it. Fixes mobile Chrome/Samsung
     Internet where 100vh includes the address bar and pushes the composer
     (message input + send button) off-screen, below the visible viewport. */
  --app-height: 100vh;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; height: var(--app-height); overflow: hidden; }
@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

/* Auth */
.auth-wrap { display: flex; align-items: center; justify-content: center; height: 100%; padding: 16px; }
.auth-card { width: 100%; max-width: 380px; }

/* App shell */
#app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: var(--app-height); }

/* Sidebar */
.sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--bs-border-color); overflow: hidden; }
.sb-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--bs-border-color); }
.sb-tabs { display: flex; border-bottom: 1px solid var(--bs-border-color); }
.sb-tab { flex: 1; padding: 8px 0; border: none; background: none; font-size: 13px; cursor: pointer; color: var(--bs-secondary-color); }
.sb-tab.active { color: var(--bs-primary); border-bottom: 2px solid var(--bs-primary); font-weight: 600; }
.sb-panel { flex: 1; overflow-y: auto; }
.sb-search { margin: 8px; width: calc(100% - 16px); }

/* Avatars */
.avatar-sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bs-secondary-bg); flex-shrink: 0; }
.avatar-md { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bs-secondary-bg); flex-shrink: 0; }

/* Conversation list items */
.conv-list { display: flex; flex-direction: column; }
.conv-item { display: flex; gap: 10px; padding: 10px 14px; cursor: pointer; align-items: center; border-bottom: 1px solid var(--bs-border-color-translucent); }
.conv-item:hover, .conv-item.active { background: var(--bs-primary-bg-subtle); }
.conv-item .info { flex: 1; min-width: 0; }
.conv-item .name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item .preview { font-size: 12px; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item .meta { text-align: right; flex-shrink: 0; }
.conv-item .meta .time { font-size: 11px; color: var(--bs-secondary-color); }
.conv-item .badge { font-size: 10px; }

/* Chat area */
.chat-area { display: flex; flex-direction: column; height: var(--app-height); overflow: hidden; }
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.chat-active { display: flex; flex-direction: column; height: var(--app-height); }
.chat-header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--bs-border-color); flex-shrink: 0; }
.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; }

/* Message bubbles */
.msg { max-width: 72%; padding: 8px 12px; border-radius: 14px; word-break: break-word; position: relative; font-size: 14px; }
.msg.mine { align-self: flex-end; background: var(--bs-primary); color: #fff; border-bottom-right-radius: 4px; }
.msg.theirs { align-self: flex-start; background: var(--bs-secondary-bg); border-bottom-left-radius: 4px; }
.msg .msg-time { font-size: 10px; opacity: .7; margin-top: 2px; text-align: right; }
.msg .msg-sender { font-size: 11px; font-weight: 600; margin-bottom: 2px; opacity: .9; }
.msg .msg-reactions { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.msg .msg-reactions span { font-size: 14px; cursor: pointer; background: var(--bs-secondary-bg); border-radius: 10px; padding: 0 5px; }
.msg .secret-lock { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.msg .secret-lock input { flex: 1; padding: 4px 8px; border-radius: 8px; border: 1px solid #ccc; font-size: 13px; }
.msg-img { max-width: 260px; border-radius: 8px; cursor: pointer; }
.msg-audio { width: 100%; max-width: 240px; }
.msg-file { display: flex; gap: 8px; align-items: center; }
.msg-file i { font-size: 24px; }
.system-msg { align-self: center; font-size: 12px; color: var(--bs-secondary-color); background: var(--bs-secondary-bg); border-radius: 10px; padding: 4px 12px; }

/* Composer */
.composer { border-top: 1px solid var(--bs-border-color); padding: 6px 12px; flex-shrink: 0; }
.composer-secret { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.composer-row { display: flex; align-items: center; gap: 6px; }
.composer-row .form-control { border-radius: 20px; }

/* Voice recording indicator */
.recording-indicator { color: #dc2626; font-size: 13px; display: flex; align-items: center; gap: 6px; flex: 1; }
.recording-dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* Icon buttons */
.icon-btn { background: none; border: none; padding: 6px; border-radius: 8px; cursor: pointer; font-size: 18px; color: var(--bs-body-color); -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.icon-btn:hover { background: var(--bs-secondary-bg); }
.flex-1 { flex: 1; min-width: 0; }

/* Emoji picker */
.emoji-picker { position: absolute; bottom: 70px; left: 60px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 12px; padding: 10px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-height: 240px; overflow-y: auto; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.emoji-picker span { font-size: 22px; cursor: pointer; text-align: center; padding: 2px; border-radius: 6px; }
.emoji-picker span:hover { background: var(--bs-secondary-bg); }

/* Modals */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; }
.modal-box { background: var(--bs-body-bg); border-radius: 14px; padding: 20px; width: 100%; max-width: 440px; }

/* Status */
.status-item { display: flex; gap: 10px; padding: 10px 14px; cursor: pointer; align-items: center; }
.status-item:hover { background: var(--bs-secondary-bg); }
.status-ring { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--bs-primary); padding: 2px; }
.status-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.status-view-box { background: #000; width: 100%; max-width: 420px; border-radius: 14px; position: relative; overflow: hidden; }
.status-content { min-height: 300px; display: flex; align-items: center; justify-content: center; }
.status-content img, .status-content video { max-width: 100%; max-height: 70vh; }
.status-content .text-status { font-size: 22px; font-weight: 600; color: #fff; padding: 40px; text-align: center; }
.status-caption { color: #fff; padding: 12px; text-align: center; font-size: 14px; }

/* Contact items */
.friend-item { display: flex; gap: 10px; padding: 8px 14px; align-items: center; }
.friend-item .info { flex: 1; }
.pending-card { background: var(--bs-warning-bg-subtle); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.pending-card .info { flex: 1; font-size: 13px; }

/* Call overlay */
#callOverlay { position: fixed; inset: 0; background: #0b0f14; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.call-box { width: 100%; height: 100%; display: flex; flex-direction: column; }
.call-videos { position: relative; flex: 1; background: #000; overflow: hidden; }
#remoteVid { width: 100%; height: 100%; object-fit: cover; background: #111; }
#localVid.local { position: absolute; bottom: 100px; right: 16px; width: 130px; height: 180px; object-fit: cover; border-radius: 12px; border: 2px solid #fff; background: #222; }
.call-videos.audio-only #remoteVid, .call-videos.audio-only #localVid {
  /* NOT display:none — some mobile browsers (notably iOS Safari) stop playing
     a <video> element's audio track entirely once display:none is applied.
     Position off-screen instead so audio keeps flowing during voice-only calls. */
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.call-info { position: absolute; top: 24px; left: 0; right: 0; text-align: center; color: #fff; }
.call-info .peer-name { font-size: 22px; font-weight: 600; }
.call-info .call-status { opacity: .8; margin-top: 4px; }
.call-controls { display: flex; gap: 16px; justify-content: center; padding: 22px; background: #111827; }
.cc { width: 56px; height: 56px; border-radius: 50%; border: none; font-size: 20px; color: #fff; background: #374151; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.cc:hover { background: #4b5563; }
.cc-green { background: #16a34a; } .cc-red { background: #dc2626; }
.cc-off { background: #dc2626; } .cc-active { background: #2563eb; }

/* Responsive */
@media (max-width: 768px) {
  #app { grid-template-columns: 1fr; }
  .sidebar { position: absolute; inset: 0; z-index: 40; background: var(--bs-body-bg); width: 100%; }
  .sidebar.hidden { display: none; }
  .chat-area.no-chat .chat-active { display: none; }
  .chat-area.no-chat .chat-empty { display: flex; }
  #localVid.local { width: 96px; height: 132px; bottom: 96px; }

  /* Messages: never overflow the viewport width, and shrink the max bubble width */
  .messages { padding: 10px; }
  .msg { max-width: 84%; font-size: 14px; }
  .msg-img { max-width: min(220px, 60vw); width: 100%; height: auto; }
  .msg-audio { max-width: min(220px, 65vw); }

  /* Composer: bigger touch targets, wrap secret-row instead of overflowing */
  .composer { padding: 6px 8px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .composer-secret { flex-wrap: wrap; }
  .icon-btn { font-size: 20px; padding: 8px; }

  /* Emoji picker: full width sheet instead of a floating box that can overflow */
  .emoji-picker {
    left: 8px; right: 8px; bottom: 64px; width: auto;
    grid-template-columns: repeat(7, 1fr); max-height: 200px;
  }

  /* Modals: use full width with side margins, avoid tiny cramped boxes */
  .modal-bg { padding: 16px 10px; align-items: center; }
  .modal-box { max-width: 100%; }
  .status-view-box { max-width: 100%; }

  /* Conversation list rows: slightly larger tap targets */
  .conv-item, .friend-item, .status-item { padding: 12px 14px; }
  .avatar-md { width: 46px; height: 46px; }

  /* Sidebar tabs: keep labels legible on narrow screens */
  .sb-tab { font-size: 12px; padding: 10px 0; }
  .sb-header { padding: 8px 10px; }

  /* Chat header: keep call buttons reachable, allow name to truncate */
  .chat-header { padding: 6px 10px; gap: 6px; }
  #peerName { font-size: 15px; }

  /* Call overlay controls: wrap on very narrow screens, bigger touch targets */
  .call-controls { padding: 16px 10px; gap: 12px; flex-wrap: wrap; }
  .cc { width: 52px; height: 52px; font-size: 18px; }
}

/* Extra-small phones (e.g. iPhone SE, older Android) */
@media (max-width: 380px) {
  .msg { max-width: 88%; font-size: 13px; }
  .avatar-md { width: 40px; height: 40px; }
  .cc { width: 46px; height: 46px; font-size: 16px; }
  .sb-tab i { display: none; } /* icons take too much room; keep just the label */
}

/* Tablets: keep the two-column layout but narrow the sidebar a bit */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 300px; }
}

/* Respect safe-area insets on notched phones (iPhone) for the top bar too */
@supports (padding: max(0px)) {
  .topbar, .sb-header { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
}

/* Settings: profile photo preview */
.avatar-preview-lg { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--bs-secondary-bg); }

/* Custom voice message player (replaces native <audio controls>, which
   rendered as a broken-looking collapsed control at narrow bubble widths). */
.voice-player { display: flex; align-items: center; gap: 8px; min-width: 180px; padding: 2px 0; }
.voice-play-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer;
  background: rgba(255,255,255,.25); color: inherit;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; padding: 0;
}
.msg.theirs .voice-play-btn { background: var(--bs-primary); color: #fff; }
.voice-progress { flex: 1; height: 4px; background: rgba(127,127,127,.35); border-radius: 4px; cursor: pointer; position: relative; }
.voice-progress-bar { height: 100%; width: 0%; background: currentColor; border-radius: 4px; }
.voice-time { font-size: 11px; opacity: .8; min-width: 34px; text-align: right; flex-shrink: 0; }

/* Always-visible per-message menu button (kebab) — a tap-friendly alternative
   to long-press/right-click for opening react/reply/edit/delete/star/copy. */
.msg { padding-right: 26px; }
.msg-kebab {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: none; background: none;
  color: inherit; opacity: .55; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.msg-kebab:hover { opacity: 1; background: rgba(127,127,127,.2); }

/* Install-app banner (works with the browser's native "Add to Home Screen"
   install prompt on Android/desktop Chrome, or shows manual steps on iOS). */
.install-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: var(--bs-primary); color: #fff;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; font-size: 13px;
}
.install-banner span { flex: 1; }

/* Media download affordance — lets people save images/videos/voice notes/
   documents from a chat to their own device (a plain <a download> link,
   which needs no special browser permission, just a normal click). */
.media-wrap { position: relative; display: inline-block; }
.media-download {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; text-decoration: none; opacity: 0; transition: opacity .15s;
}
.media-wrap:hover .media-download, .media-wrap:focus-within .media-download { opacity: 1; }
/* Always show on touch devices (no hover) so it's reachable without a long-press. */
@media (hover: none) { .media-download { opacity: .85; } }
.voice-download {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: inherit; text-decoration: none; opacity: .7; flex-shrink: 0;
}
.voice-download:hover { opacity: 1; background: rgba(127,127,127,.2); }
.msg-file .media-download {
  position: static; width: 30px; height: 30px; background: var(--bs-secondary-bg); color: var(--bs-body-color); opacity: 1;
}
.msg.mine .msg-file .media-download { background: rgba(255,255,255,.25); color: #fff; }

/* Image lightbox — tap/click a photo in chat to zoom it fullscreen. */
.img-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 1300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.img-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox-close, .lightbox-download {
  position: absolute; top: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; border: none; display: flex;
  align-items: center; justify-content: center; font-size: 18px; cursor: pointer; text-decoration: none;
}
.lightbox-close { right: 16px; }
.lightbox-download { right: 66px; }
.lightbox-close:hover, .lightbox-download:hover { background: rgba(255,255,255,.3); }

/* Document viewer — inline preview for PDF/text files (tap a document row). */
.doc-viewer {
  position: fixed; inset: 0; background: var(--bs-body-bg); z-index: 1300;
  display: flex; flex-direction: column;
}
.doc-viewer-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--bs-border-color); flex-shrink: 0;
}
.doc-viewer-bar span { flex: 1; font-weight: 600; font-size: 14px; }
.doc-viewer-bar a, .doc-viewer-close {
  width: 34px; height: 34px; border-radius: 8px; border: none; background: var(--bs-secondary-bg);
  color: var(--bs-body-color); display: flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; font-size: 16px;
}
.doc-viewer-bar a:hover, .doc-viewer-close:hover { background: var(--bs-border-color); }
.doc-viewer iframe { flex: 1; border: none; width: 100%; }
.doc-viewer-text {
  flex: 1; margin: 0; padding: 16px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, monospace; font-size: 13px;
}

/* Call overlay — peer profile photo (big + centered for voice calls since
   there's no video to look at; small alongside the name for video calls). */
.call-avatar-wrap {
  position: relative; border-radius: 50%; overflow: hidden; margin: 0 auto 12px;
  background: #374151; display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,255,255,.15);
}
.call-avatar-wrap.lg { width: 140px; height: 140px; font-size: 56px; }
.call-avatar-wrap.sm { width: 64px; height: 64px; font-size: 26px; margin-bottom: 8px; }
.call-avatar-fallback { color: #9ca3af; }
.call-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Photo crop/adjust modal — drag to reposition, slider to zoom, before a
   profile photo is uploaded. Pure CSS/canvas, no external library. */
.crop-modal-box { max-width: 360px; }
.crop-viewport {
  width: 260px; height: 260px; margin: 0 auto; border-radius: 50%; overflow: hidden;
  position: relative; background: #000; touch-action: none; cursor: grab; user-select: none;
}
.crop-viewport:active { cursor: grabbing; }
.crop-viewport img { position: absolute; top: 0; left: 0; user-select: none; -webkit-user-drag: none; pointer-events: none; }

/* Online/offline status dot on avatars (conversation list + contacts). */
.avatar-status-wrap { position: relative; flex-shrink: 0; }
.status-dot {
  position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--bs-body-bg);
}
.status-dot.online { background: #22c55e; }
.status-dot.offline { background: #9ca3af; }

/* "Tap to enable sound" fallback banner — shown only if the browser blocked
   autoplay audio; fixed-positioned so it never overlaps the profile photo or
   gets shuffled by the call overlay's flex layout. */
.unmute-banner {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  background: #2563eb; color: #fff; border: none; border-radius: 24px;
  padding: 10px 18px; font-size: 14px; display: flex; align-items: center; gap: 8px;
  cursor: pointer; z-index: 1250; box-shadow: 0 4px 14px rgba(0,0,0,.35);
  white-space: nowrap;
}
.unmute-banner:hover { background: #1d4ed8; }