/* MAGSTYLE 001: the current MAGLINK geometry with a blue palette and a refined light theme. */

/* Dark mode keeps the existing sizes, spacing, icons, chat wallpaper and component layout. */
html[data-magstyle="magstyle-001"][data-theme="dark"] {
  --bg-active: rgba(50, 157, 225, 0.13);
  --bg-bubble-out: linear-gradient(135deg, rgba(42, 151, 220, 0.28), rgba(31, 112, 181, 0.16));
  --bg-bubble-out-solid: rgba(42, 151, 220, 0.24);
  --bubble-out-bg: var(--bg-bubble-out);
  --bubble-out-status-read: #8bd5ff;
  --composer-input-focus: rgba(56, 164, 232, 0.45);
  --voice-bar: #54b8f3;
  --voice-bar-played: #a5ddff;
  --reply-bg: rgba(52, 157, 224, 0.12);
  --reply-border: #46aee9;
  --reply-name: #70c8f5;
  --text-link: #70c8f5;
  --accent: #46aee9;
  --accent-hover: #69c4f2;
  --accent-light: rgba(70, 174, 233, 0.14);
  --accent-dim: #318fc8;
  --accent-purple: #46aee9;
  --accent-gradient: linear-gradient(135deg, #4db5ed, #268dcc);
  --accent-gradient-btn: linear-gradient(135deg, #4db5ed, #268dcc);
  --accent-glow: rgba(70, 174, 233, 0.35);
  --neon-glow: 0 0 20px rgba(70, 174, 233, 0.16), 0 0 40px rgba(70, 174, 233, 0.06);
  --unread-badge: #46aee9;
  --sidebar-item-active-bg: linear-gradient(90deg, rgba(70, 174, 233, 0.12), rgba(70, 174, 233, 0));
  --sidebar-item-active-border: #46aee9;
  --pill-active-bg: linear-gradient(180deg, rgba(70, 174, 233, 0.24), rgba(38, 141, 204, 0.13));
  --pill-active-border: rgba(105, 196, 242, 0.38);
  --tab-active: #69c4f2;
  --search-focus-border: rgba(70, 174, 233, 0.48);
  --icon-hover: #69c4f2;
  --unread-gradient: linear-gradient(135deg, rgba(77, 181, 237, 0.92), rgba(38, 141, 204, 0.78));
  --unread-glow: rgba(70, 174, 233, 0.28);
  --empty-icon-gradient: linear-gradient(135deg, #4db5ed, #268dcc);
}

/* Light mode uses the same component dimensions while increasing contrast and hierarchy. */
html[data-magstyle="magstyle-001"][data-theme="light"] {
  --bg-app: #edf2f6;
  --bg-primary: #ffffff;
  --bg-secondary: #f4f7fa;
  --bg-chat: #e7eef4;
  --bg-sidebar: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.94);
  --bg-hover: rgba(32, 126, 190, 0.07);
  --bg-active: rgba(37, 137, 207, 0.11);
  --bg-modal: rgba(255, 255, 255, 0.99);
  --bg-input: #f1f5f8;
  --bg-glass: linear-gradient(180deg, #ffffff, #f5f8fa);
  --bg-bubble-out: linear-gradient(135deg, #d9effc, #cde7f8);
  --bg-bubble-out-solid: #d5ebf8;
  --bg-bubble-in: linear-gradient(180deg, #ffffff, #f8fafc);
  --bubble-in-border: rgba(29, 53, 76, 0.12);
  --bubble-out-time: #53778d;
  --bubble-out-status: #47788f;
  --bubble-out-status-read: #1679b7;
  --bubble-out-text: #142331;
  --bubble-in-text: #17212b;
  --chat-area-bg: #e7eef4;
  --chat-bg: #e7eef4;
  --bubble-in-bg: var(--bg-bubble-in);
  --bubble-out-bg: var(--bg-bubble-out);
  --composer-input-bg: #ffffff;
  --composer-input-border: rgba(29, 53, 76, 0.14);
  --composer-input-focus: rgba(37, 137, 207, 0.42);
  --composer-placeholder: #748391;
  --voice-btn-bg: #1f7fbd;
  --voice-bar: #2589cf;
  --voice-bar-played: #1679b7;
  --voice-duration: #5f7180;
  --voice-duration-out: #53778d;
  --reply-bg: rgba(37, 137, 207, 0.08);
  --reply-border: #2589cf;
  --reply-name: #126fad;
  --reply-text: #5d6c7b;
  --text-primary: #111a24;
  --text-secondary: #5d6c7b;
  --text-time: #667584;
  --text-link: #126fad;
  --accent: #2589cf;
  --accent-hover: #167bc0;
  --accent-light: rgba(37, 137, 207, 0.11);
  --accent-dim: #167bc0;
  --accent-purple: #2589cf;
  --accent-gradient: linear-gradient(135deg, #36a0df, #167bc0);
  --accent-gradient-btn: linear-gradient(135deg, #36a0df, #167bc0);
  --accent-glow: rgba(37, 137, 207, 0.24);
  --neon-glow: none;
  --danger: #c83b48;
  --border: rgba(29, 53, 76, 0.10);
  --border-light: rgba(29, 53, 76, 0.06);
  --border-input: rgba(29, 53, 76, 0.14);
  --shadow: rgba(35, 54, 72, 0.09);
  --shadow-lg: rgba(35, 54, 72, 0.18);
  --glass-bg: linear-gradient(180deg, #ffffff, #f5f8fa);
  --glass-border: rgba(29, 53, 76, 0.10);
  --glass-border-hover: rgba(29, 53, 76, 0.18);
  --glass-shadow: inset 0 1px 0 #ffffff, 0 10px 28px rgba(35, 54, 72, 0.10);
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(29, 53, 76, 0.10);
  --sidebar-item-active-bg: linear-gradient(90deg, rgba(37, 137, 207, 0.12), rgba(37, 137, 207, 0.03));
  --sidebar-item-active-border: #2589cf;
  --sidebar-item-hover: rgba(37, 137, 207, 0.06);
  --pill-bg: #f1f5f8;
  --pill-border: rgba(29, 53, 76, 0.10);
  --pill-text: #667584;
  --pill-active-bg: #2589cf;
  --pill-active-text: #ffffff;
  --pill-active-border: #2589cf;
  --tab-bg: #f4f7fa;
  --tab-text: #6c7b89;
  --tab-active: #2589cf;
  --search-bg: #f1f5f8;
  --search-border: rgba(29, 53, 76, 0.08);
  --search-focus-border: rgba(37, 137, 207, 0.42);
  --search-placeholder: #7b8996;
  --icon-color: #667786;
  --icon-hover: #2589cf;
  --unread-gradient: linear-gradient(135deg, #36a0df, #167bc0);
  --unread-glow: rgba(37, 137, 207, 0.18);
  --empty-icon-gradient: linear-gradient(135deg, #36a0df, #167bc0);
}

/* The old light theme gives the wordmark a dark capsule; MAGSTYLE keeps its original geometry. */
html[data-magstyle="magstyle-001"][data-theme="light"] .sidebar-brand {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-magstyle="magstyle-001"][data-theme="light"] .sidebar-brand span:first-child {
  color: var(--text-primary);
  -webkit-text-fill-color: currentColor;
}
html[data-magstyle="magstyle-001"] .sidebar-brand span:last-child {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* Message menu: same actions and behavior, clearer grouping and theme-safe contrast. */
html[data-magstyle="magstyle-001"] .context-menu {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
html[data-magstyle="magstyle-001"] .context-reactions-pill,
html[data-magstyle="magstyle-001"] .context-action-list {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-modal);
  box-shadow: 0 14px 36px var(--shadow-lg);
}
html[data-magstyle="magstyle-001"] .context-reactions {
  padding: 0 0 8px;
  border: 0;
  background: transparent;
}
html[data-magstyle="magstyle-001"] .context-action-list {
  overflow: hidden;
}
html[data-magstyle="magstyle-001"] .context-action-list .context-item {
  color: var(--text-primary);
  opacity: 1;
}
html[data-magstyle="magstyle-001"] .context-action-list .context-item > span:not(.ctx-icon) {
  color: inherit;
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}
html[data-magstyle="magstyle-001"] .context-item .ctx-icon {
  color: var(--icon-color);
  opacity: 1;
}
html[data-magstyle="magstyle-001"] .context-item:hover {
  color: var(--text-primary);
  background: var(--accent-light);
}
html[data-magstyle="magstyle-001"] .context-item.danger,
html[data-magstyle="magstyle-001"] .context-item.danger .ctx-icon {
  color: var(--danger);
}
html[data-magstyle="magstyle-001"][data-theme="light"] .context-action-list .context-item:not(.danger) {
  color: #111a24;
}
html[data-magstyle="magstyle-001"][data-theme="light"] .context-action-list .context-item:not(.danger) .ctx-icon {
  color: #607386;
}

/* Style selector must stay readable before MAGSTYLE is selected. */
#settings-body .appearance-choice-list {
  display: grid;
  gap: 10px;
  padding: 12px 16px 18px;
}
#settings-body .appearance-choice {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
#settings-body .appearance-choice:hover,
#settings-body .appearance-choice.is-active {
  border-color: var(--accent);
  background: var(--accent-light);
}
#settings-body .appearance-choice-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-primary);
  color: var(--accent);
  font-size: 20px;
}
#settings-body .appearance-choice-copy {
  min-width: 0;
}
#settings-body .appearance-choice-title {
  display: block;
  font-size: 15px;
  font-weight: 650;
}
#settings-body .appearance-choice-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}
#settings-body .appearance-choice-check {
  color: var(--accent);
  font-size: 20px;
  opacity: 0;
}
#settings-body .appearance-choice.is-active .appearance-choice-check {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html[data-magstyle="magstyle-001"] *,
  html[data-magstyle="magstyle-001"] *::before,
  html[data-magstyle="magstyle-001"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}