/* gm_core AI KVKK, Model Info, Header Layout, Star Toggle & Full Translation Enhancements */
#ai-menu .menu > li.gm-ai-sep {
  height: 1px;
  margin: 6px 0;
  background: var(--color-outline-variant, #e0e3e7);
  list-style: none;
}

#ai-menu .menu > li > a.gm-ai-info::before {
  content: var(--ico-info, '\e88e');
  color: var(--color-on-surface-variant);
}

#ai-menu .menu > li > a.gm-ai-disable {
  color: var(--color-error, #b3261e);
}

#ai-menu .menu > li > a.gm-ai-disable::before {
  content: var(--ico-close, '\e5cd');
  color: var(--color-error, #b3261e);
}

/* Fix messagelist star (span.flag) clickability in split-pane & wide views */
table.messagelist:not(.records-table) span.flag {
  position: relative;
  z-index: 6;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 50%;
  transition: transform 100ms ease, background-color 120ms ease;
}

table.messagelist:not(.records-table) span.flag:hover {
  background-color: var(--color-state-hover, rgba(60, 64, 67, 0.1));
  transform: scale(1.1);
}

/* Top toolbar Star button (between markmessage envelope and 3-dot more menu) */
#mailtoolbar > a.gm-toolbar-star::before {
  content: var(--ico-star);
  font-family: var(--font-icons);
  font-size: 20px;
  line-height: 1;
}

#mailtoolbar > a.gm-toolbar-star.flagged::before {
  content: var(--ico-star-filled);
  color: #f4b400;
  font-variation-settings: 'FILL' 1;
}

#mailtoolbar > a.gm-toolbar-star.disabled {
  opacity: 0.38;
  pointer-events: none;
}

/* Move headers-summary arrow inline right next to sender + date */
#message-header .header-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

#message-header .header-summary.gm-hidden {
  display: none !important;
}

#message-header .header-summary > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

#message-header .header-summary .gm-inline-date {
  color: var(--color-meta, #5f6368);
  font-size: var(--text-xs, 12px);
  font-weight: 400;
  margin-left: 2px;
}

#message-header .header-summary a.headers-summary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: 2px;
  border-radius: 50%;
  color: var(--color-meta, #5f6368);
  text-decoration: none;
  vertical-align: middle;
  transition: background-color 120ms ease, color 120ms ease;
}

#message-header .header-summary a.headers-summary:hover {
  background: var(--color-state-hover, rgba(60, 64, 67, 0.08));
  color: var(--color-on-surface, #1f1f1f);
}

#message-header .header-summary a.headers-summary::after {
  content: var(--ico-arrow-drop-down);
  font-family: var(--font-icons);
  font-size: 20px;
  line-height: 1;
  transition: transform 150ms var(--ease-standard, ease);
}

#message-header .header-summary a.headers-summary.expanded::after {
  transform: rotate(180deg);
}

/* Hide relocated links (Üst bilgiler & Düz metin/HTML) from message reading area */
#message-header .header-links a.headers-all,
#message-header .header-links a.plain,
#message-header .header-links a.html,
#message-header .header-links a[class*='format'],
#message-header .header-links a[onclick*='change_format'] {
  display: none !important;
}

/* Menu icons for relocated items inside 3-dot #message-menu */
#message-menu .menu a.headers-all::before {
  content: var(--ico-description);
}

#message-menu .menu a.plain::before,
#message-menu .menu a.html::before {
  content: var(--ico-code);
}

/* Secondary pill button in .header-links for full translation */
.header-links a.ai-translate-full {
  color: var(--color-primary, #0b57d0);
  font-weight: 500;
}

.header-links a.ai-translate-full::before {
  content: var(--ico-translate, var(--ico-language));
  color: var(--color-primary, #0b57d0);
}

/* Summary card actions & full translation section */
.gm-ai-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #dfca85;
}
html.dark-mode .gm-ai-card-actions {
  border-top-color: #4d4020;
}

.gm-ai-translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #d4b146;
  background: #fffdf2;
  color: #6b4c00;
  font: 500 12.5px / 1 var(--font-sans, sans-serif);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.gm-ai-translate-btn:hover:not(:disabled) {
  background: #faecc0;
  border-color: #b48309;
}

html.dark-mode .gm-ai-translate-btn {
  background: #362e1b;
  border-color: #785f1e;
  color: #fde68a;
}

html.dark-mode .gm-ai-translate-btn:hover:not(:disabled) {
  background: #453a22;
  border-color: #eab308;
}

.gm-ai-translate-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.gm-ai-translate-btn .ico {
  font-size: 16px;
}

.gm-ai-full-translation {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fffdf2;
  border: 1px solid #e6d39a;
}

.gm-ai-full-translation-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 12.5px / 1.3 var(--font-sans, sans-serif);
  color: #8c6306;
  margin-bottom: 6px;
}

.gm-ai-full-translation-text {
  font: 400 13.5px / 1.55 var(--font-sans, sans-serif);
  color: #2c2411;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html.dark-mode .gm-ai-full-translation {
  background: #231e11;
  border-color: #4d4020;
}

html.dark-mode .gm-ai-full-translation-head {
  color: #facc15;
}

html.dark-mode .gm-ai-full-translation-text {
  color: #f5ebd1;
}

.gm-ai-card-head .gm-ai-quick-disable {
  margin-left: auto;
  margin-right: 4px;
  padding: 2px 10px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--color-outline-variant, #c4c7c5);
  background: transparent;
  color: var(--color-on-surface-variant, #444746);
  font: 500 11.5px / 1 var(--font-sans, sans-serif);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.gm-ai-card-head .gm-ai-quick-disable:hover {
  background: color-mix(in srgb, var(--color-error, #b3261e) 10%, transparent);
  color: var(--color-error, #b3261e);
  border-color: color-mix(in srgb, var(--color-error, #b3261e) 40%, transparent);
}

.gm-ai-card-head .gm-ai-card-close {
  margin-left: 0 !important;
}

.gm-ai-kvkk-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-on-surface);
}

.gm-ai-kvkk-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-secondary-container, #c2e7ff);
  color: var(--color-on-secondary-container, #001d35);
  font-size: 12px;
  font-weight: 600;
}

.gm-ai-kvkk-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

html.gm-ai-disabled #gm-ai-button,
html.gm-ai-disabled a.ai-summarize,
html.gm-ai-disabled a.ai-translate-full,
html.gm-ai-disabled .gm-ai-card {
  display: none !important;
}

/* Unread message count badge next to folder names in #mailboxlist */
.listing.folderlist .unreadcount {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px !important;
  border-radius: 999px;
  background: var(--color-surface-container-highest, #dde3ea);
  color: var(--color-on-surface, #1f1f1f);
  font: 700 11.5px / 1 var(--font-sans, sans-serif);
}

.listing.folderlist li.selected > a .unreadcount {
  background: color-mix(in srgb, var(--color-primary, #0b57d0) 16%, transparent);
  color: var(--color-on-primary-container, #041e49);
}

/* Dark Mode email readability baseline for #messagebody */
html.dark-mode #messagebody,
html.dark-mode #messagebody .message-part,
html.dark-mode #messagebody .message-htmlpart {
  color: var(--color-on-surface, #e3e3e3);
}

html.dark-mode #messagebody a {
  color: #8ab4f8;
}


/* Hosting.com.tr & Cortex Branding (About Dialog + KVKK Modal) */
.gm-hctr-logo {
  height: 32px;
  width: auto;
  display: block;
}

.gm-logo-dark {
  display: none !important;
}

html.dark-mode .gm-logo-light {
  display: none !important;
}

html.dark-mode .gm-logo-dark {
  display: block !important;
}

.gm-about-simple {
  text-align: left;
  color: var(--color-on-surface, #1f1f1f);
  font-size: 13.5px;
  line-height: 1.55;
}

.gm-about-logo-row {
  margin-bottom: 12px;
}

.gm-about-simple h2.sysname {
  margin: 0 0 6px 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.gm-about-simple .gm-about-desc {
  margin: 0 0 14px 0 !important;
  color: var(--color-on-surface-variant, #444746);
}

.gm-about-simple h3 {
  margin: 16px 0 6px 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-on-surface, #1f1f1f);
}

.gm-about-simple p {
  margin: 0 0 8px 0 !important;
  color: var(--color-on-surface-variant, #444746);
}

.gm-kvkk-logo-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-outline-variant, #c4c7c5);
}

.gm-ai-kvkk-list {
  list-style: disc !important;
  margin: 4px 0 !important;
  padding-left: 20px !important;
}

.gm-ai-kvkk-list li {
  margin-bottom: 6px;
}

/* Rich Brand & Geometric SVG Avatars */
.gm-avatar-initial[data-gm-rich-avatar="1"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: none !important;
}

.gm-avatar-initial .gm-avatar-svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

/* ─── Creative Material Symbols Icons for Contacts (Kişiler) Sidebar ─── */
#directorylist li#rcmli0 > a::before,
#directorylist li a[rel="0"]::before,
#directorylist li a[href*="_source=0"]::before,
#directorylist li#rcmli1 > a::before,
#directorylist li a[rel="1"]::before,
#directorylist li a[href*="_source=1"]::before,
#directorylist li#rcmli2 > a::before,
#directorylist li a[rel="2"]::before,
#directorylist li a[href*="_source=2"]::before,
#savedsearchlist li > a::before,
#directorylist li.contactsearch > a::before,
.gm-nav-actions a.gm-nav-action.create::before {
  font-family: var(--font-icons) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  font-style: normal !important;
  font-size: 20px !important;
  line-height: 1 !important;
  width: 20px !important;
  height: 20px !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 1. Kişisel adresler (_source=0): Contacts */
#directorylist li#rcmli0 > a::before,
#directorylist li a[rel="0"]::before,
#directorylist li a[href*="_source=0"]::before {
  content: var(--ico-contacts, '\e0ba') !important;
}

/* 2. Derlenmiş alıcılar (_source=1): Recent Actors */
#directorylist li#rcmli1 > a::before,
#directorylist li a[rel="1"]::before,
#directorylist li a[href*="_source=1"]::before {
  content: var(--ico-recent-actors, '\e03f') !important;
}

/* 3. Güvenilen göndericiler (_source=2): Verified Shield */
#directorylist li#rcmli2 > a::before,
#directorylist li a[rel="2"]::before,
#directorylist li a[href*="_source=2"]::before {
  content: var(--ico-verified-user, '\f013') !important;
}

/* 4. Kaydedilmiş aramalar (#savedsearchlist): Saved Search */
#savedsearchlist li > a::before,
#directorylist li.contactsearch > a::before {
  content: var(--ico-saved-search, '\ea11') !important;
}

/* 5. Grup ekle (.gm-nav-action.create): Group Add */
.gm-nav-actions a.gm-nav-action.create::before {
  content: var(--ico-group-add, '\e7f0') !important;
}

.gm-nav-actions {
  margin-top: 4px;
  padding-top: 4px;
}

.gm-nav-actions a.gm-nav-action.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Uniform 32px pill geometry across Mail, Contacts, Settings & Task Switcher sidebars */
#layout-sidebar .listing.folderlist li > a,
#directorylist li > a,
#savedsearchlist li > a,
#settings-menu li > a,
.gm-nav-task {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px 0 26px !important;
  margin: 1px 0 !important;
  border-radius: 0 var(--radius-lg, 16px) var(--radius-lg, 16px) 0 !important;
  gap: 18px !important;
}

#layout-sidebar .listing.folderlist ul ul li > a,
#directorylist ul ul li > a {
  padding-left: 46px !important;
}

#layout-sidebar .listing.folderlist ul ul ul li > a,
#directorylist ul ul ul li > a {
  padding-left: 66px !important;
}

#directorylist li.selected > a,
#savedsearchlist li.selected > a,
#settings-menu li.selected > a,
#settings-menu li > a.selected {
  background: var(--color-primary-container) !important;
  color: var(--color-on-primary-container) !important;
  font-weight: 700 !important;
}

#directorylist li.selected > a::before,
#savedsearchlist li.selected > a::before,
#settings-menu li.selected > a::before,
#settings-menu li > a.selected::before {
  color: var(--color-on-primary-container) !important;
}

/* ─── Gmail-Style Collapsed Sidebar Rail & Hover-Expand Drawer ─── */
@media (width > 1024px) {
  /* 1. Collapsed Rail (not hovered): center icon across ALL tasks (Mail, Contacts, Settings, Calendar) */
  html.nav-collapsed:not(.gm-nav-peek) body.task-mail #layout-sidebar .listing.folderlist li > a,
  html.nav-collapsed:not(.gm-nav-peek) #directorylist li > a,
  html.nav-collapsed:not(.gm-nav-peek) #savedsearchlist li > a,
  html.nav-collapsed:not(.gm-nav-peek) #settings-menu li > a,
  html.nav-collapsed:not(.gm-nav-peek) .gm-nav-task {
    width: 36px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 2px 0 2px 18px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    border-radius: 16px !important;
    font-size: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }

  html.nav-collapsed:not(.gm-nav-peek) body.task-mail #layout-sidebar .listing.folderlist li > a::before,
  html.nav-collapsed:not(.gm-nav-peek) #directorylist li > a::before,
  html.nav-collapsed:not(.gm-nav-peek) #savedsearchlist li > a::before,
  html.nav-collapsed:not(.gm-nav-peek) #settings-menu li > a::before,
  html.nav-collapsed:not(.gm-nav-peek) .gm-nav-task::before {
    margin: 0 !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
  }

  html.nav-collapsed:not(.gm-nav-peek) #directorylist .treetoggle,
  html.nav-collapsed:not(.gm-nav-peek) #directorylist ul ul {
    display: none !important;
  }

  html.nav-collapsed:not(.gm-nav-peek) .gm-nav-tasks {
    border-top: 0 !important;
    position: relative;
  }

  html.nav-collapsed:not(.gm-nav-peek) .gm-nav-tasks::before {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    margin: 0 0 6px 18px;
    background: var(--color-outline-variant, #c4c7c5);
  }

  /* Disable theme's colliding red dot in collapsed rail since we show the compact corner count badge */
  html.nav-collapsed:not(.gm-nav-peek) body.task-mail #layout-sidebar .listing.folderlist li.unread > a::after {
    display: none !important;
    content: none !important;
  }

  /* Compact unread indicator dot on top-right of folder icon when collapsed */
  html.nav-collapsed:not(.gm-nav-peek) body.task-mail #layout-sidebar .listing.folderlist .unreadcount {
    position: absolute !important;
    top: 3px !important;
    right: 4px !important;
    margin: 0 !important;
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    background: var(--color-primary, #0b57d0) !important;
    box-shadow: 0 0 0 2px var(--color-surface-container-low, #f8fafd) !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  html.dark-mode.nav-collapsed:not(.gm-nav-peek) body.task-mail #layout-sidebar .listing.folderlist .unreadcount {
    background: #8ab4f8 !important;
    color: transparent !important;
    box-shadow: 0 0 0 2px var(--color-surface-container-low, #1e1f20) !important;
  }

  /* Smooth transition for floating sidebar drawer */
  html.nav-collapsed #layout-menu,
  html.nav-collapsed #layout-sidebar {
    position: relative;
    z-index: 120;
    transition: width 160ms cubic-bezier(0.2, 0, 0, 1), box-shadow 160ms cubic-bezier(0.2, 0, 0, 1), background-color 160ms ease;
  }

  /* 2. Hover-Expand Drawer State (html.nav-collapsed.gm-nav-peek) */
  html.nav-collapsed.gm-nav-peek #layout-menu,
  html.nav-collapsed.gm-nav-peek #layout-sidebar {
    width: var(--spacing-nav, 256px) !important;
    background: var(--color-surface-container-low, #f8fafd) !important;
    border-right: 1px solid var(--color-outline-variant, rgba(0, 0, 0, 0.08));
  }

  html.nav-collapsed.gm-nav-peek #layout-menu {
    box-shadow: 8px 6px 20px rgba(0, 0, 0, 0.12);
  }

  html.nav-collapsed.gm-nav-peek #layout-sidebar {
    box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.14);
    padding-right: 16px !important;
  }

  html.dark-mode.nav-collapsed.gm-nav-peek #layout-menu,
  html.dark-mode.nav-collapsed.gm-nav-peek #layout-sidebar {
    background: var(--color-surface-container-low, #1e1f20) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 10px 8px 26px rgba(0, 0, 0, 0.48);
  }

  html.nav-collapsed:not(.gm-nav-peek) .gm-compose {
    width: 46px !important;
    height: 46px !important;
    margin-left: 13px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  html.nav-collapsed.gm-nav-peek .gm-compose {
    width: auto !important;
    height: 46px !important;
    padding: 0 20px 0 14px !important;
    gap: 12px !important;
    justify-content: flex-start !important;
  }

  html.nav-collapsed.gm-nav-peek .gm-compose-label {
    display: inline !important;
  }

  html.nav-collapsed.gm-nav-peek .gm-nav-task,
  html.nav-collapsed.gm-nav-peek body.task-mail #layout-sidebar .listing.folderlist li > a,
  html.nav-collapsed.gm-nav-peek #directorylist li > a,
  html.nav-collapsed.gm-nav-peek #savedsearchlist li > a,
  html.nav-collapsed.gm-nav-peek #settings-menu li > a {
    width: auto !important;
    padding: 0 12px 0 26px !important;
    margin: 1px 0 !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
    font-size: var(--text-base) !important;
    overflow: hidden !important;
  }

  html.nav-collapsed.gm-nav-peek body.task-mail #layout-sidebar .listing.folderlist ul ul li > a,
  html.nav-collapsed.gm-nav-peek #directorylist ul ul li > a {
    padding-left: 46px !important;
  }

  html.nav-collapsed.gm-nav-peek body.task-mail #layout-sidebar .listing.folderlist ul ul ul li > a,
  html.nav-collapsed.gm-nav-peek #directorylist ul ul ul li > a {
    padding-left: 66px !important;
  }

  html.nav-collapsed.gm-nav-peek .gm-nav-label,
  html.nav-collapsed.gm-nav-peek body.task-mail #layout-sidebar .listing.folderlist li > a > .name {
    display: inline !important;
  }

  html.nav-collapsed.gm-nav-peek body.task-mail #layout-sidebar .listing.folderlist .unreadcount {
    display: inline-flex !important;
    position: static !important;
    margin-left: auto !important;
  }

  html.nav-collapsed.gm-nav-peek body.task-mail #layout-sidebar .listing.treelist .treetoggle,
  html.nav-collapsed.gm-nav-peek #directorylist .treetoggle {
    display: grid !important;
  }

  html.nav-collapsed.gm-nav-peek body.task-mail #layout-sidebar .listing.folderlist ul ul,
  html.nav-collapsed.gm-nav-peek #directorylist ul ul {
    display: block !important;
  }

  html.nav-collapsed.gm-nav-peek #layout-sidebar > .footer {
    display: block !important;
  }

  html.nav-collapsed.gm-nav-peek body.task-mail #layout-sidebar .listing.folderlist li.unread > a::after {
    display: none !important;
  }
}

/* Attachment / Image Preview Toolbar Icons (messagepart.html) */
#image-tools {
  display: none !important;
}

.toolbar a.info::before,
.menu a.info::before,
.button.icon.info::before {
  content: var(--ico-info) !important;
}

.button.icon.tools::before,
.toolbar a.tools::before {
  content: var(--ico-tune) !important;
}

.toolbar a.actions::before,
.button.icon.actions::before {
  content: var(--ico-more-vert) !important;
}

.toolbar a.status::before {
  content: var(--ico-check-circle) !important;
}

.toolbar a.zoomin::before,
.menu a.zoomin::before,
.button.icon.zoomin::before {
  content: var(--ico-zoom-in, '\e8ff') !important;
}

.toolbar a.zoomout::before,
.menu a.zoomout::before,
.button.icon.zoomout::before {
  content: var(--ico-zoom-out, '\e900') !important;
}

.toolbar a.rotate::before,
.menu a.rotate::before,
.button.icon.rotate::before {
  content: var(--ico-rotate-right, '\e41a') !important;
}

.gm-props-dialog .props-table {
  width: 100%;
  border-collapse: collapse;
}

.gm-props-dialog .props-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-outline-variant, #e0e3e7);
  font-size: 13.5px;
}

.gm-props-dialog .props-table td.title {
  font-weight: 600;
  color: var(--color-on-surface-variant, #444746);
  width: 38%;
}

/* Cortex AI Rich HTML Preview in Compose Modal */
.gm-ai-text.gm-ai-html {
  white-space: normal !important;
  line-height: 1.5;
}

.gm-ai-text.gm-ai-html p {
  margin: 0;
  min-height: 1.4em;
}

.gm-ai-text.gm-ai-html ul,
.gm-ai-text.gm-ai-html ol {
  margin: 4px 0;
  padding-left: 28px;
  list-style: revert;
}

.gm-ai-note .gm-ai-note-link {
  color: var(--color-primary, #0b57d0);
  font-weight: 500;
  text-decoration: none;
  margin-left: 4px;
}

.gm-ai-note .gm-ai-note-link:hover {
  text-decoration: underline;
}

/* Smart Forgotten Attachment Reminder Banner in Compose */
.gm-attach-reminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 16px;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 14%, var(--color-surface, #ffffff));
  border: 1px solid color-mix(in srgb, #f59e0b 42%, transparent);
  color: var(--color-on-surface, #1f1f1f);
  font: 400 13px / 1.4 var(--font-sans, sans-serif);
  animation: gmAttachSlideIn 160ms cubic-bezier(0.2, 0, 0, 1);
}

.gm-attach-reminder.hidden {
  display: none !important;
}

@keyframes gmAttachSlideIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gm-attach-reminder-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.gm-attach-reminder-msg > .ico {
  font-size: 18px;
  color: #d97706;
  flex-shrink: 0;
}

html.dark-mode .gm-attach-reminder-msg > .ico {
  color: #fbbf24;
}

.gm-attach-reminder-msg strong.gm-attach-kw {
  font-weight: 600;
  color: #b45309;
}

html.dark-mode .gm-attach-reminder-msg strong.gm-attach-kw {
  color: #fcd34d;
}

.gm-attach-reminder-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.gm-attach-reminder-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #d97706 45%, transparent);
  background: var(--color-surface, #ffffff);
  color: #b45309;
  font: 600 12px / 1 var(--font-sans, sans-serif);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

html.dark-mode .gm-attach-reminder-btn {
  color: #fcd34d;
  border-color: color-mix(in srgb, #fbbf24 45%, transparent);
}

.gm-attach-reminder-btn:hover {
  background: color-mix(in srgb, #f59e0b 16%, var(--color-surface, #ffffff));
}

.gm-attach-reminder-btn .ico {
  font-size: 15px;
}

.gm-attach-reminder-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-on-surface-variant, #444746);
  cursor: pointer;
}

.gm-attach-reminder-close:hover {
  background: color-mix(in srgb, var(--color-on-surface, #1f1f1f) 8%, transparent);
}

/* Collapse empty .gm-attachments padding so bottom compose area is symmetrically spaced */
.gm-attachments:not(:has(.attachmentslist > li)) {
  padding: 0 !important;
}

/* Undo Send Countdown Bar */
.gm-undo-send-bar {
  position: relative;
  display: flex;
  align-items: center;
  margin: 8px 16px 0;
  border-radius: 10px;
  background: #202124;
  color: #f1f3f4;
  box-shadow: none;
  overflow: hidden;
  z-index: 25;
  animation: gmUndoSlideUp 150ms cubic-bezier(0.2, 0, 0, 1);
}

.gm-undo-send-bar + .gm-compose-bar {
  padding-top: 8px !important;
}

html.dark-mode .gm-undo-send-bar {
  background: #2b2c2f;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes gmUndoSlideUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gm-undo-send-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  pointer-events: none;
}

.gm-undo-send-fill {
  height: 100%;
  width: 100%;
  background: #8ab4f8;
  transform-origin: left center;
  animation-name: gmUndoCountdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes gmUndoCountdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.gm-undo-send-content {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 7px 7px 14px;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
}

.gm-undo-send-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gm-undo-send-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(138, 180, 248, 0.28);
  border-top-color: #8ab4f8;
  border-radius: 50%;
  animation: gmUndoSpin 0.8s linear infinite;
  flex-shrink: 0;
  box-sizing: border-box;
}

@keyframes gmUndoSpin {
  to {
    transform: rotate(360deg);
  }
}

.gm-undo-send-text {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1.2;
}

.gm-undo-send-text strong {
  color: #8ab4f8;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gm-undo-send-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.gm-undo-btn-cancel,
.gm-undo-btn-now {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 13px;
  border-radius: 7px;
  font: 600 12.5px / 1 var(--font-sans, sans-serif);
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.gm-undo-btn-cancel {
  border: 1px solid transparent;
  background: #8ab4f8;
  color: #17181b;
}

.gm-undo-btn-cancel:hover {
  background: #aecbfa;
}

.gm-undo-btn-now {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
  color: #e8eaed;
  font-weight: 500;
}

.gm-undo-btn-now:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.36);
}

.gm-compose-bar .gm-send.is-undo-pending {
  opacity: 0.55;
  pointer-events: none;
}

/* Login "Oturumu açık tut (Beni hatırla)" & PWA Install Button */
.gm-login-card .gm-remember-wrap {
  margin-top: 14px;
  display: flex;
  align-items: center;
}

.gm-login-card .gm-remember-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  font: 400 13.5px / 1.3 var(--font-sans, sans-serif);
  color: var(--color-on-surface-variant, #444746);
}

.gm-login-card .gm-remember-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.25px solid var(--color-outline, #747775);
  border-radius: 3.5px;
  accent-color: var(--color-primary, #0b57d0);
  cursor: pointer;
  flex-shrink: 0;
}

.gm-login-card .gm-remember-label:hover {
  color: var(--color-on-surface, #1f1f1f);
}

.gm-pwa-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  margin-top: 16px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--color-outline-variant, #c4c7c5);
  background: transparent;
  color: var(--color-primary, #0b57d0);
  font: 500 13.5px / 1 var(--font-sans, sans-serif);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.gm-pwa-login-btn:hover {
  background: rgba(11, 87, 208, 0.06);
  border-color: var(--color-primary, #0b57d0);
}

html.dark-mode .gm-pwa-login-btn {
  color: #a8c7fa;
  border-color: #444746;
}

html.dark-mode .gm-pwa-login-btn:hover {
  background: rgba(168, 199, 250, 0.1);
  border-color: #a8c7fa;
}

.gm-pwa-login-btn .gm-icon {
  font-family: var(--font-icons);
  font-size: 18px;
  font-weight: 400 !important;
  font-synthesis: none !important;
  line-height: 1;
}

/* ==========================================================================
   Phase 1 UX Improvements (Osman's Feedback Items 1, 2, 3, 4, 5, 9, 10)
   ========================================================================== */

/* 1. Settings > Folders: Subscription column header aligned with #foldersearch & info popover */
.gm-folderlist-colhead {
  position: relative;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 16px 2px;
  padding: 6px 0 6px 10px;
  font: 600 12px / 1.25 var(--font-sans, sans-serif);
  color: var(--color-on-surface-variant, #5f6368);
  border: 0 !important;
  background: transparent !important;
  flex-shrink: 0;
}

html.dark-mode .gm-folderlist-colhead {
  background: transparent !important;
  border: 0 !important;
  color: #9aa0a6;
}

.gm-folderlist-colhead .gm-colhead-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gm-folderlist-colhead .gm-colhead-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
}

.gm-folderlist-colhead .gm-colhead-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary, #0b57d0);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.gm-folderlist-colhead .gm-colhead-tip:hover,
.gm-folderlist-colhead .gm-colhead-tip:focus-visible,
.gm-folderlist-colhead .gm-colhead-tip.is-open {
  background: rgba(11, 87, 208, 0.1);
  outline: none;
}

html.dark-mode .gm-folderlist-colhead .gm-colhead-tip {
  color: #a8c7fa;
}

html.dark-mode .gm-folderlist-colhead .gm-colhead-tip:hover,
html.dark-mode .gm-folderlist-colhead .gm-colhead-tip:focus-visible,
html.dark-mode .gm-folderlist-colhead .gm-colhead-tip.is-open {
  background: rgba(168, 199, 250, 0.14);
}

.gm-folderlist-colhead .gm-colhead-tip-icon::before {
  font-family: var(--font-icons, 'gm-icons');
  font-weight: 400 !important;
  font-synthesis: none !important;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  content: var(--ico-info, '\e88e');
  display: block;
}

.gm-folderlist-colhead .gm-colhead-tip-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: -6px;
  width: 270px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-surface, #ffffff);
  color: var(--color-on-surface, #1f1f1f);
  border: 1px solid var(--color-outline-variant, #dadce0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  font: 400 12.5px / 1.45 var(--font-sans, sans-serif);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  z-index: 60;
}

.gm-folderlist-colhead .gm-colhead-tip-pop strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary, #0b57d0);
  margin-bottom: 4px;
}

html.dark-mode .gm-folderlist-colhead .gm-colhead-tip-pop {
  background: #242629;
  color: #e3e3e3;
  border-color: #444746;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

html.dark-mode .gm-folderlist-colhead .gm-colhead-tip-pop strong {
  color: #a8c7fa;
}

.gm-folderlist-colhead .gm-colhead-tip:hover .gm-colhead-tip-pop,
.gm-folderlist-colhead .gm-colhead-tip:focus-visible .gm-colhead-tip-pop,
.gm-folderlist-colhead .gm-colhead-tip.is-open .gm-colhead-tip-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* 2. Settings > Folders: Distinct Icon + Text buttons for (+) Yeni Dizin / Dizini Sil / Boşalt */
#folderstoolbar.toolbar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#folderstoolbar.toolbar > a {
  width: auto !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-on-surface-variant, #444746) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin: 0 !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}

html.dark-mode #folderstoolbar.toolbar > a {
  background: transparent !important;
  color: #c4c7c5 !important;
  border: 0 !important;
}

#folderstoolbar.toolbar > a:hover:not(.disabled) {
  background: var(--color-state-hover, rgba(31, 31, 31, 0.08)) !important;
  color: var(--color-on-surface, #1f1f1f) !important;
}

html.dark-mode #folderstoolbar.toolbar > a:hover:not(.disabled) {
  color: #e3e3e3 !important;
}

#folderstoolbar.toolbar > a::before {
  font-family: var(--font-icons, 'gm-icons') !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  font-size: 19px !important;
  line-height: 1 !important;
}

#folderstoolbar.toolbar > a .inner {
  display: inline !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

#folderstoolbar.toolbar > a.create {
  color: var(--color-primary, #0b57d0) !important;
}

#folderstoolbar.toolbar > a.create:hover:not(.disabled) {
  background: rgba(11, 87, 208, 0.08) !important;
  color: var(--color-primary, #0b57d0) !important;
}

html.dark-mode #folderstoolbar.toolbar > a.create {
  color: #a8c7fa !important;
}

html.dark-mode #folderstoolbar.toolbar > a.create:hover:not(.disabled) {
  background: rgba(168, 199, 250, 0.12) !important;
  color: #a8c7fa !important;
}

#folderstoolbar.toolbar > a.create::before {
  content: var(--ico-add, '\e145') !important;
}

#folderstoolbar.toolbar > a.delete {
  color: var(--color-error, #b3261e) !important;
}

#folderstoolbar.toolbar > a.delete:hover:not(.disabled) {
  background: rgba(179, 38, 30, 0.08) !important;
  color: var(--color-error, #b3261e) !important;
}

html.dark-mode #folderstoolbar.toolbar > a.delete {
  color: #f2b8b5 !important;
}

html.dark-mode #folderstoolbar.toolbar > a.delete:hover:not(.disabled) {
  background: rgba(242, 184, 181, 0.12) !important;
  color: #f2b8b5 !important;
}

#folderstoolbar.toolbar > a.delete::before {
  content: var(--ico-delete, '\e92e') !important;
}

#folderstoolbar.toolbar > a.purge::before {
  content: var(--ico-cancel, '\e888') !important;
}

/* 3. Contacts: Live email validation error state */
input.gm-input-invalid {
  border-color: #dc2626 !important;
  background-color: rgba(220, 38, 38, 0.04) !important;
}

.gm-email-error-hint {
  margin-top: 4px;
  font: 500 12px / 1.35 var(--font-sans, sans-serif);
  color: #dc2626;
}

html.dark-mode .gm-email-error-hint {
  color: #f87171;
}

/* 4. Contacts: Full uncut QR Code modal without scrollbars */
.gm-dialog.gm-qrcode-dialog {
  width: 356px !important;
  max-width: 92vw !important;
  height: auto !important;
  max-height: none !important;
}

.gm-dialog.gm-qrcode-dialog .gm-dialog-body {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 24px !important;
  overflow: visible !important;
  max-height: none !important;
}

.gm-dialog.gm-qrcode-dialog .gm-dialog-body img {
  display: block !important;
  width: 260px !important;
  height: 260px !important;
  max-width: 100% !important;
  padding: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-sizing: content-box !important;
  object-fit: contain !important;
}

/* 5. Blocked Senders (Kara Liste): Wide layout, search bar & 2-step Unblock confirmation */
.gm-dialog.gm-blocked-dialog {
  width: min(660px, 94vw) !important;
  max-width: 94vw !important;
}

.gm-blocked-manager .gm-bm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.gm-blocked-manager .gm-bm-count-label {
  font: 500 13px / 1.3 var(--font-sans, sans-serif);
  color: var(--color-on-surface-variant, #5f6368);
  white-space: nowrap;
}

.gm-blocked-manager .gm-bm-search {
  max-width: 240px;
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

.gm-blocked-manager .gm-bm-list-wrap {
  max-height: 360px !important;
}

.gm-blocked-manager .gm-bm-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.gm-blocked-manager .gm-bm-confirm-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gm-blocked-manager .gm-bm-confirm-box[hidden],
.gm-blocked-manager .gm-bm-unblock-btn[hidden] {
  display: none !important;
}

.gm-blocked-manager .gm-bm-confirm-txt {
  font: 600 12px / 1 var(--font-sans, sans-serif);
  color: #dc2626;
  margin-right: 2px;
}

html.dark-mode .gm-blocked-manager .gm-bm-confirm-txt {
  color: #f87171;
}

.gm-blocked-manager .gm-bm-confirm-yes,
.gm-blocked-manager .gm-bm-confirm-no {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font: 600 12px / 1 var(--font-sans, sans-serif);
  cursor: pointer;
}

.gm-blocked-manager .gm-bm-confirm-yes {
  border: 1px solid #dc2626;
  background: #dc2626;
  color: #ffffff;
}

.gm-blocked-manager .gm-bm-confirm-yes:hover {
  background: #b91c1c;
}

.gm-blocked-manager .gm-bm-confirm-no {
  border: 1px solid var(--color-outline-variant, #c4c7c5);
  background: transparent;
  color: var(--color-on-surface, #1f1f1f);
}

/* 9. Folder Sync / Loading Indicator in Message List */
.gm-list-sync-status {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 20px;
  font: 500 13.5px / 1.4 var(--font-sans, sans-serif);
  color: var(--color-primary, #0b57d0);
  text-align: center;
}

html.dark-mode .gm-list-sync-status {
  color: #8ab4f8;
}

html.gm-list-loading #messagelist-content .gm-list-sync-status {
  display: flex;
}

html.gm-list-loading #messagelist-content .gm-list-empty {
  display: none !important;
}

.gm-sync-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gmUndoSpin 0.75s linear infinite;
  flex-shrink: 0;
}

/* 10. Quick Delete & Mark buttons in #messagelist-header when messages are selected */
.gm-list-sel-actions {
  display: none;
  align-items: center;
  gap: 0;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--color-outline-variant, #dadce0);
}

#layout-list.gm-has-selection #messagelist-header .gm-list-sel-actions {
  display: inline-flex;
}

.gm-list-sel-badge {
  font: 500 12px / 1 var(--font-sans, sans-serif);
  color: var(--color-primary, #0b57d0);
  background: rgba(11, 87, 208, 0.1);
  padding: 5px 10px;
  border-radius: 999px;
  margin-right: 4px;
  white-space: nowrap;
}

html.dark-mode .gm-list-sel-badge {
  color: #a8c7fa;
  background: rgba(168, 199, 250, 0.14);
}

#messagelist-header .gm-list-sel-actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-icon-btn, 40px);
  height: var(--spacing-icon-btn, 40px);
  border-radius: 50%;
  color: var(--color-on-surface-variant, #444746);
  text-decoration: none;
  position: relative;
  transition: background-color 120ms var(--ease-standard, ease), color 120ms var(--ease-standard, ease);
}

#messagelist-header .gm-list-sel-actions > a::before {
  font-family: var(--font-icons, 'gm-icons') !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  font-style: normal !important;
  font-size: var(--spacing-icon, 20px) !important;
  line-height: 1 !important;
  width: 1em;
  height: 1em;
  display: inline-block;
  text-align: center;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#messagelist-header .gm-list-sel-actions > a.gm-list-quick-delete::before {
  content: var(--ico-delete, '\e92e') !important;
}

#messagelist-header .gm-list-sel-actions > a.gm-list-quick-read::before {
  content: var(--ico-read, '\f18c') !important;
}

#messagelist-header .gm-list-sel-actions > a.gm-list-quick-unread::before {
  content: var(--ico-unread, '\f18a') !important;
}

#messagelist-header .gm-list-sel-actions > a.gm-list-quick-mark::before {
  content: var(--ico-label, '\e893') !important;
}

#messagelist-header .gm-list-sel-actions > a .inner {
  display: none;
}

#messagelist-header .gm-list-sel-actions > a:hover {
  background: var(--color-state-hover, rgba(60, 64, 67, 0.08));
  color: var(--color-on-surface, #1f1f1f);
}

html.dark-mode #messagelist-header .gm-list-sel-actions > a {
  color: var(--color-on-surface-variant, #c4c7c5);
}

html.dark-mode #messagelist-header .gm-list-sel-actions > a:hover {
  color: var(--color-on-surface, #e3e3e3);
}

/* 11. Custom Profile Photo / Company Logo in Top-Right Account Menu */
.gm-avatar-initial.has-custom-avatar {
  position: relative;
  overflow: hidden;
  background: var(--color-surface, #ffffff) !important;
  color: transparent !important;
}

.gm-avatar-initial img.gm-user-custom-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

#account-menu .gm-account-card .gm-avatar.gm-avatar-xl {
  position: relative !important;
  cursor: pointer;
}

.gm-account-cam-btn {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-outline-variant, #dadce0);
  background: var(--color-surface, #ffffff);
  color: var(--color-on-surface, #1f1f1f);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease, background-color 120ms ease;
}

.gm-account-cam-btn:hover {
  transform: scale(1.08);
  background: var(--color-surface-container-low, #f8fafd);
  color: var(--color-primary, #0b57d0);
}

html.dark-mode .gm-account-cam-btn {
  background: #2b2d31;
  color: #e3e3e3;
  border-color: #444746;
}

.gm-account-cam-btn .gm-icon {
  font-family: var(--font-icons, 'gm-icons') !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  font-size: 16px;
  line-height: 1;
}

.gm-avatar-upload-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}

.gm-avatar-upload-dialog .gm-aud-desc {
  margin: 0;
  font: 400 13px / 1.45 var(--font-sans, sans-serif);
  color: var(--color-on-surface-variant, #5f6368);
  text-align: center;
}

.gm-avatar-upload-dialog .gm-aud-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
}

.gm-avatar-upload-dialog .gm-aud-preview {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color-outline-variant, #dadce0);
  background: var(--color-primary, #0b57d0);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.gm-avatar-upload-dialog .gm-aud-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gm-avatar-upload-dialog .gm-aud-initial {
  font: 500 40px / 1 var(--font-sans, sans-serif);
  text-transform: uppercase;
}

.gm-avatar-upload-dialog .gm-aud-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gm-avatar-upload-dialog .gm-aud-remove-btn {
  color: var(--color-error, #b3261e) !important;
}

html.dark-mode .gm-avatar-upload-dialog .gm-aud-remove-btn {
  color: #f2b8b5 !important;
}