/* ═══════════════════════════════════════════════════════════════════
   hymessage — v1.1 Design System
   Extracted from inline <style> + color tokens applied
   All hardcoded colors replaced with CSS custom properties
   ═══════════════════════════════════════════════════════════════════ */


/* ─── Compat aliases for legacy var references ─────────────── */
:root{
  --cm-cyan:    var(--info);
  --cm-green:   var(--accent);
  --cm-mag:     var(--purple);
  --cm-gold:    var(--warning);
  --cm-red:     var(--danger);
  --sp-green:   var(--accent);
  --glass-bg:   var(--bg-card);
  --glass-bg-light: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  --glass-bg-heavy: color-mix(in srgb, var(--bg-deep) 82%, transparent);
  --glass-border: var(--border);
  --glass-border-light: var(--border);
  --glass-border-subtle: color-mix(in srgb, var(--accent) 16%, transparent);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.25);
  --glass-shadow-lg: 0 16px 48px rgba(0,0,0,.4);
  --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  --glass-radius: var(--radius-xl, 20px);
  --glass-radius-sm: var(--radius-ios, 14px);
  --success: var(--accent);
  --bg-input: color-mix(in srgb, var(--bg-surface) 80%, transparent);
  --bg-card-hover: color-mix(in srgb, var(--bg-card) 85%, var(--accent) 15%);
  --bg-modal: rgba(0,0,0,.7);
  --text: var(--accent-text);
  --border-hover: var(--border-focus);
  --accent-hover: var(--accent);
  --z-sticky: 200;
  --z-dropdown: 400;
  --z-modal: 500;
  --font-mono: var(--font-ios, monospace);
  --orange: #f97316;
}


/* ─── App Styles ──────────────────────────────────────────────── */

/* ── Reset & Base ── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:var(--font-ios, -apple-system,BlinkMacSystemFont,system-ui,sans-serif);background:var(--bg-deep);color:var(--accent-text)}
body{padding-top:env(safe-area-inset-top,0px)}

/* ── Three-Column Layout ── */
/* iOS fix: use dynamic viewport height (dvh) and subtract the top safe-area
   inset already applied to <body>, so the composer/bottom controls are not
   pushed below the visible viewport (which left the app un-scrollable /
   un-tappable on iPhone 16 / iOS 18). Falls back to 100vh on old browsers. */
/* padding-top was reserving 52px for the legacy top nav, but nav.js disables the
   bar platform-wide (no #hy-nav is ever rendered) — so it was pure dead space
   that pushed the header down on every surface. Removed. */
.hm-layout{display:flex;height:100vh;height:calc(100dvh - env(safe-area-inset-top,0px));padding-top:0}
/* Embedded in an OS window: the iframe already has the correct pixel height, and
   100dvh is unreliable inside a nested browsing context on Android. Fill the
   iframe instead so the composer + controls stay on-screen and tappable. */
html.hm-os .hm-layout{height:100%}
html.hm-os body{padding-top:0}
/* window-containers.css collapses ANY [class*="sidebar"] inside a compact/medium
   OS window (`display:none!important` / forced 200px). hyMessage's conversation
   list (.hm-sidebar) IS the slide-in drawer — controlled by .mobile-open — so
   that blanket rule made the list impossible to open inside HypatiaOS on a
   phone (you were stuck on the auto-opened chat, unable to pick a conversation).
   Opt our drawer + its header/overlay back in; geometry stays driven by our own
   @media(max-width:768px) rules below. */
html.hy-compact .hm-sidebar,
html.hy-medium  .hm-sidebar{display:flex!important;width:280px!important;min-width:0!important;max-width:85vw!important}
html.hy-compact .hm-sidebar-header{display:flex!important}
html.hy-compact .hm-sidebar-overlay.visible{display:block!important}

/* ── Left Sidebar — Conversation List ── */
.hm-sidebar{width:280px;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.hm-sidebar-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.hm-sidebar-header h2{font-size:14px;font-weight:900;color:var(--accent);font-family:'Orbitron',monospace;letter-spacing:.1em;display:flex;align-items:center;gap:8px}
.hm-sidebar-header h2 iconify-icon{font-size:18px}
.hm-new-btn{background:none;border:1px solid var(--border);color:var(--accent);border-radius:var(--radius-ios-sm,10px);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:all .15s}
.hm-new-btn:hover{background:var(--accent-dim);border-color:var(--accent-glow)}

/* Search */
.hm-search{padding:8px 12px;border-bottom:1px solid var(--border)}
.hm-search input{width:100%;padding:8px 12px 8px 32px;border-radius:var(--radius-ios-sm,10px);border:1px solid var(--border);background:var(--bg-input);color:var(--accent-text);font-size:13px;font-family:inherit;outline:none}
.hm-search input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-dim)}
.hm-search-wrap{position:relative}
.hm-search-wrap iconify-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--muted)}

/* Conversation list */
.hm-section-label{padding:10px 16px 4px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hm-conv-list{flex:1;overflow-y:auto;padding-bottom:12px}
.hm-conv-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;position:relative}
.hm-conv-item:hover{background:var(--bg-card-hover)}
.hm-conv-item.active{background:var(--accent-dim);border-left-color:var(--accent)}
.hm-conv-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--accent);flex-shrink:0;overflow:hidden;position:relative;border:2px solid var(--border)}
.hm-conv-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.hm-conv-avatar .online-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:var(--success);border:2px solid var(--bg-surface);z-index:1}
.hm-conv-meta{flex:1;min-width:0}
.hm-conv-name{font-size:13px;font-weight:700;color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.hm-conv-preview{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;display:flex;align-items:center;gap:4px}
.hm-conv-preview iconify-icon{font-size:11px;color:var(--accent);flex-shrink:0}
.hm-conv-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.hm-conv-time{font-size:10px;color:var(--muted)}
.hm-conv-unread{background:var(--accent);color:var(--bg-deep);font-size:9px;font-weight:700;padding:1px 6px;border-radius:var(--radius-full);min-width:18px;text-align:center}
.hm-conv-typing{display:flex;gap:2px;align-items:center;padding:2px 0}
.hm-conv-typing span{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:hm-typing 1.4s infinite}
.hm-conv-typing span:nth-child(2){animation-delay:.2s}
.hm-conv-typing span:nth-child(3){animation-delay:.4s}
@keyframes hm-typing{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}
.hm-conv-item.has-unread .hm-conv-name{color:var(--accent)}
.hm-conv-item.has-unread .hm-conv-preview{color:var(--accent-text)}

/* Pinned badge */
.hm-pin-badge{color:var(--warning);font-size:10px}

/* Empty state */
.hm-empty-sidebar{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;flex:1}
.hm-empty-sidebar img{width:64px;height:64px;opacity:.4;margin-bottom:12px}
.hm-empty-sidebar .msg{font-size:13px;font-weight:700;color:var(--accent-text);margin-bottom:4px}
.hm-empty-sidebar .sub{font-size:11px;color:var(--muted);margin-bottom:16px}
.hm-empty-sidebar button{background:var(--accent);color:var(--bg-deep);border:none;border-radius:var(--radius-ios-sm,10px);padding:8px 16px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}

/* ── Center Panel — Messages ── */
.hm-center{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
/* The chat column (header + messages + composer) is injected into
   #hm-center-content; it must be a flex column that fills .hm-center so the
   message area scrolls and the composer stays pinned on-screen (otherwise the
   column grows past the viewport and the composer is unreachable). */
#hm-center-content{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.hm-msg-header{padding:10px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface);flex-shrink:0}
.hm-msg-header-left{display:flex;align-items:center;gap:10px}
.hm-msg-header-left .hm-header-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--border)}
.hm-msg-header-left .hm-header-avatar img{width:100%;height:100%;object-fit:cover}
.hm-header-info h3{font-size:14px;font-weight:700;color:var(--accent-text);line-height:1.2}
.hm-header-info .status{font-size:10px;color:var(--muted)}
.hm-header-info .status.online{color:var(--success)}
.hm-msg-header-right{display:flex;align-items:center;gap:6px}
.hm-msg-header-right button{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius-ios-sm,10px);padding:6px 8px;cursor:pointer;min-height:32px;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:16px}
.hm-msg-header-right button:hover{border-color:var(--border-focus);color:var(--accent-text);background:var(--bg-card-hover)}

/* E2EE banner */
.hm-e2ee-banner{padding:6px 18px;background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--muted)}
.hm-e2ee-banner iconify-icon{color:var(--accent);font-size:13px}

/* Messages area */
.hm-msg-area{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}

/* Date separator */
.hm-date-sep{display:flex;align-items:center;gap:12px;margin:12px 0;font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.hm-date-sep::before,.hm-date-sep::after{content:'';flex:1;height:1px;background:var(--border)}

/* Message bubbles */
.hm-msg-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:2px;max-width:75%;position:relative}
.hm-msg-row.sent{margin-left:auto;flex-direction:row-reverse}
.hm-msg-row.received{margin-right:auto}
.hm-msg-row .hm-bubble-avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0}
.hm-msg-row .hm-bubble-avatar img{width:100%;height:100%;object-fit:cover}
.hm-msg-row.sent .hm-bubble-avatar{display:none}
.hm-bubble{padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5;word-break:break-word;position:relative;font-family:'Roboto Mono',monospace}
.hm-msg-row.sent .hm-bubble{background:var(--accent-dim);border-bottom-right-radius:6px;color:var(--accent-text)}
.hm-msg-row.received .hm-bubble{background:var(--glass-bg, var(--bg-card));backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border:1px solid var(--glass-border, var(--border));border-bottom-left-radius:6px;color:var(--accent-text)}
.hm-bubble-text{white-space:pre-wrap}
.hm-bubble-time{font-size:9px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:4px;justify-content:flex-end}
.hm-msg-row.sent .hm-bubble-time{justify-content:flex-end}
.hm-bubble-ticks{color:var(--muted);font-size:11px;letter-spacing:-2px}
.hm-bubble-ticks.read{color:var(--info)}

/* Reply indicator */
.hm-reply-indicator{font-size:11px;color:var(--muted);padding:6px 10px;margin-bottom:4px;border-left:2px solid var(--accent);background:var(--bg-card);border-radius:0 8px 8px 0;cursor:pointer}
.hm-reply-indicator:hover{background:var(--bg-card-hover)}

/* Reactions */
.hm-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.hm-reaction{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--bg-card);font-size:12px;cursor:pointer;transition:all .15s;min-height:22px}
.hm-reaction:hover{border-color:var(--border-focus);background:var(--bg-card-hover)}
.hm-reaction.mine{border-color:var(--accent-glow);background:var(--accent-dim)}
.hm-reaction .count{font-size:9px;color:var(--muted);font-weight:600}

/* System message */
.hm-system-msg{text-align:center;font-size:11px;color:var(--muted);padding:8px 0;font-style:italic}

/* Attachment bubbles */
.hm-bubble-img{max-width:280px;max-height:200px;border-radius:12px;margin-top:4px;cursor:pointer;display:block}
.hm-bubble-file{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg-card);color:var(--accent-text);font-size:12px;margin-top:4px;text-decoration:none;font-family:inherit}
.hm-bubble-file:hover{border-color:var(--border-focus)}
.hm-bubble-file iconify-icon{font-size:20px;color:var(--accent)}
.hm-voice-wave{display:flex;align-items:center;gap:6px;padding:4px 0}
.hm-voice-wave .bar{width:3px;border-radius:2px;background:var(--accent);animation:hm-wave 1.2s infinite}
.hm-voice-wave .bar:nth-child(2){animation-delay:.1s}
.hm-voice-wave .bar:nth-child(3){animation-delay:.2s}
.hm-voice-wave .bar:nth-child(4){animation-delay:.3s}
.hm-voice-wave .bar:nth-child(5){animation-delay:.4s}
.hm-voice-wave .dur{font-size:11px;color:var(--muted);margin-left:4px}
@keyframes hm-wave{0%,100%{height:8px}50%{height:20px}}

/* Link preview */
.hm-link-preview{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:6px;max-width:280px;cursor:pointer;transition:border-color .15s}
.hm-link-preview:hover{border-color:var(--border-focus)}
.hm-link-preview img{width:100%;height:120px;object-fit:cover}
.hm-link-preview .lp-body{padding:8px 10px}
.hm-link-preview .lp-title{font-size:12px;font-weight:700;color:var(--accent-text);margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-link-preview .lp-desc{font-size:10px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-link-preview .lp-domain{font-size:9px;color:var(--info);margin-top:4px;display:flex;align-items:center;gap:4px}

/* Hypatia AI bubble */
.hm-msg-row.ai .hm-bubble{background:color-mix(in srgb, var(--purple) 10%, transparent);border:1px solid color-mix(in srgb, var(--purple) 25%, transparent);border-bottom-left-radius:6px}
.hm-msg-row.ai .hm-bubble-text{color:var(--accent-text)}
.hm-ai-label{font-size:10px;font-weight:700;color:var(--purple);margin-bottom:2px;display:flex;align-items:center;gap:4px}
.hm-ai-thinking{display:flex;align-items:center;gap:6px;padding:8px 14px;color:var(--purple);font-size:12px;font-style:italic}
.hm-ai-thinking .dot{width:6px;height:6px;border-radius:50%;background:var(--purple);animation:hm-typing 1.4s infinite}
.hm-ai-thinking .dot:nth-child(2){animation-delay:.2s}
.hm-ai-thinking .dot:nth-child(3){animation-delay:.3s}

/* Location bubble map */
.hm-bubble-map{width:280px;height:150px;border-radius:10px;overflow:hidden;margin-top:6px;border:1px solid var(--border);cursor:pointer;position:relative}
.hm-bubble-map img{width:100%;height:100%;object-fit:cover}
.hm-bubble-map .map-label{position:absolute;bottom:0;left:0;right:0;padding:6px 10px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:11px;font-weight:600}
.hm-bubble-map .map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);font-size:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

/* GIF picker panel */
.hm-gif-panel{position:absolute;bottom:100%;right:50px;width:320px;max-height:360px;background:var(--glass-bg-heavy,var(--bg-surface));backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--glass-border,var(--border));border-radius:var(--radius-ios,14px);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);display:none;flex-direction:column;overflow:hidden}
.hm-gif-panel.visible{display:flex}
.hm-gif-search{padding:8px;border-bottom:1px solid var(--border)}
.hm-gif-search input{width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-input);color:var(--accent-text);font-size:13px;font-family:inherit;outline:none}
.hm-gif-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:8px;overflow-y:auto;flex:1}
.hm-gif-grid img{width:100%;height:100px;object-fit:cover;border-radius:6px;cursor:pointer;transition:transform .1s}
.hm-gif-grid img:hover{transform:scale(1.03)}

/* Search bar overlay */
.hm-search-bar{display:none;padding:8px 18px;border-bottom:1px solid var(--border);background:var(--bg-surface);gap:8px;align-items:center}
.hm-search-bar.visible{display:flex}
.hm-search-bar input{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-input);color:var(--accent-text);font-size:13px;font-family:inherit;outline:none}
.hm-search-bar .search-nav{display:flex;gap:4px;align-items:center;font-size:11px;color:var(--muted)}
.hm-search-bar button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px}
.hm-search-bar button:hover{color:var(--accent-text)}
.hm-msg-row.search-highlight .hm-bubble{box-shadow:0 0 0 2px var(--accent);}

/* File upload progress */
.hm-upload-bar{display:none;padding:6px 18px;border-top:1px solid var(--border);background:var(--bg-card);align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.hm-upload-bar.visible{display:flex}
.hm-upload-bar .bar{flex:1;height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.hm-upload-bar .bar-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s}

/* Forward modal */
.hm-forward-list{max-height:300px;overflow-y:auto}
.hm-forward-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-radius:8px;transition:background .15s}
.hm-forward-item:hover{background:var(--accent-dim)}
.hm-forward-item.selected{background:var(--accent-dim);border:1px solid var(--accent-glow)}

/* ── Privacy: Screenshot Protection ── */
body.hm-protected{-webkit-user-select:none;user-select:none}
body.hm-protected .hm-msg-area{-webkit-touch-callout:none}
body.hm-protected .hm-bubble-text{-webkit-user-select:none;user-select:none}
@media print{body.hm-protected .hm-msg-area{visibility:hidden!important}body.hm-protected .hm-msg-area::after{content:'Print disabled for privacy';visibility:visible;display:block;text-align:center;padding:40px;color:var(--muted)}}
.hm-blur-shield{filter:blur(20px)!important;transition:filter .3s;pointer-events:none}
.hm-privacy-watermark{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.015;font-size:14px;font-weight:900;transform:rotate(-25deg);color:var(--muted);display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;letter-spacing:2em;line-height:3em;word-break:break-all}

/* ── Privacy: Lock Screen ── */
.hm-lock-overlay{position:fixed;inset:0;z-index:99999;background:var(--glass-bg-heavy,var(--bg-deep));backdrop-filter:saturate(180%) blur(40px);-webkit-backdrop-filter:saturate(180%) blur(40px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.hm-lock-overlay img{width:80px;height:80px;opacity:.6}
.hm-lock-overlay h3{font-family:'Orbitron',monospace;color:var(--accent);font-size:16px;letter-spacing:.1em}
.hm-lock-pin-row{display:flex;gap:8px;margin:12px 0}
.hm-lock-pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:transparent;transition:background .2s}
.hm-lock-pin-dot.filled{background:var(--accent);border-color:var(--accent)}
.hm-lock-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:240px}
.hm-lock-pad button{width:64px;height:64px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--accent-text);font-size:22px;font-family:'Roboto Mono',monospace;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.hm-lock-pad button:hover{background:var(--accent-dim);border-color:var(--accent-glow)}
.hm-lock-pad button:active{transform:scale(.95)}
.hm-lock-shake{animation:hm-lock-shake .4s ease-in-out}
@keyframes hm-lock-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* ── Privacy: Incognito & Admin Badges ── */
.hm-incognito-badge{display:inline-flex;align-items:center;gap:2px;font-size:9px;color:var(--purple);background:color-mix(in srgb, var(--purple) 10%, transparent);padding:1px 6px;border-radius:var(--radius-full)}
.hm-admin-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--accent);background:var(--accent-dim);padding:2px 8px;border-radius:var(--radius-full);font-weight:700;margin-left:8px}

/* ── Privacy: Settings Panel ── */
.hm-privacy-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.hm-privacy-section h5{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.hm-privacy-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12px;color:var(--accent-text)}
.hm-privacy-row .label{display:flex;align-items:center;gap:8px}
.hm-privacy-row iconify-icon{font-size:16px;color:var(--muted)}
.hm-privacy-select{background:var(--bg-card);border:1px solid var(--border);color:var(--accent-text);border-radius:var(--radius-ios-sm,10px);padding:4px 8px;font-size:11px;font-family:inherit;cursor:pointer;outline:none}
.hm-privacy-select:focus{border-color:var(--border-focus)}

/* ── Privacy: View-Once ── */
.hm-view-once-overlay{position:relative;display:inline-block;cursor:pointer}
.hm-view-once-overlay img{filter:blur(20px);max-width:280px;max-height:200px;border-radius:12px}
.hm-view-once-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--accent-text);font-size:12px;font-weight:700;border-radius:12px;background:rgba(0,0,0,.3)}
.hm-view-once-label iconify-icon{font-size:28px;color:var(--accent)}
.hm-view-once-viewed{display:inline-flex;align-items:center;gap:6px;padding:12px 18px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);color:var(--muted);font-size:12px}
.hm-view-once-fullscreen{position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center}
.hm-view-once-fullscreen img{max-width:90%;max-height:90%;border-radius:8px;-webkit-user-select:none;user-select:none;pointer-events:none}
.hm-view-once-fullscreen .hm-vo-timer{position:absolute;top:20px;right:20px;font-size:14px;color:var(--accent);font-family:'Roboto Mono',monospace}

/* ── Privacy: Disappearing Timer Badge ── */
.hm-disappear-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;color:var(--warning);margin-left:4px}
.hm-disappear-badge iconify-icon{font-size:11px}
.hm-msg-fading{opacity:.4;transition:opacity 1s}

/* ── Privacy: View-Once Composer Toggle ── */
.hm-vo-toggle{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:6px;border:1px solid var(--border);background:none;font-family:inherit;transition:all .15s}
.hm-vo-toggle.active{color:var(--accent);border-color:var(--accent-glow);background:var(--accent-dim)}

/* ── hyPay Payment Sheet ── */
.hm-pay-sheet-bg{display:none;position:fixed;inset:0;background:var(--bg-modal);z-index:var(--z-modal);align-items:center;justify-content:center;padding:16px}
.hm-pay-sheet-bg.open{display:flex}
.hm-pay-sheet{background:var(--glass-bg-heavy, var(--bg-deep));backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);border:1px solid var(--glass-border, var(--border));border-radius:var(--radius-ios-lg, 20px);padding:28px 24px;width:100%;max-width:420px;max-height:85vh;overflow-y:auto;box-shadow:0 16px 80px rgba(0,0,0,.6);animation:hm-paySlideUp .35s cubic-bezier(.2,.9,.3,1)}
@keyframes hm-paySlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hm-pay-sheet h3{font-size:15px;font-weight:900;color:var(--accent-text);margin-bottom:20px;font-family:'Orbitron',monospace;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.hm-pay-sheet h3 iconify-icon{font-size:18px;color:var(--accent)}
.hm-pay-amount-wrap{text-align:center;margin-bottom:20px}
.hm-pay-amount-row{display:flex;align-items:center;justify-content:center;gap:4px}
.hm-pay-amount-row .prefix{font-size:36px;font-weight:900;color:var(--accent);font-family:'Orbitron',monospace}
.hm-pay-amount-input{background:transparent;border:none;outline:none;font-size:48px;font-weight:900;color:var(--accent-text);font-family:'Orbitron',monospace;text-align:center;width:180px;caret-color:var(--accent)}
.hm-pay-amount-input::placeholder{color:var(--muted);opacity:.4}
.hm-pay-crypto-eq{font-size:12px;color:var(--muted);margin-top:6px;font-family:'Roboto Mono',monospace}

/* Chain selector pills */
.hm-chain-pills{display:flex;gap:6px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.hm-chain-pill{display:flex;align-items:center;gap:5px;padding:6px 14px;border-radius:var(--radius-full);border:1.5px solid var(--border);background:var(--bg-card);color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit}
.hm-chain-pill:hover{border-color:var(--border-focus);color:var(--accent-text)}
.hm-chain-pill.active{color:#fff;border-color:transparent}
.hm-chain-pill .chain-dot{width:8px;height:8px;border-radius:50%}
.hm-chain-pill iconify-icon{font-size:14px}

/* Send/Request toggle */
.hm-pay-toggle{display:flex;border-radius:var(--radius-ios-sm,10px);border:1px solid var(--border);overflow:hidden;margin-bottom:16px}
.hm-pay-toggle button{flex:1;padding:8px 0;border:none;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s}
.hm-pay-toggle button.active{background:var(--accent);color:var(--bg-deep)}

/* Memo */
.hm-pay-memo{width:100%;padding:10px 14px;border-radius:var(--radius-ios-sm,10px);border:1px solid var(--border);background:var(--bg-card);color:var(--accent-text);font-size:13px;font-family:inherit;margin-bottom:12px;outline:none}
.hm-pay-memo:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-dim)}

/* Escrow toggle */
.hm-escrow-toggle{display:flex;align-items:center;gap:10px;padding:10px 0;margin-bottom:14px;font-size:12px;color:var(--accent-text)}
.hm-escrow-toggle iconify-icon{font-size:16px;color:var(--warning)}

/* Send button */
.hm-pay-send-btn{width:100%;padding:14px;border:none;border-radius:var(--radius-ios-sm,10px);background:linear-gradient(135deg,var(--accent),var(--accent));color:#000;font-size:14px;font-weight:900;cursor:pointer;font-family:'Orbitron',monospace;letter-spacing:.05em;transition:all .2s;box-shadow:0 4px 20px color-mix(in srgb, var(--accent) 25%, transparent)}
.hm-pay-send-btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px color-mix(in srgb, var(--accent) 35%, transparent)}
.hm-pay-send-btn:active{transform:translateY(0)}
.hm-pay-send-btn.request{background:linear-gradient(135deg,var(--info),var(--info));box-shadow:0 4px 20px color-mix(in srgb, var(--info) 25%, transparent)}
.hm-pay-send-btn.request:hover{box-shadow:0 6px 28px color-mix(in srgb, var(--info) 35%, transparent)}

/* Wallet balance row */
.hm-pay-balance{display:flex;align-items:center;justify-content:space-between;padding:10px 0;margin-top:8px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
.hm-pay-balance .bal-amount{color:var(--accent);font-weight:700;font-family:'Roboto Mono',monospace}

/* ── Payment Card in Messages ── */
.hm-pay-card{border-radius:14px;padding:14px 16px;background:var(--glass-bg, var(--bg-card));backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border:1.5px solid var(--border);margin-top:4px;min-width:220px;max-width:280px;transition:border-color .2s}
.hm-pay-card .pay-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hm-pay-card .pay-header .pay-chain-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.hm-pay-card .pay-header .pay-amount{font-size:22px;font-weight:900;color:var(--accent-text);font-family:'Orbitron',monospace}
.hm-pay-card .pay-crypto{font-size:11px;color:var(--muted);font-family:'Roboto Mono',monospace;margin-bottom:6px}
.hm-pay-card .pay-memo{font-size:12px;color:var(--accent-text);margin-bottom:8px;font-style:italic;opacity:.85}
.hm-pay-card .pay-status{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-full);font-size:10px;font-weight:700;letter-spacing:.03em}
.hm-pay-card .pay-status.pending{background:color-mix(in srgb, var(--warning) 12%, transparent);color:var(--warning);border:1px solid color-mix(in srgb, var(--warning) 25%, transparent)}
.hm-pay-card .pay-status.confirmed{background:color-mix(in srgb, var(--info) 12%, transparent);color:var(--info);border:1px solid color-mix(in srgb, var(--info) 25%, transparent)}
.hm-pay-card .pay-status.complete{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--success);border:1px solid color-mix(in srgb, var(--accent) 25%, transparent)}
.hm-pay-card .pay-status.failed{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 25%, transparent)}
.hm-pay-card .pay-action{margin-top:10px;width:100%;padding:8px;border:none;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.hm-pay-card .pay-action.pay-btn{background:var(--accent);color:var(--bg-deep)}
.hm-pay-card .pay-action.pay-btn:hover{background:var(--accent-hover)}
.hm-pay-card .pay-action.view-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--muted)}
.hm-pay-card .pay-action.view-btn:hover{border-color:var(--border-focus);color:var(--accent-text)}
.hm-pay-card .pay-request-badge{font-size:10px;font-weight:700;color:var(--info);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}

/* ── Escrow Card in Messages ── */
.hm-escrow-card{border-radius:14px;padding:14px 16px;background:var(--glass-bg, var(--bg-card));backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border:1.5px solid color-mix(in srgb, var(--warning) 30%, transparent);margin-top:4px;min-width:220px;max-width:280px}
.hm-escrow-card .escrow-header{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:900;color:var(--accent-text);font-family:'Orbitron',monospace;margin-bottom:6px}
.hm-escrow-card .escrow-header iconify-icon{color:var(--warning);font-size:16px}
.hm-escrow-card .escrow-for{font-size:11px;color:var(--muted);margin-bottom:10px}
.hm-escrow-card .escrow-progress-wrap{margin-bottom:10px}
.hm-escrow-card .escrow-bar{height:6px;background:var(--bg-card);border-radius:3px;overflow:hidden;margin-bottom:4px}
.hm-escrow-card .escrow-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--warning),var(--warning));transition:width .4s}
.hm-escrow-card .escrow-steps{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}
.hm-escrow-card .escrow-steps .step.active{color:var(--warning);font-weight:700}
.hm-escrow-card .escrow-steps .step.done{color:var(--success)}
.hm-escrow-card .escrow-actions{display:flex;gap:6px;margin-top:8px}
.hm-escrow-card .escrow-actions button{flex:1;padding:7px;border-radius:8px;font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;border:none}
.hm-escrow-card .escrow-actions .esc-release{background:var(--success);color:var(--bg-deep)}
.hm-escrow-card .escrow-actions .esc-dispute{background:transparent;border:1px solid var(--danger);color:var(--danger)}

/* ── Ticket Card in Messages (hyTickets share) ── */
.hm-ticket-card{border-radius:14px;padding:12px 14px;background:var(--glass-bg, var(--bg-card));backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border:1.5px solid var(--info,var(--info));margin-top:4px;min-width:220px;max-width:300px}
.hm-ticket-card .htk-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.hm-ticket-card .htk-src{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-glow);padding:2px 7px;border-radius:var(--radius-full)}
.hm-ticket-card .htk-id{font-size:10px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.hm-ticket-card .htk-pill{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:var(--radius-full);border:1px solid var(--border);color:var(--muted)}
.hm-ticket-card .htk-subj{font-size:13px;font-weight:700;color:var(--accent-text);display:flex;align-items:center;gap:6px;line-height:1.35}
.hm-ticket-card .htk-subj iconify-icon{color:var(--info,var(--info));flex-shrink:0}
.hm-ticket-card .htk-tag{font-size:10px;color:var(--muted);margin-top:4px}
.hm-ticket-card .htk-tag b{color:var(--info,var(--info))}
.hm-ticket-card .htk-open{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:7px 12px;border-radius:8px;background:var(--info,var(--info));color:var(--bg-deep);font-size:11px;font-weight:700;text-decoration:none}
.hm-ticket-card .htk-open:hover{filter:brightness(1.08)}

/* ── Wallet Modal ── */
.hm-wallet-bg{display:none;position:fixed;inset:0;background:var(--bg-modal);z-index:var(--z-modal);align-items:center;justify-content:center;padding:16px}
.hm-wallet-bg.open{display:flex}
.hm-wallet-modal{background:var(--glass-bg-heavy, var(--bg-deep));backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);border:1px solid var(--glass-border, var(--border));border-radius:var(--radius-ios-lg, 20px);padding:28px 24px;width:100%;max-width:420px;max-height:85vh;overflow-y:auto;box-shadow:0 16px 80px rgba(0,0,0,.6);animation:hm-paySlideUp .35s cubic-bezier(.2,.9,.3,1)}
.hm-wallet-modal h3{font-size:15px;font-weight:900;color:var(--accent-text);margin-bottom:4px;font-family:'Orbitron',monospace;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.hm-wallet-modal h3 iconify-icon{font-size:18px;color:var(--accent)}
.hm-wallet-total{font-size:36px;font-weight:900;color:var(--accent);font-family:'Orbitron',monospace;text-align:center;margin:16px 0 8px}
.hm-wallet-subtitle{font-size:11px;color:var(--muted);text-align:center;margin-bottom:18px}
.hm-wallet-chain-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.hm-wallet-chain-row:last-child{border-bottom:none}
.hm-wallet-chain-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.hm-wallet-chain-info{flex:1}
.hm-wallet-chain-name{font-size:12px;font-weight:700;color:var(--accent-text)}
.hm-wallet-chain-addr{font-size:9px;color:var(--muted);font-family:'Roboto Mono',monospace;word-break:break-all}
.hm-wallet-chain-bal{font-size:13px;font-weight:700;color:var(--accent-text);font-family:'Roboto Mono',monospace;text-align:right}
.hm-wallet-chain-bal .usd{font-size:10px;color:var(--muted);display:block}
.hm-wallet-qr{text-align:center;margin:16px 0;padding:16px;background:var(--bg-card);border-radius:12px;border:1px solid var(--border)}
.hm-wallet-qr canvas{border-radius:8px}
.hm-wallet-txn{padding:8px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.hm-wallet-txn:last-child{border-bottom:none}
.hm-wallet-txn .txn-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.hm-wallet-txn .txn-info{flex:1;font-size:11px;color:var(--accent-text)}
.hm-wallet-txn .txn-amount{font-size:12px;font-weight:700;font-family:'Roboto Mono',monospace}
.hm-wallet-advanced{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.hm-wallet-advanced summary{font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.hm-wallet-advanced summary::-webkit-details-marker{display:none}
.hm-wallet-advanced .adv-btn{display:block;width:100%;margin-top:8px;padding:8px;border:1px solid var(--border);border-radius:8px;background:none;color:var(--muted);font-size:11px;cursor:pointer;font-family:inherit;text-align:left;display:flex;align-items:center;gap:6px}
.hm-wallet-advanced .adv-btn:hover{border-color:var(--border-focus);color:var(--accent-text)}

/* ── Wallet Onboarding Card ── */
.hm-wallet-setup{border-radius:14px;padding:20px;background:var(--glass-bg, var(--bg-card));backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border:1px solid var(--accent-glow);text-align:center;margin:12px 18px}
.hm-wallet-setup iconify-icon{font-size:32px;color:var(--accent);margin-bottom:8px}
.hm-wallet-setup h4{font-size:14px;font-weight:900;color:var(--accent-text);font-family:'Orbitron',monospace;margin-bottom:4px}
.hm-wallet-setup p{font-size:11px;color:var(--muted);margin-bottom:12px}
.hm-wallet-setup button{background:var(--accent);color:var(--bg-deep);border:none;border-radius:var(--radius-ios-sm,10px);padding:10px 20px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit;transition:all .15s}
.hm-wallet-setup button:hover{background:var(--accent-hover);transform:translateY(-1px)}

/* ── Phase: Scheduled Messages ── */
.hm-msg-row.scheduled .hm-bubble{opacity:.55;border:1px dashed var(--border)}
.hm-scheduled-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--warning);margin-top:4px}
.hm-scheduled-badge iconify-icon{font-size:12px}

/* ── Phase: Polls ── */
.hm-poll-card{background:var(--glass-bg, var(--bg-card));backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border:1px solid var(--glass-border, var(--border));border-radius:var(--radius-ios, 14px);padding:14px;min-width:240px;max-width:300px}
.hm-poll-question{font-size:14px;font-weight:700;color:var(--accent-text);margin-bottom:10px;line-height:1.4}
.hm-poll-option{position:relative;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-ios-sm, 10px);margin-bottom:6px;cursor:pointer;transition:all .15s;overflow:hidden;font-size:13px;color:var(--accent-text)}
.hm-poll-option:hover{border-color:var(--border-focus);background:var(--accent-dim)}
.hm-poll-option.voted{border-color:var(--accent-glow);background:transparent;cursor:default}
.hm-poll-option .hm-poll-bar{position:absolute;left:0;top:0;bottom:0;background:var(--accent-dim);border-radius:var(--radius-ios-sm, 10px);transition:width .4s ease}
.hm-poll-option .hm-poll-label{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center}
.hm-poll-option .hm-poll-pct{font-size:11px;color:var(--muted);font-weight:600}
.hm-poll-total{font-size:11px;color:var(--muted);margin-top:6px;text-align:right}

/* ── Phase: Bookmarks ── */
.hm-bookmark-btn{color:var(--muted)!important}
.hm-bookmark-btn.bookmarked{color:var(--warning)!important}
.hm-bookmarks-section{border-bottom:1px solid var(--border);overflow:hidden;transition:max-height .3s ease}
.hm-bookmarks-section.collapsed .hm-bookmarks-list{display:none}
.hm-bookmarks-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hm-bookmarks-header:hover{background:var(--bg-card-hover)}
.hm-bookmarks-header iconify-icon{font-size:14px;color:var(--warning)}
.hm-bookmarks-list{max-height:180px;overflow-y:auto}
.hm-bookmark-item{display:flex;flex-direction:column;gap:2px;padding:8px 16px;cursor:pointer;transition:background .15s;font-size:11px}
.hm-bookmark-item:hover{background:var(--bg-card-hover)}
.hm-bookmark-item .bm-text{color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-bookmark-item .bm-meta{display:flex;gap:8px;font-size:9px;color:var(--muted)}

/* ── Phase: Chat Themes / Wallpapers ── */
.hm-wallpaper-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.hm-wallpaper-swatch{width:100%;aspect-ratio:1;border-radius:var(--radius-ios-sm, 10px);cursor:pointer;border:2px solid var(--border);transition:all .15s;position:relative;overflow:hidden}
.hm-wallpaper-swatch:hover{border-color:var(--border-focus);transform:scale(1.05)}
.hm-wallpaper-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}
.hm-wallpaper-swatch .swatch-label{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:7px;color:var(--accent-text);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hm-wp-none{background:var(--bg-card)}
.hm-wp-midnight{background:linear-gradient(135deg,#0d1b2a,#1b2838,#0b132b)}
.hm-wp-sunset{background:linear-gradient(135deg,#e65c00,#7b2ff7)}
.hm-wp-forest{background:linear-gradient(135deg,#0b3d0b,#1a472a,#0d2818)}
.hm-wp-ocean{background:linear-gradient(135deg,#006d77,#0a9396,#005f73)}
.hm-wp-stars{background:var(--bg-deep);background-image:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 40% 60%,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 70% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 90% 80%,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 30% 90%,rgba(255,255,255,.4),transparent)}
.hm-wp-grid{background:var(--bg-deep);background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:20px 20px}
.hm-wp-dots{background:var(--bg-deep);background-image:radial-gradient(circle,var(--border) 1px,transparent 1px);background-size:16px 16px}

/* Schedule modal extras */
.hm-schedule-row{display:flex;gap:8px;margin-bottom:12px}
.hm-schedule-row input{flex:1}

/* Hover actions */
.hm-msg-actions{position:absolute;top:-8px;display:none;gap:2px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-ios-sm,10px);padding:2px;box-shadow:var(--shadow-md);z-index:10}
.hm-msg-row.sent .hm-msg-actions{left:0}
.hm-msg-row.received .hm-msg-actions{right:0}
.hm-msg-row:hover .hm-msg-actions{display:flex}
.hm-msg-actions button{background:none;border:none;font-size:14px;padding:4px 6px;cursor:pointer;border-radius:6px;color:var(--muted);min-height:auto;display:flex;align-items:center}
.hm-msg-actions button:hover{background:var(--bg-card-hover);color:var(--accent-text)}

/* ── Composer ── */
.hm-composer{padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--bg-surface);flex-shrink:0}
.hm-composer-wrap{display:flex;align-items:flex-end;gap:6px;border:1px solid var(--border);border-radius:var(--radius-ios, 14px);padding:6px 10px;background:var(--bg-card);transition:border-color .15s}
.hm-composer-wrap:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-dim)}
.hm-composer-tools{display:flex;gap:2px;align-items:center}
.hm-composer-tools button,.hm-composer-tools label{background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;padding:4px 6px;border-radius:6px;min-height:auto;display:flex;align-items:center}
.hm-composer-tools button:hover,.hm-composer-tools label:hover{color:var(--accent-text);background:var(--bg-card-hover)}
.hm-composer-input{flex:1;min-height:38px;max-height:120px;padding:8px 4px;border:none;background:transparent;color:var(--accent-text);font-size:16px;font-family:inherit;resize:none;outline:none;line-height:1.4}
.hm-composer-input::placeholder{color:var(--muted)}
.hm-send-btn{background:var(--accent);color:var(--bg-deep);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;flex-shrink:0;transition:transform .15s}
.hm-send-btn:hover{transform:scale(1.05)}
.hm-send-btn:active{transform:scale(.95)}
.hm-voice-btn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;flex-shrink:0}
.hm-voice-btn:hover{color:var(--accent-text);border-color:var(--border-focus)}
.hm-voice-btn.recording{color:var(--danger);border-color:var(--danger);animation:hm-pulse 1s infinite}
@keyframes hm-pulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent)}}
/* ── iOS composer touch hardening: taps land on the control (not the icon), no long-press
   callout/selection, no double-tap zoom delay. The icon is decorative -> pointer-events:none. ── */
.hm-composer button,.hm-composer label{touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.hm-composer iconify-icon{pointer-events:none}
/* ── Two-row composer: action buttons on their OWN row ABOVE the text input,
   so the input is always full-width and never hidden behind the tools. ── */
.hm-composer-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-bottom:8px}
.hm-composer-actions button,.hm-composer-actions label{background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;padding:0;border-radius:10px;width:40px;height:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s,color .15s}
.hm-composer-actions button:hover,.hm-composer-actions label:hover{color:var(--accent-text);background:var(--glass-highlight,var(--bg-card-hover))}
.hm-composer-actions .hm-voice-btn{border:1px solid var(--border);border-radius:50%}
.hm-composer-inputrow{display:flex;align-items:flex-end;gap:8px}
.hm-composer-inputrow .hm-composer-input{flex:1;min-width:0;min-height:42px;max-height:140px;padding:10px 16px;border:1px solid var(--glass-border,var(--border));border-radius:22px;background:var(--glass-bg-light,var(--bg-card));-webkit-backdrop-filter:saturate(150%) blur(var(--glass-blur-light));backdrop-filter:saturate(150%) blur(var(--glass-blur-light));color:var(--accent-text);font-size:16px;font-family:inherit;resize:none;outline:none;line-height:1.4}
.hm-composer-inputrow .hm-composer-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-dim)}
.hm-composer-inputrow .hm-composer-input::placeholder{color:var(--muted)}

/* Drag-drop overlay */
.hm-drop-overlay{display:none;position:fixed;inset:0;background:color-mix(in srgb, var(--accent) 6%, transparent);border:3px dashed var(--accent);z-index:var(--z-modal);align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--accent);font-family:'Orbitron',monospace}
.hm-drop-overlay.visible{display:flex}

/* @mention popup */
.hm-mention-popup{position:absolute;bottom:100%;left:12px;right:12px;max-height:180px;overflow-y:auto;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-ios,14px);box-shadow:var(--shadow-lg);display:none;z-index:var(--z-dropdown)}
.hm-mention-popup.visible{display:block}
.hm-mention-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;font-size:13px;color:var(--accent-text)}
.hm-mention-item:hover,.hm-mention-item.selected{background:var(--accent-dim)}

/* Emoji picker */
.hm-emoji-picker{position:absolute;bottom:100%;right:10px;background:var(--glass-bg-heavy, var(--bg-surface));backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--glass-border, var(--border));border-radius:var(--radius-ios,14px);padding:12px;display:none;flex-wrap:wrap;gap:4px;width:260px;box-shadow:var(--shadow-lg);z-index:var(--z-dropdown)}
.hm-emoji-picker.visible{display:flex}
.hm-emoji-picker button{font-size:20px;padding:4px;background:none;border:none;cursor:pointer;border-radius:6px;min-height:auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.hm-emoji-picker button:hover{background:var(--bg-card-hover)}

/* ── Right Panel — Detail ── */
.hm-detail{width:300px;background:var(--bg-surface);border-left:1px solid var(--border);display:none;flex-direction:column;flex-shrink:0;overflow-y:auto}
.hm-detail.open{display:flex}
.hm-detail-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.hm-detail-header h4{font-size:13px;font-weight:700;color:var(--accent-text)}
.hm-detail-close{background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;min-height:auto;padding:4px;display:flex;align-items:center}
.hm-detail-close:hover{color:var(--accent-text)}

/* Profile section */
.hm-detail-profile{padding:24px 16px;text-align:center;border-bottom:1px solid var(--border)}
.hm-detail-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 12px;overflow:hidden;border:3px solid var(--accent-glow)}
.hm-detail-avatar img{width:100%;height:100%;object-fit:cover}
.hm-detail-name{font-size:16px;font-weight:700;color:var(--accent-text)}
.hm-detail-username{font-size:11px;color:var(--muted);margin-top:2px}
.hm-detail-status{font-size:11px;margin-top:4px}

/* E2EE verify */
.hm-detail-e2ee{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer}
.hm-detail-e2ee:hover{background:var(--bg-card-hover)}
.hm-detail-e2ee iconify-icon{font-size:20px;color:var(--accent)}
.hm-detail-e2ee .e2ee-text{font-size:11px;color:var(--muted);flex:1}
.hm-detail-e2ee .e2ee-text b{color:var(--accent-text);display:block;font-size:12px}

/* Actions row */
.hm-detail-actions{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-around}
.hm-detail-action{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;color:var(--muted);font-size:10px;padding:8px}
.hm-detail-action:hover{color:var(--accent-text)}
.hm-detail-action iconify-icon{font-size:20px;color:var(--accent)}

/* Detail sections */
.hm-detail-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.hm-detail-section h5{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}

/* Media gallery */
.hm-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.hm-media-grid .thumb{width:100%;aspect-ratio:1;border-radius:8px;background:var(--bg-card);overflow:hidden;cursor:pointer}
.hm-media-grid .thumb img{width:100%;height:100%;object-fit:cover}

/* Group members */
.hm-member-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;color:var(--accent-text)}
.hm-member-avatar{width:28px;height:28px;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--accent);flex-shrink:0;overflow:hidden}
.hm-member-avatar img{width:100%;height:100%;object-fit:cover}
.hm-member-role{font-size:9px;color:var(--muted);margin-left:auto}
.hm-member-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-member-remove{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px;min-height:auto;display:flex;align-items:center}
.hm-member-remove:hover{color:var(--danger)}
.hm-member-add{background:none;border:1px dashed var(--border);color:var(--accent);width:100%;padding:8px;border-radius:8px;font-size:11px;cursor:pointer;margin-top:8px;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px}
.hm-member-add:hover{border-color:var(--accent-glow)}

/* Detail settings */
.hm-setting-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12px;color:var(--accent-text)}
.hm-setting-row .label{display:flex;align-items:center;gap:8px}
.hm-setting-row iconify-icon{font-size:16px;color:var(--muted)}
.hm-toggle{width:40px;height:22px;border-radius:var(--radius-full);background:var(--border);position:relative;cursor:pointer;transition:background .2s}
.hm-toggle.on{background:var(--accent)}
.hm-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--accent-text);transition:transform .2s}
.hm-toggle.on::after{transform:translateX(18px)}

/* Danger actions */
.hm-danger-row{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:12px;color:var(--danger);cursor:pointer}
.hm-danger-row:hover{color:var(--danger)}
.hm-danger-row iconify-icon{font-size:16px}

/* ── Modals ── */
.hm-modal-bg{display:none;position:fixed;inset:0;background:var(--bg-modal);z-index:var(--z-modal);align-items:center;justify-content:center;padding:16px}
.hm-modal-bg.open{display:flex}
.hm-modal{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-ios-lg, 20px);padding:24px;width:100%;max-width:440px;max-height:85vh;overflow-y:auto}
.hm-modal h3{font-size:15px;font-weight:700;color:var(--accent-text);margin-bottom:16px;font-family:'Orbitron',monospace;letter-spacing:.05em}
.hm-modal .fi{width:100%;padding:10px 14px;border-radius:var(--radius-ios-sm, 10px);border:1px solid var(--border);background:var(--bg-card);color:var(--accent-text);font-size:14px;font-family:inherit;margin-bottom:10px}
.hm-modal .fi:focus{border-color:var(--border-focus);outline:none;box-shadow:0 0 0 3px var(--accent-dim)}
.hm-modal .fl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.hm-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.hm-btn-ghost{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius-ios-sm,10px);padding:8px 16px;font-size:12px;cursor:pointer;font-family:inherit}
.hm-btn-ghost:hover{border-color:var(--border-focus);color:var(--accent-text)}
.hm-btn-primary{background:var(--accent);color:var(--bg-deep);border:none;border-radius:var(--radius-ios-sm,10px);padding:8px 16px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}
.hm-btn-primary:hover{background:var(--accent-hover)}

/* User search results in new conversation modal */
.hm-user-results{max-height:200px;overflow-y:auto;margin:8px 0}
.hm-user-row{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;border-radius:var(--radius-ios-sm,10px);transition:background .15s}
.hm-user-row:hover{background:var(--accent-dim)}
.hm-user-row.selected{background:var(--accent-dim);border:1px solid var(--accent-glow)}
/* Selected-member chips (Create Group / Add member) */
.hm-group-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.hm-group-chips:empty{display:none}
.hm-group-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 6px 4px 10px;border-radius:var(--radius-full);background:var(--accent-dim);border:1px solid var(--accent-glow);color:var(--accent-text)}
.hm-group-chip button{background:none;border:none;color:var(--muted);cursor:pointer;padding:0;margin:0;min-height:auto;display:flex;align-items:center;font-size:15px;line-height:1}
.hm-group-chip button:hover{color:var(--danger)}

/* ── Group avatar (photo OR emoji/mdi icon) ── */
.hm-header-avatar,.hm-detail-avatar{display:flex;align-items:center;justify-content:center;color:var(--accent)}
.hm-detail-avatar{position:relative}
.hm-av-edit{position:absolute;bottom:2px;right:2px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--bg-deep);border:2px solid var(--bg-surface);display:none;align-items:center;justify-content:center;cursor:pointer;font-size:13px}
.hm-av-edit.show{display:flex}
.hm-avatar-stage{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:8px}
#hm-avatar-preview{width:96px;height:96px;border-radius:50%;overflow:hidden;border:3px solid var(--accent-glow);background:var(--bg-card);display:flex;align-items:center;justify-content:center}
#hm-avatar-preview img{width:100%;height:100%;object-fit:cover}
.hm-ap-palette{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.hm-ap-item{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.hm-ap-item:hover{border-color:var(--accent-glow);background:var(--bg-card-hover)}
.hm-group-avatar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hm-group-avatar-row .hm-gav-preview{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid var(--border);background:var(--bg-card);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hm-group-avatar-row .hm-gav-preview img{width:100%;height:100%;object-fit:cover}

/* ── Call UI ── */
.hm-call-overlay{display:none;position:fixed;inset:0;z-index:calc(var(--z-modal) + 10);background:var(--glass-bg-heavy, var(--bg-deep));backdrop-filter:saturate(180%) blur(40px);-webkit-backdrop-filter:saturate(180%) blur(40px);flex-direction:column;align-items:center;justify-content:center;gap:24px}
.hm-call-overlay.active{display:flex}
.hm-call-avatar-lg{width:120px;height:120px;border-radius:50%;overflow:hidden;border:3px solid var(--accent-glow);box-shadow:0 0 60px var(--accent-dim)}
.hm-call-avatar-lg img{width:100%;height:100%;object-fit:cover}
.hm-call-btn{width:56px;height:56px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;transition:transform .15s}
.hm-call-btn:hover{transform:scale(1.08)}
.hm-call-btn.end{background:var(--danger);color:#fff}
.hm-call-btn.mute{background:var(--bg-card);border:1px solid var(--border);color:var(--accent-text)}
.hm-call-btn.accept{background:var(--success);color:var(--bg-deep)}

/* Incoming call */
.hm-incoming-call{display:none;position:fixed;top:60px;right:24px;width:320px;background:var(--glass-bg-heavy, var(--bg-surface));backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);border:1px solid var(--glass-border, var(--border));border-radius:var(--radius-ios-lg,20px);padding:20px;z-index:calc(var(--z-modal) + 5);box-shadow:var(--shadow-lg);text-align:center}
.hm-incoming-call.active{display:block;animation:hm-slideDown .4s cubic-bezier(.2,.9,.3,1)}
@keyframes hm-slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* Lightbox */
.hm-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:calc(var(--z-modal) + 20);align-items:center;justify-content:center;cursor:pointer}
.hm-lightbox.active{display:flex}
.hm-lightbox img{max-width:90%;max-height:90%;border-radius:12px;box-shadow:0 0 40px rgba(0,0,0,.5)}

/* Key verification modal */
.hm-verify-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.hm-verify-num{padding:8px;text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:'Roboto Mono',monospace;color:var(--accent);letter-spacing:.1em}

/* ── Empty center state ── */
.hm-empty-center{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:40px;gap:12px}
.hm-empty-center img{width:80px;height:80px;opacity:.3}
.hm-empty-center h3{font-size:16px;font-family:'Orbitron',monospace;color:var(--accent);letter-spacing:.08em}
.hm-empty-center p{font-size:12px;color:var(--muted);max-width:300px}

/* ── Toast ── */
#toast{position:fixed;bottom:24px;right:24px;padding:10px 18px;border-radius:var(--radius-ios-sm,10px);font-size:12px;font-weight:600;z-index:var(--z-toast);opacity:0;transition:opacity .3s;pointer-events:none;font-family:inherit}
#toast.show{opacity:1}
#toast.ok{background:var(--accent-dim);border:1px solid var(--accent-glow);color:var(--accent)}
#toast.err{background:color-mix(in srgb, var(--danger) 12%, transparent);border:1px solid color-mix(in srgb, var(--danger) 30%, transparent);color:var(--danger)}

/* ── Mobile hamburger ── */
.hm-mobile-back{display:none;background:none;border:none;font-size:20px;color:var(--accent-text);cursor:pointer;padding:4px;min-height:auto}

/* ── Mobile ── */
@media(max-width:768px){
  /* ── Inbox-first push navigation ────────────────────────────────────
     Phone shows EITHER the inbox (conversation list) OR an open chat — never a
     drawer-over-chat. .hm-layout.hm-view-chat slides the chat in; default = inbox.
     Desktop (≥769px) ignores all of this and keeps the 3-column layout. */
  .hm-layout{position:relative;overflow:hidden}
  .hm-sidebar{position:absolute;inset:0;width:100%;max-width:none;z-index:2;border-right:none;transition:transform .28s cubic-bezier(.2,.9,.3,1)}
  .hm-center{position:absolute;inset:0;z-index:3;background:var(--bg-deep);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.9,.3,1)}
  .hm-layout.hm-view-chat .hm-center{transform:translateX(0)}
  .hm-layout.hm-view-chat .hm-sidebar{transform:translateX(-16%)}
  /* In a narrow OS window the hy-compact/hy-medium opt-in forces the list to
     280px; on a phone-width viewport the inbox-first list must be FULL width
     (otherwise "all chats" renders as a cramped strip). Restore 100%. */
  html.hy-compact .hm-sidebar,
  html.hy-medium  .hm-sidebar{width:100%!important;max-width:none!important}
  .hm-mobile-back{display:flex;align-items:center}
  .hm-detail{position:fixed;right:-100%;top:0;bottom:0;width:100%;z-index:var(--z-modal);transition:right .3s cubic-bezier(.2,.9,.3,1)}
  .hm-detail.open{right:0}
  .hm-msg-row{max-width:85%}
  .hm-bubble-img{max-width:100%}
  input,textarea{font-size:16px!important}
  .hm-call-avatar-lg{width:100px;height:100px}
  .hm-incoming-call{right:12px;left:12px;width:auto}
  /* keep voice+video inline on the chat header; search/info move to the ⋮ menu */
  .hm-hdr-desktoponly{display:none!important}
  /* !important: the base `.hm-hdr-more{display:none}` is declared LATER in the
     sheet, so without it that base rule wins at every width and the mobile
     overflow ⋮ (the only path to search/info/manage on a phone) stays hidden. */
  .hm-hdr-more{display:block!important}
  /* compose FAB only on the inbox view */
  .hm-fab{display:flex}
  .hm-layout.hm-view-chat ~ .hm-fab{display:none}
  .hm-msg-header-right button,.hm-hdr-more>button{min-width:40px;min-height:40px}
  .hm-mobile-back{min-width:40px;min-height:40px;justify-content:center}
}
@media(max-width:480px){
  .hm-msg-row{max-width:90%}
}

/* ══ HypatiaOS iframe blank-screen fix ══════════════════════════════════
   window-containers.css (loaded for OS-window sizing) turns ANY [class*="sidebar"]
   into an off-canvas drawer at a narrow CONTAINER width:
     @container (max-width:800px){ [class*="sidebar"]:not(.hy-drawer){position:fixed;left:-100%} }
   window-responsive.js sets container-type:inline-size on <body> inside an OS
   iframe, so on a phone-sized HypatiaOS window that shoved hyMessage's
   conversation list — which IS the mobile inbox, not a secondary panel — fully
   off-screen, leaving the empty center = a BLANK app. Re-assert the inbox-first
   full-screen list + chat overlay. `!important` beats the (non-important)
   container rule regardless of specificity. Mirrored on the JS-set hy-compact
   bucket for browsers without @container support. Desktop/wide windows keep the
   3-column layout (these only fire at ≤800px container / hy-compact). */
@supports (container-type: inline-size){
  @container (max-width: 800px){
    .hm-layout{position:relative!important;overflow:hidden!important}
    .hm-sidebar{position:absolute!important;left:0!important;right:auto!important;top:0!important;bottom:0!important;width:100%!important;max-width:none!important;min-width:0!important;transform:translateX(0)!important;z-index:2!important;display:flex!important;border-right:none!important}
    .hm-layout.hm-view-chat .hm-sidebar{transform:translateX(-16%)!important}
    .hm-center{position:absolute!important;inset:0!important;z-index:3!important;transform:translateX(100%)!important}
    .hm-layout.hm-view-chat .hm-center{transform:translateX(0)!important}
    .hm-detail{position:fixed!important;right:-100%;top:0;bottom:0;width:100%!important;z-index:var(--z-modal)}
    .hm-detail.open{right:0!important}
  }
}
html.hy-compact .hm-layout{position:relative!important;overflow:hidden!important}
html.hy-compact .hm-sidebar{position:absolute!important;left:0!important;right:auto!important;top:0!important;bottom:0!important;width:100%!important;max-width:none!important;min-width:0!important;transform:translateX(0)!important;z-index:2!important;display:flex!important;border-right:none!important}
html.hy-compact .hm-layout.hm-view-chat .hm-sidebar{transform:translateX(-16%)!important}
html.hy-compact .hm-center{position:absolute!important;inset:0!important;z-index:3!important;transform:translateX(100%)!important}
html.hy-compact .hm-layout.hm-view-chat .hm-center{transform:translateX(0)!important}

.hm-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:calc(var(--z-modal) - 1)}
.hm-sidebar-overlay.visible{display:block}

/* Hypatia owl watermark */
.hm-watermark{position:absolute;bottom:20px;right:20px;opacity:.04;pointer-events:none;width:120px;height:120px}

/* ════════════ iOS Liquid Glass makeover — tokens from /css/ios-glass.css ════════════
   Frosted, translucent chrome (header / drawer / composer / modals) layered over
   the theme. Uses --glass-* tokens (theme-aware, light-mode safe, blur auto-
   reduces ≤480px) — no hardcoded brand colors. */
.hm-msg-header{background:var(--glass-bg-heavy);-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur-heavy));backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur-heavy));border-bottom:.5px solid var(--glass-border)}
.hm-sidebar{background:var(--glass-bg);-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));border-right:.5px solid var(--glass-border)}
.hm-sidebar-header,.hm-search{background:transparent;border-bottom:.5px solid var(--glass-border)}
.hm-search input{background:var(--glass-bg-light);-webkit-backdrop-filter:saturate(150%) blur(var(--glass-blur-light));backdrop-filter:saturate(150%) blur(var(--glass-blur-light));border:1px solid var(--glass-border);border-radius:12px}
.hm-search input:focus{background:var(--glass-bg);border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-dim)}
.hm-conv-item:hover{background:var(--glass-highlight)}
.hm-conv-item.active{background:var(--accent-dim)}
.hm-e2ee-banner{background:var(--glass-bg-light);-webkit-backdrop-filter:saturate(150%) blur(var(--glass-blur-light));backdrop-filter:saturate(150%) blur(var(--glass-blur-light));border-bottom:.5px solid var(--glass-border)}
.hm-detail{background:var(--glass-bg);-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));border-left:.5px solid var(--glass-border)}
/* Frosted bottom composer with a rounded glass input pill */
.hm-composer{background:var(--glass-bg-heavy);-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur-heavy));backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur-heavy));border-top:.5px solid var(--glass-border)}
.hm-composer-wrap{background:var(--glass-bg-light);-webkit-backdrop-filter:saturate(150%) blur(var(--glass-blur-light));backdrop-filter:saturate(150%) blur(var(--glass-blur-light));border:1px solid var(--glass-border);border-radius:22px;box-shadow:var(--glass-inset-shadow)}
.hm-composer-wrap:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-dim),var(--glass-inset-shadow)}
/* Glass modals + sheets */
.hm-modal,.hm-pay-sheet,.hm-wallet-modal{background:var(--glass-bg-heavy);-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur-heavy));backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur-heavy));border:1px solid var(--glass-border)}
/* ── Composer tool tray: collapse secondary tools behind ＋ so the field is usable ── */
.hm-tool-more{display:none;background:none;border:none;color:var(--muted);cursor:pointer;padding:4px 6px;border-radius:50%;min-height:auto;align-items:center;justify-content:center;flex-shrink:0;touch-action:manipulation}
.hm-tool-more iconify-icon{font-size:24px;pointer-events:none}
.hm-tool-more:hover{color:var(--accent-text);background:var(--glass-highlight)}
@media(max-width:768px){
  .hm-tool-more{display:flex}
  .hm-composer-tools{position:absolute;left:10px;right:10px;bottom:calc(100% + 10px);display:none;justify-content:space-around;gap:4px;padding:10px 12px;background:var(--glass-bg-heavy);-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur-heavy));backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur-heavy));border:1px solid var(--glass-border);border-radius:18px;box-shadow:var(--glass-shadow-lg);z-index:var(--z-dropdown)}
  .hm-composer.tools-open .hm-composer-tools{display:flex;animation:hm-paySlideUp .2s ease}
  .hm-composer-tools button,.hm-composer-tools label{flex:1;justify-content:center;font-size:22px;padding:8px 0}
  .hm-composer-input{min-width:0}
  }

/* ════════════ hyVideo — FaceTime-style WebRTC-mesh call overlay ════════════
   Built on the existing .hm-call-overlay. Theme + iOS-glass tokens ONLY
   (no hardcoded brand colors) so it adapts across every theme. */
.hm-call-overlay.active{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0}
/* top meta bar (title / status / duration + connection quality) */
.hv-topbar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 28px;background:linear-gradient(to bottom,var(--glass-bg-heavy),transparent);pointer-events:none}
.hv-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.hv-title{font-family:'Orbitron',monospace;font-weight:900;font-size:18px;color:var(--text-strong,var(--accent-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-sub{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
#hv-call-dur{font-family:'Roboto Mono',monospace;color:var(--accent);letter-spacing:.06em}
.hv-quality{font-size:18px;color:var(--muted);pointer-events:auto}
/* main stage = full-bleed remote (1:1) */
.hv-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg-deep)}
.hv-stage.speaking{box-shadow:inset 0 0 0 3px var(--accent-glow)}
.hv-stage video.hv-stage-video{width:100%;height:100%;object-fit:cover;background:#000}
.hv-stage-avatar{width:140px;height:140px;border-radius:50%;overflow:hidden;border:3px solid var(--accent-glow);
  --hv-speak:0;
  box-shadow:0 0 calc(60px + var(--hv-speak)*70px) var(--accent-dim),
             0 0 0 calc(var(--hv-speak)*8px) color-mix(in srgb,var(--accent) 60%,transparent);
  border-color:color-mix(in srgb,var(--accent) calc(var(--hv-speak)*80% + 20%),var(--accent-glow));
  transition:box-shadow .12s ease,border-color .12s ease}
.hv-stage-avatar.joining{animation:hv-pulse 1.4s ease-in-out infinite}
.hv-stage-avatar img{width:100%;height:100%;object-fit:cover}
.hv-stage-name{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:13px;color:var(--text-strong,var(--accent-text));background:var(--glass-bg-light);-webkit-backdrop-filter:blur(var(--glass-blur-light));backdrop-filter:blur(var(--glass-blur-light));padding:4px 12px;border-radius:var(--radius-full);border:1px solid var(--glass-border)}
@keyframes hv-pulse{0%,100%{box-shadow:0 0 40px var(--accent-dim)}50%{box-shadow:0 0 75px var(--accent-glow)}}
/* group tile grid */
.hv-grid{flex:1;min-height:0;display:grid;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 70px) 10px 10px;grid-template-columns:repeat(var(--hv-cols,2),minmax(0,1fr));align-content:center;overflow:auto}
.hv-tile{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--bg-card);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center}
.hv-tile.speaking{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}
/* speaking indicator now driven by --hv-speak on the avatar; tile border is
   the coarse binary on/off cue; avatar ring is the smooth audio-reactive one */
.hv-tile.joining{opacity:.7}
.hv-tile-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hv-tile-media video{width:100%;height:100%;object-fit:cover}
.hv-tile-avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid var(--glass-border);
  --hv-speak:0;
  box-shadow:0 0 calc(var(--hv-speak)*32px + 1px) calc(var(--hv-speak)*5px) var(--accent-glow);
  border-color:color-mix(in srgb,var(--accent) calc(var(--hv-speak)*100%),var(--glass-border));
  transition:box-shadow .12s ease,border-color .12s ease}
.hv-tile-avatar img{width:100%;height:100%;object-fit:cover}
.hv-tile-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:6px 10px;background:linear-gradient(to top,var(--glass-bg-heavy),transparent);font-size:11px;color:var(--text-strong,var(--accent-text))}
.hv-tile-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-tile-muted{color:var(--danger);font-size:13px;flex-shrink:0}
.hv-tile-q{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* draggable local picture-in-picture */
.hv-pip{position:fixed;right:16px;bottom:108px;width:104px;height:150px;border-radius:16px;overflow:hidden;z-index:4;border:1.5px solid var(--glass-border);box-shadow:var(--glass-shadow-lg,0 8px 30px rgba(0,0,0,.4));background:var(--bg-card);cursor:grab;touch-action:none}
.hv-pip.dragging{cursor:grabbing;opacity:.92}
.hv-pip video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.hv-pip-off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:28px;background:var(--bg-card)}
/* control bar */
.hv-controls{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 18px);background:linear-gradient(to top,var(--glass-bg-heavy),transparent)}
.hm-call-btn.cam,.hm-call-btn.flip,.hm-call-btn.screen,.hm-call-btn.ai{background:var(--glass-bg-light);border:1px solid var(--glass-border);color:var(--text-strong,var(--accent-text));-webkit-backdrop-filter:blur(var(--glass-blur-light));backdrop-filter:blur(var(--glass-blur-light))}
.hm-call-btn.on{background:var(--accent);color:var(--bg-deep);border-color:var(--accent)}
.hm-call-btn.mute.danger-on{background:var(--danger);color:#fff;border-color:var(--danger)}
.hm-call-btn.ai{padding:0;overflow:hidden}
.hm-call-btn.ai img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.hm-call-btn.ai.on{box-shadow:0 0 0 3px var(--accent-glow)}
#hv-audio-sink{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
@media(max-width:480px){
  .hv-controls{gap:10px}
  .hv-call-btn,.hm-call-btn{width:48px;height:48px;font-size:20px}
  .hv-pip{width:88px;height:128px;bottom:98px;right:12px}
  .hv-stage-avatar{width:110px;height:110px}
  .hv-title{font-size:16px}
}
/* Calling / connecting cue — animated avatar + expanding "ringing" rings shown
   until a peer connects (the engine toggles .hv-calling on #hm-call-overlay,
   plays a ringback tone for the caller, then a chime + the live stage on
   connect). Theme tokens only — no hardcoded brand colors. */
.hv-calling .hv-stage-avatar{animation:hv-pulse 1.4s ease-in-out infinite}
.hv-calling .hv-stage::before,
.hv-calling .hv-stage::after{content:'';position:absolute;top:50%;left:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px solid var(--accent-glow);opacity:0;pointer-events:none;animation:hv-ripple 1.8s ease-out infinite}
.hv-calling .hv-stage::after{animation-delay:.9s}
.hv-calling #hv-call-status{color:var(--accent)}
@keyframes hv-ripple{0%{transform:scale(.8);opacity:.5}100%{transform:scale(2.4);opacity:0}}
@media(max-width:480px){
  .hv-calling .hv-stage::before,.hv-calling .hv-stage::after{width:120px;height:120px;margin:-60px 0 0 -60px}
}

/* ════════════ hyMessage mobile redesign — inbox-first IA, source pills,
   filter chips, compose FAB, chat-header overflow. Theme + --glass tokens only. ══ */
.hm-sidebar-header h2{font-size:20px}
@media(min-width:769px){ .hm-sidebar-header h2{font-size:14px} }
.hm-conv-nametext{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Source pill (where a thread came from) on rows + chat header */
.hm-pill{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;font-size:9px;font-weight:700;line-height:1;padding:2px 7px;border-radius:var(--radius-full);white-space:nowrap;background:var(--glass-bg-light);border:1px solid var(--glass-border);color:var(--muted);-webkit-backdrop-filter:blur(var(--glass-blur-light));backdrop-filter:blur(var(--glass-blur-light));vertical-align:middle}
.hm-pill iconify-icon{font-size:10px}
.hm-pill.ai{color:var(--accent);border-color:var(--accent-glow);background:var(--accent-dim)}
.hm-pill.group{color:var(--info)}
.hm-pill.meeting{color:var(--purple,var(--accent))}
.hm-header-info h3 .hm-pill{font-size:9px}
/* Filter chips */
.hm-filter-chips{display:flex;gap:6px;padding:6px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:.5px solid var(--glass-border);scrollbar-width:none}
.hm-filter-chips::-webkit-scrollbar{display:none}
.hm-chip{flex-shrink:0;font-size:11px;font-weight:700;padding:5px 12px;border-radius:var(--radius-full);border:1px solid var(--glass-border);background:var(--glass-bg-light);color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .15s;min-height:30px;font-family:inherit}
.hm-chip.active{background:var(--accent);color:var(--bg-deep);border-color:var(--accent)}
/* Compose FAB (mobile inbox only) */
.hm-fab{display:none;position:fixed;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);width:56px;height:56px;border-radius:50%;border:none;z-index:var(--z-dropdown,40);cursor:pointer;align-items:center;justify-content:center;background:var(--accent);color:var(--bg-deep);box-shadow:var(--glass-shadow-lg,0 8px 30px rgba(0,0,0,.4))}
.hm-fab iconify-icon{font-size:26px}
.hm-fab:active{transform:scale(.94)}
/* Show the FAB on the mobile inbox view (higher specificity than the base display:none). */
@media(max-width:768px){ .hm-layout:not(.hm-view-chat) ~ .hm-fab{display:flex} }
/* Chat-header overflow menu (mobile) */
.hm-hdr-more{position:relative;display:none}
.hm-hdr-more>button{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius-ios-sm,10px);padding:6px 8px;cursor:pointer;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:16px}
.hm-hdr-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:170px;z-index:var(--z-dropdown,40);background:var(--glass-bg-heavy);-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur-heavy));backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur-heavy));border:1px solid var(--glass-border);border-radius:14px;box-shadow:var(--glass-shadow-lg);padding:6px}
.hm-hdr-more.open .hm-hdr-menu{display:block}
.hm-hdr-menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--accent-text);font-size:13px;padding:10px 12px;border-radius:10px;cursor:pointer;font-family:inherit;text-align:left;min-height:44px}
.hm-hdr-menu button:hover{background:var(--glass-highlight)}
.hm-hdr-menu iconify-icon{font-size:18px;color:var(--accent)}

/* ── SMS Inbox Section ── */
.hm-sms-section{border-top:.5px solid var(--glass-border)}
.hm-sms-section-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 6px;cursor:pointer;user-select:none;-webkit-user-select:none}
.hm-sms-section-header h3{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:6px;margin:0}
.hm-sms-section-header h3 iconify-icon{font-size:13px;color:var(--info,var(--info))}
.hm-sms-chevron{font-size:16px;color:var(--muted);transition:transform .2s;flex-shrink:0}
.hm-sms-company-sel{width:calc(100% - 32px);margin:0 16px 8px;padding:6px 10px;border-radius:var(--radius-ios-sm,10px);border:1px solid var(--glass-border);background:var(--glass-bg-light);-webkit-backdrop-filter:blur(var(--glass-blur-light));backdrop-filter:blur(var(--glass-blur-light));color:var(--accent-text);font-size:12px;font-family:inherit;cursor:pointer;outline:none;display:block}
.hm-sms-company-sel:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-dim)}
.hm-sms-threads{max-height:240px;overflow-y:auto;padding-bottom:8px}
.hm-sms-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;transition:background .15s;border-left:3px solid transparent}
.hm-sms-item:hover{background:var(--glass-highlight)}
.hm-sms-item.active{background:var(--accent-dim);border-left-color:var(--info,var(--info))}
.hm-sms-avatar{width:36px;height:36px;border-radius:50%;background:var(--glass-bg-light);border:1.5px solid var(--glass-border);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--info,var(--info));flex-shrink:0}
.hm-sms-meta{flex:1;min-width:0}
.hm-sms-phone{font-size:12px;font-weight:700;color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-sms-preview{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hm-sms-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.hm-sms-time{font-size:9px;color:var(--muted)}
.hm-sms-unread-badge{background:var(--info,var(--info));color:var(--bg-deep);font-size:9px;font-weight:700;padding:1px 5px;border-radius:var(--radius-full);min-width:16px;text-align:center}
.hm-sms-empty{padding:14px 16px;text-align:center;font-size:11px;color:var(--muted);line-height:1.5}
/* SMS conversation header pill */
.hm-sms-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full);background:color-mix(in srgb, var(--info) 12%, transparent);border:1px solid color-mix(in srgb, var(--info) 30%, transparent);color:var(--info,var(--info));white-space:nowrap;vertical-align:middle}
/* SMS reply char counter */
.hm-sms-char-count{font-size:10px;color:var(--muted);text-align:right;padding:2px 4px 0}
.hm-sms-char-count.warn{color:var(--warning)}
.hm-sms-char-count.over{color:var(--danger)}
