/* 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; }

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);
  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;
  --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/chat-day-magdecor.png');
  --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, #873ce8 0%, #3865eb 100%);
  --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, .91);
  --tab-text: #667080;
  --tab-active: #0068cf;
  --bg-bubble-in: #ffffff;
  --bubble-in-bg: #ffffff;
  --bubble-in-border: rgba(17, 27, 42, .055);
  --bubble-in-text: #111318;
  --bg-bubble-out: linear-gradient(135deg, #873ce8 0%, #5d4df0 45%, #3865eb 100%);
  --bg-bubble-out-solid: #5b50ee;
  --bubble-out-bg: var(--bg-bubble-out);
  --bubble-out-text: #ffffff;
  --bubble-out-time: rgba(255, 255, 255, .72);
  --bubble-out-status: rgba(255, 255, 255, .74);
  --bubble-out-status-read: #dbe9ff;
  --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-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(255, 255, 255, .13);
  --reply-out-border: rgba(255, 255, 255, .82);
  --reply-out-name: #ffffff;
  --reply-out-text: rgba(255, 255, 255, .78);
  --reaction-bg: rgba(0, 0, 0, .045);
  --reaction-out-bg: rgba(255, 255, 255, .16);
  --reaction-count: #667080;
  --reaction-count-out: #ffffff;
  --glass-bg: rgba(253, 253, 254, .88);
  --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);
}

html[data-magstyle="ios-maglink-2027"][data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #090c11;
  --bg-primary: #101318;
  --bg-secondary: #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/chat-night-mobile.jpg');
  --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, #873ce8 0%, #5d4df0 45%, #3865eb 100%);
  --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, .91);
  --tab-text: #a0a9b8;
  --tab-active: #66acff;
  --bg-bubble-in: #292330;
  --bubble-in-bg: #292330;
  --bubble-in-border: #40394a;
  --bubble-in-text: #f4f0f7;
  --bg-bubble-out: linear-gradient(135deg, #873ce8 0%, #6548eb 48%, #3865eb 100%);
  --bg-bubble-out-solid: #604cea;
  --bubble-out-bg: var(--bg-bubble-out);
  --bubble-out-text: #ffffff;
  --bubble-out-time: rgba(255, 255, 255, .70);
  --bubble-out-status: rgba(255, 255, 255, .72);
  --bubble-out-status-read: #d9e7ff;
  --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-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 {
  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 {
  margin: 4px 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 14px;
  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: 17px;
  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: 10px 16px max(12px, env(safe-area-inset-bottom, 0px));
  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;
}

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: 13px;
}

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-color: var(--chat-bg);
  background-image: linear-gradient(color-mix(in srgb, var(--chat-bg) 8%, transparent), color-mix(in srgb, var(--chat-bg) 8%, transparent)), var(--chat-bg-image);
  background-position: center;
  background-size: 520px auto;
}

html[data-magstyle="ios-maglink-2027"][data-theme="dark"] .messages-container {
  background-blend-mode: multiply, normal;
}

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: 0 1px 2px var(--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: #fff;
  background: var(--bubble-out-bg);
  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: 11px;
}

html[data-magstyle="ios-maglink-2027"] .bubble-voice {
  min-width: 236px;
  padding: 7px 3px;
}

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: #5b50ee;
  background: #ffffff;
}

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-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;
}

@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: 42px; height: 42px; }
}

@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;
  }
}