/* Runa Chat — Main UI Stylesheet */

/* ═══════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */

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

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--bg-app);
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--text-link); text-decoration: none }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit }
input, textarea { font-family: inherit; color: var(--text-primary); outline: none }

::-webkit-scrollbar { width: 6px }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px }

/* Animations */
@keyframes slideIn { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(100%) } to { transform: none } }
@keyframes bounceIn { 0% { transform: scale(0) } 60% { transform: scale(1.15) } 100% { transform: scale(1) } }
@keyframes pulse { 0%, 100% { opacity: 0.6 } 50% { opacity: 1 } }
@keyframes dots { 0%, 20% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

#app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  height: 100%;
  transition: transform 250ms ease;
}

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-chat);
  position: relative;
  overflow: hidden;
}

.chat-area-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--font-size-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — pixel-perfect from screenshot
   ═══════════════════════════════════════════════════════════════════════════ */

.header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
}

.header-back {
  display: flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header-back:hover { background: rgba(255,255,255,0.06) }

.header-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.header-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-sub {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.header-sub.typing { color: var(--typing) }

.header-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header-btn:hover { background: rgba(255,255,255,0.06) }

/* ═══════════════════════════════════════════════════════════════════════════
   AVATARS
   ═══════════════════════════════════════════════════════════════════════════ */

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% }
.avatar-sm { width: 36px; height: 36px; font-size: 13px }
.avatar-lg { width: 80px; height: 80px; font-size: 28px }
.avatar-online::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  background: var(--online);
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 1;
}

.incoming-chat-notices{position:fixed;right:18px;bottom:18px;z-index:9998;display:flex;flex-direction:column;gap:8px;max-height:75vh;overflow:hidden}
.incoming-chat-notice{display:flex;align-items:center;gap:10px;width:min(340px,calc(100vw - 36px));min-height:68px;padding:10px 12px;border:1px solid rgba(27,52,87,.12);border-radius:14px;background:#fff;box-shadow:0 12px 36px rgba(15,23,42,.2);text-align:left;color:#172b4d;animation:slideUp .2s ease-out}
.incoming-chat-notice .avatar{width:42px;height:42px}
.incoming-chat-notice>span:nth-child(2){min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.incoming-chat-notice strong,.incoming-chat-notice small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.incoming-chat-notice small{color:#66758a;font-size:12px}
.incoming-chat-notice-close{align-self:flex-start;font-size:20px;line-height:1;color:#7b8794}
.header-sub.is-typing,.chat-item-preview.is-typing{color:#1685d1}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.filter-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}

.filter-tab {
  padding: 6px 20px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filter-tab.active { background: var(--accent-violet); color: #fff; border-color: transparent }

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

.chat-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.chat-item:hover { background: rgba(255,255,255,0.03) }
.chat-item.active { background: rgba(168,85,247,0.12); border-left: 3px solid var(--accent-violet) }

.chat-item-info { flex: 1; min-width: 0 }
.chat-item-top { display: flex; justify-content: space-between; align-items: center }
.chat-item-name { font-size: var(--font-size-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chat-item-time { font-size: var(--font-size-xs); color: var(--text-muted); flex-shrink: 0 }
.chat-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 2px }
.chat-item-preview { font-size: var(--font-size-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 }

.badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bounceIn 180ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MESSAGES — pixel-perfect from screenshot
   ═══════════════════════════════════════════════════════════════════════════ */

.messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-anchor: none;
}

.message-virtual-spacer {
  flex: 0 0 auto;
  width: 1px;
  min-height: 0;
  pointer-events: none;
  visibility: hidden;
}

.group-member-wrap { border-bottom: 1px solid var(--border); }
.group-member-wrap .group-member { border-bottom: 0; }
.group-member-permissions { padding: 0 16px 14px 70px; }
.group-member-permissions .btn-primary { margin-top: 10px; }
.composer:has(.mention-popup) { overflow: visible; }

.msg {
  display: flex;
  contain: layout;
}
/* v0.9.5: Animation only for NEW messages, not batch render */
.msg.msg-new {
  animation: slideIn 200ms ease-out;
}
.msg-own { justify-content: flex-end }
.msg-other { justify-content: flex-start }

/* Bubble — exact sizes from screenshot */
.msg-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: var(--radius-msg);
  word-wrap: break-word;
  line-height: 1.4;
  position: relative;
}

/* Own messages — violet #A855F7 */
.msg-own .msg-bubble {
  background: var(--bg-msg-own);
  border-bottom-right-radius: var(--radius-msg-tail);
  color: #fff;
}

/* Other messages — dark translucent */
.msg-other .msg-bubble {
  background: var(--bg-msg-other);
  border-bottom-left-radius: var(--radius-msg-tail);
  color: #fff;
}

.msg-sender {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--accent-violet);
  margin-bottom: 2px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.msg-sender:hover {
  opacity: 0.8;
}

.msg-text {
  font-size: var(--font-size-base);
  white-space: pre-wrap;
}

.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
}

.msg-time {
  font-size: var(--font-size-xs);
  color: var(--text-time);
}

.msg-status {
  font-size: 10px;
  color: var(--text-time);
}
.msg-status.read { color: var(--accent-blue); opacity: 1 }

/* Reply block */
.msg-reply {
  background: rgba(255,255,255,0.08);
  border-left: 3px solid var(--accent-violet);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
}
.msg-reply-name {
  font-weight: 600;
  color: var(--accent-violet);
  font-size: var(--font-size-xs);
}

/* System messages */
.msg-system { text-align: center; padding: 4px 16px }
.msg-system .msg-bubble {
  background: var(--bg-msg-system);
  border-radius: var(--radius-sm);
  max-width: 80%;
  margin: 0 auto;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.msg-deleted { opacity: 0.6; font-style: italic }

/* Reactions */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.msg-reaction {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: 0;
  color: inherit;
  font: inherit;
}
.msg-reaction:hover { background: rgba(255,255,255,0.15) }
.msg-reaction.active { background: rgba(168,85,247,0.3) }
.msg-reaction>span{font-size:11px;margin-left:2px}
.reaction-users-overlay{z-index:2147483150}
.reaction-users-modal{width:min(420px,calc(100vw - 24px));max-height:min(640px,calc(100vh - 32px));padding:0;overflow:hidden}
.reaction-users-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.reaction-users-head>div{display:flex;align-items:center;gap:11px}.reaction-users-head strong,.reaction-users-head small{display:block}.reaction-users-head small{margin-top:2px;color:var(--text-secondary);font-size:11px}.reaction-users-emoji{font-size:30px}
.reaction-users-list{display:grid;max-height:390px;overflow:auto;padding:8px}
.reaction-user-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:11px;background:transparent;color:inherit;text-align:left;cursor:pointer}.reaction-user-row:hover{background:var(--bg-soft,#f5f7fa)}.reaction-user-row>span{display:flex;min-width:0;flex:1;flex-direction:column}.reaction-user-row strong,.reaction-user-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reaction-user-row small{color:var(--text-secondary);font-size:11px}.reaction-user-row em{color:var(--accent-orange,#f58220);font-size:11px;font-style:normal;font-weight:700}
.reaction-users-empty{padding:28px 16px;color:var(--text-secondary);font-size:13px;text-align:center}.reaction-users-more{width:calc(100% - 32px);margin:0 16px 8px;padding:8px;border:0;background:transparent;color:var(--accent-blue);cursor:pointer}.reaction-users-action{width:calc(100% - 32px);margin:8px 16px 16px}
@media(max-width:520px){.reaction-users-overlay{align-items:end;padding:0}.reaction-users-modal{width:100%;max-height:78vh;border-radius:22px 22px 0 0}.reaction-users-list{max-height:52vh}}

/* File attachment */
.msg-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.msg-file-name { font-size: var(--font-size-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.msg-file-size { font-size: var(--font-size-xs); color: var(--text-secondary) }
.msg-file-icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;color:var(--accent-orange,#f58220)}
.msg-file-icon svg{width:24px;height:24px}
.upload-progress-bar{height:4px;margin:6px 0 3px;overflow:hidden;border-radius:999px;background:var(--border)}
.upload-progress-bar-fill{height:100%;border-radius:inherit;background:var(--accent-orange,#f58220);transition:width .15s linear}
.upload-item-cancel{position:relative;z-index:7;width:28px;height:28px;flex:0 0 auto;background:rgba(20,33,50,.62);color:#fff}
.upload-item-cancel svg{width:15px;height:15px}
.msg-file>.upload-item-cancel{background:transparent;color:var(--text-secondary)}
.msg-bubble>div[style*="position:relative"]>.upload-item-cancel{position:absolute;top:7px;right:7px}
.upload-item-error{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;color:#f43f5e;font-size:12px}
.upload-item-error span{display:flex;align-items:center;gap:5px}.upload-item-error svg{width:14px;height:14px}
.batch-upload-status{position:absolute;right:14px;bottom:76px;z-index:45;width:min(340px,calc(100% - 28px));padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-modal);box-shadow:var(--shadow-lg)}
.batch-upload-head{display:flex;align-items:center;gap:7px;font-size:13px}.batch-upload-head>svg{width:17px;height:17px;color:var(--accent-orange,#f58220)}
.batch-upload-head b{flex:1}.batch-upload-count{color:var(--text-secondary);font-size:11px}.batch-upload-cancel{width:26px;height:26px}
.batch-upload-track{height:5px;margin:8px 0 5px;overflow:hidden;border-radius:999px;background:var(--border)}
.batch-upload-track span{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent-orange,#f58220);transition:width .15s linear}
.batch-upload-meta{font-size:11px;color:var(--text-secondary)}
.file-preview-modal{width:min(560px,94vw);max-height:min(760px,90vh);padding:0;overflow:hidden}
.file-preview-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px 10px}.file-preview-head .modal-title{margin:0}.file-preview-head small{color:var(--text-secondary);font-size:11px}
.file-common-caption{display:flex;flex-direction:column;gap:5px;padding:0 20px 12px}.file-common-caption>span{font-size:11px;color:var(--text-secondary)}.file-common-caption .input{margin:0;padding:10px 12px}
.file-preview-list{display:flex;max-height:430px;flex-direction:column;gap:7px;padding:0 14px 10px;overflow-y:auto}
.file-preview-item{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--bg-input)}
.file-preview-icon{display:grid;width:34px;height:34px;flex:0 0 auto;place-items:center;border-radius:9px;background:rgba(245,130,32,.1);color:var(--accent-orange,#f58220)}.file-preview-icon svg{width:20px;height:20px}
.file-preview-item>div{display:flex;min-width:0;flex:1;flex-direction:column;gap:3px}.file-preview-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.file-preview-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:10px}
.file-preview-item .input{height:32px;margin:3px 0 0;padding:7px 9px;font-size:11px}.file-preview-item>.btn-icon{width:30px;height:30px;color:var(--text-danger)}
.file-preview-actions{display:flex;justify-content:space-between;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}.file-preview-actions .btn{display:flex;align-items:center;gap:6px}.file-preview-actions .btn svg{width:16px;height:16px}.file-preview-actions .btn-primary{width:auto;padding:10px 18px}
@media(max-width:520px){.file-preview-modal{width:100%;max-width:none;max-height:88vh;align-self:flex-end;border-radius:18px 18px 0 0}.file-preview-list{max-height:48vh}.file-preview-actions{position:sticky;bottom:0;background:var(--bg-modal)}}

/* Date separator */
.date-sep { text-align: center; padding: 12px 0; font-size: var(--font-size-xs); color: var(--text-muted) }
.date-sep span { background: var(--bg-msg-system); padding: 4px 12px; border-radius: var(--radius-full) }

/* Unread separator */
.unread-sep { text-align: center; padding: 8px 0; font-size: var(--font-size-xs); color: var(--accent-violet) }
.unread-sep span { background: rgba(168,85,247,0.15); padding: 4px 12px; border-radius: var(--radius-full) }

/* Typing indicator */
.typing-indicator { padding: 4px 16px; font-size: var(--font-size-sm); color: var(--typing); min-height: 20px }
.typing-dots { display: inline-flex; gap: 3px }
.typing-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--typing); animation: dots 1.4s infinite }
.typing-dots span:nth-child(2) { animation-delay: 0.2s }
.typing-dots span:nth-child(3) { animation-delay: 0.4s }

/* Message actions */
.msg-actions {
  position: absolute;
  top: -8px;
  right: 8px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  background: var(--bg-card);
  border-radius: 8px;
  padding: 2px;
}
.msg-bubble:hover .msg-actions { opacity: 1 }
.msg-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.msg-action-btn:hover { background: rgba(255,255,255,0.1) }

/* ═══════════════════════════════════════════════════════════════════════════
   VOICE MESSAGE — pixel-perfect from screenshot
   ═══════════════════════════════════════════════════════════════════════════ */

.msg-voice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  max-width: 280px;
}

/* Play button — white circle with red play icon (from screenshot) */
.msg-voice-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 16px;
  color: #EF4444;
  user-select: none;
  transition: transform var(--transition-fast);
}
.msg-voice-play:hover { transform: scale(1.05) }
.msg-voice-play:active { transform: scale(0.95) }

.msg-voice-bars {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  cursor: pointer;
  min-width: 0;
}

.msg-voice-bar {
  width: 3px;
  min-width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.35);
  transition: background 80ms linear;
}
.msg-voice-bar.played { background: rgba(255,255,255,0.9) }
.msg-other .msg-voice-bar { background: rgba(168,85,247,0.4) }
.msg-other .msg-voice-bar.played { background: var(--accent-violet) }

.msg-voice-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  line-height: 1.2;
}

.msg-voice-time {
  color: var(--text-time);
  font-variant-numeric: tabular-nums;
}

.msg-voice-speed {
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.12);
  font-size: 10px;
  font-weight: 600;
  user-select: none;
  transition: background var(--transition-fast);
}
.msg-voice-speed:hover { background: rgba(255,255,255,0.22) }
.msg-other .msg-voice-speed { background: rgba(168,85,247,0.2) }
.msg-other .msg-voice-speed:hover { background: rgba(168,85,247,0.35) }

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO MESSAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.msg-video {
  position: relative;
  max-width: 320px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: rgba(0,0,0,0.3);
}
.msg-video img, .msg-video video {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  display: block;
}
.msg-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  backdrop-filter: blur(8px);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.msg-video:hover .msg-video__play {
  background: rgba(59,130,246,0.8);
  transform: translate(-50%, -50%) scale(1.08);
}
.msg-video__duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSER — pixel-perfect from screenshot
   ═══════════════════════════════════════════════════════════════════════════ */

.composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  padding-bottom: max(10px, var(--safe-bottom));
  background: var(--bg-composer);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
  position: relative;
  overflow: hidden;
}

.composer-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-xl);
  padding: 10px 16px;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  line-height: 1.4;
  overflow-y: auto;
  font-size: var(--font-size-base);
}
.composer-input:focus { border-color: var(--accent-violet) }
.composer-input::placeholder { color: var(--text-muted) }

.composer-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.composer-btn:hover { background: rgba(255,255,255,0.08) }
.composer-btn:active { transform: scale(0.92) }

/* Send button — blue (from screenshot) */
.btn-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn-send:hover { background: var(--accent-blue-hover) }
.btn-send:active { transform: scale(0.92) }
.btn-send.hidden { display: none }

/* Reply bar */
.composer-reply {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border-top: 1px solid var(--border);
  font-size: var(--font-size-sm);
}
.composer-reply-bar {
  width: 3px;
  height: 32px;
  background: var(--accent-violet);
  border-radius: 2px;
  flex-shrink: 0;
}

#reply-bar {
  padding: 0 16px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECORDING STRIP — from screenshot
   ═══════════════════════════════════════════════════════════════════════════ */

.rec-strip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  background: var(--bg-composer);
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
  border-top: 1px solid rgba(168,85,247,0.3);
  z-index: 5;
  animation: slideUp 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.rec-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #EF4444;
  animation: pulse 1s infinite;
  flex-shrink: 0;
}

.rec-time {
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  min-width: 50px;
  flex-shrink: 0;
}

.rec-cancel {
  color: var(--text-success);
  font-size: var(--font-size-sm);
  cursor: pointer;
  flex-shrink: 0;
}

.rec-bars {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  overflow: hidden;
  min-width: 0;
}

.rec-bar {
  width: 3px;
  min-width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
  flex-shrink: 0;
  opacity: 0.85;
}

/* Send button in recording */
.rec-send {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform var(--transition-fast);
}
.rec-send:hover { transform: scale(1.05) }
.rec-send:active { transform: scale(0.95) }

/* Voice preview */
.voice-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-composer);
  border-top: 1px solid var(--border);
  max-width: 100%;
  box-sizing: border-box;
}

.voice-preview-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 14px;
  background: rgba(168,85,247,0.15);
  color: var(--text-primary);
  border: none;
  user-select: none;
  transition: background var(--transition-fast);
}
.voice-preview-btn:hover { background: rgba(168,85,247,0.3) }

.voice-preview-send {
  background: var(--accent-blue);
  color: #fff;
}
.voice-preview-send:hover { background: var(--accent-blue-hover) }

.voice-preview-bars {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  min-width: 0;
}

.voice-preview-bar {
  width: 2px;
  min-width: 2px;
  border-radius: 2px;
  background: rgba(168,85,247,0.45);
}

.voice-preview-time {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTEXT MENU — pixel-perfect from screenshot
   ═══════════════════════════════════════════════════════════════════════════ */

.context-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.22);
  backdrop-filter: var(--blur-heavy);
  -webkit-backdrop-filter: var(--blur-heavy);
  z-index: 100;
  animation: fadeIn 150ms;
  transition: opacity 140ms ease;
}

.context-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-context);
  backdrop-filter: var(--blur-heavy);
  -webkit-backdrop-filter: var(--blur-heavy);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  z-index: 101;
  animation: slideUp 200ms;
  padding-bottom: var(--safe-bottom);
  overflow: hidden;
}

.context-overlay.is-closing { opacity: 0 }
.context-menu.is-closing { opacity: 0; transform: translateY(12px); transition: opacity 140ms ease, transform 140ms ease }

/* Reactions bar — pill shape (from screenshot) */
.context-reactions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}
.context-reaction {
  font-size: 28px;
  cursor: pointer;
  transition: transform var(--transition-fast);
  border: 0;
  background: transparent;
  padding: 2px;
}
.context-reaction:hover { transform: scale(1.15) }
.context-reaction:active { transform: scale(0.9) }

/* Menu items — 48px height (from screenshot) */
.context-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  transition: background var(--transition-fast);
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.context-item:hover { background: rgba(255,255,255,0.05) }
.context-item:active { background: rgba(255,255,255,0.08) }
.context-item.danger { color: var(--text-danger) }

.context-item-icon {
  width: 24px;
  text-align: center;
  opacity: 0.8;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
}
.context-item-icon svg { width: 20px; height: 20px }

.context-item-sub {
  font-size: var(--font-size-sm);
  color: var(--text-danger);
  margin-top: 2px;
}

.context-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

@media (min-width: 769px) {
  .context-menu {
    right: auto;
    bottom: auto;
    width: min(286px,calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding-bottom: 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(15,23,42,.28);
    transform-origin: var(--context-origin,top left);
    animation: contextPop 150ms cubic-bezier(.2,.8,.2,1);
  }
  .context-reactions { padding: 10px 12px }
  .context-item { padding: 11px 14px }
}

@keyframes contextPop {
  from { opacity: 0; transform: scale(.94) translateY(-3px) }
  to { opacity: 1; transform: scale(1) translateY(0) }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 200ms;
}

.modal {
  background: var(--bg-modal);
  border-radius: var(--radius-md);
  padding: 24px;
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  animation: slideIn 200ms;
}

.modal-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: 16px;
}

.forward-modal{width:min(460px,94vw);padding:0;overflow:hidden}
.forward-head{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 20px 10px}
.forward-head .modal-title{margin:0}
.forward-subtitle{margin-top:3px;font-size:12px;color:var(--text-secondary)}
.forward-preview{display:flex;gap:10px;margin:0 20px 12px;padding:10px 12px;border-radius:10px;background:rgba(245,130,32,.08);border-left:3px solid var(--accent-orange,#f58220)}
.forward-preview>span{display:grid;place-items:center;color:var(--accent-orange,#f58220)}
.forward-preview svg{width:19px;height:19px}
.forward-preview b{display:block;font-size:12px}.forward-preview p{margin:2px 0 0;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text-secondary)}
.forward-search{display:flex;align-items:center;gap:8px;margin:0 20px 10px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--bg-input)}
.forward-search svg{width:18px;height:18px;color:var(--text-secondary)}
.forward-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text-primary);font:inherit}
.forward-list{min-height:120px;max-height:330px;padding:0 10px;overflow-y:auto}
.forward-chat{display:flex;align-items:center;width:100%;gap:11px;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--text-primary);cursor:pointer;text-align:left}
.forward-chat:hover{background:rgba(245,130,32,.07)}
.forward-chat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.forward-check{display:grid;width:23px;height:23px;place-items:center;border:1px solid var(--border);border-radius:50%;color:transparent}
.forward-check svg{width:14px;height:14px}
.forward-chat.is-selected{background:rgba(245,130,32,.1)}
.forward-chat.is-selected .forward-check{border-color:var(--accent-orange,#f58220);background:var(--accent-orange,#f58220);color:#fff}
.forward-empty{padding:34px 12px;text-align:center;color:var(--text-secondary)}
.forward-attribution{display:flex;align-items:center;gap:10px;margin:8px 20px 12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;cursor:pointer}
.forward-attribution>input{position:absolute;opacity:0;pointer-events:none}
.forward-attribution>span:last-child{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.forward-attribution b{font-size:13px}.forward-attribution small{color:var(--text-secondary);font-size:11px}
.forward-toggle{position:relative;width:36px;height:20px;flex:0 0 auto;border-radius:999px;background:var(--border);transition:.18s ease}
.forward-toggle::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:.18s ease}
.forward-attribution>input:checked+.forward-toggle{background:var(--accent-orange,#f58220)}
.forward-attribution>input:checked+.forward-toggle::after{transform:translateX(16px)}
.forward-attribution>input:focus-visible+.forward-toggle{outline:2px solid var(--accent-blue);outline-offset:2px}
.forward-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
.forward-actions>span{font-size:12px;color:var(--text-secondary)}
.forward-actions .btn{width:auto;padding:10px 18px}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-primary {
  background: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 32px;
  font-weight: 600;
  font-size: var(--font-size-base);
  width: 100%;
  transition: background var(--transition-fast);
}
.btn-primary:hover { background: var(--accent-blue-hover) }

.btn-danger {
  background: var(--text-danger);
  color: #fff;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: var(--font-size-sm);
}

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.btn-icon:hover { background: rgba(255,255,255,0.06) }

.btn-add {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════════════════════ */

.input {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  padding: 14px 16px 14px 44px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  width: 100%;
  transition: border-color var(--transition-fast);
}
.input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(168,85,247,0.1) }
.input::placeholder { color: var(--text-muted) }

.input-group { position: relative; margin-bottom: 12px }
.input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; opacity: 0.5 }

.search-input {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-full);
  padding: 10px 16px 10px 36px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  width: 100%;
}
.search-input:focus { border-color: var(--accent-violet) }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-app);
  position: relative;
  overflow: hidden;
}

.auth-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(168,85,247,0.15), transparent 60%);
  pointer-events: none;
}

.auth-form {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.auth-links {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-links a { color: var(--text-secondary); font-size: var(--font-size-sm) }

.auth-version {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  margin-top: 24px;
}

.logo-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.logo-icon-inner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-blue), var(--accent-violet), #EC4899, var(--text-success), var(--accent-blue));
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════════════════════════════════════════ */

.settings { padding: 16px; overflow-y: auto; flex: 1 }

.settings-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

.settings-label {
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  color: var(--accent-violet);
  margin-bottom: 4px;
}

.media-permission-intro { margin-bottom: 10px; line-height: 1.4; }
.media-permission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.media-permission-row > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.media-permission-status { font-size: var(--font-size-xs); color: var(--text-muted); }
.media-permission-status[data-state="granted"] { color: var(--text-success); }
.media-permission-status[data-state="denied"] { color: var(--text-danger); }
.media-permission-button {
  flex-shrink: 0;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: var(--accent);
  background: transparent;
  font-weight: 600;
}
.media-permission-button:disabled { opacity: .55; }
.media-device-field { display: block; margin-top: 12px; }
.media-device-field > span { display: block; margin-bottom: 6px; font-size: var(--font-size-sm); }
.media-device-field .input { padding: 10px 12px; }
.media-permission-help { margin-top: 10px; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT ITEM
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
}
.contact-item:hover { background: rgba(255,255,255,0.03) }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

.bottom-nav {
  display: flex;
  height: var(--bottom-nav-height);
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  padding-bottom: var(--safe-bottom);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
}
.bottom-nav-item.active { color: var(--accent-violet) }

.bottom-nav-label { font-size: var(--font-size-xs) }

.bottom-nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 20px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--badge-bg);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMOJI PICKER
   ═══════════════════════════════════════════════════════════════════════════ */

.emoji-picker {
  position: fixed;
  bottom: var(--composer-height);
  right: 16px;
  width: 320px;
  max-height: 320px;
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  overflow: hidden;
  animation: slideIn 200ms;
}

.emoji-picker-header {
  display: flex;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  gap: 4px;
  overflow-x: auto;
}

.emoji-cat {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 18px;
  cursor: pointer;
}
.emoji-cat.active { background: rgba(168,85,247,0.2) }

.emoji-picker-body {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.emoji-item {
  font-size: 22px;
  padding: 4px;
  cursor: pointer;
  text-align: center;
  border-radius: var(--radius-sm);
}
.emoji-item:hover { background: rgba(255,255,255,0.08) }

/* ═══════════════════════════════════════════════════════════════════════════
   PHOTO GROUP / MEDIA GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.photo-group {
  display: grid;
  gap: 3px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 340px;
  width: 100%;
  background: rgba(255,255,255,0.04);
}

.photo-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
}
.photo-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL TO BOTTOM BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.scroll-bottom {
  position: absolute;
  bottom: 80px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-context);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  box-shadow: var(--shadow-md);
  animation: fadeIn 200ms;
  z-index: 10;
}
.scroll-bottom:hover { background: rgba(255,255,255,0.1) }

/* ═══════════════════════════════════════════════════════════════════════════
   DRAG & DROP OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

.drag-overlay {
  position: absolute;
  inset: 0;
  background: rgba(168,85,247,0.1);
  border: 2px dashed var(--accent-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fadeIn 150ms;
}

.drag-overlay-text {
  background: var(--bg-modal);
  padding: 16px 24px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}
.drag-overlay-text svg{width:22px;height:22px;color:var(--accent-orange,#f58220)}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════════ */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 300;
  animation: fadeIn 200ms;
}

.lightbox__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2) }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.2) }
.lightbox__nav--prev { left: 16px }
.lightbox__nav--next { right: 16px }

.lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL VOICE BAR (for voice circle playback)
   ═══════════════════════════════════════════════════════════════════════════ */

#gv-bar {
  position: fixed;
  top: calc(var(--header-height) - 120px);
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  z-index: 50;
  background: var(--bg-context);
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
  border-bottom: 1px solid rgba(168,85,247,0.3);
  box-shadow: var(--shadow-md);
  transition: top 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: top;
  pointer-events: none;
  opacity: 0;
}
#gv-bar.visible {
  top: var(--header-height);
  pointer-events: auto;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SWIPE REPLY ICON
   ═══════════════════════════════════════════════════════════════════════════ */

.swipe-reply-icon {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 200ms;
  font-size: 16px;
  color: var(--accent-violet);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    bottom: 0;
  }
  .sidebar.hidden { transform: translateX(-100%) }
  
  .chat-area.hidden { display: none }
  
  .msg-bubble { max-width: 85% }
  
  .chat-item .avatar { width: 56px; height: 56px; font-size: 20px }
  
  .filter-tab { padding: 10px 24px; font-size: var(--font-size-md) }
  
  .header-back { display: flex }
  
  .msg-actions { display: none }
  
  .composer { padding-bottom: max(8px, var(--safe-bottom)) }
  
  .emoji-picker {
    width: 100%;
    right: 0;
    bottom: 56px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  
  .photo-group { max-width: 280px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIDDEN UTILITY
   ═══════════════════════════════════════════════════════════════════════════ */

.hidden { display: none !important }

.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--border-light)}
.setting-row input[type="checkbox"]{width:20px;height:20px;accent-color:var(--accent)}
.quiet-hours{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.quiet-hours .input{padding:9px 10px;margin:0}
.msg-status.queued{color:var(--text-secondary)}
.msg-forwarded{display:flex;align-items:center;gap:5px;margin:0 0 4px;color:var(--accent-orange,#f58220);font-size:11px;font-weight:600}
.msg-forwarded svg{width:13px;height:13px;flex:0 0 auto}
.msg.is-selected{position:relative}
.msg.is-selected::before{content:"";position:absolute;inset:-2px -12px;border-left:3px solid var(--accent-orange,#f58220);background:rgba(245,130,32,.12);pointer-events:none}
.msg.is-selected .msg-bubble{position:relative;z-index:1}
.message-selection-bar{position:absolute;top:8px;left:50%;z-index:70;display:flex;align-items:center;gap:12px;min-width:260px;padding:8px 10px;transform:translateX(-50%);border:1px solid var(--border);border-radius:14px;background:var(--bg-modal);box-shadow:var(--shadow-lg)}
.message-selection-bar>strong{flex:1;font-size:13px}.message-selection-bar>.btn-icon{width:30px;height:30px}
.message-selection-forward{display:flex;align-items:center;gap:6px;padding:8px 12px;border:0;border-radius:9px;background:var(--accent-orange,#f58220);color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer}.message-selection-forward svg{width:16px;height:16px}
@media(max-width:520px){.message-selection-bar{top:max(7px,env(safe-area-inset-top));width:calc(100% - 20px);min-width:0}.message-selection-forward span{display:none}}
.desktop-phone-binding{margin-top:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card,#fff)}
.phone-binding-loading,.phone-binding-error,.phone-binding-head,.phone-binding-title{display:flex;align-items:center;gap:10px}
.phone-binding-loading,.phone-binding-error{color:var(--text-secondary);font-size:13px}.phone-binding-error{color:var(--text-danger)}
.phone-binding-loading>svg,.phone-binding-error>svg,.phone-binding-head>svg,.phone-binding-title>svg{width:22px;height:22px;flex:0 0 auto;color:var(--accent-orange,#f58220)}
.phone-binding-head>span,.phone-binding-title>div{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.phone-binding-head small,.phone-binding-title small{font-size:11px;color:var(--text-secondary)}
.phone-binding-head strong,.phone-binding-title strong{font-size:14px}
.phone-verified{display:flex;align-items:center;gap:4px;color:#18a957;font-size:11px}.phone-verified svg{width:13px;height:13px}
.desktop-phone-binding>p,#phone-binding>p{margin:10px 0 0;color:var(--text-secondary);font-size:11px;line-height:1.45}
.phone-binding-form,.phone-code-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}
.phone-binding-form .input,.phone-code-form .input{margin:0;padding:10px 12px}.phone-binding-form .btn-primary,.phone-code-form .btn-primary{width:auto;padding:10px 14px;white-space:nowrap}
.phone-code-form .input{font-size:18px;letter-spacing:.22em;text-align:center}
.phone-provider-note{display:flex;align-items:flex-start;gap:7px;margin-top:10px;padding:8px 9px;border-radius:8px;background:rgba(245,130,32,.08);color:var(--text-secondary);font-size:11px;line-height:1.4}.phone-provider-note svg{width:15px;height:15px;flex:0 0 auto;color:var(--accent-orange,#f58220)}
.phone-code-back{display:flex;align-items:center;gap:5px;margin-top:9px;padding:0;border:0;background:transparent;color:var(--accent-blue);font:inherit;font-size:12px;cursor:pointer}.phone-code-back svg{width:14px;height:14px}
@media(max-width:520px){.phone-binding-form,.phone-code-form{grid-template-columns:1fr}.phone-binding-form .btn-primary,.phone-code-form .btn-primary{width:100%}.phone-binding-head{align-items:flex-start}.phone-verified{margin-top:3px}}
.offline-queue-toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:1000;background:#344054;color:#fff;padding:8px 14px;border-radius:999px;font-size:12px;box-shadow:var(--shadow-lg)}
.forward-message-options{display:grid;gap:6px;max-height:176px;margin:8px 0;padding:8px;overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--bg-soft,#f7f8fa)}
.forward-message-options label{display:flex;align-items:flex-start;gap:9px;padding:7px;border-radius:9px;background:var(--bg-card,#fff);cursor:pointer}
.forward-message-options input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent-orange,#f58220)}
.forward-message-options span{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}.forward-message-options b,.forward-message-options small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forward-message-options b{font-size:12px}.forward-message-options small{color:var(--text-secondary);font-size:11px}
/* Shared locale toggle used by web, PWA and native WebViews. */
.runa-language-toggle{display:inline-grid;grid-template-columns:repeat(2,minmax(40px,1fr));gap:3px;padding:3px;border:1px solid var(--border,#d9e1ea);border-radius:12px;background:var(--bg-input,#edf1f5);box-shadow:inset 0 1px 2px rgba(16,24,40,.06)}
.runa-language-toggle-option{min-height:32px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary,#667085);font:700 12px/1 inherit;letter-spacing:.03em;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.runa-language-toggle-option:hover{color:var(--text-primary,#1f2937)}.runa-language-toggle-option:focus-visible{outline:2px solid var(--accent-orange,#f58220);outline-offset:2px}.runa-language-toggle-option.active{background:var(--bg-card,#fff);color:var(--accent-orange,#f58220);box-shadow:0 1px 4px rgba(16,24,40,.14)}.runa-language-toggle-option:active{transform:scale(.97)}
.auth-language{position:absolute;right:18px;top:18px;z-index:2}.auth-form{position:relative}.settings-language-card{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-language-card>span{display:grid;gap:3px}.settings-language-card small{color:var(--text-secondary,#667085)}
.license-card{display:grid;gap:14px}.license-card-head,.license-seats,.license-instance{display:flex;align-items:center;justify-content:space-between;gap:12px}.license-card-head>div{display:grid;gap:4px}.license-card-head small,.license-admin label>span{color:var(--text-secondary);font-size:12px}.license-card-head strong{font-size:22px}.license-status{padding:6px 10px;border-radius:999px;background:#e9f8ee;color:#1b7d3e;font-size:12px;font-weight:700}.license-status.grace{background:#fff3dc;color:#9a5a00}.license-status.expired,.license-status.invalid{background:#ffebeb;color:#b42318}.license-meter{height:8px;overflow:hidden;border-radius:999px;background:#e8edf3}.license-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#ffac62)}.license-card p{margin:0;font-size:13px}.license-warning,.license-error{color:var(--text-danger,#d92d20)}.license-pricing-link{color:var(--accent);font-weight:700}.license-admin{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--border)}.license-admin label{display:grid;gap:6px}.license-instance code{min-width:0;overflow-wrap:anywhere;font-size:11px}.license-instance .btn-secondary{width:auto;padding:8px 10px}.license-admin textarea{padding:12px;min-height:110px;resize:vertical;font-family:ui-monospace,monospace;font-size:11px}
.sms-provider-card{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--bg-soft,#f7f9fb)}.sms-provider-card>div{display:grid;gap:2px}.sms-provider-card span,.sms-provider-card p{color:var(--text-secondary);font-size:11px}.sms-provider-card strong{font-size:14px}.sms-provider-card>b{align-self:start;padding:4px 8px;border-radius:999px;background:#fff3dc;color:#9a5a00;font-size:11px}.sms-provider-card.is-ready>b{background:#e9f8ee;color:#1b7d3e}.sms-provider-card p{grid-column:1/-1;margin:0;line-height:1.45}.sms-provider-card a{color:var(--accent);font-size:12px;font-weight:700}.sms-provider-links{grid-column:1/-1;display:flex!important;grid-template-columns:none!important;flex-wrap:wrap;gap:8px 14px!important}
.pilot-license{border:1px solid var(--border);border-radius:12px;background:var(--bg-soft,#f7f9fb);overflow:hidden}.pilot-license>summary{padding:13px;color:var(--text-primary);font-weight:800;cursor:pointer;list-style-position:inside}.pilot-license>p{padding:0 13px;color:var(--text-secondary);line-height:1.45}.pilot-license form{display:grid;gap:10px;padding:0 13px 13px}.pilot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pilot-license select.input,.pilot-license input.input{padding:10px 12px}.pilot-license textarea{padding:10px 12px;resize:vertical}.pilot-result{display:grid;gap:8px;padding:10px;border-radius:10px;background:var(--bg-card,#fff)}.pilot-result>code{overflow-wrap:anywhere;color:var(--accent);font-size:11px}.pilot-result>div{display:flex;flex-wrap:wrap;gap:8px}.pilot-result .btn-secondary{width:auto}.pilot-history-head{padding:12px 13px 6px;border-top:1px solid var(--border);font-size:12px;font-weight:800}.pilot-history{display:grid;padding:0 13px 13px}.pilot-history>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}.pilot-history>div:last-child{border-bottom:0}.pilot-history span{display:grid;gap:2px}.pilot-history small{color:var(--text-secondary);font-size:10px}.pilot-history strong{color:var(--accent)}.pilot-license>.text-muted{padding:0 13px 13px}
@media(max-width:520px){.auth-language{right:12px;top:12px}.runa-language-toggle{grid-template-columns:repeat(2,minmax(36px,1fr))}.runa-language-toggle-option{min-height:30px;padding:5px 8px}}
@media(max-width:520px){.pilot-grid{grid-template-columns:1fr}.pilot-result>div{display:grid}.pilot-result .btn-secondary{width:100%}}