/* IOS MAGLINK 2027
 * Web translation of the Flutter/Cupertino client in IOS-MAGLINK.
 * This file is a style pack only: transport, auth, messages and calls stay untouched.
 */

.ios-style-sidebar-title { display: none; }

/* Gallery mechanics shared across packs; appearance uses the current tokens. */
.bubble.forwarded-media-bubble { width: min(360px, 82vw); min-width: 0; box-sizing: border-box; }
.bubble.forwarded-media-bubble .reply-preview { margin: 0 0 8px; box-sizing: border-box; width: 100%; }
.bubble.forwarded-media-bubble .bubble-media { width: 100%; max-width: 100%; margin: 0 0 4px; border-radius: 12px; box-sizing: border-box; }
.bubble.forwarded-media-bubble .bubble-media img { border-radius: inherit; }
.media-mosaic img, #lightbox-img { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.context-menu.media-viewer-menu { z-index: 602; }
.context-overlay.media-viewer-menu-overlay { z-index: 601; }
.media-item-menu .context-reactions { display: none; }
.lightbox-neighbor { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 1; will-change: transform; backface-visibility: hidden; }
.lightbox-neighbor img { animation: none; transform: none; transition: none; }
.lightbox #lightbox-img, .lightbox .lightbox-neighbor img { width: 100%; height: 100%; object-fit: contain; animation: none; }
.lightbox-actions button, .media-edit-actions button, .media-preview-send, .photo-editor-overlay button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.lightbox-actions svg, .media-edit-actions svg, .media-preview-send svg, .photo-editor-overlay svg, .lightbox-close svg, .lightbox-download svg, .lightbox-nav svg, .media-preview-close svg { width: 22px; height: 22px; flex: 0 0 22px; pointer-events: none; }
@media (max-width: 430px) { .photo-editor-heading button { min-width: 44px; } .photo-editor-heading button span { display: none; } }
.lightbox-neighbor-placeholder { color: var(--text-white, white); padding: 24px; }
.lightbox { --media-glass: color-mix(in srgb, var(--bg-modal) 76%, transparent); --media-glass-border: color-mix(in srgb, var(--text-primary) 14%, transparent); }
.lightbox-actions { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 3; padding: 6px 10px; border-radius: 18px; border: 1px solid var(--media-glass-border); background: var(--media-glass); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); width: max-content; max-width: calc(100% - 24px); }
.lightbox-actions button, .lightbox-actions .lightbox-download { position: static; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 12px; border: 0; background: transparent; color: var(--text-primary); font: inherit; cursor: pointer; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; }
.lightbox-actions button:hover, .lightbox-actions .lightbox-download:hover { background: var(--bg-hover); }
.lightbox-actions button:active, .lightbox-actions .lightbox-download:active { background: var(--bg-hover); }
.lightbox-actions #lightbox-delete-self { color: var(--danger, var(--text-primary)); }
.lightbox .lightbox-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; border-radius: 14px; border: 1px solid var(--media-glass-border); background: var(--media-glass); color: var(--text-primary); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.lightbox .lightbox-nav { border-radius: 14px; border: 1px solid var(--media-glass-border); background: var(--media-glass); color: var(--text-primary); }
.lightbox .lightbox-counter { top: calc(29px + env(safe-area-inset-top, 0px)); bottom: auto; font-variant-numeric: tabular-nums; }
.media-edit-actions button { min-height: 44px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-modal); color: var(--text-primary); font: inherit; cursor: pointer; }
.lightbox-actions button:disabled, .media-edit-actions button:disabled { opacity: .5; cursor: default; }
.lightbox-actions button:focus-visible, .media-edit-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lightbox #lightbox-img, .lightbox .lightbox-neighbor img { max-height: calc(100dvh - 190px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.lightbox.is-video-viewer #lightbox-video { height: calc(100dvh - 160px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 160px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.lightbox.is-video-viewer .lightbox-nav { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.media-quality-hint { margin: 0; padding: 8px 16px; text-align: center; max-width: 560px; font-size: 13px; line-height: 1.4; color: var(--text-white, white); }
html[data-magstyle="ios-maglink-2027"] .media-quality-hint { color: var(--text-secondary); }
.media-edit-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
.media-edit-actions [hidden] { display: none; }
.media-preview-overlay, .photo-editor-overlay { font-family: var(--font-family); }
.media-preview-overlay button, .media-preview-overlay input, .photo-editor-overlay button, .photo-editor-overlay select { font-family: inherit; }
.media-preview-send { width: auto; min-width: 48px; padding: 0 16px; border-radius: var(--radius-full); }
.photo-editor-overlay { position: fixed; inset: 0; z-index: 600; background: var(--ios-page, var(--bg-primary)); color: var(--text-primary); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 12px env(safe-area-inset-bottom, 0px); overflow: auto; }
.photo-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.photo-editor-overlay button, .photo-editor-overlay select { min-height: 44px; padding: 8px 12px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: 14px; font: inherit; }
.photo-editor-overlay button:focus-visible, .photo-editor-overlay select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-editor-overlay p { max-width: 680px; align-self: center; padding: 0 8px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
.photo-editor-stage { flex: 1; min-height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo-editor-stage canvas { max-width: 100%; max-height: 60dvh; object-fit: contain; touch-action: none; }
.photo-editor-tools { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; }
.photo-editor-error { color: var(--danger, var(--text-primary)) !important; }
html[data-magstyle="ios-maglink-2027"] .media-preview-overlay { background: var(--ios-page); color: var(--text-primary); height: 100dvh; overflow: auto; padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
html[data-magstyle="ios-maglink-2027"] .media-preview-content { padding: 12px; min-height: 100px; }
html[data-magstyle="ios-maglink-2027"] .media-preview-options { top: calc(16px + env(safe-area-inset-top, 0px)); right: 12px; background: var(--bg-input); border-radius: 16px; padding: 3px; gap: 2px; }
html[data-magstyle="ios-maglink-2027"] .media-quality-btn { min-height: 44px; border: none; border-radius: 13px; color: var(--text-secondary); }
html[data-magstyle="ios-maglink-2027"] .media-quality-btn.active { background: var(--accent); color: var(--text-white, white); }
html[data-magstyle="ios-maglink-2027"] .media-preview-close { top: calc(16px + env(safe-area-inset-top, 0px)); left: 12px; background: var(--bg-input); color: var(--text-primary); }
html[data-magstyle="ios-maglink-2027"] .media-preview-bar { flex-wrap: wrap; }
html[data-magstyle="ios-maglink-2027"] .media-preview-bar input { min-width: 0; flex-basis: 100%; background: var(--bg-input); color: var(--text-primary); }
html[data-magstyle="ios-maglink-2027"] .media-preview-bar input::placeholder { color: var(--text-secondary); }
html[data-magstyle="ios-maglink-2027"] .media-preview-send { width: 100%; border-radius: 16px; font-size: 15px; font-weight: 600; box-shadow: none; }
html[data-magstyle="ios-maglink-2027"] .media-preview-mosaic-hint { color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .lightbox.show, .lightbox img, .lightbox video { animation: none; transition: none; }
}

html[data-magstyle="ios-maglink-2027"] {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --sidebar-width: 374px;
  --header-height: 58px;
  --composer-height: 64px;
  --messages-max-width: 860px;
  --max-bubble-width: min(72%, 680px);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-xxl: 24px;
  --radius-bubble: 18px;
  --transition-fast: 120ms ease;
  --transition-normal: 180ms cubic-bezier(.22, 1, .36, 1);
  --neon-glow: none;
  --ios-navigation-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light dark;
}

html[data-magstyle="ios-maglink-2027"][data-theme="light"] {
  color-scheme: light;
  --bg-app: #eceff4;
  --bg-primary: #ffffff;
  --bg-secondary: #f5f6f9;
  --ios-page: #f5f6f9;
  --ios-surface: #fff;
  --bg-sidebar: #f5f6f9;
  --sidebar-bg: #f5f6f9;
  --bg-header: rgba(245, 246, 249, .88);
  --bg-modal: rgba(255, 255, 255, .98);
  --bg-input: #e8e9ee;
  --bg-hover: rgba(0, 104, 207, .055);
  --bg-active: #e3efff;
  --chat-area-bg: #eef1f5;
  --chat-bg: #eef1f5;
  --chat-bg-image: url('/assets/backgrounds/ios-2027-pattern.svg');
  --ios-wallpaper-base: linear-gradient(135deg, #eaf2ed, #eef3f8 52%, #e5eff0);
  --text-primary: #090a0c;
  --text-secondary: #667080;
  --text-time: #758091;
  --text-link: #0068cf;
  --icon-color: #667080;
  --icon-hover: #0068cf;
  --accent: #0068cf;
  --accent-hover: #005bb8;
  --accent-dim: #0057ac;
  --accent-light: #e3efff;
  --accent-glow: rgba(0, 104, 207, .18);
  --accent-gradient: linear-gradient(135deg, #1478dc, #0068cf);
  --accent-gradient-btn: linear-gradient(135deg, #1478dc, #0068cf);
  --border: #e4e7ec;
  --border-light: rgba(17, 27, 42, .055);
  --border-input: rgba(17, 27, 42, .12);
  --sidebar-border: #e4e7ec;
  --sidebar-item-hover: rgba(0, 104, 207, .045);
  --sidebar-item-active-bg: #e3efff;
  --sidebar-item-active-border: transparent;
  --search-bg: #e8e9ee;
  --search-border: transparent;
  --search-focus-border: rgba(0, 104, 207, .34);
  --search-placeholder: #8b9099;
  --pill-bg: transparent;
  --pill-border: transparent;
  --pill-text: #667080;
  --pill-active-bg: #e3efff;
  --pill-active-text: #0068cf;
  --pill-active-border: transparent;
  --tab-bg: rgba(253, 253, 254, .80);
  --tab-text: #667080;
  --tab-active: #0068cf;
  --bg-bubble-in: #ffffff;
  --bubble-in-bg: #ffffff;
  --bubble-in-border: rgba(17, 27, 42, .14);
  --bubble-in-text: #111318;
  --bubble-in-time: #596779;
  --bubble-shadow: 0 1px 3px rgba(16, 40, 72, .12);
  --attachment-detail-text: #596779;
  --bg-bubble-out: linear-gradient(135deg, #e1f3dc, #d5ebd5);
  --bg-bubble-out-solid: #d5ebd5;
  --bubble-out-bg: var(--bg-bubble-out);
  --bubble-out-text: #17261d;
  --bubble-out-border: #aecbaa;
  --bubble-out-time: #435e49;
  --bubble-out-status: #435e49;
  --bubble-out-status-read: #0068cf;
  --composer-bg: rgba(245, 246, 249, .92);
  --composer-input-bg: #ffffff;
  --composer-input-border: #dfe3e9;
  --composer-input-focus: rgba(0, 104, 207, .30);
  --composer-placeholder: #9ba1ab;
  --voice-btn-bg: #0068cf;
  --voice-bar: #7eb8f2;
  --voice-bar-played: #0068cf;
  --voice-bar-out: #ffffff;
  --voice-duration: #526b83;
  --voice-duration-out: rgba(255, 255, 255, .78);
  --reply-bg: rgba(0, 104, 207, .07);
  --reply-border: #0068cf;
  --reply-name: #0068cf;
  --reply-text: #667080;
  --reply-out-bg: rgba(40, 115, 71, .08);
  --reply-out-border: #528861;
  --reply-out-name: #287347;
  --reply-out-text: #405647;
  --reaction-bg: rgba(0, 0, 0, .045);
  --reaction-out-bg: rgba(40, 115, 71, .08);
  --reaction-count: #667080;
  --reaction-count-out: #405647;
  --glass-bg: rgba(253, 253, 254, .80);
  --ios-wallpaper-tint: rgba(245, 246, 249, .64);
  --glass-border: rgba(17, 27, 42, .08);
  --glass-border-hover: rgba(17, 27, 42, .14);
  --glass-shadow: 0 8px 28px rgba(16, 40, 72, .10);
  --shadow: rgba(16, 40, 72, .08);
  --shadow-lg: rgba(16, 40, 72, .16);
  --call-bg: linear-gradient(180deg, #e8eff8, #cddbea 68%, #bdccdd);
  --call-text-primary: #101318;
  --call-text-secondary: #526277;
  --call-control-bg: rgba(255, 255, 255, .72);
  --call-control-hover: rgba(255, 255, 255, .94);
  --call-control-border: rgba(17, 27, 42, .11);
  --call-control-active: #0068cf;
  --call-control-active-ink: #ffffff;
  --call-avatar-ring: rgba(0, 104, 207, .28);
  --call-avatar-glow: rgba(0, 104, 207, .14);
  --call-shadow: rgba(16, 40, 72, .20);
  --ios-call-panel: rgba(247, 249, 252, .94);
  --ios-call-idle: #e1e7ef;
  --ios-call-ink: #182331;
  --ios-call-selected: #0068cf;
  --ios-call-border: rgba(24, 35, 49, .15);
}

html[data-magstyle="ios-maglink-2027"][data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #090c11;
  --bg-primary: #101318;
  --bg-secondary: #1c2027;
  --ios-page: #101318;
  --ios-surface: #1c2027;
  --bg-sidebar: #101318;
  --sidebar-bg: #101318;
  --bg-header: rgba(16, 19, 24, .90);
  --bg-modal: rgba(28, 32, 39, .98);
  --bg-input: #20242b;
  --bg-hover: rgba(102, 172, 255, .07);
  --bg-active: #253c59;
  --chat-area-bg: #090c11;
  --chat-bg: #090c11;
  --chat-bg-image: url('/assets/backgrounds/ios-2027-pattern.svg');
  --ios-wallpaper-base: linear-gradient(135deg, #101b26, #15212b 52%, #10242a);
  --text-primary: #f6f7fa;
  --text-secondary: #a0a9b8;
  --text-time: #9ca6b5;
  --text-link: #78b7ff;
  --icon-color: #a0a9b8;
  --icon-hover: #66acff;
  --accent: #66acff;
  --accent-hover: #82bcff;
  --accent-dim: #4e99ed;
  --accent-light: #253c59;
  --accent-glow: rgba(102, 172, 255, .18);
  --accent-gradient: linear-gradient(135deg, #315779, #2b4969);
  --accent-gradient-btn: linear-gradient(135deg, #66acff, #2e83db);
  --border: #2e343e;
  --border-light: rgba(255, 255, 255, .055);
  --border-input: #353c47;
  --sidebar-border: #2e343e;
  --sidebar-item-hover: rgba(102, 172, 255, .055);
  --sidebar-item-active-bg: #253c59;
  --sidebar-item-active-border: transparent;
  --search-bg: #20242b;
  --search-border: transparent;
  --search-focus-border: rgba(102, 172, 255, .42);
  --search-placeholder: #747d8b;
  --pill-bg: transparent;
  --pill-border: transparent;
  --pill-text: #a0a9b8;
  --pill-active-bg: #253c59;
  --pill-active-text: #66acff;
  --pill-active-border: transparent;
  --tab-bg: rgba(36, 42, 51, .84);
  --tab-text: #a0a9b8;
  --tab-active: #66acff;
  --bg-bubble-in: #232a33;
  --bubble-in-bg: #232a33;
  --bubble-in-border: #46525f;
  --bubble-in-text: #f6f7fa;
  --bubble-in-time: #b4becc;
  --bubble-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  --attachment-detail-text: #b8c2d0;
  --bg-bubble-out: linear-gradient(135deg, #315779, #2b4969);
  --bg-bubble-out-solid: #315779;
  --bubble-out-bg: var(--bg-bubble-out);
  --bubble-out-text: #ffffff;
  --bubble-out-border: #597995;
  --bubble-out-time: rgba(255, 255, 255, .82);
  --bubble-out-status: rgba(255, 255, 255, .72);
  --bubble-out-status-read: #66baff;
  --composer-bg: rgba(16, 19, 24, .92);
  --composer-input-bg: #1c2027;
  --composer-input-border: #353c47;
  --composer-input-focus: rgba(102, 172, 255, .40);
  --composer-placeholder: #717987;
  --voice-btn-bg: #66acff;
  --voice-bar: #4d6b96;
  --voice-bar-played: #78b7ff;
  --voice-bar-out: #ffffff;
  --ios-wallpaper-tint: rgba(9, 12, 17, .54);
  --ios-call-panel: rgba(23, 29, 38, .94);
  --ios-call-idle: #323d4d;
  --ios-call-ink: #f7f9fc;
  --ios-call-selected: #0068cf;
  --ios-call-border: rgba(255, 255, 255, .18);
  --voice-duration: #a8b5c5;
  --voice-duration-out: rgba(255, 255, 255, .76);
  --reply-bg: rgba(102, 172, 255, .08);
  --reply-border: #66acff;
  --reply-name: #78b7ff;
  --reply-text: #a8b5c5;
  --reply-out-bg: rgba(255, 255, 255, .13);
  --reply-out-border: rgba(255, 255, 255, .78);
  --reply-out-name: #ffffff;
  --reply-out-text: rgba(255, 255, 255, .76);
  --reaction-bg: rgba(255, 255, 255, .08);
  --reaction-out-bg: rgba(255, 255, 255, .16);
  --reaction-count: #a8b5c5;
  --reaction-count-out: #ffffff;
  --glass-bg: rgba(36, 42, 51, .88);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-border-hover: rgba(255, 255, 255, .15);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, .30);
  --shadow: rgba(0, 0, 0, .22);
  --shadow-lg: rgba(0, 0, 0, .40);
  --call-bg: linear-gradient(180deg, #10151d, #162537 58%, #0b1017);
  --call-text-primary: #f5f7fb;
  --call-text-secondary: #a8b5c5;
  --call-control-bg: rgba(36, 42, 51, .78);
  --call-control-hover: rgba(55, 64, 77, .92);
  --call-control-border: rgba(255, 255, 255, .12);
  --call-control-active: #66acff;
  --call-control-active-ink: #071321;
  --call-avatar-ring: rgba(102, 172, 255, .34);
  --call-avatar-glow: rgba(102, 172, 255, .20);
  --call-shadow: rgba(0, 0, 0, .42);
}

html[data-magstyle="ios-maglink-2027"],
html[data-magstyle="ios-maglink-2027"] body {
  background: var(--bg-app);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

html[data-magstyle="ios-maglink-2027"] #app-screen {
  background: var(--bg-app);
}

html[data-magstyle="ios-maglink-2027"] .sidebar {
  border-right-color: var(--border);
  background: var(--sidebar-bg);
}

html[data-magstyle="ios-maglink-2027"] .sidebar-header {
  height: 60px;
  padding: 8px 16px 0;
  border-bottom: 0;
  background: var(--sidebar-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-magstyle="ios-maglink-2027"] .sidebar-brand {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .20em;
  text-align: left;
}

html[data-magstyle="ios-maglink-2027"] .sidebar-brand,
html[data-magstyle="ios-maglink-2027"][data-theme="light"] .sidebar-brand {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-magstyle="ios-maglink-2027"] .sidebar-brand span,
html[data-magstyle="ios-maglink-2027"] .sidebar-brand span:first-child,
html[data-magstyle="ios-maglink-2027"] .sidebar-brand span:last-child {
  color: var(--text-secondary);
  background: none;
  -webkit-text-fill-color: currentColor;
}

html[data-magstyle="ios-maglink-2027"] .sidebar-burger,
html[data-magstyle="ios-maglink-2027"] #new-chat-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent);
  background: var(--bg-primary);
  box-shadow: 0 3px 10px var(--shadow);
}

html[data-magstyle="ios-maglink-2027"] .ios-style-sidebar-title {
  display: block;
  flex: 0 0 auto;
  padding: 3px 20px 10px;
  color: var(--text-primary);
  font-size: 34px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.035em;
}

html[data-magstyle="ios-maglink-2027"] .sidebar-search-row,
html[data-magstyle="ios-maglink-2027"] .contacts-search-row {
  height: 38px;
  margin: 6px 12px 8px;
  border: 0;
  border-radius: 10px;
  background: var(--search-bg);
  box-shadow: none;
}

html[data-magstyle="ios-maglink-2027"] .sidebar-search-row:focus-within,
html[data-magstyle="ios-maglink-2027"] .contacts-search-row:focus-within {
  box-shadow: 0 0 0 3px var(--accent-glow);
}

html[data-magstyle="ios-maglink-2027"] .chat-filters {
  flex-wrap: nowrap;
  flex-shrink: 0;
  overflow-x: auto;
  gap: 2px;
  padding: 4px 12px 10px;
  scrollbar-width: none;
}

html[data-magstyle="ios-maglink-2027"] .filter-pill {
  min-height: 38px;
  padding: 8px 11px;
  border: 0;
  border-radius: 19px;
  background: transparent;
  color: var(--pill-text);
  box-shadow: none;
  font-size: 14px;
  font-weight: 450;
}

html[data-magstyle="ios-maglink-2027"] .filter-pill.active {
  color: var(--pill-active-text);
  background: var(--pill-active-bg);
  font-weight: 600;
}

html[data-magstyle="ios-maglink-2027"] .chat-list,
html[data-magstyle="ios-maglink-2027"] .contacts-list {
  background: var(--bg-primary);
}

html[data-magstyle="ios-maglink-2027"] .chat-item,
html[data-magstyle="ios-maglink-2027"] .contact-item {
  min-height: 72px;
  margin: 0 0 0 16px;
  padding: 9px 14px 9px 0;
  border-left: 0;
  border-bottom: 1px solid var(--border-light);
  background: transparent;
}

html[data-magstyle="ios-maglink-2027"] .chat-item:hover,
html[data-magstyle="ios-maglink-2027"] .contact-item:hover {
  background: var(--sidebar-item-hover);
}

html[data-magstyle="ios-maglink-2027"] .chat-item.active {
  /* Selection must not move the avatar, text or neighbouring rows. */
  border-radius: 12px 0 0 12px;
  background: var(--sidebar-item-active-bg);
}

html[data-magstyle="ios-maglink-2027"] .chat-item .avatar,
html[data-magstyle="ios-maglink-2027"] .contact-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: none;
}

html[data-magstyle="ios-maglink-2027"] .chat-name,
html[data-magstyle="ios-maglink-2027"] .contact-name {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.015em;
}

html[data-magstyle="ios-maglink-2027"] .chat-preview,
html[data-magstyle="ios-maglink-2027"] .contact-username,
html[data-magstyle="ios-maglink-2027"] .contact-status {
  color: var(--text-secondary);
  font-size: 14px;
}

html[data-magstyle="ios-maglink-2027"] .unread-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #0068cf;
  box-shadow: none;
}

html[data-magstyle="ios-maglink-2027"] .tab-bar {
  min-height: 66px;
  margin: 8px 16px var(--ios-navigation-bottom);
  padding: 5px;
  border: 1px solid var(--glass-border);
  border-radius: 34px;
  background: var(--tab-bg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

html[data-magstyle="ios-maglink-2027"] .tab-item {
  min-width: 0;
  min-height: 54px;
  padding: 6px 4px;
  border-radius: 27px;
  color: var(--tab-text);
  font-size: 10px;
  font-weight: 450;
  text-transform: none;
  letter-spacing: 0;
}

html[data-magstyle="ios-maglink-2027"] .tab-item.active {
  color: var(--tab-active);
  background: var(--accent-light);
  font-weight: 600;
}

html[data-magstyle="ios-maglink-2027"] .sidebar-footer { display: none; }

html[data-magstyle="ios-maglink-2027"] .chat-area {
  background-color: var(--chat-bg);
}

html[data-magstyle="ios-maglink-2027"] .chat-header {
  min-height: 58px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-header);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

html[data-magstyle="ios-maglink-2027"] #chat-header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

html[data-magstyle="ios-maglink-2027"] .chat-header-name {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.015em;
}

html[data-magstyle="ios-maglink-2027"] .chat-header-status {
  color: var(--text-secondary);
  font-size: 11px;
}

html[data-magstyle="ios-maglink-2027"] .chat-header .icon-btn,
html[data-magstyle="ios-maglink-2027"] .chat-header .back-btn {
  color: var(--accent);
  border-radius: 50%;
}

html[data-magstyle="ios-maglink-2027"] .messages-container {
  background: transparent;
}

/* Theme-specific supplied pictures; custom device wallpapers still override below. */
html[data-magstyle="ios-maglink-2027"]{--ios-picture-wallpaper:url("/assets/backgrounds/chat-dark-v2.5e512c338236c97a1f0b8905ff927c8cc90f46b43c64ed5b6d700368a5644802.webp")}
html[data-magstyle="ios-maglink-2027"][data-theme="light"]{--ios-picture-wallpaper:url("/assets/backgrounds/chat-light-v2.9c165d5edb6ad990c6469130aa0d2a27ea6ae9b78ca06b7739b2b08b646501f0.webp")}
/* A stationary wallpaper layer: scrolling messages and media stay sharp. */
html[data-magstyle="ios-maglink-2027"] .chat-area::before {
  display: block;
  content: '';
  position: absolute;
  inset: -72px;
  pointer-events: none;
  background-color: var(--chat-bg);
  /* Keep the supplied illustration at a readable scale on wide conversations. */
  background-image: var(--ios-picture-wallpaper);
  background-position: center;
  background-size: 720px auto;
  background-repeat: repeat;
  filter: blur(var(--ios-wallpaper-blur, 0px));
}

/* A quiet color wash spans the conversation; illustration scale stays fixed. */
html[data-magstyle="ios-maglink-2027"] {
  --ios-wallpaper-wash:
    radial-gradient(ellipse at 88% 85%, rgba(146, 151, 89, .12), transparent 68%),
    linear-gradient(135deg, rgba(119, 135, 77, .13) 0%, rgba(49, 115, 101, .16) 48%, rgba(40, 89, 115, .14) 76%, rgba(132, 125, 82, .10) 100%);
}
html[data-magstyle="ios-maglink-2027"][data-theme="light"] {
  --ios-wallpaper-wash:
    radial-gradient(ellipse at 88% 85%, rgba(242, 222, 141, .26), transparent 68%),
    linear-gradient(135deg, rgba(226, 224, 137, .34) 0%, rgba(147, 192, 139, .26) 45%, rgba(99, 177, 158, .26) 76%, rgba(226, 221, 164, .20) 100%);
}
html[data-magstyle="ios-maglink-2027"]:not([data-ios-wallpaper="custom"]) .chat-area::before {
  background-image: var(--ios-wallpaper-wash), var(--ios-picture-wallpaper, var(--chat-bg-image));
  background-size: cover, cover, 720px auto;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, repeat;
}

html[data-magstyle="ios-maglink-2027"] .messages-inner {
  padding: 12px 18px 16px;
}

html[data-magstyle="ios-maglink-2027"] .date-separator span {
  padding: 5px 10px;
  border: 0;
  border-radius: 12px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-header) 86%, transparent);
  box-shadow: 0 2px 8px var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-magstyle="ios-maglink-2027"] .message {
  margin: 2px 0;
}

html[data-magstyle="ios-maglink-2027"] .bubble {
  padding: 9px 12px 7px;
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow: var(--bubble-shadow);
}

html[data-magstyle="ios-maglink-2027"] .message.incoming .bubble {
  border-color: var(--bubble-in-border);
  background: var(--bubble-in-bg);
  border-bottom-left-radius: 7px;
}

html[data-magstyle="ios-maglink-2027"] .message.outgoing .bubble {
  color: var(--bubble-out-text);
  background: var(--bubble-out-bg);
  border-color: var(--bubble-out-border);
  box-shadow: var(--bubble-shadow);
  border-bottom-right-radius: 7px;
}

html[data-magstyle="ios-maglink-2027"] .message.incoming .bubble::before,
html[data-magstyle="ios-maglink-2027"] .message.outgoing .bubble::after {
  display: none;
}

html[data-magstyle="ios-maglink-2027"] .bubble-text {
  font-size: 15px;
  line-height: 1.30;
  letter-spacing: -.006em;
}

html[data-magstyle="ios-maglink-2027"] .bubble-time,
html[data-magstyle="ios-maglink-2027"] .bubble-status {
  font-size: 12px;
}

html[data-magstyle="ios-maglink-2027"] .message.incoming .bubble-time {
  color: var(--bubble-in-time);
}

html[data-magstyle="ios-maglink-2027"] .file-attachment-card .attachment-download-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.4;
}

html[data-magstyle="ios-maglink-2027"] .file-attachment-card .attachment-download-detail:not(.is-error) {
  color: var(--attachment-detail-text);
  font-size: 12px;
  line-height: 1.4;
}

html[data-magstyle="ios-maglink-2027"] .bubble-voice {
  min-width: min(236px, 100%);
  padding: 0;
  gap: 10px;
}

html[data-magstyle="ios-maglink-2027"] .bubble:has(.bubble-voice) { padding: 8px 10px 6px; }
html[data-magstyle="ios-maglink-2027"] .voice-play-btn { width: 44px; height: 44px; }
html[data-magstyle="ios-maglink-2027"] .voice-waveform .bar.bar-out { background: var(--voice-bar-out); opacity: .65; }
html[data-magstyle="ios-maglink-2027"] .voice-waveform .bar.bar-out.played { background: var(--voice-bar-out); opacity: 1; }
html[data-magstyle="ios-maglink-2027"][data-theme="light"] .message .bubble:has(.bubble-voice) {
  color: var(--text-primary); background: var(--ios-surface); border-color: var(--border-light);
  --voice-bar-out: #0068cf; --voice-duration-out: #526b83;
  --bubble-out-time: #667080; --bubble-out-status: #667080; --bubble-out-status-read: #0068cf;
}
html[data-magstyle="ios-maglink-2027"][data-theme="light"] .message.outgoing .bubble:has(.bubble-voice) .bubble-time,
html[data-magstyle="ios-maglink-2027"][data-theme="light"] .message.outgoing .bubble:has(.bubble-voice) .bubble-status { color: #667080; }

html[data-magstyle="ios-maglink-2027"] .voice-play-btn,
html[data-magstyle="ios-maglink-2027"] .vpb-play {
  color: #fff;
  background: var(--voice-btn-bg);
  box-shadow: none;
}

html[data-magstyle="ios-maglink-2027"] .message.outgoing .voice-play-btn {
  color: var(--bg-bubble-out-solid);
  background: #ffffff;
}
html[data-magstyle="ios-maglink-2027"][data-theme="light"] .message.outgoing .voice-play-btn {
  color: #fff; background: var(--accent);
}

html[data-magstyle="ios-maglink-2027"] .call-log-card {
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--bg-primary);
  box-shadow: 0 2px 10px var(--shadow);
}

html[data-magstyle="ios-maglink-2027"] .composer {
  min-height: 64px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-light);
  background: var(--composer-bg);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

html[data-magstyle="ios-maglink-2027"] .composer-input-wrap {
  min-height: 44px;
  border: 1px solid var(--composer-input-border);
  border-radius: 23px;
  background: var(--composer-input-bg);
  box-shadow: none;
}

html[data-magstyle="ios-maglink-2027"] .composer-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

html[data-magstyle="ios-maglink-2027"] .composer textarea {
  min-width: 0;
  min-height: 44px;
  padding: 10px 4px 10px 15px;
  font-size: 16px;
}

html[data-magstyle="ios-maglink-2027"] .composer-btn,
html[data-magstyle="ios-maglink-2027"] .emoji-btn,
html[data-magstyle="ios-maglink-2027"] .action-btn {
  width: 44px;
  height: 44px;
  color: var(--accent);
  border-radius: 50%;
}

html[data-magstyle="ios-maglink-2027"] .action-btn {
  color: #fff;
  background: var(--accent-gradient-btn);
  box-shadow: none;
}

html[data-magstyle="ios-maglink-2027"] .settings-overlay {
  background: color-mix(in srgb, var(--bg-app) 78%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-magstyle="ios-maglink-2027"] .settings-card,
html[data-magstyle="ios-maglink-2027"] .modal,
html[data-magstyle="ios-maglink-2027"] .profile-panel {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-secondary);
  box-shadow: 0 24px 80px var(--shadow-lg);
}

html[data-magstyle="ios-maglink-2027"] .settings-header {
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 0;
  background: var(--bg-secondary);
}

html[data-magstyle="ios-maglink-2027"] .settings-header h3 {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -.025em;
}

html[data-magstyle="ios-maglink-2027"] .profile-section-title {
  margin: 18px 18px 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: uppercase;
}

html[data-magstyle="ios-maglink-2027"] #settings-body .appearance-choice-list {
  gap: 1px;
  margin: 0 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-primary);
}

html[data-magstyle="ios-maglink-2027"] #settings-body .appearance-choice {
  min-height: 68px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-primary);
}

html[data-magstyle="ios-maglink-2027"] #settings-body .appearance-choice:last-child {
  border-bottom: 0;
}

html[data-magstyle="ios-maglink-2027"] #settings-body .appearance-choice:hover,
html[data-magstyle="ios-maglink-2027"] #settings-body .appearance-choice.is-active {
  border-color: var(--border);
  background: var(--accent-light);
}

html[data-magstyle="ios-maglink-2027"] #settings-body .appearance-choice-icon {
  border-radius: 12px;
  color: var(--accent);
  background: var(--bg-secondary);
  font-size: 15px;
  font-weight: 750;
}

html[data-magstyle="ios-maglink-2027"] .profile-menu-item,
html[data-magstyle="ios-maglink-2027"] .channel-settings-row {
  min-height: 54px;
  border-color: var(--border);
  background: var(--bg-primary);
}

html[data-magstyle="ios-maglink-2027"] .call-overlay .call-bg {
  background: var(--call-bg);
}

html[data-magstyle="ios-maglink-2027"] .call-avatar-shell::before,
html[data-magstyle="ios-maglink-2027"] .call-avatar-shell::after {
  animation: none;
}

html[data-magstyle="ios-maglink-2027"] .call-avatar,
html[data-magstyle="ios-maglink-2027"] .call-control,
html[data-magstyle="ios-maglink-2027"] .call-answer-icon {
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

html[data-magstyle="ios-maglink-2027"] .context-menu,
html[data-magstyle="ios-maglink-2027"] .attach-menu,
html[data-magstyle="ios-maglink-2027"] .emoji-picker {
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
  box-shadow: 0 18px 52px var(--shadow-lg);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

html[data-magstyle="ios-maglink-2027"] :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

/* The wrapper owns the input focus ring. A second rectangular outline inside
 * a capsule is especially visible in Safari/Edge with a focused textarea. */
html[data-magstyle="ios-maglink-2027"] .composer textarea:focus-visible,
html[data-magstyle="ios-maglink-2027"] .sidebar-search-row input:focus-visible,
html[data-magstyle="ios-maglink-2027"] .contacts-search-row input:focus-visible {
  outline: none;
  box-shadow: none;
}

html[data-magstyle="ios-maglink-2027"] .chat-item .avatar.community-avatar {
  border-radius: 14px;
}

html[data-magstyle="ios-maglink-2027"] .chat-header .icon-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

html[data-magstyle="ios-maglink-2027"] .chat-header-info { min-width: 0; }
html[data-magstyle="ios-maglink-2027"] #chat-search-btn svg { transform: rotate(90deg); }
html[data-magstyle="ios-maglink-2027"] .chat-header-name,
html[data-magstyle="ios-maglink-2027"] .chat-header-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-magstyle="ios-maglink-2027"] .action-btn:hover {
  transform: none;
  box-shadow: none;
  background: var(--accent);
}

/* Inset grouped settings, sheets and menus use the same surfaces in both
 * appearances. The shared web CSS contains hard-coded dark menu colours. */
html[data-magstyle="ios-maglink-2027"] .context-menu {
  width: min(286px, calc(100vw - 24px));
  min-width: 0;
  max-width: 286px;
  max-height: min(470px, calc(100dvh - 24px));
  gap: 8px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-magstyle="ios-maglink-2027"] .context-action-list,
html[data-magstyle="ios-maglink-2027"] .context-reactions-pill,
html[data-magstyle="ios-maglink-2027"] .context-reactions-extra {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
}
html[data-magstyle="ios-maglink-2027"] .context-action-list {
  padding: 0;
  border-radius: 18px;
  min-height: 0;
  overflow-y: auto;
}
html[data-magstyle="ios-maglink-2027"] .context-reactions { flex-shrink: 0; }
html[data-magstyle="ios-maglink-2027"] .context-reactions-pill {
  width: 100%; height: 48px; padding: 0 5px; gap: 0; border-radius: 24px;
}
html[data-magstyle="ios-maglink-2027"] .context-reaction-btn { flex: 1; min-width: 0; font-size: 23px; }
html[data-magstyle="ios-maglink-2027"] .context-reaction-more { width: 34px; }
html[data-magstyle="ios-maglink-2027"] .context-overlay {
  background: rgba(0,0,0,.095); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-magstyle="ios-maglink-2027"] .context-item {
  min-height: 44px;
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  border-radius: 0;
  color: var(--text-primary);
  transform: none;
}
html[data-magstyle="ios-maglink-2027"] .context-item + .context-item {
  border-top: 1px solid var(--border-light);
}
html[data-magstyle="ios-maglink-2027"] .context-item:hover,
html[data-magstyle="ios-maglink-2027"] .context-reaction-btn:hover { background: var(--bg-hover); }
html[data-magstyle="ios-maglink-2027"] .ctx-icon { color: var(--text-secondary); opacity: 1; }
html[data-magstyle="ios-maglink-2027"] .context-item.danger,
html[data-magstyle="ios-maglink-2027"] .context-item.danger .ctx-icon { color: var(--danger); }

html[data-magstyle="ios-maglink-2027"] #settings-overlay,
html[data-magstyle="ios-maglink-2027"] #settings-overlay .settings-card {
  background: var(--bg-secondary);
}
html[data-magstyle="ios-maglink-2027"] #settings-body { padding: 12px 16px 28px; }
html[data-magstyle="ios-maglink-2027"] #settings-body > .profile-menu-item {
  min-height: 56px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary);
  font-size: 16px;
}
html[data-magstyle="ios-maglink-2027"] #settings-body > .profile-menu-item:first-child,
html[data-magstyle="ios-maglink-2027"] #settings-body > .profile-section-sep + .profile-menu-item { border-radius: 14px 14px 0 0; }
html[data-magstyle="ios-maglink-2027"] #settings-body > .profile-menu-item:last-child,
html[data-magstyle="ios-maglink-2027"] #settings-body > .profile-menu-item:has(+ .profile-section-sep) { border-radius: 0 0 14px 14px; border-bottom: 0; }
html[data-magstyle="ios-maglink-2027"] .profile-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
html[data-magstyle="ios-maglink-2027"] .profile-menu-sub { color: var(--text-secondary); font-size: 13px; }
html[data-magstyle="ios-maglink-2027"] #settings-body > .profile-section-sep + .profile-menu-item:has(+ .profile-section-sep),
html[data-magstyle="ios-maglink-2027"] #settings-body > .profile-section-sep + .profile-menu-item:last-child { border-radius: 14px; }
html[data-magstyle="ios-maglink-2027"] .toggle-switch,
html[data-magstyle="ios-maglink-2027"] .settings-toggle { width: 51px; height: 31px; flex-shrink: 0; }
html[data-magstyle="ios-maglink-2027"] .toggle-slider { border: 0; border-radius: 16px; background: var(--border); }
html[data-magstyle="ios-maglink-2027"] .toggle-slider::before { width: 27px; height: 27px; left: 2px; top: 2px; bottom: auto; background: #fff; box-shadow: 0 2px 4px var(--shadow); }
html[data-magstyle="ios-maglink-2027"] .toggle-switch input:checked + .toggle-slider,
html[data-magstyle="ios-maglink-2027"] .settings-toggle input:checked + .toggle-slider { background: #34c759; box-shadow: none; }
html[data-magstyle="ios-maglink-2027"] .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
html[data-magstyle="ios-maglink-2027"] .toggle-switch:has(input:focus-visible),
html[data-magstyle="ios-maglink-2027"] .settings-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 16px; }
html[data-magstyle="ios-maglink-2027"] .modal-header h3 { font-size: 20px; }
html[data-magstyle="ios-maglink-2027"] .modal-primary-wide { background: var(--accent); border-radius: 12px; min-height: 48px; }
html[data-magstyle="ios-maglink-2027"] .attach-option { min-height: 48px; }

/* Keep metadata on its own line below video instead of colliding with the
 * playback duration in the bottom-right corner. Preserve media aspect ratio. */
html[data-magstyle="ios-maglink-2027"] .bubble:has(> .video-media) { padding: 4px; }
html[data-magstyle="ios-maglink-2027"] .bubble:has(> .video-media) > .bubble-meta {
  position: static;
  margin: 5px 7px 3px;
  color: var(--bubble-out-time);
  background: transparent;
  text-shadow: none;
}
html[data-magstyle="ios-maglink-2027"] .video-media { border-radius: 14px; margin: 0; }
html[data-magstyle="ios-maglink-2027"] .bubble:has(> .video-media) .bubble-time { color: inherit; }
html[data-magstyle="ios-maglink-2027"] .message.incoming .bubble:has(> .video-media) > .bubble-meta { color: var(--text-secondary); }
/* Photo timestamps stay on the bubble surface, clear of arbitrary image colors. */
html[data-magstyle="ios-maglink-2027"] .bubble:has(> .photo-media) > .bubble-meta {
  position: static;
  margin: 5px 0 0 12px;
  padding: 0;
  background: transparent;
  text-shadow: none;
}
html[data-magstyle="ios-maglink-2027"] .video-open-play { width: 56px; height: 56px; font-size: 22px; backdrop-filter: blur(12px); }

/* Auth shares the IOS palette; legacy dark-only rules must not leak into light. */
html[data-magstyle="ios-maglink-2027"] #auth-screen {
  background: var(--ios-wallpaper-base);
  color: var(--text-primary);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  align-items: flex-start;
  overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
html[data-magstyle="ios-maglink-2027"] .auth-bg,
html[data-magstyle="ios-maglink-2027"] .auth-logo-glow { display: none; }
html[data-magstyle="ios-maglink-2027"] .auth-card {
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  width: min(420px, 100%); max-width: 100%; height: auto; min-height: 0;
  margin: auto; padding: clamp(22px, 5vw, 32px);
  flex: 0 0 auto; overflow: visible; backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-magstyle="ios-maglink-2027"] .auth-logo { gap: 10px; margin-bottom: 8px; }
html[data-magstyle="ios-maglink-2027"] .auth-logo-wrap,
html[data-magstyle="ios-maglink-2027"] .auth-logo-icon { width: 76px; height: 76px; margin-bottom: 0; }
html[data-magstyle="ios-maglink-2027"] .auth-logo-icon {
  border-radius: 20px; background: var(--bg-input); border-color: var(--border);
  animation: none; box-shadow: none; backdrop-filter: none;
}
html[data-magstyle="ios-maglink-2027"] .auth-logo-text {
  color: var(--text-primary); -webkit-text-fill-color: var(--text-primary);
  font-size: 28px; font-weight: 700; letter-spacing: -.035em;
}
html[data-magstyle="ios-maglink-2027"] .auth-card .subtitle {
  color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin-bottom: 24px;
}
html[data-magstyle="ios-maglink-2027"] .auth-input-group {
  height: 54px; min-height: 54px; margin: 0 0 12px; gap: 10px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-input);
  box-shadow: none; transform: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-magstyle="ios-maglink-2027"] .auth-input-group:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
}
html[data-magstyle="ios-maglink-2027"] .auth-input-icon { color: var(--text-secondary); margin: 0; opacity: 1; }
html[data-magstyle="ios-maglink-2027"] .auth-input-group input {
  color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary);
  font-size: 16px; caret-color: var(--accent);
}
html[data-magstyle="ios-maglink-2027"] .auth-input-group input::placeholder {
  color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary);
}
html[data-magstyle="ios-maglink-2027"] .auth-input-group input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}
html[data-magstyle="ios-maglink-2027"] .auth-eye-btn {
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  padding: 8px; color: var(--accent); background: transparent;
}
html[data-magstyle="ios-maglink-2027"] .auth-options { flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; }
html[data-magstyle="ios-maglink-2027"] .auth-remember { color: var(--text-secondary); min-height: 44px; position: relative; }
html[data-magstyle="ios-maglink-2027"] .auth-remember input {
  display: block; position: absolute; width: 22px; height: 22px; opacity: 0;
}
html[data-magstyle="ios-maglink-2027"] .auth-checkbox { width: 22px; height: 22px; border-color: var(--border); border-radius: 7px; }
html[data-magstyle="ios-maglink-2027"] .auth-remember input:checked ~ .auth-checkbox { background: var(--accent); box-shadow: none; }
html[data-magstyle="ios-maglink-2027"] .auth-remember input:focus-visible ~ .auth-checkbox { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-magstyle="ios-maglink-2027"] .auth-card button#auth-submit,
html[data-magstyle="ios-maglink-2027"] .auth-card button#auth-code-submit {
  width: 100%; height: 52px; min-height: 52px; border-radius: 14px;
  border: 0; background: #007aff; color: #fff; font-size: 17px; font-weight: 600;
  box-shadow: none; transform: none; margin-top: 4px;
}
html[data-magstyle="ios-maglink-2027"] .auth-action-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
html[data-magstyle="ios-maglink-2027"] .auth-qr-btn {
  width: 100%; min-height: 48px; flex: auto; border-radius: 14px;
  background: var(--bg-input); color: var(--accent); border: 1px solid var(--border);
  box-shadow: none; font-size: 15px; font-weight: 600;
}
html[data-magstyle="ios-maglink-2027"] .auth-alt-link,
html[data-magstyle="ios-maglink-2027"] .auth-forgot {
  color: var(--accent); min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0;
}
html[data-magstyle="ios-maglink-2027"] .auth-code-label { color: var(--text-secondary); }
html[data-magstyle="ios-maglink-2027"] .auth-code-back { width: 100%; }
html[data-magstyle="ios-maglink-2027"] .auth-error { color: var(--danger); }
html[data-magstyle="ios-maglink-2027"] .auth-card button:focus-visible,
html[data-magstyle="ios-maglink-2027"] .auth-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 768px) {
  html[data-magstyle="ios-maglink-2027"] .chat-header { gap: 2px; }
  html[data-magstyle="ios-maglink-2027"] #chat-header-avatar { width: 32px; height: 32px; margin-right: 6px; flex-shrink: 0; }
  html[data-magstyle="ios-maglink-2027"] .chat-header-name { font-size: 17px; }
  html[data-magstyle="ios-maglink-2027"] #settings-overlay { padding: 0; }
  html[data-magstyle="ios-maglink-2027"] #settings-overlay .settings-card { min-height: 0; height: 100%; }
  html[data-magstyle="ios-maglink-2027"] #settings-body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 1024px) {
  html[data-magstyle="ios-maglink-2027"] {
    --sidebar-width: 340px;
    --max-bubble-width: 78%;
  }
}

@media (max-width: 768px) {
  html[data-magstyle="ios-maglink-2027"] {
    --sidebar-width: 100%;
    --max-bubble-width: 88%;
  }

  html[data-magstyle="ios-maglink-2027"] .sidebar-header {
    height: calc(58px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 14px 0;
  }

  html[data-magstyle="ios-maglink-2027"] .sidebar-burger {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-magstyle="ios-maglink-2027"] #new-chat-btn {
    width: 44px;
    height: 44px;
  }

  html[data-magstyle="ios-maglink-2027"] .ios-style-sidebar-title {
    padding: 4px 20px 12px;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-item.active {
    margin: 0 0 0 16px;
    padding: 9px 14px 9px 0;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    background: var(--sidebar-item-hover);
  }

  html[data-magstyle="ios-maglink-2027"] .tab-bar {
    margin: 8px 16px max(12px, env(safe-area-inset-bottom, 0px));
    padding-bottom: 5px;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-header {
    height: calc(58px + env(safe-area-inset-top, 0px));
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 8px 0;
  }

  html[data-magstyle="ios-maglink-2027"] .messages-inner {
    padding: 10px 10px 14px;
  }

  html[data-magstyle="ios-maglink-2027"] .bubble {
    padding: 9px 11px 7px;
  }

  html[data-magstyle="ios-maglink-2027"] .bubble-text {
    font-size: 16px;
  }

  html[data-magstyle="ios-maglink-2027"] .settings-overlay {
    align-items: stretch;
    padding: 0;
    background: var(--bg-secondary);
  }

  html[data-magstyle="ios-maglink-2027"] .settings-card {
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  html[data-magstyle="ios-maglink-2027"] .settings-header {
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
  }

  html[data-magstyle="ios-maglink-2027"] .composer {
    min-height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
  }
}

@media (max-width: 390px) {
  html[data-magstyle="ios-maglink-2027"] .filter-pill { padding-inline: 9px; }
  html[data-magstyle="ios-maglink-2027"] .chat-item .avatar,
  html[data-magstyle="ios-maglink-2027"] .contact-avatar { width: 50px; height: 50px; }
  html[data-magstyle="ios-maglink-2027"] .bubble-voice { min-width: 210px; }
  html[data-magstyle="ios-maglink-2027"] .composer-btn,
  html[data-magstyle="ios-maglink-2027"] .emoji-btn,
  html[data-magstyle="ios-maglink-2027"] .action-btn { width: 44px; height: 44px; }
}

/* Flutter/Cupertino structural parity.
 * These rules intentionally reshape the existing production DOM while all
 * message, media, call and realtime controllers remain unchanged. */
@media (max-width: 768px) {
  html[data-magstyle="ios-maglink-2027"] body {
    background: var(--bg-app);
  }

  html[data-magstyle="ios-maglink-2027"] #app-screen.active {
    position: fixed;
    inset: var(--app-top, 0) 0 auto;
    width: 100%;
    height: var(--app-height, 100dvh);
    overflow: hidden;
    background: var(--bg-app);
  }

  html[data-magstyle="ios-maglink-2027"] .sidebar {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    background: var(--bg-app);
  }

  html[data-magstyle="ios-maglink-2027"] .sidebar-header {
    flex: 0 0 auto;
    height: calc(44px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 16px 0;
    background: var(--bg-app);
  }

  html[data-magstyle="ios-maglink-2027"] .sidebar-burger {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  html[data-magstyle="ios-maglink-2027"] .sidebar-brand {
    margin-right: auto;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
  }

  html[data-magstyle="ios-maglink-2027"] #new-chat-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-primary);
    box-shadow: 0 2px 5px var(--shadow);
  }

  html[data-magstyle="ios-maglink-2027"] .ios-style-sidebar-title {
    display: block;
    flex: 0 0 auto;
    padding: 7px 20px 14px;
    color: var(--text-primary);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -1.1px;
  }

  html[data-magstyle="ios-maglink-2027"] .sidebar-search-row,
  html[data-magstyle="ios-maglink-2027"] .contacts-search-row {
    flex: 0 0 36px;
    height: 36px;
    margin: 0 16px 16px;
    padding: 0 9px;
    border: 0;
    border-radius: 10px;
    background: var(--search-bg);
  }

  html[data-magstyle="ios-maglink-2027"] .sidebar-search-row input,
  html[data-magstyle="ios-maglink-2027"] .contacts-search-row input {
    font-size: 17px;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-filters {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    margin: 0;
    padding: 0 12px 12px;
    overflow: visible;
    border: 0;
    background: var(--bg-app);
  }

  html[data-magstyle="ios-maglink-2027"] .chat-filter-pill {
    min-height: 44px;
    padding: 8px;
    border-radius: 24px;
    font-size: 14px;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-list,
  html[data-magstyle="ios-maglink-2027"] .contacts-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 0 calc(106px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    background: var(--bg-primary);
  }

  html[data-magstyle="ios-maglink-2027"] .chat-list::-webkit-scrollbar,
  html[data-magstyle="ios-maglink-2027"] .contacts-list::-webkit-scrollbar {
    display: none;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-list::after {
    content: "маглинк.рф";
    display: block;
    padding: 24px 16px;
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-item,
  html[data-magstyle="ios-maglink-2027"] .chat-item.active {
    position: relative;
    min-height: 84px;
    margin: 0;
    padding: 0 16px;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: var(--bg-primary);
  }

  html[data-magstyle="ios-maglink-2027"] .chat-item:active,
  html[data-magstyle="ios-maglink-2027"] .chat-item.active {
    background: var(--sidebar-item-hover);
  }

  html[data-magstyle="ios-maglink-2027"] .chat-item .avatar {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 18px;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-item .avatar.community-avatar {
    border-radius: 14px;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-info {
    align-self: stretch;
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    padding: 14px 0 13px;
    border-bottom: 1px solid var(--border-light);
  }

  html[data-magstyle="ios-maglink-2027"] .chat-info-top {
    margin-bottom: 5px;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-preview {
    padding-right: 0;
    font-size: 15px;
    line-height: 1.2;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-time {
    flex: 0 0 auto;
    margin-left: 8px;
    color: var(--text-secondary);
    font-size: 12px;
  }

  html[data-magstyle="ios-maglink-2027"] .chat-item:has(.unread-badge) .chat-preview {
    padding-right: 34px;
  }

  html[data-magstyle="ios-maglink-2027"] .unread-badge {
    position: absolute;
    right: 16px;
    bottom: 14px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 12px;
    font-size: 12px;
  }

  html[data-magstyle="ios-maglink-2027"] .online-dot {
    right: 0;
    bottom: 1px;
    width: 13px;
    height: 13px;
    border-width: 2px;
  }

  html[data-magstyle="ios-maglink-2027"] .tab-bar {
    position: absolute;
    z-index: 30;
    right: 16px;
    bottom: var(--ios-navigation-bottom);
    left: 16px;
    display: flex;
    min-height: 66px;
    margin: 0;
    padding: 5px;
    border: .7px solid var(--glass-border);
    border-radius: 34px;
    background: var(--tab-bg);
    box-shadow: var(--glass-shadow);
  }

  html[data-magstyle="ios-maglink-2027"] .tab-item {
    min-height: 54px;
    padding: 5px 4px;
    border-radius: 28px;
  }

  html[data-magstyle="ios-maglink-2027"] .tab-item svg {
    width: 24px;
    height: 24px;
    opacity: 1;
  }

  html[data-magstyle="ios-maglink-2027"] .tab-item span {
    margin-top: 3px;
    font-size: 10px;
  }

  html[data-magstyle="ios-maglink-2027"] .contacts-panel {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--bg-primary);
  }

  html[data-magstyle="ios-maglink-2027"] #app-screen.chat-open .tab-bar {
    display: none;
  }
}

/* Profiles share the Flutter reference's page/card hierarchy, not the legacy
 * web hero + independently scrolling list. All existing controls remain. */
html[data-magstyle="ios-maglink-2027"] .profile-overlay {
  background: rgba(0, 0, 0, .28);
}
html[data-magstyle="ios-maglink-2027"] .profile-card {
  display: block;
  width: min(430px, calc(100vw - 32px));
  max-height: min(880px, calc(100dvh - 32px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ios-page);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--glass-shadow);
  scrollbar-width: thin;
}
html[data-magstyle="ios-maglink-2027"] .profile-top {
  height: 44px;
  padding: 0 12px;
  border: 0;
  background: var(--bg-header);
}
html[data-magstyle="ios-maglink-2027"] .profile-back {
  width: 44px; height: 44px; color: var(--accent);
}
html[data-magstyle="ios-maglink-2027"] .profile-title { font-size: 17px; font-weight: 600; }
html[data-magstyle="ios-maglink-2027"] .profile-edit-btn { min-height: 44px; font-weight: 400; }
html[data-magstyle="ios-maglink-2027"] .profile-hero { padding: 18px 16px 0; }
html[data-magstyle="ios-maglink-2027"] .profile-hero.has-cover { padding-top: 18px; }
html[data-magstyle="ios-maglink-2027"] .profile-hero .group-cover-bg { display: none; }
html[data-magstyle="ios-maglink-2027"] #profile-verified[hidden] { display: none; }
html[data-magstyle="ios-maglink-2027"] .profile-avatar-wrap { margin-bottom: 15px; }
html[data-magstyle="ios-maglink-2027"] .profile-avatar {
  width: 86px; height: 86px; border: 0; border-radius: 50%;
  box-shadow: none; font-size: 30px; transform: none;
}
html[data-magstyle="ios-maglink-2027"] .profile-avatar.group-avatar,
html[data-magstyle="ios-maglink-2027"] .profile-avatar.channel-avatar { border-radius: 22px; }
html[data-magstyle="ios-maglink-2027"] .profile-name { font-size: 25px; font-weight: 600; }
html[data-magstyle="ios-maglink-2027"] .profile-name-row { margin-bottom: 5px; }
html[data-magstyle="ios-maglink-2027"] .profile-status-badge {
  margin: 0; padding: 0; font-size: 14px; font-weight: 400; background: none;
}
html[data-magstyle="ios-maglink-2027"] .ios-profile-ready .profile-username-row,
html[data-magstyle="ios-maglink-2027"] .ios-profile-ready .profile-bio { display: none !important; }
html[data-magstyle="ios-maglink-2027"] .profile-quick-actions {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px; padding: 22px 16px 10px; overflow: visible;
}
html[data-magstyle="ios-maglink-2027"] .profile-action-btn {
  min-width: 0; min-height: 70px; padding: 10px 3px;
  justify-content: center; gap: 5px; border: 0; border-radius: 14px;
  background: var(--ios-surface); color: var(--accent); font-family: inherit;
  transition: background 120ms ease, transform 120ms ease;
}
html[data-magstyle="ios-maglink-2027"] .profile-action-icon,
html[data-magstyle="ios-maglink-2027"] .profile-action-btn:hover .profile-action-icon {
  width: 26px; height: 26px; padding: 0; border: 0;
  background: none; box-shadow: none; color: var(--accent); transform: none;
}
html[data-magstyle="ios-maglink-2027"] .profile-action-label {
  font-size: 12px; font-weight: 400; letter-spacing: 0;
  color: var(--accent); text-transform: none; text-align: center;
  overflow-wrap: anywhere;
}
html[data-magstyle="ios-maglink-2027"] .profile-action-btn:hover { background: var(--bg-hover); }
html[data-magstyle="ios-maglink-2027"] .profile-action-btn:active { transform: scale(.97); }
html[data-magstyle="ios-maglink-2027"] .profile-sections {
  margin: 8px 16px; padding: 0 0 max(16px, env(safe-area-inset-bottom, 0px));
  border: 0; overflow: visible;
}
html[data-magstyle="ios-maglink-2027"] .profile-sections .profile-menu-item,
html[data-magstyle="ios-maglink-2027"] .profile-sections .channel-settings-row {
  min-height: 51px; padding: 13px 15px; gap: 13px; border: 0;
  background: var(--ios-surface); font-size: 16px;
}
html[data-magstyle="ios-maglink-2027"] .profile-sections .profile-menu-item + .profile-menu-item {
  box-shadow: inset 0 .5px var(--border-light);
}
html[data-magstyle="ios-maglink-2027"] .profile-sections .profile-menu-item:first-child,
html[data-magstyle="ios-maglink-2027"] .profile-sections .profile-section-sep + .profile-menu-item { border-radius: 16px 16px 0 0; }
html[data-magstyle="ios-maglink-2027"] .profile-sections .profile-menu-item:last-child,
html[data-magstyle="ios-maglink-2027"] .profile-sections .profile-menu-item:has(+ .profile-section-sep) { border-radius: 0 0 16px 16px; }
html[data-magstyle="ios-maglink-2027"] .profile-sections .profile-menu-item:only-child { border-radius: 16px; }
html[data-magstyle="ios-maglink-2027"] .profile-sections .profile-section-sep + .profile-menu-item:has(+ .profile-section-sep),
html[data-magstyle="ios-maglink-2027"] .profile-sections .profile-section-sep + .profile-menu-item:last-child { border-radius: 16px; }
html[data-magstyle="ios-maglink-2027"] .profile-section-sep { height: 16px; background: transparent; }
html[data-magstyle="ios-maglink-2027"] .profile-menu-icon,
html[data-magstyle="ios-maglink-2027"] .channel-settings-row-icon { display: inline-flex; color: var(--accent); }
html[data-magstyle="ios-maglink-2027"] .profile-menu-label { min-width: 0; font-size: 16px; font-weight: 400; }
html[data-magstyle="ios-maglink-2027"] .profile-menu-arrow { font-size: 20px; color: var(--text-secondary); }
html[data-magstyle="ios-maglink-2027"] .profile-body { inset: 44px 0 0; background: var(--ios-page); }
html[data-magstyle="ios-maglink-2027"] .profile-body > button.profile-menu-item {
  width: 100%; min-height: 44px; border: 0; border-radius: 12px; margin-bottom: 16px;
  background: var(--ios-surface); color: var(--accent); font: inherit; font-size: 16px;
  justify-content: flex-start; padding: 10px 14px; cursor: pointer;
}
html[data-magstyle="ios-maglink-2027"] .profile-content-title { font-size: 22px; font-weight: 600; }
html[data-magstyle="ios-maglink-2027"] .profile-card:has(.profile-body[style*="display: block"]) { overflow: hidden; }
html[data-magstyle="ios-maglink-2027"] .profile-menu-item.danger .profile-menu-icon { color: var(--danger); }
html[data-magstyle="ios-maglink-2027"] .ios-profile-details {
  margin: 8px 16px 16px; border-radius: 16px; overflow: hidden; background: var(--ios-surface);
}
html[data-magstyle="ios-maglink-2027"] .ios-profile-detail { padding: 13px 14px; }
html[data-magstyle="ios-maglink-2027"] .ios-profile-detail + .ios-profile-detail { border-top: .5px solid var(--border-light); }
html[data-magstyle="ios-maglink-2027"] .ios-profile-detail-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; }
html[data-magstyle="ios-maglink-2027"] .ios-profile-detail-value { font-size: 16px; overflow-wrap: anywhere; white-space: pre-wrap; }
html[data-magstyle="ios-maglink-2027"] .ios-profile-detail-value.is-link { color: var(--accent); }
html[data-magstyle="ios-maglink-2027"] .ios-action-sheet-overlay {
  position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,.28);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px));
}
html[data-magstyle="ios-maglink-2027"] .ios-action-sheet {
  width: min(430px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
}
html[data-magstyle="ios-maglink-2027"] .ios-action-sheet-group {
  border-radius: 16px; overflow: hidden; background: var(--glass-bg); backdrop-filter: blur(24px);
}
html[data-magstyle="ios-maglink-2027"] .ios-action-sheet-title { padding: 16px; text-align: center; font-size: 13px; color: var(--text-secondary); }
html[data-magstyle="ios-maglink-2027"] .ios-action-sheet-row,
html[data-magstyle="ios-maglink-2027"] .ios-action-sheet-cancel {
  width: 100%; min-height: 56px; padding: 12px 16px; border: 0; border-top: .5px solid var(--border);
  background: transparent; color: var(--accent); font: inherit; font-size: 20px; cursor: pointer;
}
html[data-magstyle="ios-maglink-2027"] .ios-action-sheet-cancel { margin-top: 8px; border: 0; border-radius: 16px; background: var(--ios-surface); font-weight: 600; }
html[data-magstyle="ios-maglink-2027"] .ios-action-sheet-row:active { background: var(--bg-hover); }
html[data-magstyle="ios-maglink-2027"] .ios-media-title { font-size: 22px; margin: 0 0 16px; }
html[data-magstyle="ios-maglink-2027"] .ios-media-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 4px; border-radius: 14px; background: var(--ios-surface);
}
html[data-magstyle="ios-maglink-2027"] .ios-media-tab {
  flex: 0 0 auto; min-height: 44px; border: 0; border-radius: 11px; padding: 8px 12px;
  background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; cursor: pointer;
}
html[data-magstyle="ios-maglink-2027"] .ios-media-tab[aria-selected="true"] { background: var(--accent-light); color: var(--accent); }
html[data-magstyle="ios-maglink-2027"] .ios-media-note,
html[data-magstyle="ios-maglink-2027"] .ios-media-date { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
html[data-magstyle="ios-maglink-2027"] .ios-media-note { margin: 12px 0; }
html[data-magstyle="ios-maglink-2027"] .ios-media-load {
  width: 100%; min-height: 44px; border: 0; border-radius: 12px; margin-top: 16px;
  background: var(--ios-surface); color: var(--accent); font: inherit; font-size: 15px; cursor: pointer;
}
html[data-magstyle="ios-maglink-2027"] .ios-media-load[hidden] { display: none; }
html[data-magstyle="ios-maglink-2027"] .ios-media-content.is-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
html[data-magstyle="ios-maglink-2027"] .ios-media-tile {
  position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; border: 0;
  border-radius: 8px; background: var(--ios-surface); color: var(--accent); cursor: pointer;
}
html[data-magstyle="ios-maglink-2027"] .ios-media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-magstyle="ios-maglink-2027"] .ios-media-play { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; border-radius: 12px; padding: 3px 7px; font-size: 12px; }
html[data-magstyle="ios-maglink-2027"] .ios-media-empty { grid-column: 1 / -1; padding: 36px 20px; color: var(--text-secondary); text-align: center; line-height: 1.5; font-size: 15px; }
html[data-magstyle="ios-maglink-2027"] .ios-media-empty svg { width: 36px; height: 36px; color: var(--accent); }
html[data-magstyle="ios-maglink-2027"] .ios-media-row { padding: 14px; margin: 8px 0; background: var(--ios-surface); border-radius: 14px; overflow-wrap: anywhere; }
html[data-magstyle="ios-maglink-2027"] .ios-media-link { display: block; color: var(--accent); padding-block: 8px; min-height: 44px; }
html[data-magstyle="ios-maglink-2027"] .ios-media-file-name { font-size: 15px; margin-bottom: 8px; }
html[data-magstyle="ios-maglink-2027"] .ios-media-row audio { display: block; width: 100%; margin-block: 8px; }
html[data-magstyle="ios-maglink-2027"] .ios-media-tab:focus-visible,
html[data-magstyle="ios-maglink-2027"] .ios-media-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-transparency: reduce) {
  html[data-magstyle="ios-maglink-2027"] .tab-bar,
  html[data-magstyle="ios-maglink-2027"] .chat-header,
  html[data-magstyle="ios-maglink-2027"] .composer,
  html[data-magstyle="ios-maglink-2027"] .ios-action-sheet-group { background: var(--ios-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html[data-magstyle="ios-maglink-2027"] .call-avatar-shell { width: 110px; height: 110px; margin-top: clamp(32px, 10dvh, 100px); }
html[data-magstyle="ios-maglink-2027"] .call-avatar-shell::before,
html[data-magstyle="ios-maglink-2027"] .call-avatar-shell::after { display: none; }
html[data-magstyle="ios-maglink-2027"] .call-avatar { box-shadow: none; border: 0; }
html[data-magstyle="ios-maglink-2027"] .call-name { font-size: 29px; font-weight: 600; text-shadow: none; }
html[data-magstyle="ios-maglink-2027"] .call-status { font-size: 15px; font-weight: 400; }
html[data-magstyle="ios-maglink-2027"] .call-btn-icon { width: 64px; height: 64px; box-shadow: none; }
html[data-magstyle="ios-maglink-2027"] .call-btn > span { font-weight: 400; }
html[data-magstyle="ios-maglink-2027"] .call-btn.end .end-icon { width: 72px; height: 72px; box-shadow: none; }

/* Shared audio/video chrome keeps contrast independent of the camera image.
   Put state rules after video rules: the old video background masked .active. */
html[data-magstyle="ios-maglink-2027"] .call-overlay.video-active {
  --ios-pip-height: clamp(128px, 35vw, 190px);
}
html[data-magstyle="ios-maglink-2027"] .call-overlay.video-active.local-video-expanded {
  --ios-pip-height: clamp(204px, 50vw, 320px);
}
html[data-magstyle="ios-maglink-2027"] .call-overlay .call-buttons {
  position: absolute; left: 50%; z-index: 5; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end;
  transform: translateX(-50%);
  box-sizing: border-box; width: min(440px, calc(100% - 24px));
  padding: 12px 8px 10px; gap: 4px; border-radius: 30px;
  background: var(--ios-call-panel); border: 1px solid var(--ios-call-border);
  box-shadow: 0 8px 32px rgba(0,0,0,.2); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
html[data-magstyle="ios-maglink-2027"] .call-overlay .call-btn-row { display: contents; }
html[data-magstyle="ios-maglink-2027"] .call-overlay.incoming .call-buttons { display: none; }
html[data-magstyle="ios-maglink-2027"] .call-overlay .call-btn { width: 100%; gap: 7px; }
html[data-magstyle="ios-maglink-2027"] .call-overlay .call-btn > span {
  color: var(--ios-call-ink); font-size: 11px; font-weight: 500; text-shadow: none;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.2;
}
html[data-magstyle="ios-maglink-2027"] .call-overlay .call-btn .call-btn-icon {
  position: relative; width: 56px; height: 56px; box-sizing: border-box;
  color: var(--ios-call-ink); background: var(--ios-call-idle);
  border: 1px solid var(--ios-call-border); box-shadow: none;
}
html[data-magstyle="ios-maglink-2027"] .call-overlay .call-btn.active .call-btn-icon,
html[data-magstyle="ios-maglink-2027"] .call-overlay .call-btn[aria-pressed="true"] .call-btn-icon {
  color: #fff; background: var(--ios-call-selected); border-color: transparent;
}
html[data-magstyle="ios-maglink-2027"] .call-overlay #call-mute.active .call-btn-icon {
  color: #fff; background: #c9343d; border-color: transparent;
}
html[data-magstyle="ios-maglink-2027"] .call-overlay #call-video-toggle:not(.active) .call-btn-icon::after {
  content: ''; position: absolute; width: 31px; height: 2px; border-radius: 2px;
  background: currentColor; transform: rotate(45deg); box-shadow: 0 0 0 2px var(--ios-call-idle);
}
html[data-magstyle="ios-maglink-2027"] .call-overlay .call-btn.end .end-icon {
  color: #fff; background: #e53240; border: 0;
}
html[data-magstyle="ios-maglink-2027"] .call-overlay .call-btn:disabled { opacity: .55; }
html[data-magstyle="ios-maglink-2027"] .call-overlay .call-btn[aria-busy="true"] .call-btn-icon {
  outline: 2px dashed var(--ios-call-ink); outline-offset: 3px;
}
html[data-magstyle="ios-maglink-2027"] .call-overlay:not(.video-active) .call-content {
  padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}
html[data-magstyle="ios-maglink-2027"] .call-overlay:not(.video-active) .call-bg-scrim {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ios-page) 40%, transparent), var(--ios-page));
}
html[data-magstyle="ios-maglink-2027"] .call-overlay:not(.video-active) .call-bg-avatar {
  opacity: .18; filter: blur(56px) saturate(.7);
}
html[data-magstyle="ios-maglink-2027"] .call-overlay:not(.video-active) .call-brand {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--call-text-secondary);
}
html[data-magstyle="ios-maglink-2027"] .call-overlay:not(.video-active) .call-avatar-shell {
  flex-shrink: 0; width: 112px; height: 112px;
  border-radius: 50%; outline: 1px solid var(--ios-call-border); outline-offset: 6px;
}
html[data-magstyle="ios-maglink-2027"] .call-overlay:not(.video-active) .call-name {
  max-width: min(560px, 100%); overflow-wrap: anywhere; line-height: 1.2;
}
html[data-magstyle="ios-maglink-2027"] .call-overlay:not(.video-active) .call-status {
  font-variant-numeric: tabular-nums; line-height: 1.4;
}
html[data-magstyle="ios-maglink-2027"] .call-overlay.incoming .call-content {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
html[data-magstyle="ios-maglink-2027"] .call-answer-icon { color: #fff; box-shadow: none; }
html[data-magstyle="ios-maglink-2027"] .call-answer-btn { font-weight: 500; }
@media (max-height: 480px) {
  html[data-magstyle="ios-maglink-2027"] .call-overlay:not(.video-active) .call-avatar-shell {
    width: 64px; height: 64px; margin-top: 4px;
  }
  html[data-magstyle="ios-maglink-2027"] .call-overlay:not(.video-active) .call-name {
    margin-top: 12px; font-size: 24px;
  }
}
html[data-magstyle="ios-maglink-2027"] .call-overlay.video-active .call-status {
  color: var(--ios-call-ink); background: var(--ios-call-panel); border: 1px solid var(--ios-call-border);
  font-variant-numeric: tabular-nums;
}
html[data-magstyle="ios-maglink-2027"] .call-overlay.video-active .call-local-video {
  top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px));
  height: var(--ios-pip-height); border: 1px solid rgba(255,255,255,.35); border-radius: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
html[data-magstyle="ios-maglink-2027"] .call-overlay.video-active .call-camera-switch {
  top: calc(14px + env(safe-area-inset-top, 0px) + var(--ios-pip-height) - 48px);
  right: calc(18px + env(safe-area-inset-right, 0px));
  width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center;
  color: #fff; background: rgba(28, 28, 30, .64); border: .5px solid rgba(255,255,255,.28);
  border-radius: 50%; gap: 0; box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 .5px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 160ms ease, background-color 160ms ease, opacity 160ms ease;
}
html[data-magstyle="ios-maglink-2027"] .call-camera-switch > span:last-child { display: none; }
html[data-magstyle="ios-maglink-2027"] .call-camera-switch-icon { background: transparent; width: 30px; height: 30px; flex: 0 0 30px; }
html[data-magstyle="ios-maglink-2027"] .call-camera-switch-icon svg { display: block; width: 26px; height: 26px; }
html[data-magstyle="ios-maglink-2027"] .call-camera-switch:not(:disabled):active { transform: scale(.92); background: rgba(72,72,74,.82); }
html[data-magstyle="ios-maglink-2027"] .call-camera-switch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
html[data-magstyle="ios-maglink-2027"] .call-camera-switch .camera-flip-arrows { transform-origin: 12px 13.5px; transition: transform 220ms ease; }
html[data-magstyle="ios-maglink-2027"] .call-camera-switch.active .camera-flip-arrows { transform: rotate(180deg); }
html[data-magstyle="ios-maglink-2027"] .call-camera-switch[aria-busy="true"] { opacity: .65; cursor: progress; }
@media (prefers-reduced-motion: no-preference) {
  html[data-magstyle="ios-maglink-2027"] .call-camera-switch[aria-busy="true"] .camera-flip-arrows { animation: ios-camera-switch-turn 850ms linear infinite; }
}
@keyframes ios-camera-switch-turn { to { transform: rotate(360deg); } }
html[data-magstyle="ios-maglink-2027"] .call-stage:not(:has(.call-local-video.has-video)) .call-camera-switch { display: none; }
@media (max-width: 768px) {
  html[data-magstyle="ios-maglink-2027"] .call-overlay.video-active { --ios-pip-height: clamp(110px, 33vw, 150px); }
  html[data-magstyle="ios-maglink-2027"] .call-overlay.video-active.local-video-expanded { --ios-pip-height: clamp(176px, 58vw, 254px); }
}
@media (max-height: 480px) and (orientation: landscape) {
  html[data-magstyle="ios-maglink-2027"] .call-overlay.video-active,
  html[data-magstyle="ios-maglink-2027"] .call-overlay.video-active.local-video-expanded { --ios-pip-height: 110px; }
  html[data-magstyle="ios-maglink-2027"] .call-overlay.video-active .call-local-video { width: 82px; }
}
@media (max-width: 768px) {
  html[data-magstyle="ios-maglink-2027"] .sidebar,
  html[data-magstyle="ios-maglink-2027"] .sidebar-header { background: var(--ios-page); }
  html[data-magstyle="ios-maglink-2027"] .chat-list,
  html[data-magstyle="ios-maglink-2027"] .contacts-list,
  html[data-magstyle="ios-maglink-2027"] .chat-item { background: var(--ios-surface); }
  html[data-magstyle="ios-maglink-2027"] .chat-item.active { background: var(--sidebar-item-active-bg); }
  html[data-magstyle="ios-maglink-2027"] .profile-card {
    width: 100%; max-width: 100%; height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh); border: 0; border-radius: 0;
  }
  html[data-magstyle="ios-maglink-2027"] .profile-top { height: calc(44px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  html[data-magstyle="ios-maglink-2027"] .chat-header { height: 44px; min-height: 44px; }
  html[data-magstyle="ios-maglink-2027"] .chat-header-name { font-size: 17px; }
  html[data-magstyle="ios-maglink-2027"] .chat-header-status { font-size: 12px; }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-magstyle="ios-maglink-2027"] .call-overlay .call-buttons {
    background: var(--ios-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Sidebar controls fit even the 320px iPhone viewport without clipping Bots. */
html[data-magstyle="ios-maglink-2027"] .chat-filters:not(.is-searching) {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 4px 10px 10px;
}
html[data-magstyle="ios-maglink-2027"] .chat-filter-pill {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 4px;
  font-size: 12px; letter-spacing: -.02em; white-space: nowrap;
}
html[data-magstyle="ios-maglink-2027"] .chat-pin-icon {
  width: 14px; height: 14px; color: var(--text-secondary); transform: rotate(30deg);
}
html[data-magstyle="ios-maglink-2027"] .chat-pin-icon svg { display: none; }
html[data-magstyle="ios-maglink-2027"] .chat-pin-icon::before {
  content: ''; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url('/assets/backgrounds/ios-2027-pin.svg') center / contain no-repeat;
  mask: url('/assets/backgrounds/ios-2027-pin.svg') center / contain no-repeat;
}
html[data-magstyle="ios-maglink-2027"] .message.outgoing .bubble-text { color: var(--bubble-out-text); }
html[data-magstyle="ios-maglink-2027"] .message.outgoing .bubble-time { color: var(--bubble-out-time); }
html[data-magstyle="ios-maglink-2027"] .message.outgoing .bubble-status { color: var(--bubble-out-status); }
html[data-magstyle="ios-maglink-2027"] .message.outgoing .bubble-status.read { color: var(--bubble-out-status-read); filter: none; }
html[data-magstyle="ios-maglink-2027"][data-theme="light"] .message.outgoing .bubble:has(.bubble-voice) .bubble-status.read { color: #0068cf; }
html[data-magstyle="ios-maglink-2027"] .message.outgoing .bubble-media ~ .bubble-status { color: var(--bubble-out-status) !important; filter: none; }
html[data-magstyle="ios-maglink-2027"] .message.outgoing .bubble-media ~ .bubble-status.read { color: var(--bubble-out-status-read) !important; }
html[data-magstyle="ios-maglink-2027"][data-theme="light"] .message.outgoing .bubble-text a { color: #166444; }

html[data-magstyle="ios-maglink-2027"][data-ios-wallpaper="custom"] .chat-area::before {
  background-image: var(--ios-custom-wallpaper); background-size: cover; background-position: center; background-repeat: no-repeat;
}
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-blur { display: grid; grid-template-columns: 1fr auto; align-items: center; flex-basis: 100%; gap: 4px 12px; font-size: 14px; }
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-blur input { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--accent); }
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-blur output { color: var(--accent); font-variant-numeric: tabular-nums; }
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-settings { padding: 16px; margin-top: 16px; border-radius: 16px; background: var(--ios-surface); }
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-settings h3 { margin: 0 0 12px; font-size: 18px; }
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-settings p { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-row { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 12px; }
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-row strong,
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-row [role="status"] { flex: 0 0 100%; font-size: 14px; }
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-row button { min-height: 44px; border: 0; padding: 10px 12px; border-radius: 12px; color: var(--accent); background: var(--accent-light); font: inherit; }
html[data-magstyle="ios-maglink-2027"] .ios-wallpaper-row button:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  html[data-magstyle="ios-maglink-2027"] *,
  html[data-magstyle="ios-maglink-2027"] *::before,
  html[data-magstyle="ios-maglink-2027"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Compact iOS density, including the CRM communication panel. */
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .sidebar-header { height: 44px; padding: 0 12px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .sidebar-brand { font-size: 11px; letter-spacing: 1px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .ios-style-sidebar-title { padding: 0 14px 10px; font-size: 24px; line-height: 1.15; letter-spacing: -.5px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .sidebar-search-row { margin: 0 12px 8px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-filters { padding: 0 8px 6px; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-filter-pill { flex: 0 0 auto; min-height: 40px; padding: 6px 9px; font-size: 12px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-item { min-height: 66px; padding-inline: 12px; gap: 10px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-item .avatar { width: 42px; height: 42px; flex-basis: 42px; font-size: 16px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-info { padding-block: 10px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-info-top { margin-bottom: 3px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-name { font-size: 14px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-preview { font-size: 13px; line-height: 1.3; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-time { font-size: 11px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .tab-bar { left: 8px; right: 8px; bottom: 6px; min-height: 54px; padding: 3px; border-radius: 18px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .tab-item { min-height: 46px; border-radius: 14px; padding: 3px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .tab-item svg { width: 21px; height: 21px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-list,
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .contacts-list { padding-bottom: 72px; }
html[data-magstyle="ios-maglink-2027"][data-embedded="crm"] .chat-list::after { padding: 12px; }
@media (min-width: 769px) {
  html[data-magstyle="ios-maglink-2027"] .ios-style-sidebar-title { font-size: 24px; padding-block: 4px 10px; }
  html[data-magstyle="ios-maglink-2027"] .chat-item { min-height: 66px; }
  html[data-magstyle="ios-maglink-2027"] .chat-name { font-size: 14px; }
  html[data-magstyle="ios-maglink-2027"] .chat-preview { font-size: 13px; }
}

/* Mobile shell: one centered navigation title and a footer in normal flow.
   The scrolling list ends above navigation, including in standalone PWA mode. */
@media (max-width: 768px) {
  html[data-magstyle="ios-maglink-2027"] #app-screen .sidebar-header {
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    margin-bottom: 8px;
    box-sizing: border-box;
  }
  html[data-magstyle="ios-maglink-2027"] #app-screen .sidebar-brand {
    font-size: 10px;
    letter-spacing: 1.5px;
  }
  html[data-magstyle="ios-maglink-2027"] #app-screen .ios-style-sidebar-title {
    position: absolute;
    top: env(safe-area-inset-top, 0px);
    left: 88px;
    right: 88px;
    z-index: 2;
    height: 56px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.2px;
    text-align: center;
    pointer-events: none;
  }
  html[data-magstyle="ios-maglink-2027"] #app-screen .tab-bar {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    margin: 8px 12px max(8px, env(safe-area-inset-bottom, 0px));
    min-height: 64px;
    padding: 4px;
    box-sizing: border-box;
  }
  html[data-magstyle="ios-maglink-2027"] #app-screen .chat-list,
  html[data-magstyle="ios-maglink-2027"] #app-screen .contacts-list {
    padding-bottom: 8px;
    scroll-padding-bottom: 8px;
  }
}

.photo-editor-modes { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; padding-top:6px; }
.photo-editor-modes button { min-height:44px; padding:8px 10px; font-size:13px; }
.photo-editor-modes button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }
.photo-editor-drawing { display:flex; justify-content:center; align-items:center; gap:8px; padding:8px 0; }
.photo-editor-drawing[hidden], .photo-editor-tools[hidden] { display:none; }
.photo-editor-palette { display:flex; min-width:0; gap:4px; }
.photo-editor-palette button, .photo-editor-palette input { width:44px; height:44px; min-width:44px; padding:7px; border:1px solid var(--border); border-radius:12px; background:var(--bg-input); cursor:pointer; }
.photo-editor-palette button::after { content:""; display:block; width:100%; height:100%; background:var(--ink-color); border-radius:50%; }
.photo-editor-palette button[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:-2px; }
.photo-editor-overlay .photo-editor-thickness { min-width:0; width:86px; padding-inline:6px; font-size:12px; }
.photo-editor-overlay button:disabled { opacity:.45; }