/* ============================================
   CATALYST UI COMPONENTS
   Design tokens, button system, sidebar, toast notifications,
   modals, keyboard shortcuts, contact avatars, toggle switches,
   form controls, focus rings, skeleton loading, and accessibility.
   ============================================ */

/* ============================================
   DESIGN TOKENS (Catalyst UI Kit)
   ============================================ */

:root {
  --catalyst-radius-lg: 0.625rem;
  --catalyst-radius-xl: 0.75rem;
  --catalyst-radius-2xl: 1rem;
  --catalyst-ring-focus: #3b82f6;
  --catalyst-border: rgb(9 9 11 / 0.1);
  --catalyst-border-hover: rgb(9 9 11 / 0.2);
  --catalyst-bg-solid: #4f46e5;
  --catalyst-bg-solid-hover: #4338ca;
  --catalyst-text-primary: #18181b;
  --catalyst-text-secondary: #52525b;
  --catalyst-text-muted: #71717a;
  --catalyst-bg-surface: #ffffff;
  --catalyst-bg-page: #fafafa;
  --catalyst-bg-subtle: #f4f4f5;
}

html.dark-mode {
  --catalyst-border: rgb(255 255 255 / 0.1);
  --catalyst-border-hover: rgb(255 255 255 / 0.15);
  --catalyst-bg-solid: #6366f1;
  --catalyst-bg-solid-hover: #4f46e5;
  --catalyst-text-primary: #f4f4f5;
  --catalyst-text-secondary: #a1a1aa;
  --catalyst-text-muted: #71717a;
  --catalyst-bg-surface: #18181b;
  --catalyst-bg-page: #09090b;
  --catalyst-bg-subtle: #27272a;
}

/* ============================================
   ROUNDCUBE ACCESSIBILITY CLASSES
   ============================================ */

.voice {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================
   BUTTON SYSTEM (Catalyst UI Kit)
   3 variants: solid, outline, plain
   4 colors: indigo (default), zinc, red, green
   3 sizes: sm, md (default), lg
   ============================================ */

.catalyst-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--catalyst-radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0.5rem 0.875rem;
  border: none;
  outline: none;
}

.catalyst-btn:focus-visible {
  outline: 2px solid var(--catalyst-ring-focus);
  outline-offset: 2px;
}

.catalyst-btn:disabled,
.catalyst-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.catalyst-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.catalyst-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Solid variant */
.catalyst-btn-solid {
  background-color: #4f46e5;
  color: #ffffff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.catalyst-btn-solid:hover {
  background-color: #4338ca;
}

html.dark-mode .catalyst-btn-solid {
  background-color: #6366f1;
}

html.dark-mode .catalyst-btn-solid:hover {
  background-color: #818cf8;
}

/* Solid color variants */
.catalyst-btn-solid--zinc {
  background-color: #18181b;
}

.catalyst-btn-solid--zinc:hover {
  background-color: #27272a;
}

html.dark-mode .catalyst-btn-solid--zinc {
  background-color: #f4f4f5;
  color: #18181b;
}

html.dark-mode .catalyst-btn-solid--zinc:hover {
  background-color: #e4e4e7;
}

.catalyst-btn-solid--red {
  background-color: #dc2626;
}

.catalyst-btn-solid--red:hover {
  background-color: #b91c1c;
}

.catalyst-btn-solid--green {
  background-color: #16a34a;
}

.catalyst-btn-solid--green:hover {
  background-color: #15803d;
}

/* Outline variant */
.catalyst-btn-outline {
  background-color: transparent;
  color: #18181b;
  border: 1px solid var(--catalyst-border);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.catalyst-btn-outline:hover {
  background-color: rgb(9 9 11 / 0.03);
  border-color: var(--catalyst-border-hover);
}

html.dark-mode .catalyst-btn-outline {
  color: #f4f4f5;
  border-color: var(--catalyst-border);
}

html.dark-mode .catalyst-btn-outline:hover {
  background-color: rgb(255 255 255 / 0.05);
  border-color: var(--catalyst-border-hover);
}

.catalyst-btn-outline--red {
  color: #dc2626;
  border-color: #fecaca;
}

.catalyst-btn-outline--red:hover {
  background-color: #fef2f2;
  border-color: #fca5a5;
}

html.dark-mode .catalyst-btn-outline--red {
  color: #f87171;
  border-color: #450a0a;
}

html.dark-mode .catalyst-btn-outline--red:hover {
  background-color: #450a0a;
  border-color: #991b1b;
}

/* Plain variant */
.catalyst-btn-plain {
  background-color: transparent;
  color: #52525b;
  border: none;
  box-shadow: none;
  font-weight: 500;
}

.catalyst-btn-plain:hover {
  background-color: rgb(9 9 11 / 0.05);
  color: #18181b;
}

html.dark-mode .catalyst-btn-plain {
  color: #a1a1aa;
}

html.dark-mode .catalyst-btn-plain:hover {
  background-color: rgb(255 255 255 / 0.05);
  color: #f4f4f5;
}

.catalyst-btn-plain--red {
  color: #dc2626;
}

.catalyst-btn-plain--red:hover {
  background-color: #fef2f2;
  color: #b91c1c;
}

html.dark-mode .catalyst-btn-plain--red {
  color: #f87171;
}

html.dark-mode .catalyst-btn-plain--red:hover {
  background-color: #450a0a;
  color: #fca5a5;
}

/* Size variants */
.catalyst-btn--sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
}

.catalyst-btn--lg {
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
}

/* Standardized focus ring utility */
.catalyst-focus:focus-visible {
  outline: 2px solid var(--catalyst-ring-focus);
  outline-offset: 2px;
}

/* ============================================
   UNIFIED SIDEBAR (Catalyst UI Kit inspired)
   ============================================ */

/* Sidebar container */
.catalyst-sidebar {
  width: 16rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-right: 1px solid #e4e4e7;
  overflow: hidden;
  transition: transform 0.3s ease;
}

html.dark-mode .catalyst-sidebar {
  background-color: #18181b;
  border-right-color: #27272a;
}

/* Header: logo + brand dropdown */
.catalyst-sidebar-header {
  flex-shrink: 0;
  position: relative;
  padding: 1.25rem 1rem;
}

.catalyst-sidebar-logo {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.375rem;
  object-fit: contain;
}

.catalyst-sidebar-brand {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.catalyst-sidebar-brand-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #18181b;
  line-height: 1.25;
}

html.dark-mode .catalyst-sidebar-brand-name {
  color: #f4f4f5;
}

.catalyst-sidebar-brand-sub {
  font-size: 0.75rem;
  color: #71717a;
  line-height: 1.25;
}

html.dark-mode .catalyst-sidebar-brand-sub {
  color: #a1a1aa;
}

/* Divider */
.catalyst-sidebar-divider {
  height: 1px;
  background-color: rgba(9, 9, 11, 0.05);
  margin: 0 1rem;
}

html.dark-mode .catalyst-sidebar-divider {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Dropdown trigger — full-width button in header */
.catalyst-sidebar-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  border-radius: 0.5rem;
  font-family: inherit;
  transition: background-color 0.15s;
}

.catalyst-sidebar-dropdown-trigger:hover {
  background-color: rgba(9, 9, 11, 0.05);
}

html.dark-mode .catalyst-sidebar-dropdown-trigger:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Chevron icon */
.catalyst-sidebar-chevron {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  color: #71717a;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.catalyst-sidebar-chevron.rotate-180 {
  transform: rotate(180deg);
}

html.dark-mode .catalyst-sidebar-chevron {
  color: #a1a1aa;
}

/* Dropdown menu panel */
.catalyst-sidebar-dropdown-menu {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 100%;
  margin-top: 0.25rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 0.25rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  outline: 1px solid rgba(9, 9, 11, 0.1);
  z-index: 50;
}

html.dark-mode .catalyst-sidebar-dropdown-menu {
  background-color: #27272a;
  outline-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
}

/* Dropdown items */
.catalyst-sidebar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #52525b;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.catalyst-sidebar-dropdown-item:hover {
  background-color: rgba(9, 9, 11, 0.05);
  color: #18181b;
}

html.dark-mode .catalyst-sidebar-dropdown-item {
  color: #a1a1aa;
}

html.dark-mode .catalyst-sidebar-dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #f4f4f5;
}

/* Active/selected dropdown item */
.catalyst-sidebar-dropdown-item.current {
  color: #18181b;
  font-weight: 600;
  background-color: rgba(9, 9, 11, 0.05);
}

html.dark-mode .catalyst-sidebar-dropdown-item.current {
  color: #f4f4f5;
  background-color: rgba(255, 255, 255, 0.05);
}

/* Shared icon base for dropdown items */
.catalyst-sidebar-dropdown-item.mail::before,
.catalyst-sidebar-dropdown-item.contacts::before,
.catalyst-sidebar-dropdown-item.settings::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Mail icon (envelope) */
.catalyst-sidebar-dropdown-item.mail::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E");
}

/* Contacts icon (users) */
.catalyst-sidebar-dropdown-item.contacts::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z'/%3E%3C/svg%3E");
}

/* Settings icon (cog) */
.catalyst-sidebar-dropdown-item.settings::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
}

/* Dropdown label (text rendered by Roundcube innerClass) */
.catalyst-sidebar-dropdown-label {
  font: inherit;
  color: inherit;
}

/* Scrollable body area */
.catalyst-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
}

/* Footer section — user dropdown */
.catalyst-sidebar-footer {
  flex-shrink: 0;
  position: relative;
  padding: 0.5rem 0.75rem 0.75rem;
}

/* User trigger button */
.catalyst-sidebar-user-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  background: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s;
}

.catalyst-sidebar-user-trigger:hover {
  background-color: rgba(9, 9, 11, 0.05);
}

html.dark-mode .catalyst-sidebar-user-trigger:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* User avatar — square with rounded corners (Catalyst style) */
.catalyst-sidebar-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background-color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  text-transform: uppercase;
}

.catalyst-sidebar-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* User display name (larger, prominent) */
.catalyst-sidebar-user-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: #18181b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

html.dark-mode .catalyst-sidebar-user-name {
  color: #f4f4f5;
}

/* User email (smaller, muted) */
.catalyst-sidebar-user-email {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.25;
  color: #71717a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

html.dark-mode .catalyst-sidebar-user-email {
  color: #a1a1aa;
}

/* Chevron (points up by default, rotates on open) */
.catalyst-sidebar-user-chevron {
  width: 1rem;
  height: 1rem;
  color: #71717a;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.catalyst-sidebar-user-chevron.rotate-180 {
  transform: rotate(180deg);
}

html.dark-mode .catalyst-sidebar-user-chevron {
  color: #a1a1aa;
}

/* User dropdown menu (opens upward) */
.catalyst-sidebar-usermenu {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 100%;
  margin-bottom: 0.25rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 0.25rem;
  box-shadow: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
  outline: 1px solid rgba(9, 9, 11, 0.1);
  z-index: 50;
}

html.dark-mode .catalyst-sidebar-usermenu {
  background-color: #27272a;
  outline-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -10px 15px -3px rgb(0 0 0 / 0.3), 0 -4px 6px -4px rgb(0 0 0 / 0.3);
}

/* Dropdown menu divider */
.catalyst-sidebar-usermenu-divider {
  height: 1px;
  background-color: rgba(9, 9, 11, 0.08);
  margin: 0.25rem 0.5rem;
}

html.dark-mode .catalyst-sidebar-usermenu-divider {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Dropdown menu items */
.catalyst-sidebar-usermenu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #52525b;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  cursor: pointer;
  white-space: nowrap;
}

.catalyst-sidebar-usermenu-item:hover {
  background-color: rgba(9, 9, 11, 0.05);
  color: #18181b;
}

html.dark-mode .catalyst-sidebar-usermenu-item {
  color: #a1a1aa;
}

html.dark-mode .catalyst-sidebar-usermenu-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #f4f4f5;
}

.catalyst-sidebar-usermenu-label {
  font: inherit;
  color: inherit;
}

/* Usermenu icon (inline SVGs) */
.catalyst-sidebar-usermenu-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* About icon (mask-image) */
.catalyst-sidebar-usermenu-item.about::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Logout icon (mask-image) */
.catalyst-sidebar-usermenu-item.logout::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Mobile sidebar overlay */
.catalyst-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background-color: rgba(9, 9, 11, 0.5);
  backdrop-filter: blur(4px);
}

/* Mobile sidebar toggle button */
.catalyst-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: #52525b;
  transition: background-color 0.15s;
}

.catalyst-sidebar-toggle:hover {
  background-color: rgba(9, 9, 11, 0.05);
}

html.dark-mode .catalyst-sidebar-toggle {
  color: #a1a1aa;
}

html.dark-mode .catalyst-sidebar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Responsive: mobile/tablet drawer */
@media (max-width: 1023px) {
  .catalyst-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 16rem;
    max-width: 80vw;
  }

  .catalyst-sidebar-toggle {
    display: inline-flex;
  }
}

/* ============================================
   SIDEBAR — COMPOSE BUTTON (mail view)
   ============================================ */

.catalyst-sidebar-compose {
  flex-shrink: 0;
  padding: 0 0.75rem 0.5rem;
}

.catalyst-sidebar-compose a,
.catalyst-sidebar-compose button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5625rem 1rem;
  border-radius: 0.5rem;
  background-color: #4f46e5;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s;
  border: none;
  cursor: pointer;
}

.catalyst-sidebar-compose a:hover,
.catalyst-sidebar-compose button:hover {
  background-color: #4338ca;
}

html.dark-mode .catalyst-sidebar-compose a:hover,
html.dark-mode .catalyst-sidebar-compose button:hover {
  background-color: #6366f1;
}

/* Hide native Roundcube messagestack (replaced by catalyst toasts) */
#messagestack {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

/* Container — fixed bottom-right, stacks upward */
.catalyst-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  max-width: 24rem;
  width: 100%;
  pointer-events: none;
}

/* Toast panel — Catalyst notification pattern:
   white bg, ring border, colored icon accent */
.catalyst-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--catalyst-radius-xl);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #3f3f46;
  background-color: #ffffff;
  pointer-events: auto;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  ring: 1px solid rgba(0,0,0,0.05);
  outline: 1px solid rgba(0,0,0,0.05);
  outline-offset: -1px;
  will-change: transform, opacity;
}

html.dark-mode .catalyst-toast,
html.dark .catalyst-toast {
  background-color: #27272a;
  color: #d4d4d8;
  outline-color: rgba(255,255,255,0.1);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);
}

/* Icon — sized and colored per type */
.catalyst-toast-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.catalyst-toast-text {
  flex: 1;
  word-break: break-word;
}

.catalyst-toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #a1a1aa;
  transition: color 0.15s;
  padding: 0;
  border-radius: var(--catalyst-radius);
}

.catalyst-toast-close:hover {
  color: #3f3f46;
}

html.dark-mode .catalyst-toast-close:hover,
html.dark .catalyst-toast-close:hover {
  color: #e4e4e7;
}

/* Icon color accents per type */
.catalyst-toast--confirmation .catalyst-toast-icon { color: #10b981; }
.catalyst-toast--notice .catalyst-toast-icon { color: #6366f1; }
.catalyst-toast--error .catalyst-toast-icon { color: #ef4444; }
.catalyst-toast--warning .catalyst-toast-icon { color: #f59e0b; }
.catalyst-toast--loading .catalyst-toast-icon { color: #71717a; }

html.dark-mode .catalyst-toast--confirmation .catalyst-toast-icon,
html.dark .catalyst-toast--confirmation .catalyst-toast-icon { color: #34d399; }
html.dark-mode .catalyst-toast--notice .catalyst-toast-icon,
html.dark .catalyst-toast--notice .catalyst-toast-icon { color: #818cf8; }
html.dark-mode .catalyst-toast--error .catalyst-toast-icon,
html.dark .catalyst-toast--error .catalyst-toast-icon { color: #f87171; }
html.dark-mode .catalyst-toast--warning .catalyst-toast-icon,
html.dark .catalyst-toast--warning .catalyst-toast-icon { color: #fbbf24; }
html.dark-mode .catalyst-toast--loading .catalyst-toast-icon,
html.dark .catalyst-toast--loading .catalyst-toast-icon { color: #a1a1aa; }

/* Loading spinner animation */
@keyframes catalyst-spin {
  to { transform: rotate(360deg); }
}

.catalyst-toast-spin {
  animation: catalyst-spin 1s linear infinite;
}

/* ============================================
   MODAL SYSTEM
   ============================================ */

.catalyst-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(9 9 11 / 0.25);
  backdrop-filter: blur(4px);
  will-change: opacity;
}

html.dark-mode .catalyst-modal-backdrop,
html.dark .catalyst-modal-backdrop {
  background-color: rgb(9 9 11 / 0.5);
}

.catalyst-modal {
  background-color: #ffffff;
  border-radius: var(--catalyst-radius-2xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 28rem;
  width: 90%;
  overflow: hidden;
  will-change: transform;
  ring: 1px solid var(--catalyst-border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--catalyst-border);
}

/* Modal size variants */
.catalyst-modal--sm { max-width: 24rem; }
.catalyst-modal--lg { max-width: 32rem; }
.catalyst-modal--xl { max-width: 36rem; }

html.dark-mode .catalyst-modal,
html.dark .catalyst-modal {
  background-color: #18181b;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--catalyst-border);
}

.catalyst-modal-header {
  padding: 1.25rem 1.5rem 0.75rem;
}

.catalyst-modal-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #18181b;
  margin: 0;
  line-height: 1.4;
}

html.dark-mode .catalyst-modal-title,
html.dark .catalyst-modal-title {
  color: #f4f4f5;
}

.catalyst-modal-body {
  padding: 0 1.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #52525b;
}

html.dark-mode .catalyst-modal-body,
html.dark .catalyst-modal-body {
  color: #a1a1aa;
}

.catalyst-modal-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem 1.25rem;
}

@media (min-width: 640px) {
  .catalyst-modal-footer {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
  }
}

.catalyst-modal-confirm {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: var(--catalyst-radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  background-color: #4f46e5;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.catalyst-modal-confirm:hover {
  background-color: #4338ca;
}

.catalyst-modal-confirm:active {
  transform: scale(0.98);
}

.catalyst-modal-confirm:focus-visible {
  outline: 2px solid var(--catalyst-ring-focus);
  outline-offset: 2px;
}

html.dark-mode .catalyst-modal-confirm,
html.dark .catalyst-modal-confirm {
  background-color: #6366f1;
}

html.dark-mode .catalyst-modal-confirm:hover,
html.dark .catalyst-modal-confirm:hover {
  background-color: #818cf8;
}

.catalyst-modal-cancel {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: var(--catalyst-radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  color: #52525b;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.catalyst-modal-cancel:hover {
  background-color: rgb(9 9 11 / 0.05);
  color: #18181b;
}

.catalyst-modal-cancel:focus-visible {
  outline: 2px solid var(--catalyst-ring-focus);
  outline-offset: 2px;
}

html.dark-mode .catalyst-modal-cancel,
html.dark .catalyst-modal-cancel {
  color: #a1a1aa;
}

html.dark-mode .catalyst-modal-cancel:hover,
html.dark .catalyst-modal-cancel:hover {
  background-color: rgb(255 255 255 / 0.05);
  color: #f4f4f5;
}

/* Danger modal */
.catalyst-modal--danger .catalyst-modal-confirm {
  background-color: #dc2626;
}

.catalyst-modal--danger .catalyst-modal-confirm:hover {
  background-color: #b91c1c;
}

/* Warning modal */
.catalyst-modal--warning .catalyst-modal-confirm {
  background-color: #d97706;
}

.catalyst-modal--warning .catalyst-modal-confirm:hover {
  background-color: #b45309;
}

/* ============================================
   ALERT DIALOG (destructive confirmations)
   ============================================ */

.catalyst-alert-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: grid;
  min-height: 100%;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  padding: 2rem;
  background-color: rgb(9 9 11 / 0.25);
  backdrop-filter: blur(4px);
}

html.dark-mode .catalyst-alert-backdrop {
  background-color: rgb(9 9 11 / 0.5);
}

.catalyst-alert {
  grid-row: 2;
  background-color: #ffffff;
  border-radius: var(--catalyst-radius-2xl);
  max-width: 24rem;
  width: 100%;
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--catalyst-border);
  text-align: center;
}

html.dark-mode .catalyst-alert {
  background-color: #18181b;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--catalyst-border);
}

.catalyst-alert-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  color: #f59e0b;
}

.catalyst-alert-title {
  font-size: 1rem;
  font-weight: 600;
  color: #18181b;
  margin: 0 0 0.5rem;
}

html.dark-mode .catalyst-alert-title {
  color: #f4f4f5;
}

.catalyst-alert-message {
  font-size: 0.875rem;
  color: #52525b;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

html.dark-mode .catalyst-alert-message {
  color: #a1a1aa;
}

.catalyst-alert-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .catalyst-alert-actions {
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
  }
}

/* ============================================
   JQUERY UI DIALOG — Catalyst override
   (Roundcube confirm_dialog / simple_dialog)
   ============================================ */

/* Backdrop overlay */
.ui-widget-overlay {
  position: fixed !important;
  inset: 0;
  background-color: rgb(9 9 11 / 0.25) !important;
  backdrop-filter: blur(4px);
  opacity: 1 !important;
  z-index: 10000 !important;
}

html.dark-mode .ui-widget-overlay,
html.dark .ui-widget-overlay {
  background-color: rgb(9 9 11 / 0.5) !important;
}

/* Dialog container */
.ui-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10001 !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--catalyst-border) !important;
  padding: 0 !important;
  max-width: 40rem;
  width: 92% !important;
  max-height: 85vh;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

html.dark-mode .ui-dialog,
html.dark .ui-dialog {
  background: #18181b !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--catalyst-border) !important;
}

/* Titlebar */
.ui-dialog .ui-dialog-titlebar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.25rem 1.5rem 0.5rem !important;
  position: relative;
}

/* Title text */
.ui-dialog .ui-dialog-title {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: #18181b !important;
  line-height: 1.4;
  float: none !important;
  margin: 0 !important;
}

html.dark-mode .ui-dialog .ui-dialog-title,
html.dark .ui-dialog .ui-dialog-title {
  color: #f4f4f5 !important;
}

/* Close X button in titlebar */
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  width: 2rem !important;
  height: 2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0.375rem !important;
  color: #71717a !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  background: rgb(9 9 11 / 0.05) !important;
  color: #18181b !important;
}

html.dark-mode .ui-dialog .ui-dialog-titlebar-close:hover,
html.dark .ui-dialog .ui-dialog-titlebar-close:hover {
  background: rgb(255 255 255 / 0.05) !important;
  color: #f4f4f5 !important;
}

/* Hide jQuery UI close icon, replace with X */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none !important;
}

.ui-dialog .ui-dialog-titlebar-close::after {
  content: '';
  width: 1.125rem;
  height: 1.125rem;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12' /%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Content area */
.ui-dialog .ui-dialog-content {
  padding: 0 1.5rem 1rem !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  color: #52525b !important;
  border: none !important;
  overflow: auto;
}

.ui-dialog .ui-dialog-content img,
.ui-dialog .ui-dialog-content canvas {
  max-width: 100%;
  height: auto;
}

.ui-dialog .ui-dialog-content iframe {
  width: 100%;
  min-height: 360px;
  border: none;
}

html.dark-mode .ui-dialog .ui-dialog-content,
html.dark .ui-dialog .ui-dialog-content {
  color: #a1a1aa !important;
}

/* Button pane */
.ui-dialog .ui-dialog-buttonpane {
  padding: 0.75rem 1.5rem 1.25rem !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

.ui-dialog .ui-dialog-buttonset {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  float: none !important;
}

/* All dialog buttons — base reset */
.ui-dialog .ui-dialog-buttonset button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  border: none !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.ui-dialog .ui-dialog-buttonset button:focus-visible {
  outline: 2px solid var(--catalyst-ring-focus) !important;
  outline-offset: 2px !important;
}

/* Action button (.mainaction) — primary indigo */
.ui-dialog .ui-dialog-buttonset button.mainaction {
  color: #ffffff !important;
  background-color: #4f46e5 !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.ui-dialog .ui-dialog-buttonset button.mainaction:hover {
  background-color: #4338ca !important;
}

.ui-dialog .ui-dialog-buttonset button.mainaction:active {
  transform: scale(0.98);
}

html.dark-mode .ui-dialog .ui-dialog-buttonset button.mainaction,
html.dark .ui-dialog .ui-dialog-buttonset button.mainaction {
  background-color: #6366f1 !important;
}

html.dark-mode .ui-dialog .ui-dialog-buttonset button.mainaction:hover,
html.dark .ui-dialog .ui-dialog-buttonset button.mainaction:hover {
  background-color: #818cf8 !important;
}

/* Delete/danger action — red */
.ui-dialog .ui-dialog-buttonset button.mainaction.delete,
.ui-dialog .ui-dialog-buttonset button.mainaction.discard {
  background-color: #dc2626 !important;
}

.ui-dialog .ui-dialog-buttonset button.mainaction.delete:hover,
.ui-dialog .ui-dialog-buttonset button.mainaction.discard:hover {
  background-color: #b91c1c !important;
}

html.dark-mode .ui-dialog .ui-dialog-buttonset button.mainaction.delete,
html.dark-mode .ui-dialog .ui-dialog-buttonset button.mainaction.discard,
html.dark .ui-dialog .ui-dialog-buttonset button.mainaction.delete,
html.dark .ui-dialog .ui-dialog-buttonset button.mainaction.discard {
  background-color: #ef4444 !important;
}

html.dark-mode .ui-dialog .ui-dialog-buttonset button.mainaction.delete:hover,
html.dark-mode .ui-dialog .ui-dialog-buttonset button.mainaction.discard:hover,
html.dark .ui-dialog .ui-dialog-buttonset button.mainaction.delete:hover,
html.dark .ui-dialog .ui-dialog-buttonset button.mainaction.discard:hover {
  background-color: #f87171 !important;
}

/* Cancel button — plain/ghost */
.ui-dialog .ui-dialog-buttonset button.cancel {
  color: #52525b !important;
  background-color: transparent !important;
  font-weight: 500 !important;
}

.ui-dialog .ui-dialog-buttonset button.cancel:hover {
  background-color: rgb(9 9 11 / 0.05) !important;
  color: #18181b !important;
}

html.dark-mode .ui-dialog .ui-dialog-buttonset button.cancel,
html.dark .ui-dialog .ui-dialog-buttonset button.cancel {
  color: #a1a1aa !important;
}

html.dark-mode .ui-dialog .ui-dialog-buttonset button.cancel:hover,
html.dark .ui-dialog .ui-dialog-buttonset button.cancel:hover {
  background-color: rgb(255 255 255 / 0.05) !important;
  color: #f4f4f5 !important;
}

/* Wider dialog for forms with tables/inputs */
.ui-dialog:has(.propform),
.ui-dialog:has(form),
.ui-dialog:has(input[type="file"]) {
  max-width: 36rem;
}

/* Hide jQuery UI resize handle */
.ui-dialog .ui-resizable-handle {
  display: none !important;
}

/* Tables inside dialogs (quota, etc.) */
.ui-dialog .ui-dialog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ui-dialog .ui-dialog-content table td {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--catalyst-border);
  color: #52525b;
}

html.dark-mode .ui-dialog .ui-dialog-content table td {
  color: #a1a1aa;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.ui-dialog .ui-dialog-content table td:first-child {
  font-weight: 500;
  color: #18181b;
}

html.dark-mode .ui-dialog .ui-dialog-content table td:first-child {
  color: #f4f4f5;
}

/* Forms inside dialogs */
.ui-dialog .ui-dialog-content input[type="text"],
.ui-dialog .ui-dialog-content input[type="email"],
.ui-dialog .ui-dialog-content input[type="password"],
.ui-dialog .ui-dialog-content textarea,
.ui-dialog .ui-dialog-content select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--catalyst-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: #18181b;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.ui-dialog .ui-dialog-content input:focus,
.ui-dialog .ui-dialog-content textarea:focus,
.ui-dialog .ui-dialog-content select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

html.dark-mode .ui-dialog .ui-dialog-content input[type="text"],
html.dark-mode .ui-dialog .ui-dialog-content input[type="email"],
html.dark-mode .ui-dialog .ui-dialog-content input[type="password"],
html.dark-mode .ui-dialog .ui-dialog-content textarea,
html.dark-mode .ui-dialog .ui-dialog-content select {
  background: #27272a;
  border-color: #3f3f46;
  color: #f4f4f5;
}

/* Propform tables inside dialogs */
.ui-dialog .propform {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.ui-dialog .propform td {
  padding: 0.5rem 0.5rem 0.5rem 0;
  vertical-align: middle;
}

.ui-dialog .propform td.title {
  font-weight: 500;
  color: #71717a;
  white-space: nowrap;
  font-size: 0.875rem;
  width: 35%;
}

html.dark-mode .ui-dialog .propform td.title {
  color: #a1a1aa;
}

/* File inputs in dialogs */
.ui-dialog .ui-dialog-content input[type="file"],
.ui-dialog .ui-dialog-content .form-control-file {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--catalyst-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: #52525b;
  background: #fafafa;
  cursor: pointer;
  box-sizing: border-box;
}

html.dark-mode .ui-dialog .ui-dialog-content input[type="file"],
html.dark-mode .ui-dialog .ui-dialog-content .form-control-file {
  background: #27272a;
  border-color: #3f3f46;
  color: #a1a1aa;
}

/* Hint text in dialogs */
.ui-dialog .ui-dialog-content .hint {
  font-size: 0.8125rem;
  color: #a1a1aa;
  margin-top: 0.25rem;
  font-style: italic;
}

html.dark-mode .ui-dialog .ui-dialog-content .hint {
  color: #52525b;
}

/* Checkbox in dialogs */
.ui-dialog .ui-dialog-content input[type="checkbox"] {
  accent-color: #4f46e5;
  width: 1rem;
  height: 1rem;
}

/* ============================================
   JQUERY UI DATEPICKER — Catalyst Style
   ============================================ */

.ui-datepicker {
  background: #ffffff;
  border: 1px solid rgba(9, 9, 11, 0.1);
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  padding: 0.75rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  width: auto !important;
  min-width: 17rem;
  z-index: 10002 !important;
}

html.dark-mode .ui-datepicker,
html.dark .ui-datepicker {
  background: #18181b;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
}

/* Header: prev/next + month/year */
.ui-datepicker .ui-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0.5rem;
  border: none;
  background: none;
  position: relative;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  cursor: pointer;
  color: #71717a;
  background: none;
  border: none;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: rgba(9, 9, 11, 0.05);
  color: #18181b;
}

html.dark-mode .ui-datepicker .ui-datepicker-prev:hover,
html.dark-mode .ui-datepicker .ui-datepicker-next:hover,
html.dark .ui-datepicker .ui-datepicker-prev:hover,
html.dark .ui-datepicker .ui-datepicker-next:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f4f4f5;
}

/* Hide default jQuery UI icon text */
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  display: none;
}

/* Arrow icons via ::after */
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.ui-datepicker .ui-datepicker-prev::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5' /%3E%3C/svg%3E");
}

.ui-datepicker .ui-datepicker-next::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5' /%3E%3C/svg%3E");
}

/* Title: month + year */
.ui-datepicker .ui-datepicker-title {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  color: #18181b;
  margin: 0;
  text-align: center;
}

html.dark-mode .ui-datepicker .ui-datepicker-title,
html.dark .ui-datepicker .ui-datepicker-title {
  color: #f4f4f5;
}

/* Month/year dropdowns */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: #18181b;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  appearance: auto;
}

.ui-datepicker select.ui-datepicker-month:hover,
.ui-datepicker select.ui-datepicker-year:hover {
  background: rgba(9, 9, 11, 0.05);
}

html.dark-mode .ui-datepicker select.ui-datepicker-month,
html.dark-mode .ui-datepicker select.ui-datepicker-year,
html.dark .ui-datepicker select.ui-datepicker-month,
html.dark .ui-datepicker select.ui-datepicker-year {
  color: #f4f4f5;
}

/* Calendar table */
.ui-datepicker table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}

.ui-datepicker th {
  padding: 0.5rem 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: #a1a1aa;
  text-transform: capitalize;
}

html.dark-mode .ui-datepicker th,
html.dark .ui-datepicker th {
  color: #71717a;
}

.ui-datepicker td {
  padding: 1px;
  text-align: center;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #3f3f46;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
  background: none;
  border: none;
}

html.dark-mode .ui-datepicker td a,
html.dark-mode .ui-datepicker td span,
html.dark .ui-datepicker td a,
html.dark .ui-datepicker td span {
  color: #d4d4d8;
}

/* Hover */
.ui-datepicker td a:hover {
  background: rgba(9, 9, 11, 0.05);
  color: #18181b;
}

html.dark-mode .ui-datepicker td a:hover,
html.dark .ui-datepicker td a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f4f4f5;
}

/* Today */
.ui-datepicker td.ui-datepicker-today a,
.ui-datepicker td.ui-datepicker-today span {
  background: #fef9c3;
  color: #854d0e;
  font-weight: 600;
}

html.dark-mode .ui-datepicker td.ui-datepicker-today a,
html.dark-mode .ui-datepicker td.ui-datepicker-today span,
html.dark .ui-datepicker td.ui-datepicker-today a,
html.dark .ui-datepicker td.ui-datepicker-today span {
  background: rgba(250, 204, 21, 0.15);
  color: #fde047;
}

/* Selected day */
.ui-datepicker td.ui-datepicker-current-day a,
.ui-datepicker td .ui-state-active {
  background: #4f46e5 !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* Other month days */
.ui-datepicker td.ui-datepicker-other-month a,
.ui-datepicker td.ui-datepicker-other-month span {
  color: #d4d4d8;
}

html.dark-mode .ui-datepicker td.ui-datepicker-other-month a,
html.dark-mode .ui-datepicker td.ui-datepicker-other-month span,
html.dark .ui-datepicker td.ui-datepicker-other-month a,
html.dark .ui-datepicker td.ui-datepicker-other-month span {
  color: #52525b;
}

/* Disabled state */
.ui-datepicker td .ui-state-disabled {
  color: #d4d4d8;
  cursor: default;
}

html.dark-mode .ui-datepicker td .ui-state-disabled,
html.dark .ui-datepicker td .ui-state-disabled {
  color: #3f3f46;
}

/* Button pane (Today / Done) */
.ui-datepicker .ui-datepicker-buttonpane {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0 0;
  margin: 0;
  border-top: 1px solid rgba(9, 9, 11, 0.1);
}

html.dark-mode .ui-datepicker .ui-datepicker-buttonpane,
html.dark .ui-datepicker .ui-datepicker-buttonpane {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.ui-datepicker .ui-datepicker-buttonpane button {
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  color: #52525b;
  background: none;
  transition: background 0.15s, color 0.15s;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
  background: rgba(9, 9, 11, 0.05);
  color: #18181b;
}

html.dark-mode .ui-datepicker .ui-datepicker-buttonpane button,
html.dark .ui-datepicker .ui-datepicker-buttonpane button {
  color: #a1a1aa;
}

html.dark-mode .ui-datepicker .ui-datepicker-buttonpane button:hover,
html.dark .ui-datepicker .ui-datepicker-buttonpane button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f4f4f5;
}

/* ============================================
   KEYBOARD SHORTCUTS OVERLAY
   ============================================ */

.catalyst-shortcuts-panel {
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 420px;
  width: 90%;
  overflow: hidden;
}

html.dark-mode .catalyst-shortcuts-panel,
html.dark .catalyst-shortcuts-panel {
  background-color: #18181b;
  border: 1px solid #3f3f46;
}

.catalyst-shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e4e4e7;
}

html.dark-mode .catalyst-shortcuts-header,
html.dark .catalyst-shortcuts-header {
  border-bottom-color: #3f3f46;
}

.catalyst-shortcuts-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #18181b;
  margin: 0;
}

html.dark-mode .catalyst-shortcuts-header h3,
html.dark .catalyst-shortcuts-header h3 {
  color: #f4f4f5;
}

.catalyst-shortcuts-grid {
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.catalyst-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f4f4f5;
}

.catalyst-shortcut-row:last-child {
  border-bottom: none;
}

html.dark-mode .catalyst-shortcut-row,
html.dark .catalyst-shortcut-row {
  border-bottom-color: #27272a;
}

.catalyst-shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  background-color: #f4f4f5;
  border: 1px solid #d4d4d8;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inter', system-ui, monospace;
  color: #3f3f46;
  box-shadow: 0 1px 0 #a1a1aa;
}

html.dark-mode .catalyst-shortcut-key,
html.dark .catalyst-shortcut-key {
  background-color: #27272a;
  border-color: #52525b;
  color: #d4d4d8;
  box-shadow: 0 1px 0 #3f3f46;
}

.catalyst-shortcut-desc {
  font-size: 0.8125rem;
  color: #52525b;
}

html.dark-mode .catalyst-shortcut-desc,
html.dark .catalyst-shortcut-desc {
  color: #a1a1aa;
}

/* ============================================
   BADGE SYSTEM (Catalyst UI Kit)
   ============================================ */

.catalyst-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.0625rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.catalyst-badge--indigo {
  background-color: rgb(99 102 241 / 0.15);
  color: #4338ca;
}

html.dark-mode .catalyst-badge--indigo {
  background-color: rgb(99 102 241 / 0.2);
  color: #a5b4fc;
}

.catalyst-badge--zinc {
  background-color: rgb(9 9 11 / 0.05);
  color: #52525b;
}

html.dark-mode .catalyst-badge--zinc {
  background-color: rgb(255 255 255 / 0.1);
  color: #a1a1aa;
}

.catalyst-badge--blue {
  background-color: rgb(59 130 246 / 0.15);
  color: #1d4ed8;
}

html.dark-mode .catalyst-badge--blue {
  background-color: rgb(59 130 246 / 0.2);
  color: #93c5fd;
}

.catalyst-badge--amber {
  background-color: rgb(245 158 11 / 0.15);
  color: #92400e;
}

html.dark-mode .catalyst-badge--amber {
  background-color: rgb(245 158 11 / 0.2);
  color: #fde68a;
}

.catalyst-badge--red {
  background-color: rgb(220 38 38 / 0.15);
  color: #991b1b;
}

html.dark-mode .catalyst-badge--red {
  background-color: rgb(220 38 38 / 0.2);
  color: #fca5a5;
}

.catalyst-badge--green {
  background-color: rgb(22 163 74 / 0.15);
  color: #166534;
}

html.dark-mode .catalyst-badge--green {
  background-color: rgb(22 163 74 / 0.2);
  color: #86efac;
}

/* ============================================
   DESCRIPTION LIST (Catalyst UI Kit)
   ============================================ */

.catalyst-dl {
  display: grid;
  grid-template-columns: minmax(0, min(50%, 12rem)) 1fr;
  gap: 0;
}

.catalyst-dl dt,
.catalyst-dl dd {
  padding: 0.5rem 0;
  border-top: 1px solid var(--catalyst-border);
  font-size: 0.875rem;
}

.catalyst-dl dt:first-of-type,
.catalyst-dl dd:first-of-type {
  border-top: none;
}

.catalyst-dl dt {
  font-weight: 500;
  color: #71717a;
  padding-right: 1rem;
}

.catalyst-dl dd {
  color: #18181b;
  margin: 0;
}

html.dark-mode .catalyst-dl dt {
  color: #a1a1aa;
}

html.dark-mode .catalyst-dl dd {
  color: #f4f4f5;
}

/* ============================================
   CONTACT AVATARS
   ============================================ */

.catalyst-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  outline: 1px solid rgb(0 0 0 / 0.1);
  outline-offset: -1px;
}

/* Avatar sizes */
.catalyst-avatar,
.catalyst-avatar--md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.8125rem;
}

.catalyst-avatar--sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.6875rem;
}

.catalyst-avatar--lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.25rem;
}

.catalyst-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

/* ============================================
   FORM CONTROLS (Catalyst UI Kit)
   Input, Select, Textarea, Checkbox, Radio, Fieldset, Validation
   ============================================ */

/* Base input styling — applies pseudo-element pattern from Catalyst kit */
.catalyst-input,
.catalyst-select,
.catalyst-textarea {
  display: block;
  width: 100%;
  appearance: none;
  border-radius: var(--catalyst-radius-lg);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-family: inherit;
  color: #18181b;
  background-color: #ffffff;
  border: 1px solid var(--catalyst-border);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.catalyst-input:hover,
.catalyst-select:hover,
.catalyst-textarea:hover {
  border-color: var(--catalyst-border-hover);
}

.catalyst-input:focus,
.catalyst-select:focus,
.catalyst-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.catalyst-input::placeholder,
.catalyst-textarea::placeholder {
  color: #a1a1aa;
}

html.dark-mode .catalyst-input,
html.dark-mode .catalyst-select,
html.dark-mode .catalyst-textarea {
  color: #f4f4f5;
  background-color: var(--catalyst-bg-subtle);
  border-color: var(--catalyst-border);
}

html.dark-mode .catalyst-input:hover,
html.dark-mode .catalyst-select:hover,
html.dark-mode .catalyst-textarea:hover {
  border-color: var(--catalyst-border-hover);
}

html.dark-mode .catalyst-input::placeholder,
html.dark-mode .catalyst-textarea::placeholder {
  color: #52525b;
}

/* Select chevron */
.catalyst-select {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23a1a1aa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  cursor: pointer;
}

/* Textarea specific */
.catalyst-textarea {
  resize: vertical;
  min-height: 5rem;
}

/* Custom checkbox */
.catalyst-checkbox {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--catalyst-border);
  border-radius: 0.3125rem;
  background-color: #ffffff;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  flex-shrink: 0;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.catalyst-checkbox:hover {
  border-color: var(--catalyst-border-hover);
}

.catalyst-checkbox:checked {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.catalyst-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.0625rem;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.catalyst-checkbox:focus-visible {
  outline: 2px solid var(--catalyst-ring-focus);
  outline-offset: 2px;
}

html.dark-mode .catalyst-checkbox {
  background-color: var(--catalyst-bg-subtle);
  border-color: var(--catalyst-border);
}

html.dark-mode .catalyst-checkbox:checked {
  background-color: #6366f1;
  border-color: #6366f1;
}

/* Custom radio */
.catalyst-radio {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--catalyst-border);
  border-radius: 9999px;
  background-color: #ffffff;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  flex-shrink: 0;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.catalyst-radio:hover {
  border-color: var(--catalyst-border-hover);
}

.catalyst-radio:checked {
  border-color: #4f46e5;
  background-color: #4f46e5;
}

.catalyst-radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: #ffffff;
}

.catalyst-radio:focus-visible {
  outline: 2px solid var(--catalyst-ring-focus);
  outline-offset: 2px;
}

html.dark-mode .catalyst-radio {
  background-color: var(--catalyst-bg-subtle);
  border-color: var(--catalyst-border);
}

html.dark-mode .catalyst-radio:checked {
  background-color: #6366f1;
  border-color: #6366f1;
}

/* Fieldset & Legend (Catalyst kit pattern) */
.catalyst-fieldset {
  border: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.catalyst-legend {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  color: #18181b;
  padding: 0 0 0.5rem;
  margin-bottom: 0;
}

html.dark-mode .catalyst-legend {
  color: #f4f4f5;
}

.catalyst-field-description {
  font-size: 0.8125rem;
  color: #71717a;
  margin-top: 0.25rem;
}

html.dark-mode .catalyst-field-description {
  color: #52525b;
}

/* Validation states */
.catalyst-invalid,
.catalyst-input:invalid:not(:placeholder-shown),
.catalyst-select:invalid,
.catalyst-textarea:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}

.catalyst-invalid:focus,
.catalyst-input:invalid:not(:placeholder-shown):focus,
.catalyst-select:invalid:focus,
.catalyst-textarea:invalid:not(:placeholder-shown):focus {
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

html.dark-mode .catalyst-invalid {
  border-color: #f87171;
}

.catalyst-error-text {
  font-size: 0.8125rem;
  color: #dc2626;
  margin-top: 0.25rem;
}

html.dark-mode .catalyst-error-text {
  color: #f87171;
}

/* Disabled form controls */
.catalyst-input:disabled,
.catalyst-select:disabled,
.catalyst-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f4f4f5;
}

html.dark-mode .catalyst-input:disabled,
html.dark-mode .catalyst-select:disabled,
html.dark-mode .catalyst-textarea:disabled {
  background-color: #18181b;
}

/* ============================================
   TOGGLE SWITCH (checkbox replacement)
   ============================================ */

.catalyst-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}

.catalyst-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.catalyst-toggle-track {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  background-color: #d4d4d8;
  border-radius: 9999px;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.catalyst-toggle input:checked + .catalyst-toggle-track {
  background-color: #4f46e5;
}

.catalyst-toggle-track::after {
  content: '';
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  background-color: #ffffff;
  border-radius: 9999px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.catalyst-toggle input:checked + .catalyst-toggle-track::after {
  transform: translateX(1rem);
}

.catalyst-toggle input:focus-visible + .catalyst-toggle-track {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

html.dark-mode .catalyst-toggle-track,
html.dark .catalyst-toggle-track {
  background-color: #52525b;
}

html.dark-mode .catalyst-toggle input:checked + .catalyst-toggle-track,
html.dark .catalyst-toggle input:checked + .catalyst-toggle-track {
  background-color: #6366f1;
}

.catalyst-toggle-label {
  font-size: 0.875rem;
  color: #52525b;
}

html.dark-mode .catalyst-toggle-label,
html.dark .catalyst-toggle-label {
  color: #a1a1aa;
}

/* ============================================
   SKELETON LOADING
   ============================================ */

@keyframes catalyst-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.catalyst-skeleton {
  background: linear-gradient(90deg, #e4e4e7 25%, #d4d4d8 50%, #e4e4e7 75%);
  background-size: 200% 100%;
  animation: catalyst-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--catalyst-radius-lg);
}

html.dark-mode .catalyst-skeleton,
html.dark .catalyst-skeleton {
  background: linear-gradient(90deg, #27272a 25%, #3f3f46 50%, #27272a 75%);
  background-size: 200% 100%;
}

.catalyst-skeleton-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f4f4f5;
}

html.dark-mode .catalyst-skeleton-row,
html.dark .catalyst-skeleton-row {
  border-bottom-color: #27272a;
}

.catalyst-skeleton-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
}

.catalyst-skeleton-line {
  height: 0.75rem;
  border-radius: 0.25rem;
}

.catalyst-skeleton-line--short { width: 40%; }
.catalyst-skeleton-line--medium { width: 65%; }
.catalyst-skeleton-line--long { width: 85%; }

/* ============================================
   DRAG-DROP OVERLAY (Compose)
   ============================================ */

.catalyst-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(79, 70, 229, 0.1);
  backdrop-filter: blur(2px);
  border: 3px dashed #6366f1;
  pointer-events: none;
}

.catalyst-drop-overlay.active {
  display: flex;
}

.catalyst-drop-overlay-content {
  text-align: center;
  padding: 2rem;
}

.catalyst-drop-overlay-icon {
  width: 3rem;
  height: 3rem;
  color: #4f46e5;
  margin: 0 auto 0.75rem;
}

.catalyst-drop-overlay-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: #4f46e5;
}

.catalyst-drop-overlay-hint {
  font-size: 0.8125rem;
  color: #71717a;
  margin-top: 0.25rem;
}

/* ============================================
   UPLOAD PROGRESS BAR
   ============================================ */

.catalyst-upload-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: #52525b;
}

html.dark-mode .catalyst-upload-progress,
html.dark .catalyst-upload-progress {
  color: #a1a1aa;
}

.catalyst-upload-bar {
  flex: 1;
  height: 0.375rem;
  background-color: #e4e4e7;
  border-radius: 9999px;
  overflow: hidden;
}

html.dark-mode .catalyst-upload-bar,
html.dark .catalyst-upload-bar {
  background-color: #3f3f46;
}

.catalyst-upload-fill {
  height: 100%;
  background-color: #6366f1;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.catalyst-upload-pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
  text-align: right;
}

/* ============================================
   AUTO-SAVE INDICATOR
   ============================================ */

.catalyst-autosave {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #71717a;
  transition: opacity 0.3s;
}

html.dark-mode .catalyst-autosave,
html.dark .catalyst-autosave {
  color: #52525b;
}

.catalyst-autosave-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: #a1a1aa;
  transition: background-color 0.3s;
}

.catalyst-autosave--saving .catalyst-autosave-dot {
  background-color: #f59e0b;
  animation: catalyst-pulse 1s ease-in-out infinite;
}

.catalyst-autosave--saved .catalyst-autosave-dot {
  background-color: #22c55e;
}

@keyframes catalyst-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================
   FOCUS RINGS & ACCESSIBILITY
   ============================================ */

/* Global focus-visible ring */
*:focus-visible {
  outline: 2px solid var(--catalyst-ring-focus);
  outline-offset: 2px;
}

/* Remove default outline for mouse clicks */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Skip-to-content link */
.catalyst-skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 99999;
  padding: 0.75rem 1.25rem;
  background-color: #4f46e5;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0.5rem;
  text-decoration: none;
  transition: top 0.2s;
}

.catalyst-skip-link:focus {
  top: 0;
}

/* Keyboard navigation indicator on rows */
#messagelist tbody tr:focus-visible,
#contacts-table tr:focus-visible {
  outline: 2px solid var(--catalyst-ring-focus);
  outline-offset: -2px;
  border-radius: 0.25rem;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .catalyst-skeleton {
    animation: none;
  }

  .catalyst-toast {
    transition: none !important;
  }
}

/* ============================================
   MESSAGE LIST HOVER ENHANCEMENTS
   ============================================ */

#messagelist tbody tr {
  transition: background-color 0.1s, box-shadow 0.1s;
}

#messagelist tbody tr:hover {
  box-shadow: inset 3px 0 0 #6366f1;
}

html.dark-mode #messagelist tbody tr:hover {
  box-shadow: inset 3px 0 0 #818cf8;
}

#messagelist tbody tr.selected:hover {
  box-shadow: none;
}

/* Row actions fade in on hover */
#messagelist tbody tr .catalyst-row-actions {
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

#messagelist tbody tr:hover .catalyst-row-actions {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   SEARCH PANEL ENHANCEMENT
   ============================================ */

.catalyst-search-expanded {
  background-color: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 0.625rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.dark-mode .catalyst-search-expanded,
html.dark .catalyst-search-expanded {
  background-color: #18181b;
  border-color: #3f3f46;
}

.catalyst-search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.catalyst-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid #e4e4e7;
  background-color: #ffffff;
  color: #52525b;
}

.catalyst-search-chip:hover,
.catalyst-search-chip.active {
  background-color: #eff0fe;
  border-color: #c7d2fe;
  color: #4f46e5;
}

html.dark-mode .catalyst-search-chip,
html.dark .catalyst-search-chip {
  background-color: #27272a;
  border-color: #3f3f46;
  color: #a1a1aa;
}

html.dark-mode .catalyst-search-chip:hover,
html.dark-mode .catalyst-search-chip.active,
html.dark .catalyst-search-chip:hover,
html.dark .catalyst-search-chip.active {
  background-color: #312e81;
  border-color: #4338ca;
  color: #a5b4fc;
}

/* ============================================
   RECIPIENT CHIPS (Compose)
   ============================================ */

.catalyst-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.125rem 0.125rem 0.5rem;
  background-color: #eff0fe;
  border: 1px solid #c7d2fe;
  border-radius: 9999px;
  font-size: 0.8125rem;
  color: #4338ca;
  max-width: 200px;
  transition: all 0.15s;
}

.catalyst-recipient-chip:hover {
  background-color: #e0e7ff;
  border-color: #818cf8;
}

html.dark-mode .catalyst-recipient-chip,
html.dark .catalyst-recipient-chip {
  background-color: #312e81;
  border-color: #4338ca;
  color: #a5b4fc;
}

.catalyst-recipient-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalyst-recipient-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: transparent;
  border: none;
  color: #818cf8;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.catalyst-recipient-chip-remove:hover {
  background-color: #dc2626;
  color: #ffffff;
}

/* ============================================
   SETTINGS COLOR PICKER
   ============================================ */

.catalyst-color-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.catalyst-color-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 2px solid #e4e4e7;
  cursor: pointer;
  transition: border-color 0.15s;
}

.catalyst-color-swatch:hover {
  border-color: #6366f1;
}

html.dark-mode .catalyst-color-swatch,
html.dark .catalyst-color-swatch {
  border-color: #3f3f46;
}

/* ============================================
   TYPOGRAPHY (Catalyst UI Kit)
   ============================================ */

.catalyst-heading {
  font-weight: 600;
  color: #18181b;
  line-height: 1.3;
}

html.dark-mode .catalyst-heading {
  color: #ffffff;
}

.catalyst-text {
  color: #52525b;
  line-height: 1.5;
}

html.dark-mode .catalyst-text {
  color: #a1a1aa;
}

.catalyst-text-muted {
  color: #71717a;
}

html.dark-mode .catalyst-text-muted {
  color: #52525b;
}

.catalyst-link {
  color: #18181b;
  text-decoration: none;
  font-weight: 500;
}

.catalyst-link:hover {
  text-decoration: underline;
}

html.dark-mode .catalyst-link {
  color: #f4f4f5;
}

.catalyst-code {
  display: inline;
  border-radius: 0.25rem;
  background-color: rgb(9 9 11 / 0.05);
  padding: 0.0625rem 0.3125rem;
  font-size: 0.875em;
  font-family: 'Courier New', ui-monospace, monospace;
}

html.dark-mode .catalyst-code {
  background-color: rgb(255 255 255 / 0.05);
}

/* ============================================
   DIVIDER PATTERN
   ============================================ */

.catalyst-divider {
  border: none;
  height: 1px;
  background-color: var(--catalyst-border);
  margin: 0;
}

.catalyst-divider--soft {
  background-color: rgb(9 9 11 / 0.05);
}

html.dark-mode .catalyst-divider--soft {
  background-color: rgb(255 255 255 / 0.05);
}

/* ============================================
   TOUCH TARGETS (mobile a11y)
   ============================================ */

.catalyst-touch-target {
  position: relative;
}

.catalyst-touch-target::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

/* ============================================
   CATALYST PAGINATION (global — mail, addressbook)
   flex: [< Previous] ... count ... [Next >]
   ============================================ */

.catalyst-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--catalyst-border);
  flex-shrink: 0;
}

html.dark-mode .catalyst-pagination {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.catalyst-pagination-prev {
  flex: 1 1 0%;
  display: flex;
}

.catalyst-pagination-next {
  flex: 1 1 0%;
  display: flex;
  justify-content: flex-end;
}

.catalyst-pagination-pages {
  flex-shrink: 0;
}

.catalyst-pagination-count {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #3f3f46;
  white-space: nowrap;
  user-select: none;
}

html.dark-mode .catalyst-pagination-count {
  color: #a1a1aa;
}

.catalyst-pagination-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #3f3f46;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background-color 0.15s;
  white-space: nowrap;
}

html.dark-mode .catalyst-pagination-btn {
  color: #d4d4d8;
}

.catalyst-pagination-btn:hover {
  background-color: rgba(9, 9, 11, 0.05);
}

html.dark-mode .catalyst-pagination-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.catalyst-pagination-btn.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Arrow icons via ::before (prev) and ::after (next) */
.catalyst-pagination-prev .catalyst-pagination-btn::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 8H13.25M2.75 8L5.25 5.5M2.75 8L5.25 10.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 8H13.25M2.75 8L5.25 5.5M2.75 8L5.25 10.5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.catalyst-pagination-next .catalyst-pagination-btn::after {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.25 8L2.75 8M13.25 8L10.75 10.5M13.25 8L10.75 5.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.25 8L2.75 8M13.25 8L10.75 10.5M13.25 8L10.75 5.5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.catalyst-pagination-label {
  display: none;
}

.catalyst-pagination-btn {
  padding: 0.375rem;
}

/* ============================================
   POPUP MENUS (global — used in mail, settings, addressbook)
   ============================================ */

.popupmenu {
  display: none;
  position: fixed;
  z-index: 10000;
  min-width: 180px;
  background-color: rgb(255 255 255 / 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--catalyst-radius-xl);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px var(--catalyst-border);
  padding: 0.25rem;
  overflow: hidden;
  overflow-y: auto;
  max-height: 20rem;
}

html.dark-mode .popupmenu {
  background-color: rgb(39 39 42 / 0.85);
}

.popupmenu.open {
  display: block;
}

.popupmenu .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popupmenu .menu li {
  margin: 0;
}

.popupmenu .menu li.separator {
  border-top: 1px solid rgb(9 9 11 / 0.08);
  margin: 0.25rem 0;
}

.popupmenu .menu li.separator label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #71717a;
  padding: 0.375rem 0.75rem 0.125rem;
}

html.dark-mode .popupmenu .menu li.separator {
  border-top-color: rgb(255 255 255 / 0.08);
}

html.dark-mode .popupmenu .menu li.separator label {
  color: #52525b;
}

.popupmenu .menu li.section-heading {
  font-size: 0.75rem;
  font-weight: 500;
  color: #71717a;
  padding: 0.25rem 0.875rem;
  pointer-events: none;
}

html.dark-mode .popupmenu .menu li.section-heading {
  color: #52525b;
}

.popupmenu .menu li a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #18181b;
  text-decoration: none;
  border-radius: 0.375rem;
  transition: all 0.1s;
  white-space: nowrap;
}

html.dark-mode .popupmenu .menu li a {
  color: #f4f4f5;
}

.popupmenu .menu li a:hover,
.popupmenu .menu li a:focus-visible {
  background-color: #3b82f6;
  color: #ffffff;
  outline: none;
}

html.dark-mode .popupmenu .menu li a:hover,
html.dark-mode .popupmenu .menu li a:focus-visible {
  background-color: #3b82f6;
  color: #ffffff;
}

.popupmenu .menu li a.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Hide disabled items in threads menu to prevent spacing gaps */
#threads-menu .menu li:has(> a.disabled) {
  display: none;
}

/* Popupmenu item icons — Heroicons outline via mask-image */
.popupmenu .menu li a::before {
  content: '';
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.65;
}

/* Print — printer */
.popupmenu .menu li a.print::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z'/%3E%3C/svg%3E");
}

/* Forward — arrow-uturn-right */
.popupmenu .menu li a.forward::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 15l6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 15l6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3'/%3E%3C/svg%3E");
}

/* Mark read — envelope-open */
.popupmenu .menu li a.read::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z'/%3E%3C/svg%3E");
}

/* Mark unread — envelope */
.popupmenu .menu li a.unread::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E");
}

/* Flag — star */
.popupmenu .menu li a.flag::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z'/%3E%3C/svg%3E");
}

/* Unflag — same star outline */
.popupmenu .menu li a.unflag::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z'/%3E%3C/svg%3E");
}

/* Download/Export — arrow-down-tray */
.popupmenu .menu li a.download::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E");
}

/* Edit as new — pencil-square */
.popupmenu .menu li a.edit::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E");
}

/* View source — code-bracket */
.popupmenu .menu li a.source::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5'/%3E%3C/svg%3E");
}

/* Move to — folder-arrow-down */
.popupmenu .menu li a.move::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z'/%3E%3C/svg%3E");
}

/* Copy to — document-duplicate */
.popupmenu .menu li a.copy::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75'/%3E%3C/svg%3E");
}

/* Open in new window — arrow-top-right-on-square */
.popupmenu .menu li a.extwin::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25'/%3E%3C/svg%3E");
}

/* Import — arrow-up-tray */
.popupmenu .menu li a.import::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5'/%3E%3C/svg%3E");
}

/* Bounce — paper-airplane */
.popupmenu .menu li a.forward.bounce::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5'/%3E%3C/svg%3E");
}

/* Undo delete — arrow-uturn-left */
.popupmenu .menu li a.undo::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E");
}

/* Create/Add — plus */
.popupmenu .menu li a.create::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E");
}

/* Rename — pencil */
.popupmenu .menu li a.rename::before,
.popupmenu .menu li a.group.rename::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125'/%3E%3C/svg%3E");
}

/* Delete — trash */
.popupmenu .menu li a.delete::before,
.popupmenu .menu li a.group.delete::before,
.popupmenu .menu li a.search.delete::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E");
}

/* Save search — bookmark */
.popupmenu .menu li a.search:not(.delete)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z'/%3E%3C/svg%3E");
}

/* Export — arrow-down-tray (reuse download) */
.popupmenu .menu li a.export::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E");
}

/* Selection toggle — check-circle */
.popupmenu .menu li a.selection::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

/* Select all — squares-2x2 */
.popupmenu .menu li a.select.all::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z' /%3E%3C/svg%3E");
}

/* Select unread — envelope */
.popupmenu .menu li a.select.unread::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E");
}

/* Select flagged — flag */
.popupmenu .menu li a.select.flagged::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5' /%3E%3C/svg%3E");
}

/* Select page — document */
.popupmenu .menu li a.select.page::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E");
}

/* Select invert — arrows-right-left */
.popupmenu .menu li a.select.invert::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5'/%3E%3C/svg%3E");
}

/* Select none — x-circle */
.popupmenu .menu li a.select.none::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

/* QR Code — qr-code */
.popupmenu .menu li a.qrcode::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z'/%3E%3C/svg%3E");
}

/* Assign to group — user-plus */
.popupmenu .menu li a.assigngroup::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z'/%3E%3C/svg%3E");
}

/* Remove from group — user-minus */
.popupmenu .menu li a.removegroup::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M22 10.5h-6m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M22 10.5h-6m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z'/%3E%3C/svg%3E");
}

/* Recipient — user-plus (headers menu: Cc, Bcc, Reply-To, Follow-Up-To) */
.popupmenu .menu li a.recipient::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z'/%3E%3C/svg%3E");
}

/* Responses — edit */
.popupmenu .menu li a.responses::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E");
}

/* Expand all — arrows-pointing-out */
.popupmenu .menu li a.expand::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15' /%3E%3C/svg%3E");
}

/* Expunge/Compact — archive-box-x-mark */
.popupmenu .menu li a.expunge::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m6 4.125 2.25 2.25m0 0 2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m6 4.125 2.25 2.25m0 0 2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z'/%3E%3C/svg%3E");
}

/* Purge/Empty — trash (Heroicons) */
.popupmenu .menu li a.purge::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E");
}

/* Collapse all — arrows-pointing-in */
.popupmenu .menu li a.collapse::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25' /%3E%3C/svg%3E");
}

/* Spell menu items — globe/language icon */
#spell-menu .menu li a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802'/%3E%3C/svg%3E");
}

/* Selected spell language — highlight */
#spell-menu .menu li a.selected {
  background-color: #eff0fe;
  color: #4338ca;
  font-weight: 600;
}

html.dark-mode #spell-menu .menu li a.selected {
  background-color: #312e81;
  color: #a5b4fc;
}

/* Icon inherits hover color */
.popupmenu .menu li a:hover::before,
.popupmenu .menu li a:focus-visible::before {
  opacity: 1;
}

/* ============================================
   ENTITY SELECTOR POPUPS (addressbook-selector, contactgroup-selector, folder-selector)
   Dynamically created by Roundcube JS — .popupmenu > ul.toolbarmenu.menu > li > a
   ============================================ */

#addressbook-selector,
#contactgroup-selector,
#folder-selector {
  min-width: 220px;
}

/* Default icon for selector items: address-book icon */
#addressbook-selector .menu li a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z' /%3E%3C/svg%3E");
}

/* Group selector: user-group icon */
#contactgroup-selector .menu li a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z' /%3E%3C/svg%3E");
}

/* Folder selector: folder icon */
#folder-selector .menu li a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z'/%3E%3C/svg%3E");
}

/* ============================================
   GOOGIESPELL (spellcheck popup)
   ============================================ */

.googie_window {
  position: absolute;
  z-index: 10001;
  min-width: 140px;
  background-color: rgb(255 255 255 / 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--catalyst-radius-xl);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px var(--catalyst-border);
  padding: 0.25rem;
  overflow: hidden;
  font-family: inherit;
}

html.dark-mode .googie_window {
  background-color: rgb(39 39 42 / 0.95);
}

.googie_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.googie_list td {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: #18181b;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: background-color 0.1s;
}

.googie_list td:hover {
  background-color: #f4f4f5;
  color: #18181b;
}

html.dark-mode .googie_list td {
  color: #f4f4f5;
}

html.dark-mode .googie_list td:hover {
  background-color: #3f3f46;
}

/* Spellcheck highlighted words */
.googie_link {
  background-color: #fef3c7;
  border-bottom: 2px solid #f59e0b;
  cursor: pointer;
  padding: 0 1px;
  border-radius: 2px;
}

html.dark-mode .googie_link {
  background-color: #78350f;
  border-bottom-color: #d97706;
  color: #fef3c7;
}

/* ============================================
   AUTOCOMPLETE / CONTACT SUGGESTIONS (Combobox)
   ============================================ */

.catalyst-autocomplete,
#rcmKSearchpane {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  overflow: hidden;
  padding: 0.25rem;
}

html.dark-mode .catalyst-autocomplete,
html.dark-mode #rcmKSearchpane {
  background: #27272a;
  border-color: #3f3f46;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
}

.catalyst-autocomplete-list,
#rcmKSearchpane ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#rcmKSearchpane li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #3f3f46;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background-color 0.1s, color 0.1s;
}

#rcmKSearchpane li:hover,
#rcmKSearchpane li.selected {
  background-color: #f4f4f5;
  color: #18181b;
}

html.dark-mode #rcmKSearchpane li {
  color: #d4d4d8;
}

html.dark-mode #rcmKSearchpane li:hover,
html.dark-mode #rcmKSearchpane li.selected {
  background-color: #3f3f46;
  color: #f4f4f5;
}

/* Contact icon */
#rcmKSearchpane li i.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  background-color: #e0e7ff;
  border-radius: 9999px;
  color: #4f46e5;
}

#rcmKSearchpane li i.icon::before {
  content: '';
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z' /%3E%3C/svg%3E");
}

html.dark-mode #rcmKSearchpane li i.icon {
  background-color: #312e81;
  color: #a5b4fc;
}

/* Group icon */
#rcmKSearchpane li.group i.icon {
  background-color: #dcfce7;
  color: #16a34a;
}

#rcmKSearchpane li.group i.icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z' /%3E%3C/svg%3E");
}

html.dark-mode #rcmKSearchpane li.group i.icon {
  background-color: #052e16;
  color: #4ade80;
}

/* Highlight matching text */
#rcmKSearchpane li b {
  font-weight: 700;
  color: #18181b;
}

html.dark-mode #rcmKSearchpane li b {
  color: #ffffff;
}

/* ============================================
   PRINT STYLESHEET
   ============================================ */

@media print {
  .catalyst-sidebar,
  .catalyst-sidebar-overlay,
  .catalyst-sidebar-toggle,
  .catalyst-toast-container,
  .catalyst-modal-backdrop,
  .catalyst-alert-backdrop,
  .ui-widget-overlay,
  .ui-dialog,
  .catalyst-shortcuts-panel,
  .catalyst-skip-link,
  .catalyst-drop-overlay,
  .toolbar,
  .compose-toolbar,
  .msgpart-toolbar,
  nav,
  .popupmenu {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }

  html.dark-mode,
  html.dark {
    color-scheme: light;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .catalyst-toast-container {
    bottom: 4.5rem;
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
  }

  .catalyst-modal {
    max-width: 95%;
    margin: 1rem;
    border-radius: 1.5rem 1.5rem var(--catalyst-radius-2xl) var(--catalyst-radius-2xl);
  }

  .catalyst-shortcuts-panel {
    max-width: 95%;
  }
}

@media (max-width: 640px) {
  .catalyst-toast-container {
    bottom: 4rem;
  }

  /* Dialog takes more width on mobile */
  .ui-dialog {
    width: 95% !important;
    max-width: none;
  }

  .ui-dialog .ui-dialog-buttonset {
    flex-direction: column-reverse !important;
  }

  .ui-dialog .ui-dialog-buttonset button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================
   RESPONSIVE — Layout Mode Classes (set by JS)
   ============================================ */

/* Touch-friendly sizing — minimum 44px tap targets */
html.touch .catalyst-list-toolbar-btn,
html.touch .addressbook-toolbar-btn,
html.touch .compose-icon-btn,
html.touch .compose-action-btn,
html.touch .msg-view-btn {
  min-height: 2.75rem;
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Back button — visible only on mobile */
.back-list-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  color: #52525b;
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.back-list-button:hover,
.back-list-button:active {
  background-color: rgba(0, 0, 0, 0.05);
}

html.dark-mode .back-list-button {
  color: #a1a1aa;
}

html.dark-mode .back-list-button:hover,
html.dark-mode .back-list-button:active {
  background-color: rgba(255, 255, 255, 0.05);
}

html.layout-normal .back-list-button,
html.layout-large .back-list-button {
  display: none !important;
}

html.layout-phone .back-list-button,
html.layout-small .back-list-button {
  display: inline-flex !important;
}

/* ============================================
   FLOATING ACTION BUTTON (Compose on mobile)
   ============================================ */

.catalyst-fab {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: #4f46e5;
  color: #ffffff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
  z-index: 30;
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.catalyst-fab:hover {
  background: #4338ca;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.5);
}

.catalyst-fab:active {
  transform: scale(0.95);
}

.catalyst-fab svg {
  width: 1.5rem;
  height: 1.5rem;
}

html.layout-phone .catalyst-fab,
html.layout-small .catalyst-fab {
  display: flex;
}

html.dark-mode .catalyst-fab {
  background: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

html.dark-mode .catalyst-fab:hover {
  background: #818cf8;
}

/* Hide compose button in sidebar on mobile (FAB replaces it) */
html.layout-phone .catalyst-sidebar-compose,
html.layout-small .catalyst-sidebar-compose {
  display: none;
}