/* Gmail Clone Skin for Roundcube
 * Gmail-inspired visual overrides on top of Elastic base
 */

/* ============================================
   CLIPPY - The Helpful Assistant
   ============================================ */

.clippy {
  position: fixed !important;
  bottom: 10px !important;
  right: 5px;
  z-index: 9999 !important;
}

.clippy-balloon {
  background: #ffc !important;
  border: 1px solid #000 !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
  font-family: 'MS Sans Serif', Tahoma, sans-serif !important;
  font-size: 12px !important;
  padding: 8px !important;
  max-width: 200px !important;
}

.clippy-balloon .clippy-tip {
  border-top-color: #000 !important;
}

/* Hide any other floating assistant/bot elements */
#supportlink,
.support-button,
.help-button,
.chat-widget,
.ai-assistant,
.bot-widget,
[class*="chatbot"],
[class*="helpdesk"],
[id*="chatbot"],
[id*="support-widget"] {
  display: none !important;
}

.clippy-balloon .clippy-content {
  color: #000 !important;
}

/* ============================================
   MESSAGE ACTION BAR
   ============================================ */

/* Grey spacer bar at top of message preview - matches search row for symmetry */
#preview-header-spacer {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 8px 16px;
  width: 100%;
  background: var(--color-layout-header-background, #f6f8fc);
  border-bottom: 1px solid var(--color-border, #dadce0);
  box-sizing: border-box;
}

/* Message action bar - modern Gmail-inspired design */
#message-action-bar {
  display: none;
  flex-direction: row;
  align-items: center;
  padding: 6px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8eaed;
  gap: 4px;
  min-height: 48px;
  box-sizing: border-box;
}

/* Show action bar when a message is selected */
#layout-content.selected #message-action-bar {
  display: flex;
}

/* Hide the old header toolbar in layout-content */
#layout-content > .header[role="toolbar"] {
  display: none !important;
}

/* Dark mode for spacer */
.dark-mode #preview-header-spacer {
  background: var(--color-layout-header-background, #2d2d2d);
  border-bottom-color: var(--color-border, #3c4043);
}

#message-action-bar .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  text-decoration: none;
  color: #444746;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

#message-action-bar .action-btn:hover {
  background: #e8eaed;
  color: #1f1f1f;
}

#message-action-bar .action-btn:active {
  background: #d3d3d3;
}

/* Primary actions - Reply, Reply All, Forward */
#message-action-bar .action-btn.reply,
#message-action-bar .action-btn.reply-all,
#message-action-bar .action-btn.forward {
  background: #fff;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#message-action-bar .action-btn.reply:hover,
#message-action-bar .action-btn.reply-all:hover,
#message-action-bar .action-btn.forward:hover {
  background: #f1f3f4;
  border-color: #c4c7c5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#message-action-bar .action-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

#message-action-bar .action-btn .inner {
  display: inline;
  font-size: 13px;
}

#message-action-bar .action-btn::before {
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
}

/* Modern Unicode icons */
#message-action-bar .action-btn.back::before { content: '←'; }
#message-action-bar .action-btn.reply::before { content: '↩'; }
#message-action-bar .action-btn.reply-all::before { content: '↩↩'; font-size: 12px; letter-spacing: -4px; margin-right: 2px; }
#message-action-bar .action-btn.forward::before { content: '↪'; }
#message-action-bar .action-btn.delete::before { content: '🗑'; font-size: 14px; }
#message-action-bar .action-btn.mark::before { content: '⚑'; }
#message-action-bar .action-btn.more::before { content: '⋮'; font-size: 18px; }
#message-action-bar .action-btn.popout::before { content: '↗'; }

#message-action-bar .action-btn.popout {
  margin-left: auto;
  background: transparent;
  border: none;
  padding: 8px 10px;
}

#message-action-bar .action-btn.popout .inner {
  display: none;
}

/* Divider styling */
#message-action-bar .action-divider {
  width: 1px;
  height: 24px;
  background: #dadce0;
  margin: 0 8px;
}

/* Back button - less prominent */
#message-action-bar .action-btn.back {
  padding: 8px 10px;
  margin-right: 4px;
}

#message-action-bar .action-btn.back .inner {
  display: none;
}

/* ============================================
   FRAMED COMPOSE - Inline Reply Styles
   ============================================ */

/* ============================================
   FRAMED COMPOSE (Reply in preview)
   ============================================ */

/* Framed compose layout - using .framed-compose class set by JS */
body.framed-compose #layout-content {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

body.framed-compose #compose-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: auto !important;
  padding-bottom: 0 !important;
}

/* Gmail-style bottom toolbar with Send button */
body.framed-compose .formbuttons {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border-top: 1px solid #dadce0 !important;
  padding: 6px 12px !important;
  min-height: 48px !important;
  gap: 4px !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.dark-mode body.framed-compose .formbuttons {
  background: #2b2b2b !important;
  border-top-color: #3c4043 !important;
}

/* Hide the toolbar/header in framed mode */
body.framed-compose #layout-content > .header {
  display: none !important;
}

/* Hide sidebar completely in framed compose */
body.framed-compose #layout-sidebar {
  display: none !important;
}

body.framed-compose #composebodycontainer {
  flex: 1 !important;
  min-height: 150px !important;
}

body.framed-compose #composebody {
  height: 100% !important;
  min-height: 150px !important;
}

/* Also support the old html.iframe selector */
html.iframe body.action-compose #layout-sidebar,
html.iframe body.action-compose #layout-content > .header {
  display: none !important;
}

html.iframe body.action-compose .formbuttons {
  position: sticky !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border-top: 1px solid #dadce0 !important;
  padding: 6px 12px !important;
  min-height: 48px !important;
  gap: 4px !important;
  z-index: 10 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hide task menu and toolbar in framed compose (but NOT the HTML editor toolbar) */
body.framed-compose #taskmenu,
body.framed-compose #layout-menu,
body.framed-compose #messagetoolbar,
body.framed-compose .menu.toolbar[role="navigation"],
body.framed-compose .toolbar:not(.tox-toolbar):not(.tox-toolbar__primary):not(.mce-toolbar):not(.editor-toolbar),
body.framed-compose [role="toolbar"]:not(.tox-toolbar):not(.tox-toolbar__primary):not(.tox-toolbar__group),
body.framed-compose [role="navigation"],
html.iframe body.action-compose #taskmenu,
html.iframe body.action-compose #layout-menu,
html.iframe body.action-compose #messagetoolbar,
html.iframe body.action-compose .toolbar:not(.tox-toolbar):not(.tox-toolbar__primary):not(.mce-toolbar):not(.editor-toolbar),
html.iframe body.action-compose [role="toolbar"]:not(.tox-toolbar):not(.tox-toolbar__primary):not(.tox-toolbar__group),
html.iframe body.action-compose [role="navigation"] {
  display: none !important;
}

/* Ensure TinyMCE/Tox editor toolbar is always visible in compose popup */
body.framed-compose .tox-tinymce,
body.framed-compose .tox-editor-header,
body.framed-compose .tox-toolbar,
body.framed-compose .tox-toolbar__primary,
body.framed-compose .tox-toolbar__overflow,
body.framed-compose .tox-toolbar__group,
body.framed-compose .tox-toolbar-overlord,
body.framed-compose .tox-menubar,
body.framed-compose .tox-tbtn,
body.framed-compose .editor-toolbar,
body.framed-compose .mce-tinymce,
body.framed-compose .mce-toolbar,
body.framed-compose .mce-toolbar-grp,
html.iframe body.action-compose .tox-tinymce,
html.iframe body.action-compose .tox-editor-header,
html.iframe body.action-compose .tox-toolbar,
html.iframe body.action-compose .tox-toolbar__primary,
html.iframe body.action-compose .tox-toolbar__group,
html.iframe body.action-compose .tox-toolbar-overlord,
html.iframe body.action-compose .editor-toolbar,
html.iframe body.action-compose .mce-tinymce,
html.iframe body.action-compose .mce-toolbar {
  display: flex !important;
  visibility: visible !important;
}

/* Force TinyMCE visibility (overrides inline style from TinyMCE init) */
body.framed-compose .tox-tinymce {
  visibility: visible !important;
}
html.iframe body.action-compose .tox-tinymce {
  visibility: visible !important;
}

/* Also override any [role="toolbar"] hide for tox elements */
body.framed-compose .tox-toolbar__group[role="toolbar"],
body.framed-compose [class*="tox-toolbar"],
html.iframe body.action-compose .tox-toolbar__group[role="toolbar"],
html.iframe body.action-compose [class*="tox-toolbar"] {
  display: flex !important;
  visibility: visible !important;
}

#message-action-bar .action-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border, #dadce0);
  margin: 0 6px;
}

/* Show labels on wider screens */
@media screen and (min-width: 1200px) {
  #message-action-bar .action-btn .inner {
    display: inline;
    margin-left: 4px;
  }
}

/* Dark mode styles for action bar */
.dark-mode #message-action-bar {
  background: #292a2d;
  border-bottom-color: #3c4043;
}

.dark-mode #message-action-bar .action-btn {
  color: #9aa0a6;
  background: transparent;
  border-color: transparent;
}

.dark-mode #message-action-bar .action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e8eaed;
}

.dark-mode #message-action-bar .action-btn:active {
  background: rgba(255, 255, 255, 0.12);
}

/* Dark mode primary action buttons - Reply, Reply All, Forward */
.dark-mode #message-action-bar .action-btn.reply,
.dark-mode #message-action-bar .action-btn.reply-all,
.dark-mode #message-action-bar .action-btn.forward {
  background: #3c4043;
  border: 1px solid #5f6368;
  color: #e8eaed;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.dark-mode #message-action-bar .action-btn.reply:hover,
.dark-mode #message-action-bar .action-btn.reply-all:hover,
.dark-mode #message-action-bar .action-btn.forward:hover {
  background: #4d5156;
  border-color: #80868b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Dark mode delete button - subtle red tint */
.dark-mode #message-action-bar .action-btn.delete:hover {
  background: rgba(234, 67, 53, 0.15);
  color: #f28b82;
}

/* Dark mode popout button */
.dark-mode #message-action-bar .action-btn.popout {
  background: transparent;
  border: none;
}

.dark-mode #message-action-bar .action-btn.popout:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dark-mode #message-action-bar .action-divider {
  background: #5f6368;
}

/* ============================================
   CSS CUSTOM PROPERTIES (Light Mode Default)
   ============================================ */
:root {
  /* Gmail Colors */
  --gmail-blue: #1a73e8;
  --gmail-blue-hover: #1557b0;
  --gmail-red: #d93025;
  --gmail-green: #188038;
  --gmail-yellow: #f9ab00;

  /* Compose Button */
  --compose-bg: #c2e7ff;
  --compose-text: #001d35;
  --compose-hover: #a8d4f7;
}

/* ============================================
   FONT OVERRIDES - Google Sans (loaded in HTML)
   ============================================ */

body {
  font-family: 'Roboto', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #ffffff;
  color: #202124;
}

html.dark-mode body {
  background-color: #1f1f1f;
  color: #e8eaed;
}

/* Main layout container */
#layout {
  background-color: #ffffff;
}

html.dark-mode #layout {
  background-color: #1f1f1f;
}

h1, h2, h3, h4, h5, h6,
.header-title,
#taskmenu a .inner,
.boxtitle,
.formcontainer legend {
  font-family: 'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif;
}

/* ============================================
   LAYOUT - Sidebar with bottom nav
   ============================================ */

/* Create a container for sidebar + nav using the existing structure */
#layout-sidebar {
  left: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 48px !important; /* Make room for nav bar */
  min-height: 100vh !important;
}

#layout-sidebar .scroller,
#layout-sidebar #folderlist-content {
  flex: 1 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#layout-sidebar .footer {
  display: none !important; /* Hide footer to remove gap */
}

#layout {
  padding-bottom: 0 !important;
}

/* ============================================
   LAYOUT MENU - Bottom of sidebar navigation
   ============================================ */

#layout-menu {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  background: #f6f8fc !important;
  border-right: 1px solid #e0e0e0 !important;
  border-top: 1px solid #e0e0e0 !important;
  overflow: visible !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html.dark-mode #layout-menu {
  background: #1f1f1f !important;
  border-right-color: #3c4043 !important;
  border-top-color: #3c4043 !important;
}

/* Hide the logo/header area */
#layout-menu .popover-header {
  display: none !important;
}

/* Taskmenu becomes horizontal - reset all styles */
#taskmenu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Show compose button in sidebar (Gmail style) */
#taskmenu .action-buttons {
  display: block !important;
  padding: 8px 12px 16px !important;
}

/* Hide special-buttons completely - items moved to settings popup */
#taskmenu .special-buttons {
  display: none !important;
}

/* ============================================
   CALENDAR NAV BUTTON (placeholder)
   ============================================ */

.calendar-nav-button {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  max-width: 60px !important;
  height: 40px !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #5f6368 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.calendar-nav-button:hover {
  background: rgba(0,0,0,0.06) !important;
}

html.dark-mode .calendar-nav-button {
  color: #9aa0a6 !important;
}

html.dark-mode .calendar-nav-button:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Calendar icon */
.calendar-nav-button:before {
  content: "\f073" !important;
  font-family: "Icons" !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  display: block !important;
  color: inherit !important;
}

.calendar-nav-button .inner {
  display: none !important;
}

/* ============================================
   SETTINGS NAV BUTTON (triggers popup)
   ============================================ */

/* Settings button in nav bar */
.settings-nav-button {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  max-width: 60px !important;
  height: 40px !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #5f6368 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.settings-nav-button:hover {
  background: rgba(0,0,0,0.06) !important;
}

html.dark-mode .settings-nav-button {
  color: #9aa0a6 !important;
}

html.dark-mode .settings-nav-button:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Settings icon */
.settings-nav-button:before {
  content: "\f013" !important;
  font-family: "Icons" !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  display: block !important;
  color: inherit !important;
}

.settings-nav-button .inner {
  display: none !important;
}

/* ============================================
   SETTINGS POPUP MENU STYLING
   ============================================ */

#settings-nav-menu {
  min-width: 180px !important;
}

#settings-nav-menu ul.menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#settings-nav-menu ul.menu li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#settings-nav-menu ul.menu li a {
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  color: #202124 !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

#settings-nav-menu ul.menu li a:hover {
  background: rgba(0,0,0,0.05) !important;
}

html.dark-mode #settings-nav-menu ul.menu li a {
  color: #e8eaed !important;
}

html.dark-mode #settings-nav-menu ul.menu li a:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Menu item icons */
#settings-nav-menu ul.menu li a:before {
  font-family: "Icons" !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  width: 24px !important;
  margin-right: 12px !important;
  color: #5f6368 !important;
}

html.dark-mode #settings-nav-menu ul.menu li a:before {
  color: #9aa0a6 !important;
}

#settings-nav-menu ul.menu li a.settings:before { content: "\f013"; }
#settings-nav-menu ul.menu li a.theme:before { content: "\f186"; }
#settings-nav-menu ul.menu li a.about:before { content: "\f128"; }
#settings-nav-menu ul.menu li a.logout:before { content: "\f011"; color: #d93025 !important; }

#settings-nav-menu ul.menu li a.logout {
  color: #d93025 !important;
}

html.dark-mode #settings-nav-menu ul.menu li a.logout {
  color: #f28b82 !important;
}

/* ALL navigation buttons - uniform sizing */
#taskmenu > a,
#taskmenu .special-buttons > a {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  max-width: 60px !important;
  height: 40px !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #5f6368 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease !important;
  box-sizing: border-box !important;
}

#taskmenu > a:hover,
#taskmenu .special-buttons > a:hover {
  background: rgba(0,0,0,0.06) !important;
}

html.dark-mode #taskmenu > a,
html.dark-mode #taskmenu .special-buttons > a {
  color: #9aa0a6 !important;
}

html.dark-mode #taskmenu > a:hover,
html.dark-mode #taskmenu .special-buttons > a:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Selected state */
#taskmenu > a.selected {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
}

html.dark-mode #taskmenu > a.selected {
  background: #394457 !important;
  color: #8ab4f8 !important;
}

/* ALL icons - uniform size */
#taskmenu > a:before,
#taskmenu .special-buttons > a:before {
  font-size: 20px !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 24px !important;
  text-align: center !important;
  color: inherit !important;
  float: none !important;
  display: block !important;
}

/* Hide ALL text labels */
#taskmenu > a .inner,
#taskmenu .special-buttons > a .inner {
  display: none !important;
}

/* ============================================
   FLOATING COMPOSE BUTTON
   ============================================ */
.floating-action-buttons {
  position: fixed !important;
  display: none !important;
  bottom: 190px !important;
  right: 12px !important;
  left: auto !important;
  top: auto !important;
  z-index: 1001 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.floating-action-buttons a.compose {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background: #c2e7ff !important;
  color: #001d35 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.floating-action-buttons a.compose:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1) !important;
  transform: scale(1.02) !important;
}

html.dark-mode .floating-action-buttons a.compose {
  background: #004a77 !important;
  color: #c2e7ff !important;
}

.floating-action-buttons a.compose:before {
  content: '✏' !important;
  font-size: 24px !important;
  margin: 0 !important;
  color: inherit !important;
}

.floating-action-buttons a.compose .inner {
  display: none !important;
}

#logo {
  height: 40px;
  width: auto;
  max-width: 100%;
}

/* Ensure the menu background changes in dark mode */
html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header,
html.dark-mode #taskmenu {
  background-color: #1f1f1f !important;
}

/* Taskmenu container */
#taskmenu {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Compose Button - Gmail Style Pill */
#taskmenu .action-buttons {
  padding: 16px 12px 12px;
  display: block !important;
}

#taskmenu a.compose {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: auto;
  height: 56px;
  padding: 0 24px 0 16px;
  background: #fff !important;
  color: #444746 !important;
  border-radius: 28px !important;
  font-family: 'Google Sans', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.25px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3), 0 4px 8px 3px rgba(0,0,0,0.15) !important;
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s !important;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none !important;
  border: none !important;
}

#taskmenu a.compose:hover {
  background: #f6fafe !important;
  box-shadow: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.3) !important;
}

#taskmenu a.compose:before {
  content: '\270f';
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4285f4 0%, #ea4335 25%, #fbbc04 50%, #34a853 75%, #4285f4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#taskmenu a.compose .inner {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline !important;
  color: #444746 !important;
  font-family: 'Google Sans', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

html.dark-mode #taskmenu a.compose {
  background: #37393b !important;
  color: #e3e3e3 !important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 4px 8px 3px rgba(0,0,0,0.3) !important;
}

html.dark-mode #taskmenu a.compose .inner {
  color: #e3e3e3 !important;
}

html.dark-mode #taskmenu a.compose:hover {
  background: #474a4d !important;
}

/* Navigation Links - Gmail Rounded Pills */
#taskmenu a.mail,
#taskmenu a.calendar,
#taskmenu a.contacts,
#taskmenu a.settings,
#taskmenu a.about,
#taskmenu a.logout,
#taskmenu a.theme {
  display: flex !important;
  align-items: center;
  margin: 1px 16px 1px 0;
  padding: 0 16px 0 16px;
  height: 32px;
  border-radius: 0 16px 16px 0 !important;
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
}

#taskmenu a.mail .inner,
#taskmenu a.calendar .inner,
#taskmenu a.contacts .inner,
#taskmenu a.settings .inner,
#taskmenu a.about .inner,
#taskmenu a.logout .inner,
#taskmenu a.theme .inner {
  margin-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#taskmenu a.mail:hover,
#taskmenu a.calendar:hover,
#taskmenu a.contacts:hover,
#taskmenu a.settings:hover,
#taskmenu a.about:hover,
#taskmenu a.logout:hover,
#taskmenu a.theme:hover {
  background: rgba(0,0,0,0.04);
}

html.dark-mode #taskmenu a.mail:hover,
html.dark-mode #taskmenu a.calendar:hover,
html.dark-mode #taskmenu a.contacts:hover,
html.dark-mode #taskmenu a.settings:hover,
html.dark-mode #taskmenu a.about:hover,
html.dark-mode #taskmenu a.logout:hover,
html.dark-mode #taskmenu a.theme:hover {
  background: rgba(255,255,255,0.08);
}

#taskmenu a.mail.selected,
#taskmenu a.calendar.selected,
#taskmenu a.contacts.selected,
#taskmenu a.settings.selected {
  background: #d3e3fd !important;
  color: #001d35;
}

html.dark-mode #taskmenu a.mail.selected,
html.dark-mode #taskmenu a.calendar.selected,
html.dark-mode #taskmenu a.contacts.selected,
html.dark-mode #taskmenu a.settings.selected {
  background: #004a77 !important;
  color: #c2e7ff;
}

/* Special buttons section */
#taskmenu .special-buttons {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background-color: #f6f8fc !important;
  background: #f6f8fc !important;
}

html.dark-mode #taskmenu .special-buttons {
  border-top-color: rgba(255,255,255,0.12);
  background-color: #1f1f1f !important;
  background: #1f1f1f !important;
}

/* Special button icons */
#taskmenu .special-buttons a {
  color: #5f6368 !important;
  background: transparent !important;
  background-color: transparent !important;
}

#taskmenu .special-buttons a .inner {
  color: #5f6368 !important;
}

#taskmenu .special-buttons a:before {
  color: #5f6368 !important;
}

html.dark-mode #taskmenu .special-buttons a {
  color: #e8eaed !important;
  background: transparent !important;
  background-color: transparent !important;
}

html.dark-mode #taskmenu .special-buttons a .inner,
html.dark-mode #taskmenu .special-buttons a:before {
  color: #e8eaed !important;
}

html.dark-mode #taskmenu .special-buttons a:hover,
html.dark-mode #taskmenu .special-buttons a:hover .inner {
  color: #ffffff !important;
}

/* ============================================
   FOLDER SIDEBAR - Gmail Style
   ============================================ */
#layout-sidebar {
  display: flex !important;
  flex-direction: column;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  background: #f6f8fc;
  border-right: 1px solid #e0e0e0;
}

html.dark-mode #layout-sidebar {
  background: #1f1f1f;
  border-right-color: #3c4043;
}

#layout-sidebar .header {
  display: flex;
  align-items: center;
  padding: 0 8px;
  min-height: 48px;
  border-bottom: 1px solid #e0e0e0;
}

html.dark-mode #layout-sidebar .header {
  border-bottom-color: #3c4043;
}

/* Hide the three dots menu button in the sidebar header */
#layout-sidebar .header .sidebar-menu,
#layout-sidebar .header a.button.sidebar-menu,
#layout-sidebar .header button.sidebar-menu,
a.sidebar-menu[data-popup="mailboxoptions-menu"] {
  display: none !important;
}

#layout-sidebar .scroller,
#folderlist-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  display: block !important;
}

#layout-sidebar .footer {
  padding: 8px 16px;
  border-top: 1px solid #e0e0e0;
  font-size: 12px;
  color: #5f6368;
}

html.dark-mode #layout-sidebar .footer {
  border-top-color: #3c4043;
  color: #9aa0a6;
}

/* Folder list container */
#mailboxlist,
.folderlist,
.treelist {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mailboxlist li,
.folderlist li,
.treelist li {
  display: block !important;
  margin: 0;
  padding: 0;
  list-style: none !important;
}

/* Nested folder lists */
#mailboxlist ul,
.folderlist ul,
.treelist ul {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 0 16px !important;
}

/* Tree toggle buttons for expanding/collapsing */
#mailboxlist .treetoggle,
.folderlist .treetoggle,
.treelist .treetoggle {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Collapsed folders */
#mailboxlist li.collapsed > ul,
.folderlist li.collapsed > ul,
.treelist li.collapsed > ul {
  display: none !important;
}

/* Expanded folders */
#mailboxlist li.expanded > ul,
.folderlist li.expanded > ul,
.treelist li.expanded > ul {
  display: block !important;
}

/* Folder list items */
#mailboxlist li > a,
.folderlist li > a,
.treelist li > a,
.listing.treelist li > a {
  display: flex !important;
  align-items: center;
  margin: 0 8px 2px 0;
  padding: 0 12px 0 12px;
  height: 32px;
  border-radius: 0 16px 16px 0;
  transition: background 0.1s;
  color: #202124 !important;
  text-decoration: none !important;
  font-size: 14px;
  line-height: 32px;
}

html.dark-mode #mailboxlist li > a,
html.dark-mode .folderlist li > a,
html.dark-mode .treelist li > a,
html.dark-mode .listing.treelist li > a {
  color: #e8eaed !important;
}

/* Folder name text */
#mailboxlist li > a span,
.folderlist li > a span,
.treelist li > a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mailboxlist li > a:hover,
.folderlist li > a:hover,
.listing.treelist li > a:hover {
  background: rgba(0,0,0,0.06) !important;
}

html.dark-mode #mailboxlist li > a:hover,
html.dark-mode .folderlist li > a:hover,
html.dark-mode .listing.treelist li > a:hover {
  background: rgba(255,255,255,0.1) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li > a.selected,
#mailboxlist li.mailbox.selected > a,
.folderlist li.selected > a,
.listing.treelist li.selected > a {
  background: #c2e7ff !important;
  font-weight: 500;
  color: #001d35 !important;
}

html.dark-mode #mailboxlist li.selected > a,
html.dark-mode #mailboxlist li > a.selected,
html.dark-mode #mailboxlist li.mailbox.selected > a,
html.dark-mode .folderlist li.selected > a,
html.dark-mode .listing.treelist li.selected > a {
  background: #004a77 !important;
  color: #c2e7ff !important;
}

/* Folder icons */
#mailboxlist li > a:before,
.folderlist li > a:before {
  margin-right: 12px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Unread count badge */
#mailboxlist .unreadcount,
.folderlist .unreadcount {
  margin-left: auto;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: 12px;
  padding-left: 8px;
}

/* ============================================
   MESSAGE LIST - Gmail Style
   ============================================ */
#layout-list {
  background: #ffffff;
  border-right: 1px solid #e0e0e0;
}

html.dark-mode #layout-list {
  background: #1f1f1f;
  border-right-color: #3c4043;
}

/* ============================================
   MESSAGE LIST CHECKBOXES
   ============================================ */

/* Selection column styling */
#messagelist th.selection,
#messagelist td.selection {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 8px !important;
  text-align: center !important;
}

/* Style the checkbox inputs */
#messagelist td.selection input[type="checkbox"],
#messagelist th.selection input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  accent-color: #1a73e8 !important;
}

/* Clean message list header */
#messagelist-header {
  display: flex !important;
  align-items: center !important;
  padding: 4px 8px !important;
  min-height: 40px !important;
  background: #f6f8fc !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

html.dark-mode #messagelist-header {
  background: #2d2d2d !important;
  border-bottom-color: #3c4043 !important;
}

#messagelist-header .header-title {
  flex: 1 !important;
}

/* Hide unnecessary header elements */
#messagelist-header .toolbar,
#messagelist-header .toolbar-menu-button,
#messagelist-header .task-menu-button,
#messagelist-header .back-sidebar-button,
#messagelist-header .select,
#layout-list .select,
a.button.selection,
.toolbar a.select,
#listcontrols a.select {
  display: none !important;
}

/* Show back button only on mobile */
@media screen and (max-width: 768px) {
  #messagelist-header .back-sidebar-button {
    display: flex !important;
  }
}

/* Search row - refresh button + search bar */
.search-row {
  display: flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  background: var(--color-layout-header-background, #f6f8fc) !important;
  border-bottom: 1px solid var(--color-border, #dadce0) !important;
}

/* Refresh button in search row */
.search-row .refresh {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #5f6368 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  flex-shrink: 0 !important;
}

.search-row .refresh:before {
  font-size: 16px !important;
  margin: 0 !important;
}

.search-row .refresh:hover {
  background: rgba(0,0,0,0.06) !important;
}

html.dark-mode .search-row .refresh {
  color: #9aa0a6 !important;
}

html.dark-mode .search-row .refresh:hover {
  background: rgba(255,255,255,0.08) !important;
}

.search-row .refresh .inner {
  display: none !important;
}

/* Search bar - Gmail rounded style */
.search-row .searchbar,
.searchbar {
  flex: 1 !important;
  margin: 0 !important;
  border-radius: 24px !important;
  background: #eaf1fb !important;
  border: none !important;
  min-width: 0 !important;
}

.searchbar:focus-within {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.15) !important;
}

html.dark-mode .searchbar {
  background: #3c4043 !important;
}

html.dark-mode .searchbar:focus-within {
  background: #2d2d2d !important;
}

/* Sort button */
.search-row .sort-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #5f6368 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border: 1px solid #dadce0 !important;
}

.search-row .sort-button:hover {
  background: rgba(0,0,0,0.04) !important;
}

html.dark-mode .search-row .sort-button {
  color: #9aa0a6 !important;
  border-color: #5f6368 !important;
}

html.dark-mode .search-row .sort-button:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Sort menu styling */
#sort-menu ul.menu li a {
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  color: #202124 !important;
  text-decoration: none !important;
}

#sort-menu ul.menu li a:hover {
  background: rgba(0,0,0,0.04) !important;
}

html.dark-mode #sort-menu ul.menu li a {
  color: #e8eaed !important;
}

html.dark-mode #sort-menu ul.menu li a:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* ============================================
   MESSAGE LIST COLUMN HEADERS - Only From & Date
   ============================================ */

/* Hide the entire thead - we don't need visible column headers */
#messagelist thead {
  display: none !important;
}

/* ============================================
   MESSAGE LIST BODY CELLS
   ============================================ */

/* Date column styling */
#messagelist td.date {
  white-space: nowrap !important;
  color: #5f6368 !important;
  font-size: 12px !important;
}

html.dark-mode #messagelist td.date {
  color: #9aa0a6 !important;
}

/* Message rows - read emails get subtle gray background */
.messagelist tr,
#messagelist tbody tr {
  border-bottom: 1px solid #f1f3f4;
  transition: box-shadow 0.1s, background-color 0.1s;
  background-color: #f5f5f5;
}

html.dark-mode .messagelist tr,
html.dark-mode #messagelist tbody tr {
  border-bottom-color: #3c4043;
  background-color: #2a2a2a;
}

/* Unread messages - bright white background to stand out */
.messagelist tr.unread,
#messagelist tbody tr.unread {
  background-color: #ffffff !important;
}

html.dark-mode .messagelist tr.unread,
html.dark-mode #messagelist tbody tr.unread {
  background-color: #1f1f1f !important;
}

.messagelist tr:hover,
#messagelist tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--gmail-blue);
  background-color: #eaf1fb;
}

html.dark-mode .messagelist tr:hover,
html.dark-mode #messagelist tbody tr:hover {
  background-color: #35363a;
}

.messagelist tr.selected,
#messagelist tbody tr.selected {
  background: #c2e7ff !important;
}

html.dark-mode .messagelist tr.selected,
html.dark-mode #messagelist tbody tr.selected {
  background: #004a77 !important;
}

/* Unread messages - bold text */
.messagelist tr.unread td,
#messagelist tbody tr.unread td {
  font-weight: 600;
}

/* Star/flag icon */
.messagelist td.flag span.flag:before {
  color: #dadce0;
}

.messagelist tr.flagged td.flag span.flag:before {
  color: #f4b400 !important;
}

/* ============================================
   CONTENT AREA - Clean Gmail Look
   ============================================ */
#layout-content {
  background: #ffffff;
}

html.dark-mode #layout-content {
  background: #1f1f1f;
}

#layout-content > .header {
  border-bottom: 1px solid #e0e0e0;
}

html.dark-mode #layout-content > .header {
  border-bottom-color: #3c4043;
}

/* Toolbar buttons */
.toolbar a,
.toolbar button {
  border-radius: 50% !important;
  transition: background 0.1s;
}

.toolbar a:hover,
.toolbar button:hover {
  background: rgba(0,0,0,0.04);
}

html.dark-mode .toolbar a:hover,
html.dark-mode .toolbar button:hover {
  background: rgba(255,255,255,0.08);
}

/* ============================================
   MESSAGE VIEW - Clean Reading Experience
   ============================================ */
#message-header h2.subject {
  font-family: 'Google Sans', sans-serif;
  font-size: 22px;
  font-weight: 400;
}

#message-header .contactphoto {
  border-radius: 50%;
}

/* ============================================
   COMPOSE - Gmail Style
   ============================================ */
.compose-headers .form-group label {
  font-size: 14px;
  color: #5f6368;
}

html.dark-mode .compose-headers .form-group label {
  color: #9aa0a6;
}

#composebody {
  border-radius: 8px;
}

/* Send button */
.formbuttons .btn-primary,
.formbuttons button.send,
button.btn-primary {
  background: var(--gmail-blue) !important;
  border-color: var(--gmail-blue) !important;
  border-radius: 18px !important;
  font-family: 'Google Sans', sans-serif;
  font-weight: 500;
  padding: 0 24px;
  height: 36px;
}

.formbuttons .btn-primary:hover,
.formbuttons button.send:hover,
button.btn-primary:hover {
  background: var(--gmail-blue-hover) !important;
  border-color: var(--gmail-blue-hover) !important;
}

/* ============================================
   LOGIN PAGE - Centered Card
   ============================================ */
body.task-login #layout-content {
  background: #f6f8fc;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.dark-mode body.task-login #layout-content {
  background: #1f1f1f;
}

body.task-login #login-form {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  padding: 48px 40px;
  max-width: 400px;
  width: 100%;
}

html.dark-mode body.task-login #login-form {
  background: #2d2d2d;
}

body.task-login #logo {
  display: block;
  margin: 0 auto 32px;
}

/* ============================================
   POPUP MENUS - Clean Shadow
   ============================================ */
.popupmenu {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.15);
  border: none;
}

html.dark-mode .popupmenu {
  background: #2d2d2d;
}

.popupmenu .menu li a:hover {
  background: rgba(0,0,0,0.04);
}

html.dark-mode .popupmenu .menu li a:hover {
  background: rgba(255,255,255,0.08);
}

/* ============================================
   BUTTONS - Gmail Pill Style
   ============================================ */
.btn-secondary,
button.btn-secondary {
  border-radius: 18px !important;
  border-color: #dadce0;
}

html.dark-mode .btn-secondary,
html.dark-mode button.btn-secondary {
  border-color: #5f6368;
}

/* ============================================
   SCROLLBARS - Subtle
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #dadce0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #bdc1c6;
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: #5f6368;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #80868b;
}

/* ============================================
   NOTIFICATIONS - Bottom Toast
   ============================================ */
#messagestack {
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}

#messagestack div {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.15);
}

#messagestack div.error {
  background: var(--gmail-red);
}

#messagestack div.confirmation {
  background: #323232;
  color: #ffffff;
}

/* ============================================
   FLOATING ACTION BUTTON (Mobile)
   ============================================ */
.floating-action-buttons {
  bottom: 190px;
  right: 12px;
}

.floating-action-buttons a {
  width: 56px;
  height: 56px;
  border-radius: 16px !important;
  background: var(--compose-bg) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.15);
}

.floating-action-buttons a:hover {
  background: var(--compose-hover) !important;
}

html.dark-mode .floating-action-buttons a {
  background: #394457 !important;
}

/* ============================================
   ATTACHMENTS - Chips Style
   ============================================ */
#attachment-list li,
.attachmentslist li {
  border-radius: 8px;
  background: #f1f3f4;
  margin-bottom: 4px;
}

html.dark-mode #attachment-list li,
html.dark-mode .attachmentslist li {
  background: #3c4043;
}

#attachment-list li:hover,
.attachmentslist li:hover {
  background: #e8eaed;
}

html.dark-mode #attachment-list li:hover,
html.dark-mode .attachmentslist li:hover {
  background: #4d5156;
}

/* ============================================
   PAGE NAVIGATION - Clean
   ============================================ */
.pagenav a {
  border-radius: 50%;
}

.pagenav a:hover:not(.disabled) {
  background: rgba(0,0,0,0.04);
}

html.dark-mode .pagenav a:hover:not(.disabled) {
  background: rgba(255,255,255,0.08);
}

/* ============================================
   QUOTA DISPLAY
   ============================================ */
.quota-widget .bar {
  border-radius: 4px;
  background: #e8eaed;
}

html.dark-mode .quota-widget .bar {
  background: #3c4043;
}

.quota-widget .bar .value {
  background: var(--gmail-blue);
  border-radius: 4px;
}

/* ============================================
   ENSURE SIDEBAR AND FOLDER LIST VISIBILITY
   ============================================ */

/* Force sidebar to always be visible on larger screens */
html.layout-large #layout-sidebar,
html.layout-normal #layout-sidebar,
#layout-sidebar:not(.hidden),
#layout-sidebar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media screen and (min-width: 769px) {
  #layout-sidebar.hidden {
    display: flex !important;
    visibility: visible !important;
  }
}

/* Force the folder list container to be visible */
#folderlist-content,
#layout-sidebar .scroller {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 !important;
  min-height: 100px !important;
}

/* Force the mailbox list UL to be visible and block */
#mailboxlist,
#mailboxlist.treelist,
#mailboxlist.listing,
#mailboxlist.folderlist,
ul#mailboxlist,
.folderlist,
.treelist.folderlist {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Force all list items to be visible */
#mailboxlist > li,
#mailboxlist li.mailbox,
.folderlist > li,
.treelist.folderlist > li {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  list-style: none !important;
}

/* Force folder links to be visible */
#mailboxlist li > a,
#mailboxlist li.mailbox > a,
.folderlist li > a {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Folder icons - ensure visibility */
#mailboxlist li > a:before,
.folderlist li > a:before,
.treelist.folderlist li > a:before {
  font-family: 'Icons', sans-serif !important;
  font-weight: 900;
  font-size: 16px;
  color: #5f6368 !important;
  margin-right: 12px;
  width: 20px;
  display: inline-block;
  text-align: center;
}

html.dark-mode #mailboxlist li > a:before,
html.dark-mode .folderlist li > a:before,
html.dark-mode .treelist.folderlist li > a:before {
  color: #9aa0a6 !important;
}

/* Specific folder icons */
#mailboxlist li.inbox > a:before { content: "\f01c"; }
#mailboxlist li.sent > a:before { content: "\f1d8"; }
#mailboxlist li.drafts > a:before { content: "\f15c"; }
#mailboxlist li.trash > a:before { content: "\f1f8"; }
#mailboxlist li.junk > a:before,
#mailboxlist li.spam > a:before { content: "\f071"; color: #f4b400 !important; }
#mailboxlist li.archive > a:before { content: "\f187"; }

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media screen and (max-width: 768px) {
  /* Nav bar full width of sidebar on mobile */
  #layout-menu {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Compose button smaller on mobile */
  .floating-action-buttons {
    display: none !important;
  }
  .floating-action-buttons a.compose {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ============================================
   ICON COLORS - Light/Dark Mode
   Force overrides with high specificity
   ============================================ */

/* Light mode - dark icons on light background */
#layout-menu #taskmenu a,
#layout-menu #taskmenu a:before,
#layout-menu #taskmenu a .inner,
#layout-menu .special-buttons a,
#layout-menu .special-buttons a:before,
#layout-menu .special-buttons a .inner {
  color: #5f6368 !important;
}

#layout-menu .popover-header,
#layout-sidebar .header-title {
  color: #202124 !important;
}

/* Taskmenu nav links and icons */
#taskmenu a.mail,
#taskmenu a.mail:before,
#taskmenu a.mail .inner,
#taskmenu a.calendar,
#taskmenu a.calendar:before,
#taskmenu a.calendar .inner,
#taskmenu a.contacts,
#taskmenu a.contacts:before,
#taskmenu a.contacts .inner,
#taskmenu a.settings,
#taskmenu a.settings:before,
#taskmenu a.settings .inner,
#taskmenu a.about,
#taskmenu a.about:before,
#taskmenu a.about .inner,
#taskmenu a.logout,
#taskmenu a.logout:before,
#taskmenu a.logout .inner,
#taskmenu a.theme,
#taskmenu a.theme:before,
#taskmenu a.theme .inner {
  color: #5f6368 !important;
}

/* Dark mode - light icons on dark background */
html.dark-mode #layout-menu #taskmenu a,
html.dark-mode #layout-menu #taskmenu a:before,
html.dark-mode #layout-menu #taskmenu a .inner,
html.dark-mode #layout-menu .special-buttons a,
html.dark-mode #layout-menu .special-buttons a:before,
html.dark-mode #layout-menu .special-buttons a .inner {
  color: #e8eaed !important;
}

html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-sidebar .header-title {
  color: #e8eaed !important;
}

/* Dark mode taskmenu nav links and icons */
html.dark-mode #taskmenu a.mail,
html.dark-mode #taskmenu a.mail:before,
html.dark-mode #taskmenu a.mail .inner,
html.dark-mode #taskmenu a.calendar,
html.dark-mode #taskmenu a.calendar:before,
html.dark-mode #taskmenu a.calendar .inner,
html.dark-mode #taskmenu a.contacts,
html.dark-mode #taskmenu a.contacts:before,
html.dark-mode #taskmenu a.contacts .inner,
html.dark-mode #taskmenu a.settings,
html.dark-mode #taskmenu a.settings:before,
html.dark-mode #taskmenu a.settings .inner,
html.dark-mode #taskmenu a.about,
html.dark-mode #taskmenu a.about:before,
html.dark-mode #taskmenu a.about .inner,
html.dark-mode #taskmenu a.logout,
html.dark-mode #taskmenu a.logout:before,
html.dark-mode #taskmenu a.logout .inner,
html.dark-mode #taskmenu a.theme,
html.dark-mode #taskmenu a.theme:before,
html.dark-mode #taskmenu a.theme .inner {
  color: #e8eaed !important;
}

/* Compose button - uses its own colors (don't override :before - it has gradient) */
#taskmenu a.compose,
#taskmenu a.compose .inner {
  color: #444746 !important;
}

html.dark-mode #taskmenu a.compose,
html.dark-mode #taskmenu a.compose .inner {
  color: #e3e3e3 !important;
}

/* Selected nav items */
#taskmenu a.selected,
#taskmenu a.selected:before,
#taskmenu a.selected .inner {
  color: #001d35 !important;
}

html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:before,
html.dark-mode #taskmenu a.selected .inner {
  color: #c2e7ff !important;
}

/* ============================================
   CALENDAR BUTTON ICON
   ============================================ */
#taskmenu a.calendar:before {
  content: "\f073" !important;  /* Font Awesome calendar-alt icon */
  font-family: Icons !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  line-height: 24px !important;
  text-align: center !important;
}

/* Calendar page specific styles */
.calendarmain {
  background: #fff;
}

html.dark-mode .calendarmain {
  background: #1f1f1f;
}

/* ============================================
   CALENDAR - Fix oversized search bars
   ============================================ */

/* Calendar sidebar searchbar - compact */
body.task-calendar #layout-sidebar .searchbar,
body.task-calendar #calendarlistsearch,
body.task-calendar .searchbar.menu {
  max-height: 48px !important;
  min-height: 36px !important;
  padding: 4px 8px !important;
  margin: 4px 8px !important;
  display: flex !important;
  align-items: center !important;
}

body.task-calendar #layout-sidebar .searchbar input,
body.task-calendar #calendarlistsearch input {
  height: 32px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
}

/* Main calendar searchbar - compact */
body.task-calendar #layout-content .searchbar,
body.task-calendar #searchform {
  max-height: 48px !important;
  min-height: 36px !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.task-calendar #layout-content .searchbar input,
body.task-calendar #searchform input {
  height: 32px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  flex: 1 !important;
}

/* Hide expanded search options by default */
body.task-calendar .searchbar .options,
body.task-calendar .searchbar .search-options,
body.task-calendar .searchbar fieldset {
  display: none !important;
}

/* Calendar list in sidebar - ensure proper spacing */
body.task-calendar #calendars-content {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 8px 0 !important;
}

/* Calendar grid takes remaining space */
body.task-calendar #calendar {
  flex: 1 !important;
  overflow: auto !important;
}

/* ============================================
   Gmail-style Floating Compose Popup
   ============================================ */

.compose-popup {
  position: fixed !important;
  bottom: 0 !important;
  z-index: 10000 !important;
  width: 550px;
  height: 600px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
  overflow: hidden;
  resize: both;
  min-width: 380px;
  min-height: 200px;
  transition: height 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
}

.compose-popup.minimized {
  height: 40px !important;
  min-height: 40px !important;
  resize: none;
  overflow: hidden;
}

.compose-popup.maximized {
  width: 90vw !important;
  height: 85vh !important;
  bottom: 0 !important;
  right: 5vw !important;
  border-radius: 8px 8px 0 0;
}

/* Title bar */
.compose-popup-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #404040;
  color: #fff;
  padding: 0 8px 0 16px;
  height: 40px;
  min-height: 40px;
  cursor: move;
  border-radius: 8px 8px 0 0;
  user-select: none;
  -webkit-user-select: none;
}

.compose-popup-titlebar .compose-popup-title {
  font-size: 14px;
  font-weight: 400;
  font-family: 'Google Sans', 'Roboto', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.compose-popup-titlebar .compose-popup-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}

.compose-popup-titlebar .compose-popup-controls button {
  background: none;
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  transition: background 0.15s, opacity 0.15s;
}

.compose-popup-titlebar .compose-popup-controls button:hover {
  background: rgba(255,255,255,0.15);
  opacity: 1;
}

/* Iframe container */
.compose-popup-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.compose-popup-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Dark mode */
html.dark-mode .compose-popup {
  background: #2b2b2b;
  box-shadow: 0 8px 10px 1px rgba(0,0,0,0.3), 0 3px 14px 2px rgba(0,0,0,0.25), 0 5px 5px -3px rgba(0,0,0,0.4);
}

html.dark-mode .compose-popup-titlebar {
  background: #2d2d2d;
}

/* Drag overlay - prevents iframe stealing mouse events during drag/resize */
.compose-popup-drag-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  cursor: move;
  display: none;
}

/* ============================================
   Compose popup iframe overrides
   ============================================ */

/* Additional framed-compose styles for popup context */
body.framed-compose #layout {
  height: 100% !important;
  overflow: hidden !important;
}

body.framed-compose #layout-content {
  border: none !important;
  margin: 0 !important;
}

body.framed-compose .compose-headers {
  padding: 4px 12px !important;
}

body.framed-compose .compose-headers .form-group {
  margin-bottom: 2px !important;
}

body.framed-compose #composebodycontainer {
  padding: 0 !important;
  margin: 0 !important;
}

body.framed-compose #composebody {
  padding: 8px 12px !important;
}


/* ============================================
   COMPOSE BUTTON - Gmail Sidebar Style
   ============================================ */

/* Hide compose from the bottom taskbar */
#taskmenu .action-buttons {
  display: none !important;
}

/* Hide the floating action button (FAB) completely */
.floating-action-buttons {
  display: none !important;
}

/* Gmail-style compose button in sidebar */
#gmail-compose-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 16px 8px 16px;
  padding: 16px 24px;
  background: #c2e7ff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-family: 'Google Sans', 'Roboto', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #001d35;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s ease, background 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  width: auto;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
}

#gmail-compose-btn:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
  background: #a8d8ff;
}

#gmail-compose-btn:active {
  background: #8ecaff;
}

#gmail-compose-btn .compose-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gmail-compose-btn .compose-icon svg {
  width: 24px;
  height: 24px;
}

#gmail-compose-btn .compose-label {
  font-size: 14px;
  line-height: 20px;
}

/* Dark mode compose button */
html.dark-mode #gmail-compose-btn {
  background: #004a77;
  color: #c2e7ff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

html.dark-mode #gmail-compose-btn:hover {
  background: #005a91;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}


/* ============================================
   FRAMED COMPOSE - Gmail-like Form Styling
   ============================================ */

body.framed-compose #layout,
html.iframe body.action-compose #layout {
  background: #fff !important;
}

html.dark-mode body.framed-compose #layout,
html.dark-mode.iframe body.action-compose #layout {
  background: #2b2b2b !important;
}

body.framed-compose #layout-content,
html.iframe body.action-compose #layout-content {
  background: #fff !important;
  border: none !important;
}

html.dark-mode body.framed-compose #layout-content,
html.dark-mode.iframe body.action-compose #layout-content {
  background: #2b2b2b !important;
}

/* Compose headers - clean with light bottom borders */
body.framed-compose .compose-headers,
html.iframe body.action-compose .compose-headers {
  padding: 0 !important;
  margin: 0 !important;
}

body.framed-compose .compose-headers .form-group,
html.iframe body.action-compose .compose-headers .form-group {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #e0e0e0;
  min-height: 34px !important;
}

html.dark-mode body.framed-compose .compose-headers .form-group,
html.dark-mode.iframe body.action-compose .compose-headers .form-group {
  border-bottom-color: #3c4043;
}

body.framed-compose .compose-headers label,
html.iframe body.action-compose .compose-headers label {
  font-size: 14px !important;
  color: #5f6368 !important;
  font-weight: 400 !important;
  padding-left: 12px !important;
  font-family: 'Google Sans', 'Roboto', sans-serif !important;
}

html.dark-mode body.framed-compose .compose-headers label,
html.dark-mode.iframe body.action-compose .compose-headers label {
  color: #9aa0a6 !important;
}

body.framed-compose .compose-headers input,
body.framed-compose .compose-headers select,
body.framed-compose .compose-headers .recipient-input,
html.iframe body.action-compose .compose-headers input,
html.iframe body.action-compose .compose-headers select,
html.iframe body.action-compose .compose-headers .recipient-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 14px !important;
  border-radius: 0 !important;
}

body.framed-compose .compose-headers input:focus,
body.framed-compose .compose-headers .recipient-input.focus,
html.iframe body.action-compose .compose-headers input:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Subject field */
body.framed-compose #compose-subject,
html.iframe body.action-compose #compose-subject {
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.framed-compose #compose-subject:focus,
html.iframe body.action-compose #compose-subject:focus {
  box-shadow: none !important;
}

/* Editor body */
body.framed-compose #composebody,
html.iframe body.action-compose #composebody {
  padding: 12px !important;
  font-size: 14px !important;
  font-family: 'Roboto', Arial, sans-serif !important;
  border: none !important;
}

/* Send button - Gmail blue pill */
body.framed-compose .formbuttons .btn-primary,
body.framed-compose button.btn-primary,
html.iframe body.action-compose .formbuttons .btn-primary {
  background: #0b57d0 !important;
  border: none !important;
  border-radius: 18px !important;
  color: #fff !important;
  font-family: 'Google Sans', 'Roboto', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 24px !important;
  height: 36px !important;
}

body.framed-compose .formbuttons .btn-primary:hover,
html.iframe body.action-compose .formbuttons .btn-primary:hover {
  background: #0842a0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* TinyMCE toolbar clean look */
body.framed-compose .tox-editor-header,
html.iframe body.action-compose .tox-editor-header {
  box-shadow: none !important;
}

body.framed-compose .tox-toolbar__primary,
body.framed-compose .tox-toolbar,
html.iframe body.action-compose .tox-toolbar__primary,
html.iframe body.action-compose .tox-toolbar {
  background: transparent !important;
  border: none !important;
}

body.framed-compose .tox-tbtn,
html.iframe body.action-compose .tox-tbtn {
  border-radius: 4px !important;
}

body.framed-compose .tox-tbtn:hover,
html.iframe body.action-compose .tox-tbtn:hover {
  background: #f1f3f4 !important;
}

html.dark-mode body.framed-compose .tox-tbtn:hover,
html.dark-mode.iframe body.action-compose .tox-tbtn:hover {
  background: #3c4043 !important;
}

/* Compose content fills available space */
body.framed-compose #compose-content,
html.iframe body.action-compose #compose-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}


/* ============================================
   GMAIL COMPOSE POPUP - Internal Iframe Styling
   Complete restyle to match Gmail's compose window
   ============================================ */

/* --- Layout reset for framed compose --- */
body.framed-compose,
html.iframe body.action-compose {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.framed-compose #layout,
html.iframe body.action-compose #layout {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.framed-compose #layout-content,
html.iframe body.action-compose #layout-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

body.framed-compose #compose-content,
html.iframe body.action-compose #compose-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Hide stuff not needed in popup compose --- */
body.framed-compose #layout-sidebar,
body.framed-compose #layout-menu,
body.framed-compose #taskmenu,
body.framed-compose #layout-content > .header,
body.framed-compose .formcontainer > .formcontent.scroller,
body.framed-compose #compose-objects,
body.framed-compose h1.voice,
body.framed-compose h2.voice,
body.framed-compose .footer.menu.toolbar,
html.iframe body.action-compose #layout-sidebar,
html.iframe body.action-compose #layout-menu,
html.iframe body.action-compose #taskmenu,
html.iframe body.action-compose #layout-content > .header,
html.iframe body.action-compose .formcontainer > .formcontent.scroller,
html.iframe body.action-compose #compose-objects,
html.iframe body.action-compose h1.voice,
html.iframe body.action-compose h2.voice,
html.iframe body.action-compose .footer.menu.toolbar {
  display: none !important;
}

/* --- Headers region --- */
body.framed-compose #compose-headers,
html.iframe body.action-compose #compose-headers {
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

body.framed-compose .compose-headers,
html.iframe body.action-compose .compose-headers {
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Individual form rows: clean Gmail style --- */
body.framed-compose .compose-headers .form-group.row,
html.iframe body.action-compose .compose-headers .form-group.row {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #eceff1 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  flex-wrap: nowrap !important;
}

/* --- Labels: compact, Gmail style --- */
body.framed-compose .compose-headers .col-2.col-form-label,
body.framed-compose .compose-headers label.col-form-label,
html.iframe body.action-compose .compose-headers .col-2.col-form-label,
html.iframe body.action-compose .compose-headers label.col-form-label {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 6px 2px 6px 12px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #202124 !important;
  font-family: 'Google Sans', 'Roboto', Arial, sans-serif !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/* --- Input containers: take remaining space --- */
body.framed-compose .compose-headers .col-10,
html.iframe body.action-compose .compose-headers .col-10 {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 4px 0 0 !important;
}

/* --- Input groups: clean, no borders/shadows --- */
body.framed-compose .compose-headers .input-group,
html.iframe body.action-compose .compose-headers .input-group {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  flex-wrap: nowrap !important;
}

/* --- Text inputs: invisible borders, clean --- */
body.framed-compose .compose-headers input.form-control,
body.framed-compose .compose-headers select.form-control,
body.framed-compose .compose-headers .recipient-input,
html.iframe body.action-compose .compose-headers input.form-control,
html.iframe body.action-compose .compose-headers select.form-control,
html.iframe body.action-compose .compose-headers .recipient-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  padding: 6px 8px !important;
  height: auto !important;
  min-height: 30px !important;
  color: #202124 !important;
  font-family: 'Roboto', Arial, sans-serif !important;
}

body.framed-compose .compose-headers input.form-control:focus,
body.framed-compose .compose-headers .recipient-input.focus,
html.iframe body.action-compose .compose-headers input.form-control:focus,
html.iframe body.action-compose .compose-headers .recipient-input.focus {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

/* --- Recipient input widget: clean style --- */
body.framed-compose .compose-headers ul.recipient-input,
html.iframe body.action-compose .compose-headers ul.recipient-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 2px 4px !important;
  min-height: 30px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

body.framed-compose .compose-headers ul.recipient-input li.recipient,
html.iframe body.action-compose .compose-headers ul.recipient-input li.recipient {
  background: #e8eaed !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 2px 8px !important;
  margin: 2px !important;
  font-size: 13px !important;
  color: #3c4043 !important;
  display: inline-flex !important;
  align-items: center !important;
  max-height: 28px !important;
}

body.framed-compose .compose-headers ul.recipient-input li.recipient a.remove {
  margin-left: 4px !important;
  opacity: 0.6 !important;
  font-size: 11px !important;
}

body.framed-compose .compose-headers ul.recipient-input li.recipient a.remove:hover {
  opacity: 1 !important;
}

/* --- Input group append buttons --- */
body.framed-compose .compose-headers .input-group-append,
html.iframe body.action-compose .compose-headers .input-group-append {
  background: transparent !important;
  border: none !important;
}

body.framed-compose .compose-headers .input-group-append .input-group-text,
html.iframe body.action-compose .compose-headers .input-group-append .input-group-text {
  background: transparent !important;
  border: none !important;
  color: #5f6368 !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

body.framed-compose .compose-headers .input-group-append .input-group-text:hover,
html.iframe body.action-compose .compose-headers .input-group-append .input-group-text:hover {
  color: #202124 !important;
  background: rgba(0,0,0,0.04) !important;
  border-radius: 4px !important;
}

/* --- Subject field --- */
body.framed-compose #compose_subject,
html.iframe body.action-compose #compose_subject {
  border-bottom: 1px solid #dadce0 !important;
}

body.framed-compose #compose-subject,
html.iframe body.action-compose #compose-subject {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 14px !important;
  padding: 6px 8px !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
}

/* --- Editor body container: takes remaining space --- */
body.framed-compose #composebodycontainer,
html.iframe body.action-compose #composebodycontainer {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Plain text compose body --- */
body.framed-compose #composebody,
html.iframe body.action-compose #composebody {
  flex: 1 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-family: 'Roboto', Arial, sans-serif !important;
  color: #202124 !important;
  resize: none !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* --- TinyMCE editor: fill available space --- */
body.framed-compose .tox-tinymce,
html.iframe body.action-compose .tox-tinymce {
  flex: 1 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* --- TinyMCE toolbar: Gmail-like formatting bar --- */
body.framed-compose .tox-editor-header,
html.iframe body.action-compose .tox-editor-header {
  box-shadow: none !important;
  border-bottom: 1px solid #eceff1 !important;
  background: #fff !important;
}

body.framed-compose .tox-toolbar__primary,
body.framed-compose .tox-toolbar,
html.iframe body.action-compose .tox-toolbar__primary,
html.iframe body.action-compose .tox-toolbar {
  background: transparent !important;
  border: none !important;
  padding: 2px 4px !important;
}

body.framed-compose .tox-toolbar__group,
html.iframe body.action-compose .tox-toolbar__group {
  padding: 0 2px !important;
}

body.framed-compose .tox-tbtn,
html.iframe body.action-compose .tox-tbtn {
  width: 28px !important;
  height: 28px !important;
  margin: 1px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

body.framed-compose .tox-tbtn:hover,
html.iframe body.action-compose .tox-tbtn:hover {
  background: #f1f3f4 !important;
}

body.framed-compose .tox-tbtn svg,
html.iframe body.action-compose .tox-tbtn svg {
  fill: #5f6368 !important;
}

/* TinyMCE edit area */
body.framed-compose .tox-edit-area,
html.iframe body.action-compose .tox-edit-area {
  border: none !important;
}

body.framed-compose .tox-edit-area__iframe,
html.iframe body.action-compose .tox-edit-area__iframe {
  background: #fff !important;
}

/* --- Hide TinyMCE menubar and statusbar --- */
body.framed-compose .tox-menubar,
html.iframe body.action-compose .tox-menubar {
  display: none !important;
}

body.framed-compose .tox-statusbar,
html.iframe body.action-compose .tox-statusbar {
  display: none !important;
}

/* --- Bottom toolbar / formbuttons: Gmail-style action bar --- */
body.framed-compose .formbuttons,
html.iframe body.action-compose .formbuttons {
  position: relative !important;
  left: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  background: #fff !important;
  border-top: 1px solid #eceff1 !important;
  flex-shrink: 0 !important;
  min-height: 48px !important;
  gap: 4px !important;
}

/* --- Send button: Gmail blue rounded pill --- */
body.framed-compose .formbuttons .btn.send,
body.framed-compose .formbuttons .btn-primary,
html.iframe body.action-compose .formbuttons .btn.send,
html.iframe body.action-compose .formbuttons .btn-primary {
  background: #0b57d0 !important;
  border: none !important;
  border-radius: 18px !important;
  color: #fff !important;
  font-family: 'Google Sans', 'Roboto', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 24px !important;
  height: 36px !important;
  min-width: 80px !important;
  cursor: pointer !important;
  transition: background 0.2s, box-shadow 0.2s !important;
  letter-spacing: 0.01em !important;
  line-height: 36px !important;
  text-transform: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.framed-compose .formbuttons .btn.send:hover,
body.framed-compose .formbuttons .btn-primary:hover,
html.iframe body.action-compose .formbuttons .btn.send:hover,
html.iframe body.action-compose .formbuttons .btn-primary:hover {
  background: #0842a0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

body.framed-compose .formbuttons .btn.send:active,
body.framed-compose .formbuttons .btn-primary:active,
html.iframe body.action-compose .formbuttons .btn.send:active,
html.iframe body.action-compose .formbuttons .btn-primary:active {
  background: #063085 !important;
}

/* --- Extwin/popout button --- */
body.framed-compose .formbuttons .float-right,
html.iframe body.action-compose .formbuttons .float-right {
  margin-left: auto !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

body.framed-compose .formbuttons .btn.extwin,
body.framed-compose .formbuttons .btn-link,
html.iframe body.action-compose .formbuttons .btn.extwin,
html.iframe body.action-compose .formbuttons .btn-link {
  background: transparent !important;
  border: none !important;
  color: #5f6368 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

body.framed-compose .formbuttons .btn.extwin:hover,
body.framed-compose .formbuttons .btn-link:hover,
html.iframe body.action-compose .formbuttons .btn.extwin:hover,
html.iframe body.action-compose .formbuttons .btn-link:hover {
  background: #f1f3f4 !important;
  color: #202124 !important;
}

body.framed-compose .formbuttons .btn.extwin .inner,
body.framed-compose .formbuttons .btn-link .inner,
html.iframe body.action-compose .formbuttons .btn.extwin .inner,
html.iframe body.action-compose .formbuttons .btn-link .inner {
  display: none !important;
}

/* --- Make the compose form take proper height --- */
body.framed-compose #compose-content > form,
html.iframe body.action-compose #compose-content > form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* --- html-editor wrapper --- */
body.framed-compose .html-editor,
html.iframe body.action-compose .html-editor {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* --- From field dropdown styling --- */
body.framed-compose #compose_from select,
body.framed-compose #compose_from .custom-select,
html.iframe body.action-compose #compose_from select,
html.iframe body.action-compose #compose_from .custom-select {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  font-size: 14px !important;
  padding: 6px 24px 6px 8px !important;
  color: #202124 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f6368' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  background-size: 12px !important;
}

/* --- Hide edit identities button in From row --- */
body.framed-compose #compose_from .input-group-append a.icon.edit,
html.iframe body.action-compose #compose_from .input-group-append a.icon.edit {
  display: none !important;
}

/* --- "Add header" popup link styling --- */
body.framed-compose #compose_to .input-group-append a[data-popup="headers-menu"],
html.iframe body.action-compose #compose_to .input-group-append a[data-popup="headers-menu"] {
  font-size: 12px !important;
  color: #5f6368 !important;
  padding: 4px 8px !important;
}

/* --- Content-frame-navigation footer in framed compose --- */
body.framed-compose .content-frame-navigation,
html.iframe body.action-compose .content-frame-navigation {
  display: none !important;
}

/* --- Attachment list compact styling --- */
body.framed-compose #attachment-list,
html.iframe body.action-compose #attachment-list {
  padding: 4px 12px !important;
  margin: 0 !important;
}

body.framed-compose #attachment-list li,
html.iframe body.action-compose #attachment-list li {
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  margin-bottom: 2px !important;
}

/* --- Compose popup container refinements (parent page) --- */
.compose-popup .compose-popup-body {
  background: #fff !important;
}

/* Fix any residual border/shadow on layout-content */
body.framed-compose #layout-content.listbox,
html.iframe body.action-compose #layout-content.listbox {
  border-left: none !important;
  border-right: none !important;
}

/* Clean up any Elastic padding on compose content */
body.framed-compose .formcontainer.content,
html.iframe body.action-compose .formcontainer.content {
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

/* Ensure the form element between headers and body is flex */
body.framed-compose #compose-content form,
html.iframe body.action-compose #compose-content form {
  display: contents !important;
}

/* Remove any border on top of compose headers */
body.framed-compose #compose-headers,
html.iframe body.action-compose #compose-headers {
  border-top: none !important;
}

/* Make formbuttons always visible and at bottom */
body.framed-compose .formbuttons,
html.iframe body.action-compose .formbuttons {
  z-index: 10 !important;
}


/* ============================================
   COMPOSE POPUP CLEANUP - Gmail-like defaults
   ============================================ */

/* Hide Cc, Bcc, Reply-To, Followup-To by default in framed compose */
body.framed-compose .compose-headers #compose_cc,
body.framed-compose .compose-headers #compose_bcc,
body.framed-compose .compose-headers #compose_replyto,
body.framed-compose .compose-headers #compose_followupto,
body.framed-compose .compose-headers .form-group[id*="_cc"],
body.framed-compose .compose-headers .form-group[id*="_bcc"],
body.framed-compose .compose-headers .form-group[id*="_replyto"],
body.framed-compose .compose-headers .form-group[id*="_followupto"],
html.iframe body.action-compose .compose-headers #compose_cc,
html.iframe body.action-compose .compose-headers #compose_bcc,
html.iframe body.action-compose .compose-headers #compose_replyto,
html.iframe body.action-compose .compose-headers #compose_followupto {
  display: none !important;
}

/* Hide the delete icons next to Cc/Bcc in headers */
body.framed-compose .compose-headers .input-group-append .icon.delete,
html.iframe body.action-compose .compose-headers .input-group-append .icon.delete {
  display: none !important;
}

/* Hide the contacts group icon next to header fields */
body.framed-compose .compose-headers .input-group-append a.icon.contacts,
html.iframe body.action-compose .compose-headers .input-group-append a.icon.contacts {
  display: none !important;
}

/* Deduplicate Send buttons - hide any secondary send buttons that duplicate */
body.framed-compose .formbuttons .btn.send + .btn.send,
body.framed-compose .formbuttons .btn-primary + .btn-primary,
html.iframe body.action-compose .formbuttons .btn.send + .btn.send {
  display: none !important;
}

/* Position the editor toolbar closer to the bottom action bar */
body.framed-compose .tox-editor-header,
html.iframe body.action-compose .tox-editor-header {
  border-bottom: none !important;
  border-top: 1px solid #dadce0 !important;
  background: #fff !important;
}

/* TinyMCE toolbar buttons - smaller, Gmail-like */
body.framed-compose .tox-tbtn,
html.iframe body.action-compose .tox-tbtn {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}

body.framed-compose .tox-tbtn svg,
html.iframe body.action-compose .tox-tbtn svg {
  width: 18px !important;
  height: 18px !important;
}

/* Hide the TinyMCE menubar (File/Edit/etc) */
body.framed-compose .tox-menubar,
html.iframe body.action-compose .tox-menubar {
  display: none !important;
}

/* Hide toolbar overflow chevron */
body.framed-compose .tox-toolbar__overflow,
html.iframe body.action-compose .tox-toolbar__overflow {
  display: none !important;
}

/* Make the formbuttons Send button the only prominent one */
body.framed-compose .formbuttons .btn:not(.send):not(.btn-primary),
html.iframe body.action-compose .formbuttons .btn:not(.send):not(.btn-primary) {
  background: transparent !important;
  border: none !important;
  color: #5f6368 !important;
  padding: 4px 8px !important;
  border-radius: 50% !important;
  min-width: 0 !important;
  width: 36px !important;
  height: 36px !important;
}

body.framed-compose .formbuttons .btn:not(.send):not(.btn-primary):hover,
html.iframe body.action-compose .formbuttons .btn:not(.send):not(.btn-primary):hover {
  background: #f1f3f4 !important;
  color: #202124 !important;
}

/* ============================================
   GMAIL COMPOSE LAYOUT FIX
   - Move formatting toolbar to BOTTOM (above Send)
   - Single Send button
   ============================================ */

/* --- Force compose-content to be a flex column so we can reorder --- */
body.framed-compose #compose-content,
html.iframe body.action-compose #compose-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

body.framed-compose #compose-content > form,
html.iframe body.action-compose #compose-content > form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
}

/* --- Compose headers stay at top --- */
body.framed-compose .compose-headers,
html.iframe body.action-compose .compose-headers {
  order: 1 !important;
  flex-shrink: 0 !important;
}

/* --- Editor container grows to fill space --- */
body.framed-compose #composebodycontainer,
body.framed-compose .html-editor,
html.iframe body.action-compose #composebodycontainer,
html.iframe body.action-compose .html-editor {
  order: 2 !important;
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* --- TinyMCE container flex layout --- */
body.framed-compose .tox-tinymce,
html.iframe body.action-compose .tox-tinymce {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  border: none !important;
  visibility: visible !important;
}

/* --- Editor content area grows --- */
body.framed-compose .tox-sidebar-wrap,
html.iframe body.action-compose .tox-sidebar-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

body.framed-compose .tox-edit-area,
html.iframe body.action-compose .tox-edit-area {
  flex: 1 !important;
}

body.framed-compose .tox-edit-area__iframe,
html.iframe body.action-compose .tox-edit-area__iframe {
  height: 100% !important;
}

/* --- Move TinyMCE editor-header (formatting toolbar) to BOTTOM --- */
body.framed-compose .tox-editor-header,
html.iframe body.action-compose .tox-editor-header {
  order: 99 !important;
  border-top: 1px solid #dadce0 !important;
  border-bottom: none !important;
  background: #fff !important;
  padding: 2px 4px !important;
  flex-shrink: 0 !important;
}

html.dark-mode body.framed-compose .tox-editor-header,
html.dark-mode.iframe body.action-compose .tox-editor-header {
  background: #2b2b2b !important;
  border-top-color: #3c4043 !important;
}

/* --- TinyMCE toolbar styling - compact like Gmail --- */
body.framed-compose .tox-toolbar__primary,
html.iframe body.action-compose .tox-toolbar__primary {
  background: transparent !important;
  border: none !important;
  flex-wrap: wrap !important;
}

body.framed-compose .tox-toolbar__group,
html.iframe body.action-compose .tox-toolbar__group {
  border: none !important;
  padding: 0 2px !important;
}

body.framed-compose .tox-tbtn,
html.iframe body.action-compose .tox-tbtn {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  color: #5f6368 !important;
}

body.framed-compose .tox-tbtn:hover,
html.iframe body.action-compose .tox-tbtn:hover {
  background: #f1f3f4 !important;
  color: #202124 !important;
}

body.framed-compose .tox-tbtn svg,
html.iframe body.action-compose .tox-tbtn svg {
  fill: #5f6368 !important;
}

/* --- Formbuttons (Send bar) at very bottom --- */
body.framed-compose .formbuttons,
html.iframe body.action-compose .formbuttons {
  order: 100 !important;
  position: relative !important;
  left: auto !important;
  display: none !important;
  align-items: center !important;
  background: #fff !important;
  border-top: 1px solid #dadce0 !important;
  padding: 4px 12px !important;
  min-height: 44px !important;
  gap: 2px !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.dark-mode body.framed-compose .formbuttons,
html.dark-mode.iframe body.action-compose .formbuttons {
  background: #2b2b2b !important;
  border-top-color: #3c4043 !important;
}

/* --- Gmail-style Send button (blue pill with dropdown) --- */
body.framed-compose .formbuttons .btn.send,
body.framed-compose .formbuttons .btn-primary,
html.iframe body.action-compose .formbuttons .btn.send,
html.iframe body.action-compose .formbuttons .btn-primary {
  background: #0b57d0 !important;
  border: none !important;
  border-radius: 18px !important;
  color: #fff !important;
  font-family: 'Google Sans', 'Roboto', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 24px !important;
  height: 36px !important;
  min-width: 80px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: -1 !important;
}

body.framed-compose .formbuttons .btn.send:hover,
body.framed-compose .formbuttons .btn-primary:hover,
html.iframe body.action-compose .formbuttons .btn.send:hover,
html.iframe body.action-compose .formbuttons .btn-primary:hover {
  background: #0842a0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* --- Hide ALL duplicate/extra buttons in formbuttons except the first send --- */
body.framed-compose .formbuttons > *:not(.btn-primary):not(.btn.send):not(.float-right),
html.iframe body.action-compose .formbuttons > *:not(.btn-primary):not(.btn.send):not(.float-right) {
  display: none !important;
}

/* --- Show the extwin/popout area (float-right) --- */
body.framed-compose .formbuttons .float-right,
html.iframe body.action-compose .formbuttons .float-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

/* --- Attachment, options buttons as icon-only circles --- */
body.framed-compose .formbuttons .float-right .btn,
html.iframe body.action-compose .formbuttons .float-right .btn {
  background: transparent !important;
  border: none !important;
  color: #5f6368 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

body.framed-compose .formbuttons .float-right .btn:hover,
html.iframe body.action-compose .formbuttons .float-right .btn:hover {
  background: #f1f3f4 !important;
}

/* Hide button text labels, show only icons */
body.framed-compose .formbuttons .float-right .btn .inner,
html.iframe body.action-compose .formbuttons .float-right .btn .inner {
  display: none !important;
}

/* --- Plain text compose body (when TinyMCE not active) --- */
body.framed-compose #composebody:not(.mce-content-body),
html.iframe body.action-compose #composebody:not(.mce-content-body) {
  order: 2 !important;
  flex: 1 !important;
}


/* Gmail-style recipient chips - clean borderless input */
body.framed-compose .compose-headers .input-group,
body.framed-compose .compose-headers .form-group .col-10,
body.framed-compose .compose-headers .form-group .input-group {
  border: none !important;
  box-shadow: none !important;
}

body.framed-compose .compose-headers textarea,
body.framed-compose .compose-headers textarea.form-control,
body.framed-compose .compose-headers .recipient-input,
body.framed-compose .compose-headers ul.recipient-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  resize: none !important;
  overflow: hidden !important;
}

body.framed-compose .compose-headers textarea:focus,
body.framed-compose .compose-headers textarea.form-control:focus,
body.framed-compose .compose-headers .recipient-input:focus,
body.framed-compose .compose-headers .recipient-input.focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Gmail-style recipient chips (pill shaped) */
body.framed-compose .compose-headers ul.recipient-input li.recipient {
  background: #e8eaed !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 4px 10px !important;
  margin: 2px 4px 2px 0 !important;
  font-size: 13px !important;
  color: #3c4043 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  line-height: 20px !important;
}

body.framed-compose .compose-headers ul.recipient-input li.recipient:hover {
  background: #d3d3d3 !important;
}

body.framed-compose .compose-headers ul.recipient-input li.recipient.selected {
  background: #c2e7ff !important;
  color: #001d35 !important;
}

body.framed-compose .compose-headers ul.recipient-input li.recipient a.remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: 0.5 !important;
  margin-left: 2px !important;
  text-decoration: none !important;
  color: inherit !important;
}

body.framed-compose .compose-headers ul.recipient-input li.recipient a.remove:hover {
  opacity: 1 !important;
  background: rgba(0,0,0,0.1) !important;
}

/* Input group append borders */
body.framed-compose .compose-headers .input-group-append,
body.framed-compose .compose-headers .input-group-append .input-group-text {
  border: none !important;
  background: transparent !important;
}

/* Recipient chips - no wrapping, truncate with ellipsis */
body.framed-compose .compose-headers ul.recipient-input li.recipient {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 200px !important;
}

body.framed-compose .compose-headers ul.recipient-input {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}

/* Hide add-contact button in framed compose */
body.framed-compose .compose-headers .input-group-append a.recipient {
  display: none !important;
}


/* Force recipient row to single line */
body.framed-compose #compose_to,
body.framed-compose #compose_cc,
body.framed-compose #compose_bcc {
  flex-wrap: nowrap !important;
}

body.framed-compose #compose_to .col-10,
body.framed-compose #compose_cc .col-10,
body.framed-compose #compose_bcc .col-10 {
  overflow: hidden !important;
}

body.framed-compose #compose_to .input-group,
body.framed-compose #compose_cc .input-group,
body.framed-compose #compose_bcc .input-group {
  flex-wrap: nowrap !important;
}

body.framed-compose .compose-headers ul.recipient-input li.recipient {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: none !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

body.framed-compose .compose-headers ul.recipient-input li.recipient span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* Aggressive fix - prevent ALL text wrapping in To/Cc/Bcc fields */
body.framed-compose #compose_to *,
body.framed-compose #compose_cc *,
body.framed-compose #compose_bcc *,
body.framed-compose .compose-headers .col-10 *,
body.framed-compose .compose-headers .input-group * {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Specific targeting for recipient elements */
body.framed-compose .compose-headers textarea,
body.framed-compose .compose-headers input,
body.framed-compose .compose-headers .recipient-input,
body.framed-compose .compose-headers ul.recipient-input,
body.framed-compose .compose-headers li.recipient {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-wrap: normal !important;
  word-break: normal !important;
}

/* Force single line for the input group container */
body.framed-compose .compose-headers .input-group {
  flex-wrap: nowrap !important;
  align-items: center !important;
}


/* Fix To field textarea - expand to fill and no wrap */
body.framed-compose .compose-headers #_to,
body.framed-compose .compose-headers #_cc,
body.framed-compose .compose-headers #_bcc,
body.framed-compose .compose-headers textarea[data-recipient-input] {
  flex: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  resize: none !important;
  height: 30px !important;
  line-height: 30px !important;
  rows: 1 !important;
}


/* --- Match To/Cc/Bcc textarea style to From select --- */
body.framed-compose .compose-headers #_to,
body.framed-compose .compose-headers #_cc,
body.framed-compose .compose-headers #_bcc,
body.framed-compose .compose-headers textarea[data-recipient-input],
html.iframe body.action-compose .compose-headers #_to,
html.iframe body.action-compose .compose-headers #_cc,
html.iframe body.action-compose .compose-headers #_bcc,
html.iframe body.action-compose .compose-headers textarea[data-recipient-input] {
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #202124 !important;
  padding: 6px 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 21px !important;
  height: 33px !important;
}

/* Also match the labels (From, To, Subject) consistently */
body.framed-compose .compose-headers label.col-form-label,
html.iframe body.action-compose .compose-headers label.col-form-label {
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #5f6368 !important;
  padding: 6px 8px !important;
  line-height: 21px !important;
}

/* --- Hide floating action button (FAB) pencil compose --- */
.floating-action-buttons {
  display: none !important;
}

/* --- Hide smart_reply compose FAB pencil (redundant with sidebar Compose) --- */
#sr-compose-fab {
  display: none !important;
}

/* ============================================
   UNIFIED SLIM TOP BAR
   ============================================ */

/* All three headers: same height, same grey background */
#layout-sidebar > .header,
#messagelist-header,
#preview-header-spacer,
#message-action-bar,
.search-row {
  min-height: 36px !important;
  max-height: 36px !important;
  height: 36px !important;
  background: #e8eaed !important;
  border-bottom: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Sidebar header - email display */
#layout-sidebar > .header {
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 12px !important;
  border-bottom: none !important;
}

#layout-sidebar > .header .header-title.username {
  font-size: 12px !important;
  color: #5f6368 !important;
  line-height: 36px !important;
  height: 36px !important;
}

/* Message list header */
#messagelist-header {
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 8px !important;
}

/* Search row - compact */
.search-row {
  min-height: 36px !important;
  max-height: 36px !important;
  height: 36px !important;
  padding: 2px 8px !important;
  background: #e8eaed !important;
  border-bottom: 1px solid #dadce0 !important;
}

.search-row .refresh {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
}

/* Content area spacer/toolbar */
#preview-header-spacer {
  min-height: 36px !important;
  max-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  background: #e8eaed !important;
  border-bottom: none !important;
}

/* Message action bar when message selected */
#message-action-bar {
  min-height: 36px !important;
  max-height: 36px !important;
  height: 36px !important;
  padding: 0 8px !important;
  background: #e8eaed !important;
  border-bottom: 1px solid #dadce0 !important;
  gap: 2px !important;
}

#message-action-bar .button {
  padding: 4px 10px !important;
  font-size: 12px !important;
}

/* Toolbar buttons in content header - smaller */
#layout-content > .header .toolbar a,
#layout-content > .header .toolbar button {
  padding: 4px 8px !important;
  font-size: 13px !important;
}

/* Dark mode */
html.dark-mode #layout-sidebar > .header,
html.dark-mode #messagelist-header,
html.dark-mode #preview-header-spacer,
html.dark-mode #message-action-bar,
html.dark-mode .search-row {
  background: #3c4043 !important;
  border-bottom-color: #5f6368 !important;
}

html.dark-mode #layout-sidebar > .header .header-title.username {
  color: #9aa0a6 !important;
}

/* ============================================
   COHESIVE TOP BAR - remove seams & double rows
   ============================================ */

/* Hide the empty messagelist-header (all children hidden) */
#messagelist-header {
  display: none !important;
}

/* Column resizers should be transparent at the top bar level */
.column-resizer {
  z-index: 1 !important;
}

/* Make all top-bar elements the same exact height */
#layout-sidebar > .header,
.search-row,
#preview-header-spacer {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  background: #e8eaed !important;
  border-bottom: 1px solid #dadce0 !important;
  border-top: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Remove right border on sidebar header to blend into search row */
#layout-sidebar > .header {
  border-right: none !important;
}

/* Remove left border on search row */
.search-row {
  border-left: none !important;
}

/* Remove left border on content spacer */
#preview-header-spacer {
  border-left: none !important;
}

/* ============================================
   UNIFIED ACTION BAR BUTTONS - Modern & Consistent
   ============================================ */

/* Reset: all action buttons get the same base style */
#message-action-bar .action-btn,
#message-action-bar .action-btn.reply,
#message-action-bar .action-btn.reply-all,
#message-action-bar .action-btn.forward,
#message-action-bar .action-btn.delete,
#message-action-bar .action-btn.mark,
#message-action-bar .action-btn.more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  height: 32px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Google Sans', Roboto, sans-serif !important;
  text-decoration: none !important;
  color: #444746 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  white-space: nowrap !important;
}

/* Hover - subtle grey fill for ALL buttons */
#message-action-bar .action-btn:hover,
#message-action-bar .action-btn.reply:hover,
#message-action-bar .action-btn.reply-all:hover,
#message-action-bar .action-btn.forward:hover,
#message-action-bar .action-btn.delete:hover,
#message-action-bar .action-btn.mark:hover,
#message-action-bar .action-btn.more:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #202124 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Active/pressed */
#message-action-bar .action-btn:active {
  background: rgba(0, 0, 0, 0.12) !important;
}

/* Icons - consistent size */
#message-action-bar .action-btn::before {
  font-size: 15px !important;
  line-height: 1 !important;
  opacity: 0.75 !important;
}

#message-action-bar .action-btn:hover::before {
  opacity: 1 !important;
}

/* Clean up icon specifics */
#message-action-bar .action-btn.reply-all::before {
  font-size: 12px !important;
  letter-spacing: -4px !important;
  margin-right: 2px !important;
}

#message-action-bar .action-btn.delete::before {
  font-size: 14px !important;
}

#message-action-bar .action-btn.more::before {
  font-size: 18px !important;
}

/* Dividers - thinner, subtler */
#message-action-bar .action-divider {
  width: 1px !important;
  height: 18px !important;
  background: #dadce0 !important;
  margin: 0 4px !important;
  opacity: 0.6 !important;
}

/* Pop-out button - icon only, right-aligned */
#message-action-bar .action-btn.popout {
  margin-left: auto !important;
  padding: 0 8px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#message-action-bar .action-btn.popout .inner {
  display: none !important;
}

/* Action bar itself - vertically center everything */
#layout-content.selected #message-action-bar {
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  gap: 2px !important;
}

/* Dark mode */
html.dark-mode #message-action-bar .action-btn {
  color: #bdc1c6 !important;
}

html.dark-mode #message-action-bar .action-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e8eaed !important;
}

html.dark-mode #message-action-bar .action-divider {
  background: #5f6368 !important;
}

/* ============================================
   SORTABLE COLUMN HEADERS
   ============================================ */

/* Hide the sort button */
.search-row .sort-button {
  display: none !important;
}

/* Column header row */
#column-headers {
  display: flex;
  align-items: center;
  height: 28px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  padding: 0;
  font-family: 'Google Sans', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #5f6368;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  user-select: none;
  flex-shrink: 0;
}

/* Individual column header */
#column-headers .col-header {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
}

/* Sortable columns - clickable */
#column-headers .col-header.sortable {
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  border-radius: 0;
}

#column-headers .col-header.sortable:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #202124;
}

/* Active sort column */
#column-headers .col-header.sorted {
  color: #1a73e8;
  font-weight: 600;
}

#column-headers .col-header.sorted .sort-arrow {
  color: #1a73e8;
  font-size: 10px;
}

/* Column widths - match message list layout */
#column-headers .col-checkbox {
  width: 40px;
  min-width: 40px;
  justify-content: center;
}

#column-headers .col-checkbox input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

#column-headers .col-from {
  width: 120px;
  min-width: 100px;
}

#column-headers .col-subject {
  flex: 1;
  min-width: 100px;
}

#column-headers .col-date {
  width: 80px;
  min-width: 70px;
  justify-content: flex-end;
}

#column-headers .col-size {
  width: 50px;
  min-width: 45px;
  justify-content: flex-end;
  padding-right: 12px;
}

/* Sort arrow */
.sort-arrow {
  font-size: 10px;
  margin-left: 2px;
}

/* Dark mode */
html.dark-mode #column-headers {
  background: #2d2d2d;
  border-bottom-color: #3c4043;
  color: #9aa0a6;
}

html.dark-mode #column-headers .col-header.sortable:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eaed;
}

html.dark-mode #column-headers .col-header.sorted {
  color: #8ab4f8;
}

html.dark-mode #column-headers .col-header.sorted .sort-arrow {
  color: #8ab4f8;
}

/* Column headers - match action bar height (36px) */
#column-headers {
  height: 36px !important;
  min-height: 36px !important;
  font-size: 12px !important;
  background: #e8eaed !important;
  border-bottom: 1px solid #dadce0 !important;
}

#column-headers .col-header {
  height: 36px !important;
  line-height: 36px !important;
}

/* ============================================
   RIGHT-CLICK CONTEXT MENU
   ============================================ */
#mail-context-menu {
  display: none;
  position: fixed;
  z-index: 10000;
  min-width: 220px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1);
  padding: 6px 0;
  font-family: 'Google Sans', Roboto, sans-serif;
  font-size: 13px;
  color: #202124;
}

#mail-context-menu .ctx-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.1s ease;
  position: relative;
  gap: 10px;
  white-space: nowrap;
}

#mail-context-menu .ctx-item:hover {
  background: #f1f3f4;
}

#mail-context-menu .ctx-icon {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}

#mail-context-menu .ctx-arrow {
  margin-left: auto;
  color: #9aa0a6;
  font-size: 16px;
  padding-left: 12px;
}

#mail-context-menu .ctx-divider {
  height: 1px;
  background: #e8eaed;
  margin: 4px 0;
}

/* Submenu */
#mail-context-menu .ctx-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -6px;
  min-width: 200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1);
  padding: 6px 0;
  z-index: 10001;
}

#mail-context-menu .ctx-has-sub:hover > .ctx-submenu {
  display: block;
}

#mail-context-menu .ctx-submenu .ctx-item {
  padding: 7px 14px;
  font-size: 13px;
}

/* ============================================
   SNOOZE DATE/TIME PICKER
   ============================================ */
#snooze-picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.snooze-picker {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  min-width: 300px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  font-family: 'Google Sans', Roboto, sans-serif;
}

.snooze-picker h3 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 500;
  color: #202124;
}

.snooze-field {
  margin-bottom: 16px;
}

.snooze-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #5f6368;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.snooze-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Google Sans', Roboto, sans-serif;
  color: #202124;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.snooze-field input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);
}

.snooze-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.snooze-btn {
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Google Sans', Roboto, sans-serif;
  cursor: pointer;
  border: none;
  transition: background 0.15s, box-shadow 0.15s;
}

.snooze-btn.cancel {
  background: transparent;
  color: #1a73e8;
}

.snooze-btn.cancel:hover {
  background: #e8f0fe;
}

.snooze-btn.confirm {
  background: #1a73e8;
  color: #fff;
}

.snooze-btn.confirm:hover {
  background: #1765cc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Dark mode context menu */
html.dark-mode #mail-context-menu,
html.dark-mode #mail-context-menu .ctx-submenu {
  background: #2d2d2d;
  color: #e8eaed;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

html.dark-mode #mail-context-menu .ctx-item:hover {
  background: #3c4043;
}

html.dark-mode #mail-context-menu .ctx-divider {
  background: #3c4043;
}

html.dark-mode .snooze-picker {
  background: #2d2d2d;
  color: #e8eaed;
}

html.dark-mode .snooze-picker h3 {
  color: #e8eaed;
}

html.dark-mode .snooze-field input {
  background: #3c4043;
  border-color: #5f6368;
  color: #e8eaed;
}

/* Snooze button icon in action bar */
#message-action-bar .action-btn.snooze::before { content: '⏰'; font-size: 14px; }

/* Inline snooze menu (from action bar button) */
#inline-snooze-menu {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1);
  padding: 6px 0;
  min-width: 160px;
  font-family: 'Google Sans', Roboto, sans-serif;
  font-size: 13px;
  color: #202124;
}

#inline-snooze-menu .snooze-option {
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.1s ease;
}

#inline-snooze-menu .snooze-option:hover {
  background: #f1f3f4;
}

#inline-snooze-menu .snooze-divider {
  height: 1px;
  background: #e8eaed;
  margin: 4px 0;
}

html.dark-mode #inline-snooze-menu {
  background: #2d2d2d;
  color: #e8eaed;
}

html.dark-mode #inline-snooze-menu .snooze-option:hover {
  background: #3c4043;
}

html.dark-mode #inline-snooze-menu .snooze-divider {
  background: #3c4043;
}
/* ============================================
   ENHANCED MOBILE RESPONSIVE STYLES
   ============================================ */

/* Base mobile styles - tablets and small screens */
@media screen and (max-width: 768px) {
  
  /* Ensure touch targets are at least 44px */
  .button, button, input[type="button"], input[type="submit"], 
  .btn, a.button, .toolbar a, .messagelist tbody tr td a,
  #taskmenu a, #layout-menu .popover-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px 12px !important;
    line-height: 28px !important;
  }
  
  /* Make the layout more mobile-friendly */
  #layout {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Mobile navigation adjustments */
  #layout-menu {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    order: -1 !important; /* Move to top */
    border-bottom: 1px solid #dadce0 !important;
  }
  
  #taskmenu {
    display: flex !important;
    justify-content: space-around !important;
    padding: 8px !important;
  }
  
  #taskmenu a {
    flex: 1 !important;
    text-align: center !important;
    padding: 12px 8px !important;
    margin: 0 4px !important;
    border-radius: 8px !important;
  }
  
  /* Hide text labels on very small screens, keep icons */
  #taskmenu a .inner {
    font-size: 12px !important;
  }
  
  /* Sidebar adjustments for mobile */
  #layout-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    height: auto !important;
  }
  
  #layout-sidebar .header {
    padding: 12px 16px !important;
    border-bottom: 1px solid #dadce0 !important;
  }
  
  #folderlist-content {
    max-height: 300px !important;
    overflow-y: auto !important;
  }
  
  /* Message list optimizations */
  #layout-list {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #messagelist {
    font-size: 14px !important;
  }
  
  #messagelist tbody tr {
    min-height: 44px !important;
  }
  
  #messagelist tbody tr td {
    padding: 8px 4px !important;
    vertical-align: middle !important;
  }
  
  /* Make checkboxes larger for touch */
  #messagelist .selection input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 8px !important;
  }
  
  /* Message actions toolbar */
  #message-action-bar {
    padding: 12px !important;
    flex-wrap: wrap !important;
  }
  
  #message-action-bar .action-btn {
    margin: 4px !important;
    padding: 8px 12px !important;
    min-height: 44px !important;
  }
  
  /* Reading pane adjustments */
  #layout-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
  }
  
  #message-header {
    padding: 16px !important;
    border-bottom: 1px solid #dadce0 !important;
  }
  
  #message-content {
    padding: 16px !important;
    font-size: 16px !important; /* Better readability */
    line-height: 1.5 !important;
  }
  
  /* Compose form adjustments */
  #compose-form {
    padding: 16px !important;
  }
  
  #compose-form .form-group {
    margin-bottom: 16px !important;
  }
  
  #compose-form input[type="text"], 
  #compose-form input[type="email"],
  #compose-form textarea {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
    border-radius: 4px !important;
    border: 1px solid #dadce0 !important;
  }
  
  #compose-form textarea {
    min-height: 200px !important;
    resize: vertical !important;
  }
  
  /* Search functionality */
  .search-box input {
    padding: 12px 16px !important;
    font-size: 16px !important;
    width: 100% !important;
  }
  
  /* Modal dialogs */
  .modal, .popover {
    max-width: 95vw !important;
    margin: 8px !important;
  }
  
  .modal-content, .popover-body {
    padding: 16px !important;
  }
}

/* Phone-specific styles */
@media screen and (max-width: 480px) {
  
  /* Even more compact on phones */
  #taskmenu a .inner {
    font-size: 0 !important; /* Hide text, show only icons */
  }
  
  #taskmenu a::before {
    font-size: 18px !important;
  }
  
  /* Stack layout vertically */
  #layout-sidebar, #layout-list, #layout-content {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }
  
  /* Hide sidebar by default on phones, show toggle */
  #layout-sidebar {
    position: fixed !important;
    top: 60px !important;
    left: -100% !important;
    height: calc(100vh - 60px) !important;
    background: white !important;
    z-index: 1000 !important;
    transition: left 0.3s ease !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1) !important;
  }
  
  #layout-sidebar.sidebar-visible {
    left: 0 !important;
  }
  
  /* Add hamburger menu button */
  #layout-menu::before {
    content: "☰" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    z-index: 1001 !important;
  }
  
  /* Message list - show more compact info */
  #messagelist .subject {
    font-weight: 500 !important;
    display: block !important;
  }
  
  #messagelist .date,
  #messagelist .from {
    font-size: 12px !important;
    color: #666 !important;
  }
  
  /* Hide less important columns on phones */
  #messagelist .size,
  #messagelist .attachment {
    display: none !important;
  }
  
  /* Compose toolbar */
  #compose-toolbar {
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 8px !important;
  }
  
  #compose-toolbar .button {
    display: inline-block !important;
    margin-right: 8px !important;
  }
}

/* Large phone landscape and small tablets */
@media screen and (min-width: 481px) and (max-width: 768px) {
  
  /* Show sidebar as a narrow column in landscape */
  #layout-sidebar {
    width: 200px !important;
    min-width: 200px !important;
  }
  
  #layout-list {
    width: calc(100% - 200px) !important;
  }
  
  /* Two-column layout for better space usage */
  #layout {
    display: flex !important;
    flex-wrap: wrap !important;
  }
}

/* iPad and tablet portrait */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  
  /* Three-column layout with adjusted widths */
  #layout-sidebar {
    width: 25% !important;
    min-width: 200px !important;
  }
  
  #layout-list {
    width: 35% !important;
    min-width: 300px !important;
  }
  
  #layout-content {
    width: 40% !important;
  }
  
  /* Touch-friendly but not as large as phone */
  .button, .btn, a.button {
    min-height: 40px !important;
    padding: 6px 10px !important;
  }
}

/* Dark mode mobile adjustments */
@media screen and (max-width: 768px) {
  .dark-mode #layout-sidebar {
    background: #1f1f1f !important;
    border-color: #333 !important;
  }
  
  .dark-mode #layout-menu {
    background: #1f1f1f !important;
    border-color: #333 !important;
  }
  
  .dark-mode #message-content {
    background: #1f1f1f !important;
    color: #e8eaed !important;
  }
}

/* Accessibility improvements */
@media screen and (max-width: 768px) {
  
  /* Focus indicators */
  .button:focus, button:focus, a:focus,
  input:focus, textarea:focus, select:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
  }
  
  /* High contrast for better readability */
  #messagelist .unread {
    font-weight: 600 !important;
  }
  
  /* Better contrast for links */
  a {
    color: #1a73e8 !important;
    text-decoration: underline !important;
  }
}

/* ============================================
   MOBILE LOGIN PAGE
   ============================================ */
@media screen and (max-width: 480px) {
  body.task-login #login-form {
    padding: 32px 24px !important;
    margin: 16px !important;
    max-width: calc(100vw - 32px) !important;
  }
  
  body.task-login #login-form input[type="text"],
  body.task-login #login-form input[type="password"] {
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 12px !important;
    min-height: 44px !important;
  }
  
  body.task-login #login-form button,
  body.task-login #login-form input[type="submit"] {
    min-height: 48px !important;
    font-size: 16px !important;
    width: 100% !important;
  }
}

/* ============================================
   MOBILE MESSAGE VIEW
   ============================================ */
@media screen and (max-width: 768px) {
  /* Make message content readable on mobile */
  #message-objects,
  #messagebody {
    padding: 12px !important;
    overflow-x: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Prevent wide emails from breaking layout */
  #messagebody img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  #messagebody table {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }
  
  /* Attachment list */
  #attachment-list li {
    padding: 8px 12px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Folder list items touch-friendly */
  #mailboxlist li a {
    padding: 10px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Header toolbar */
  .header {
    padding: 8px 12px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Search bar */
  .searchbar input {
    font-size: 16px !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
  }
  
  /* Toolbar buttons spacing */
  .toolbar a, .toolbar button {
    margin: 2px 4px !important;
    padding: 8px !important;
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Compose recipients chips */
  .recipient-input .chip {
    padding: 6px 10px !important;
    margin: 2px !important;
    min-height: 32px !important;
  }
}

/* ============================================
   SWIPE GESTURE SUPPORT (visual hints)
   ============================================ */
@media screen and (max-width: 768px) {
  #messagelist tbody tr {
    transition: transform 0.2s ease !important;
    position: relative !important;
  }
  
  /* Smooth transitions for layout changes */
  #layout-sidebar,
  #layout-list,
  #layout-content {
    transition: all 0.3s ease !important;
  }
}

/* ============================================
   MOBILE RESPONSIVE FIXES
   ============================================ */

/* Mobile layout improvements */
@media screen and (max-width: 768px) {
  /* Hide bottom page navigation on mobile - will be moved to hamburger */
  .pagenav.menu.footer {
    display: none !important;
  }
  
  /* Mobile hamburger menu container */
  #mobile-hamburger-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100vh;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    z-index: 9998;
    transition: left 0.3s ease;
    overflow-y: auto;
    padding: 60px 0 20px;
  }
  
  #mobile-hamburger-menu.active {
    left: 0;
  }
  
  html.dark-mode #mobile-hamburger-menu {
    background: #2d2d30;
    border-right-color: #5f6368;
  }
  
  /* Menu overlay */
  #mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 9997;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  #mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* Hamburger button styling */
  .mobile-hamburger-btn {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #5f6368;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  html.dark-mode .mobile-hamburger-btn {
    background: #2d2d30;
    border-color: #5f6368;
    color: #e8eaed;
  }
  
  /* Ensure message list scrolls properly */
  #layout-list,
  #messagelist-container,
  #messagelist {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Fix layout heights for mobile */
  #layout-list {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  #messagelist-container {
    flex: 1 !important;
    overflow-y: auto !important;
  }
  
  /* Adjust Clippy for mobile */
  .clippy {
    bottom: 20px !important;
    right: 10px !important;
    z-index: 9990 !important; /* Below hamburger menu */
  }
}

/* Extra small mobile devices */
@media screen and (max-width: 480px) {
  #mobile-hamburger-menu {
    width: 260px;
  }
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 768px) {
    /* Hide sidebar by default on mobile */
    #layout-sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        z-index: 1000;
        width: 280px;
        height: 100vh;
        background: #fff;
        transition: left 0.3s ease;
        border-right: 1px solid #ddd;
    }
    
    /* Show sidebar when active */
    #layout-sidebar.sidebar-open {
        left: 0;
    }
    
    /* Mobile sidebar toggle button */
    .mobile-sidebar-toggle {
        display: block !important;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1001;
        background: #4285f4;
        color: white;
        border: none;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
    }
    
    /* Hide desktop sidebar toggle */
    .sidebar-toggle {
        display: none !important;
    }
    
    /* Full width main content */
    #layout-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 60px; /* Space for toggle button */
    }
    
    /* Stack layout vertically */
    #layout > .row {
        flex-direction: column;
    }
    
    /* Message list full width */
    #messagelist-content {
        width: 100% !important;
    }
    
    /* Message list responsive */
    #messagepreview {
        width: 100% !important;
        margin-top: 10px;
    }
    
    /* Message toolbar responsive */
    .message-toolbar {
        flex-wrap: wrap;
    }
    
    .message-toolbar .toolbar-button {
        min-height: 44px !important; /* Touch target */
        min-width: 44px !important;
        padding: 10px !important;
    }
    
    /* Message list items touch-friendly */
    #messagelist tr {
        height: auto;
        min-height: 44px;
    }
    
    #messagelist td {
        padding: 8px 4px;
    }
    
    /* Button sizing for touch */
    .btn, .button, button {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* Input field sizing */
    input[type="text"], input[type="email"], input[type="password"], textarea, select {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px !important;
    }
    
    /* Folder list in sidebar */
    .folderlist li {
        padding: 12px !important;
        border-bottom: 1px solid #eee;
    }
    
    .folderlist a {
        font-size: 16px !important;
        line-height: 1.4;
    }
    
    /* Hide some less important columns in message list */
    #messagelist .size,
    #messagelist .flag,
    #messagelist .attachment {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Very small screens adjustments */
    #layout-sidebar {
        width: 250px;
    }
    
    #messagelist td.subject {
        font-size: 14px !important;
    }
    
    #messagelist tr {
        min-height: 40px;
    }
}

/* Dark mode mobile adjustments */
@media (max-width: 768px) {
    html.dark-mode #layout-sidebar {
        background: #21292c;
        border-right-color: #4d6066;
    }
    
    html.dark-mode .mobile-sidebar-toggle {
        background: #374549;
        color: #c5d1d3;
    }
    
    html.dark-mode .folderlist li {
        border-bottom-color: #4d6066;
    }
}
/* ==================================================
   MOBILE RESPONSIVE OVERHAUL 
   ================================================== */

/* Hamburger button - always hidden on desktop */
.mobile-hamburger-btn {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1001;
    background: #1a73e8;
    color: white;
    border: none;
    border-radius: 4px;
    width: 44px;
    height: 44px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    line-height: 1;
    text-align: center;
}

.mobile-hamburger-btn:hover {
    background: #1557b0;
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* ==================================================
   TABLET LAYOUT (481px - 768px)
   ================================================== */
@media (max-width: 768px) and (min-width: 481px) {
    /* Show hamburger button */
    .mobile-hamburger-btn {
        display: block !important;
    }
    
    /* Hide sidebar by default */
    #layout-sidebar {
        position: fixed !important;
        left: -300px !important;
        top: 0 !important;
        width: 280px !important;
        height: 100% !important;
        z-index: 1000 !important;
        background: white !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
    }
    
    /* Show sidebar when open */
    body.sidebar-open #layout-sidebar {
        left: 0 !important;
    }
    
    body.sidebar-open .sidebar-overlay {
        display: block;
    }
    
    /* Main content takes full width */
    #layout-list {
        width: 100% !important;
        left: 0 !important;
    }
    
    /* Hide preview pane completely on tablet */
    #layout-content.hidden {
        display: none !important;
    }
    
    /* Message list improvements */
    #messagelist tr {
        min-height: 50px !important;
    }
    
    #messagelist td {
        padding: 12px 8px !important;
        font-size: 14px !important;
    }
    
    #messagelist td.subject {
        font-weight: 500 !important;
    }
    
    /* Toolbar improvements */
    .toolbar {
        padding: 8px !important;
        flex-wrap: wrap !important;
    }
    
    .toolbar .button {
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 2px !important;
    }
    
    /* Touch-friendly folder list */
    .folderlist li {
        padding: 15px 12px !important;
        border-bottom: 1px solid #e8eaed !important;
    }
    
    .folderlist a {
        font-size: 16px !important;
        line-height: 1.5 !important;
        display: block !important;
        min-height: 44px !important;
    }
}

/* ==================================================
   MOBILE PHONE LAYOUT (max 480px)
   ================================================== */
@media (max-width: 480px) {
    /* Show hamburger button */
    .mobile-hamburger-btn {
        display: block !important;
    }
    
    /* Hide sidebar completely by default */
    #layout-sidebar {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 1000 !important;
        background: white !important;
        box-shadow: 2px 0 15px rgba(0,0,0,0.2) !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
    }
    
    /* Show sidebar when open */
    body.sidebar-open #layout-sidebar {
        left: 0 !important;
    }
    
    body.sidebar-open .sidebar-overlay {
        display: block;
    }
    
    /* Message list takes full screen */
    #layout-list {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
    }
    
    /* Hide preview pane completely */
    #layout-content {
        display: none !important;
    }
    
    /* When viewing a message, hide list and show content */
    body.mailbox-action-show #layout-list {
        display: none !important;
    }
    
    body.mailbox-action-show #layout-content {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 10 !important;
    }
    
    /* Message list mobile styling */
    #messagelist {
        width: 100% !important;
    }
    
    #messagelist tr {
        min-height: 60px !important;
        display: block !important;
        margin: 0 0 8px 0 !important;
        background: white !important;
        border: 1px solid #e8eaed !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    #messagelist td {
        display: block !important;
        padding: 8px 12px !important;
        border: none !important;
        font-size: 14px !important;
    }
    
    #messagelist td.subject {
        font-weight: 600 !important;
        font-size: 15px !important;
        padding-bottom: 4px !important;
    }
    
    #messagelist td.fromto {
        color: #666 !important;
        font-size: 13px !important;
        padding-bottom: 4px !important;
    }
    
    #messagelist td.date {
        color: #999 !important;
        font-size: 12px !important;
        text-align: right !important;
        float: right !important;
        padding: 8px 12px 4px 0 !important;
    }
    
    /* Hide less important columns */
    #messagelist td.size,
    #messagelist td.flag,
    #messagelist td.attachment {
        display: none !important;
    }
    
    /* Toolbar mobile styling */
    .toolbar {
        padding: 10px 8px !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }
    
    .toolbar .button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 12px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
        margin: 2px !important;
    }
    
    .toolbar .input-group {
        width: 100% !important;
        margin: 5px 0 !important;
    }
    
    .toolbar input[type=text],
    .toolbar input[type=search] {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
    }
    
    /* Header mobile styling */
    .header {
        padding: 10px 50px 10px 15px !important; /* Space for hamburger */
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    
    .header-title {
        font-size: 16px !important;
        flex: 1 !important;
        text-align: center !important;
    }
    
    /* Folder list mobile styling */
    .folderlist li {
        padding: 18px 15px !important;
        border-bottom: 1px solid #e8eaed !important;
        min-height: 60px !important;
    }
    
    .folderlist a {
        font-size: 16px !important;
        line-height: 1.5 !important;
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        color: #333 !important;
        text-decoration: none !important;
    }
    
    .folderlist a:hover,
    .folderlist a.selected {
        background: #f1f3f4 !important;
        border-radius: 4px !important;
    }
    
    /* Form elements touch-friendly */
    input[type=text],
    input[type=email],
    input[type=password],
    input[type=search],
    textarea,
    select,
    .form-control {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
        border-radius: 6px !important;
    }
    
    /* Checkboxes and buttons */
    input[type=checkbox],
    input[type=radio],
    .button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Modal/popup adjustments */
    .popup,
    .modal-dialog {
        width: 95% !important;
        max-width: none !important;
        margin: 10px auto !important;
    }
    
    /* Back button for message view */
    .back-list-button {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 1001 !important;
        background: #1a73e8 !important;
        color: white !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }
}

/* ==================================================
   DARK MODE MOBILE ADJUSTMENTS
   ================================================== */
@media (max-width: 768px) {
    html.dark-mode #layout-sidebar {
        background: #202124 !important;
        color: #e8eaed !important;
    }
    
    html.dark-mode .mobile-hamburger-btn {
        background: #1a73e8 !important;
    }
    
    html.dark-mode .mobile-hamburger-btn:hover {
        background: #1557b0 !important;
    }
    
    html.dark-mode .folderlist li {
        border-bottom-color: #3c4043 !important;
    }
    
    html.dark-mode .folderlist a {
        color: #e8eaed !important;
    }
    
    html.dark-mode .folderlist a:hover,
    html.dark-mode .folderlist a.selected {
        background: #3c4043 !important;
    }
}

@media (max-width: 480px) {
    html.dark-mode #messagelist tr {
        background: #202124 !important;
        border-color: #3c4043 !important;
    }
    
    html.dark-mode #messagelist td.fromto {
        color: #9aa0a6 !important;
    }
    
    html.dark-mode #messagelist td.date {
        color: #9aa0a6 !important;
    }
}

/* ============================================
   FIX: Login page visible on mobile
   The mobile media queries hide #layout-content (preview pane),
   but the login form lives inside #layout-content, so it must
   be visible on the login page at all viewport sizes.
   ============================================ */
body.task-login #layout-content {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: auto !important;
}

body.task-login #layout-content .formcontainer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   FIX: Hide Clippy on mobile - blocks content
   ============================================ */
@media screen and (max-width: 768px) {
  .clippy, .clippy-balloon, #clippy-container, [class*="clippy"] {
    display: none !important;
  }
}

/* ============================================
   FIX: Better mobile message list layout
   Card-style layout replacing table columns
   ============================================ */
@media screen and (max-width: 768px) {
  /* Hide custom column headers on mobile */
  #column-headers {
    display: none !important;
  }
  
  /* Hide table column headers on mobile */
  #messagelist thead {
    display: none !important;
  }
  
  /* Card-style message rows */
  #messagelist tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    align-items: center !important;
  }
  
  /* The subject td contains fromto, date, size, and subject as spans */
  #messagelist tbody tr td.subject {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    padding: 0 !important;
    align-items: center !important;
  }
  
  #messagelist tbody tr td.subject span.subject {
    width: 100% !important;
    order: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 4px 0 !important;
  }

  #messagelist tbody tr td.subject span.fromto {
    flex: 1 !important;
    order: 2 !important;
    font-size: 12px !important;
    color: #666 !important;
  }
  
  #messagelist tbody tr td.subject span.date {
    order: 3 !important;
    font-size: 11px !important;
    color: #999 !important;
    text-align: right !important;
  }
  
  #messagelist tbody tr td.subject span.size {
    display: none !important;
  }
  
  /* Hide selection and flags columns on mobile for cleaner look */
  #messagelist tbody tr td.selection {
    display: none !important;
  }
  
  #messagelist tbody tr td.flags {
    order: 10 !important;
    margin-left: auto !important;
  }
}

/* ============================================
   FIX: Show email content on mobile when viewing a message
   ============================================ */
@media screen and (max-width: 768px) {
  body.action-show #layout-content {
    display: flex !important;
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    z-index: 999 !important;
  }
  
  body.action-show #layout-list {
    display: none !important;
  }
  
  body.action-show #layout-sidebar {
    display: none !important;
  }
}

/* Mobile back button for email view */
#mobile-back-btn {
  display: none;
}

@media screen and (max-width: 768px) {
  body.action-show #mobile-back-btn {
    display: block !important;
  }
}

/* ============================================
   MOBILE EMAIL VIEW - Show content full-screen
   Works with elastic's .hidden class toggle
   ============================================ */
@media screen and (max-width: 768px) {
  /* When elastic shows layout-content (removes .hidden), make it full screen */
  #layout-content:not(.hidden) {
    display: block !important;
    width: 100% !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 998 !important;
    background: #fff !important;
    overflow-y: auto !important;
  }
  
  html.dark-mode #layout-content:not(.hidden) {
    background: #1a1a2e !important;
  }
  
  /* Ensure the message content iframe fills the space */
  #layout-content:not(.hidden) #messagecontframe {
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    border: none !important;
  }
  
  /* Style the back/close button that elastic provides */
  #layout-content:not(.hidden) .header a.back-content-button,
  #layout-content:not(.hidden) .header a.back-list-button {
    display: inline-flex !important;
    min-height: 44px !important;
    min-width: 44px !important;
    align-items: center !important;
    padding: 8px 12px !important;
    color: #1a73e8 !important;
    font-weight: 500 !important;
  }
}

/* ============================================
   FIX: Mobile iframe scroll issue 
   The messagecontframe iframe gets overflow:clip, cutting off content
   ============================================ */
@media screen and (max-width: 768px) {
  #layout-content:not(.hidden) #messagecontframe {
    overflow: auto !important;
    /* Remove any height constraints that might interfere */
    min-height: 300px !important;
    max-height: none !important;
  }
}

/* ============================================
   FIX: Cohesive header bar across top
   Sidebar header must match search-row grey
   ============================================ */
html body #layout #layout-sidebar > .header,
html body #layout #layout-sidebar > .header.ui-droppable,
#layout-sidebar.listbox > .header {
  background: #e8eaed !important;
  background-color: #e8eaed !important;
  min-height: 36px !important;
  max-height: 36px !important;
  height: 36px !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
}

html.dark-mode body #layout #layout-sidebar > .header,
html.dark-mode #layout-sidebar.listbox > .header {
  background: #2d2d2d !important;
  background-color: #2d2d2d !important;
}

/* Ensure the search row and column headers also match */
#layout-list > .header,
#layout-list .search-row,
#column-headers {
  background: #e8eaed !important;
  background-color: #e8eaed !important;
  min-height: 36px !important;
  max-height: 36px !important;
  height: 36px !important;
  border-bottom: none !important;
}

/* Content area toolbar header - match the grey */
#layout-content > .header,
#layout-content > .header[role="toolbar"] {
  background: #e8eaed !important;
  background-color: #e8eaed !important;
  min-height: 36px !important;
  max-height: 36px !important;
  height: 36px !important;
  border-bottom: none !important;
}

/* ============================================
   FIX: Column headers (FROM/SUBJECT/DATE/SIZE) should be white
   Not grey - they sit below the grey header bar
   ============================================ */
#column-headers,
#messagelist thead,
#layout-list > .header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

html.dark-mode #column-headers,
html.dark-mode #messagelist thead,
html.dark-mode #layout-list > .header {
  background: #1a1a2e !important;
  background-color: #1a1a2e !important;
  border-bottom: 1px solid #3c4043 !important;
}

/* ============================================
   FIX: Reply/Reply All toolbar - white like column headers
   ============================================ */
#message-action-bar,
#layout-content.selected #message-action-bar {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

html.dark-mode #message-action-bar,
html.dark-mode #layout-content.selected #message-action-bar {
  background: #1a1a2e !important;
  background-color: #1a1a2e !important;
  border-bottom: 1px solid #3c4043 !important;
}

/* ============================================
   Hide SIZE column from headers and message list
   ============================================ */
#column-headers .col-size,
#messagelist td.size,
#messagelist .size {
  display: none !important;
}

/* ============================================
   GMAIL-STYLE COMPACT COMPOSE TOOLBAR (POPUP)
   Hide formatting toolbar by default, compact when shown
   ============================================ */

/* Hide TinyMCE toolbar by default in compose popup */
body.framed-compose .tox-toolbar__primary,
body.framed-compose .tox-toolbar-overlord,
html.iframe body.action-compose .tox-toolbar__primary,
html.iframe body.action-compose .tox-toolbar-overlord {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  transition: height 0.2s ease !important;
}

/* Show toolbar when toggled */
body.framed-compose .tox-tinymce.toolbar-visible .tox-toolbar__primary,
body.framed-compose .tox-tinymce.toolbar-visible .tox-toolbar-overlord,
html.iframe body.action-compose .tox-tinymce.toolbar-visible .tox-toolbar__primary,
html.iframe body.action-compose .tox-tinymce.toolbar-visible .tox-toolbar-overlord {
  display: flex !important;
  height: auto !important;
  max-height: 30px !important;
  overflow: visible !important;
  background: #f1f3f4 !important;
  border-top: 1px solid #dadce0 !important;
  padding: 1px 4px !important;
  flex-wrap: nowrap !important;
}

/* Compact toolbar buttons */
body.framed-compose .tox-tinymce.toolbar-visible .tox-tbtn,
html.iframe body.action-compose .tox-tinymce.toolbar-visible .tox-tbtn {
  height: 24px !important;
  width: 24px !important;
  min-height: 24px !important;
  min-width: 24px !important;
  margin: 0 1px !important;
  padding: 2px !important;
}

body.framed-compose .tox-tinymce.toolbar-visible .tox-icon svg,
html.iframe body.action-compose .tox-tinymce.toolbar-visible .tox-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* Compact toolbar groups */
body.framed-compose .tox-tinymce.toolbar-visible .tox-toolbar__group,
html.iframe body.action-compose .tox-tinymce.toolbar-visible .tox-toolbar__group {
  padding: 0 2px !important;
  height: 28px !important;
}

/* Compact font dropdowns */
body.framed-compose .tox-tinymce.toolbar-visible .tox-tbtn--bespoke,
html.iframe body.action-compose .tox-tinymce.toolbar-visible .tox-tbtn--bespoke {
  width: auto !important;
  max-width: 90px !important;
  height: 24px !important;
  min-height: 24px !important;
}

body.framed-compose .tox-tinymce.toolbar-visible .tox-tbtn--bespoke .tox-tbtn__select-label,
html.iframe body.action-compose .tox-tinymce.toolbar-visible .tox-tbtn__select-label {
  font-size: 11px !important;
}

/* Hide rarely-used buttons in compose popup */
body.framed-compose .tox-tbtn[title="Left to right"],
body.framed-compose .tox-tbtn[title="Right to left"],
body.framed-compose .tox-tbtn[title="Table"],
body.framed-compose .tox-tbtn[title="Special character"],
body.framed-compose .tox-tbtn[title="Insert/edit media"],
body.framed-compose .tox-tbtn[title="Source code"],
body.framed-compose .tox-tbtn[title="Find and replace"],
body.framed-compose .tox-tbtn[title="Remove link"],
body.framed-compose .tox-tbtn[title="Align center"],
body.framed-compose .tox-tbtn[title="Align right"],
body.framed-compose .tox-tbtn[title="Justify"],
html.iframe body.action-compose .tox-tbtn[title="Left to right"],
html.iframe body.action-compose .tox-tbtn[title="Right to left"],
html.iframe body.action-compose .tox-tbtn[title="Table"],
html.iframe body.action-compose .tox-tbtn[title="Special character"],
html.iframe body.action-compose .tox-tbtn[title="Insert/edit media"],
html.iframe body.action-compose .tox-tbtn[title="Source code"],
html.iframe body.action-compose .tox-tbtn[title="Find and replace"],
html.iframe body.action-compose .tox-tbtn[title="Remove link"],
html.iframe body.action-compose .tox-tbtn[title="Align center"],
html.iframe body.action-compose .tox-tbtn[title="Align right"],
html.iframe body.action-compose .tox-tbtn[title="Justify"] {
  display: none !important;
}

/* Also hide the tox-editor-header bar (anchorbar) */
body.framed-compose .tox-editor-header,
html.iframe body.action-compose .tox-editor-header {
}

body.framed-compose .tox-tinymce.toolbar-visible .tox-editor-header,
html.iframe body.action-compose .tox-tinymce.toolbar-visible .tox-editor-header {
  height: auto !important;
  max-height: 32px !important;
  min-height: 28px !important;
  overflow: visible !important;
}

/* Style the formbuttons (bottom bar) - add formatting toggle button */
body.framed-compose .formbuttons .formatting-toggle,
html.iframe body.action-compose .formbuttons .formatting-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #5f6368 !important;
  border-radius: 50% !important;
  text-decoration: underline !important;
  font-family: Arial, sans-serif !important;
}

body.framed-compose .formbuttons .formatting-toggle:hover {
  background: #f1f3f4 !important;
}

body.framed-compose .formbuttons .formatting-toggle.active {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
}

/* Dark mode */
html.dark-mode body.framed-compose .tox-tinymce.toolbar-visible .tox-toolbar__primary,
html.dark-mode body.framed-compose .tox-tinymce.toolbar-visible .tox-editor-header {
  background: #2d2d2d !important;
  border-top-color: #3c4043 !important;
}

/* ============================================
   Gmail-style Compose Toolbar: Non-framed compose
   Extend the framed-compose rules to also work
   when compose is opened directly (not in iframe)
   ============================================ */

/* Hide TinyMCE toolbar by default in non-framed compose */
body.action-compose .tox-toolbar__primary,
body.action-compose .tox-toolbar-overlord {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  transition: height 0.2s ease !important;
}

body.action-compose .tox-editor-header {
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Show toolbar when toggled */
body.action-compose .tox-tinymce.toolbar-visible .tox-toolbar__primary,
body.action-compose .tox-tinymce.toolbar-visible .tox-toolbar-overlord {
  display: flex !important;
  height: auto !important;
  max-height: 30px !important;
  overflow: visible !important;
  background: #f1f3f4 !important;
  border-top: 1px solid #dadce0 !important;
  padding: 1px 4px !important;
  flex-wrap: nowrap !important;
}

body.action-compose .tox-tinymce.toolbar-visible .tox-editor-header {
  height: auto !important;
  max-height: 32px !important;
  min-height: 28px !important;
  overflow: visible !important;
}

/* Compact toolbar buttons */
body.action-compose .tox-tinymce.toolbar-visible .tox-tbtn {
  height: 24px !important;
  width: 24px !important;
  min-height: 24px !important;
  min-width: 24px !important;
  margin: 0 1px !important;
  padding: 2px !important;
}

body.action-compose .tox-tinymce.toolbar-visible .tox-icon svg {
  width: 14px !important;
  height: 14px !important;
}

body.action-compose .tox-tinymce.toolbar-visible .tox-tbtn--select {
  width: auto !important;
  max-width: 90px !important;
  font-size: 11px !important;
}

body.action-compose .tox-tinymce.toolbar-visible .tox-toolbar__group {
  padding: 0 2px !important;
  border-right: 1px solid #dadce0 !important;
}

/* Hide rarely-used buttons */
body.action-compose .tox-tbtn[title="Left to right"],
body.action-compose .tox-tbtn[title="Right to left"],
body.action-compose .tox-tbtn[title="Table"],
body.action-compose .tox-tbtn[title="Special character"],
body.action-compose .tox-tbtn[title="Insert/edit media"],
body.action-compose .tox-tbtn[title="Source code"],
body.action-compose .tox-tbtn[title="Find and replace"],
body.action-compose .tox-tbtn[title="Remove link"],
body.action-compose .tox-tbtn[title="Align center"],
body.action-compose .tox-tbtn[title="Align right"],
body.action-compose .tox-tbtn[title="Justify"],
body.action-compose .tox-tbtn[title="More..."] {
  display: none !important;
}

/* Style the Gmail bottom bar for non-framed compose */
body.action-compose #gmail-compose-bottom {
  display: block !important;
  position: relative !important;
  background: #fff !important;
  border-top: 1px solid #dadce0 !important;
  padding: 8px 16px !important;
  z-index: 100 !important;
}

/* Dark mode for non-framed compose toolbar */
html.dark-mode body.action-compose .tox-tinymce.toolbar-visible .tox-toolbar__primary,
html.dark-mode body.action-compose .tox-tinymce.toolbar-visible .tox-editor-header {
  background: #2d2d2d !important;
  border-top-color: #3c4043 !important;
}

/* ============================================
   POPUP COMPOSE (framed) - Gmail-like compact bottom bar
   IMPORTANT: Hide bulky TinyMCE top formatting bar in popup mode
   ============================================ */
body.framed-compose .tox-editor-header,
body.framed-compose .tox-toolbar,
body.framed-compose .tox-toolbar__primary,
body.framed-compose .tox-toolbar-overlord,
html.iframe body.action-compose .tox-editor-header,
html.iframe body.action-compose .tox-toolbar,
html.iframe body.action-compose .tox-toolbar__primary,
html.iframe body.action-compose .tox-toolbar-overlord {
}

/* Keep editor area clean/tight */
body.framed-compose .tox-tinymce,
html.iframe body.action-compose .tox-tinymce {
  border-top: 0 !important;
}

/* Compact Gmail-style bottom action bar */
body.framed-compose .formbuttons,
html.iframe body.action-compose .formbuttons {
  min-height: 38px !important;
  height: 38px !important;
  padding: 3px 8px !important;
  gap: 2px !important;
  border-top: 1px solid #dadce0 !important;
  background: #fff !important;
}

/* Compact send button */
body.framed-compose .formbuttons .send,
body.framed-compose .formbuttons button.send,
body.framed-compose .formbuttons input[type='submit'],
html.iframe body.action-compose .formbuttons .send {
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  padding: 0 14px !important;
}

/* Compact icon buttons in bottom bar */
body.framed-compose .formbuttons .button,
body.framed-compose .formbuttons button:not(.send),
body.framed-compose .formbuttons a.button,
html.iframe body.action-compose .formbuttons .button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 1px !important;
  border-radius: 50% !important;
}

/* Hide less-Gmail-like footer actions in popup */
body.framed-compose .formbuttons .extwin,
body.framed-compose .formbuttons [title*='new window'],
html.iframe body.action-compose .formbuttons .extwin {
  display: none !important;
}

html.dark-mode body.framed-compose .formbuttons,
html.dark-mode html.iframe body.action-compose .formbuttons {
  background: #2d2d2d !important;
  border-top-color: #3c4043 !important;
}

/* ============================================
   POPUP COMPOSE - GMAIL-STYLE BOTTOM BAR FIX
   Make formbuttons exactly like Gmail's compact bar
   ============================================ */

/* Override previous formbuttons styling - make it truly compact */
body.framed-compose .formbuttons,
html.iframe body.action-compose .formbuttons {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  min-height: 32px !important;
  max-height: 32px !important;
  height: 32px !important;
  padding: 2px 8px !important;
  margin: 0 !important;
  gap: 4px !important;
  border-top: 1px solid #dadce0 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  overflow: hidden !important;
}

/* Gmail-style Send button */
body.framed-compose .formbuttons button[type="submit"],
body.framed-compose .formbuttons .button.send,
body.framed-compose .formbuttons input[type="submit"],
html.iframe body.action-compose .formbuttons button[type="submit"] {
  background: #1a73e8 !important;
  color: white !important;
  border: none !important;
  border-radius: 18px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
  cursor: pointer !important;
}

body.framed-compose .formbuttons button[type="submit"]:hover,
html.iframe body.action-compose .formbuttons button[type="submit"]:hover {
  background: #1557b0 !important;
}

/* Compact icon buttons in Gmail style */
body.framed-compose .formbuttons button:not([type="submit"]),
body.framed-compose .formbuttons a.button:not(.send),
body.framed-compose .formbuttons .button:not(.send),
html.iframe body.action-compose .formbuttons button:not([type="submit"]) {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

body.framed-compose .formbuttons button:not([type="submit"]):hover,
html.iframe body.action-compose .formbuttons button:not([type="submit"]):hover {
  background: #f1f3f4 !important;
}

/* Hide non-Gmail-like elements */
body.framed-compose .formbuttons .extwin,
body.framed-compose .formbuttons [title*="new window"],
body.framed-compose .formbuttons [title*="New window"],
html.iframe body.action-compose .formbuttons .extwin {
  display: none !important;
}

/* Dark mode */
html.dark-mode body.framed-compose .formbuttons,
html.dark-mode html.iframe body.action-compose .formbuttons {
  background: #2d2d2d !important;
  border-top-color: #3c4043 !important;
}

html.dark-mode body.framed-compose .formbuttons button:not([type="submit"]):hover {
  background: #3c4043 !important;
}

/* ============================================
   FIX: Show TinyMCE toolbar when moved into gmail-formatting-bar
   Override the hide rules for tox elements inside our formatting bar
   ============================================ */
#gmail-formatting-bar .tox-toolbar-overlord,
#gmail-formatting-bar .tox-toolbar__primary,
#gmail-formatting-bar .tox-toolbar,
#gmail-formatting-bar .tox-editor-header,
#gmail-formatting-bar .tox-toolbar__group {
  display: inline-flex !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: visible !important;
  background: transparent !important;
}

/* Compact buttons inside the formatting bar */
#gmail-formatting-bar .tox-tbtn {
  display: inline-flex !important;
  visibility: visible !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  color: #444746 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
}

#gmail-formatting-bar .tox-tbtn:hover {
  background: #e8eaed !important;
}

#gmail-formatting-bar .tox-tbtn svg {
  fill: #444746 !important;
}

/* Font/size dropdowns wider */
#gmail-formatting-bar .tox-tbtn--bespoke,
#gmail-formatting-bar .tox-tbtn--select {
  width: auto !important;
  min-width: auto !important;
  padding: 0 4px !important;
}

#gmail-formatting-bar .tox-tbtn__select-label {
  font-size: 12px !important;
}

/* Hide rarely-used buttons inside formatting bar too */
#gmail-formatting-bar .tox-tbtn[title="Left to right"],
#gmail-formatting-bar .tox-tbtn[title="Right to left"],
#gmail-formatting-bar .tox-tbtn[title="Table"],
#gmail-formatting-bar .tox-tbtn[title="Special character"],
#gmail-formatting-bar .tox-tbtn[title="Insert/edit media"],
#gmail-formatting-bar .tox-tbtn[title="Source code"],
#gmail-formatting-bar .tox-tbtn[title="Find and replace"],
#gmail-formatting-bar .tox-tbtn[title="Remove link"],
#gmail-formatting-bar .tox-tbtn[title="Insert/edit image"],
#gmail-formatting-bar .tox-tbtn[title="More..."] {
  display: none !important;
}

/* Formatting bar visible state */
#gmail-formatting-bar:not(.gmail-hidden) {
  display: flex !important;
  min-height: 34px !important;
}

/* ============================================
   GMAIL-STYLE FORMATTING BAR (TinyMCE in framed mode)
   Style the TinyMCE toolbar to look like Gmail's grey formatting bar
   ============================================ */

/* Make TinyMCE toolbar look like Gmail's formatting bar */
body.framed-compose .tox-editor-header,
body.framed-compose .tox-toolbar__primary,
body.framed-compose .tox-toolbar-overlord,
html.iframe body.action-compose .tox-editor-header,
html.iframe body.action-compose .tox-toolbar__primary,
html.iframe body.action-compose .tox-toolbar-overlord {
  background: #f1f3f4 !important;
  border-top: 1px solid #dadce0 !important;
  border-bottom: 1px solid #dadce0 !important;
  padding: 4px 8px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Gmail-style toolbar buttons */
body.framed-compose .tox-tbtn,
html.iframe body.action-compose .tox-tbtn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: none !important;
  color: #3c4043 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.framed-compose .tox-tbtn:hover,
html.iframe body.action-compose .tox-tbtn:hover {
  background: #e8eaed !important;
}

body.framed-compose .tox-tbtn--bespoke,
body.framed-compose .tox-tbtn--select,
html.iframe body.action-compose .tox-tbtn--bespoke {
  width: auto !important;
  min-width: auto !important;
  padding: 0 6px !important;
  height: 26px !important;
  border-radius: 4px !important;
}

body.framed-compose .tox-tbtn__select-label,
html.iframe body.action-compose .tox-tbtn__select-label {
  font-size: 13px !important;
  color: #3c4043 !important;
}

/* Toolbar groups with separators */
body.framed-compose .tox-toolbar__group,
html.iframe body.action-compose .tox-toolbar__group {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 4px !important;
  padding: 0 !important;
  border: none !important;
  border-right: 1px solid #dadce0 !important;
  padding-right: 6px !important;
}

body.framed-compose .tox-toolbar__group:last-child,
html.iframe body.action-compose .tox-toolbar__group:last-child {
  border-right: none !important;
  padding-right: 0 !important;
}

/* Hide rarely used buttons in Gmail style */
body.framed-compose .tox-tbtn[title="Left to right"],
body.framed-compose .tox-tbtn[title="Right to left"],
body.framed-compose .tox-tbtn[title="Table"],
body.framed-compose .tox-tbtn[title="Special character"],
body.framed-compose .tox-tbtn[title="Insert/edit media"],
body.framed-compose .tox-tbtn[title="Source code"],
body.framed-compose .tox-tbtn[title="Find and replace"],
body.framed-compose .tox-tbtn[title="Remove link"],
body.framed-compose .tox-tbtn[title="More..."],
html.iframe body.action-compose .tox-tbtn[title="Left to right"],
html.iframe body.action-compose .tox-tbtn[title="Right to left"],
html.iframe body.action-compose .tox-tbtn[title="Table"],
html.iframe body.action-compose .tox-tbtn[title="Special character"],
html.iframe body.action-compose .tox-tbtn[title="Insert/edit media"],
html.iframe body.action-compose .tox-tbtn[title="Source code"],
html.iframe body.action-compose .tox-tbtn[title="Find and replace"],
html.iframe body.action-compose .tox-tbtn[title="Remove link"],
html.iframe body.action-compose .tox-tbtn[title="More..."] {
  display: none !important;
}

/* Dark mode */
html.dark-mode body.framed-compose .tox-editor-header,
html.dark-mode body.framed-compose .tox-toolbar__primary,
html.dark-mode body.framed-compose .tox-toolbar-overlord {
  background: #2d2d2d !important;
  border-color: #3c4043 !important;
}

html.dark-mode body.framed-compose .tox-tbtn:hover {
  background: #3c4043 !important;
}

/* ============================================
   CUSTOM GMAIL-STYLE FORMATTING BAR
   Replaces TinyMCE toolbar with Gmail-like formatting controls
   ============================================ */

/* Formatting bar container */
#gmail-formatting-bar {
  background: #f1f3f4 !important;
  border-top: 1px solid #dadce0 !important;
  border-bottom: 1px solid #dadce0 !important;
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Formatting groups with separators */
.fmt-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  border-right: 1px solid #dadce0 !important;
  padding-right: 8px !important;
  margin-right: 8px !important;
}

.fmt-group:last-child {
  border-right: none !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* Format buttons (Bold, Italic, Underline, etc) */
.fmt-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border: none !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #3c4043 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fmt-btn:hover {
  background: #e8eaed !important;
}

.fmt-btn:active,
.fmt-btn.active {
  background: #d3e3fd !important;
  color: #1a73e8 !important;
}

.fmt-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

/* Format dropdowns (Font, Size) */
.fmt-dropdown {
  background: transparent !important;
  border: none !important;
  color: #3c4043 !important;
  font-size: 13px !important;
  font-family: 'Google Sans', -apple-system, sans-serif !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  min-width: 80px !important;
  height: 28px !important;
}

.fmt-dropdown:hover {
  background: #e8eaed !important;
}

.fmt-dropdown:focus {
  outline: none !important;
  background: #e8eaed !important;
}

.fmt-size {
  min-width: 60px !important;
}

/* Dark mode */
html.dark-mode #gmail-formatting-bar {
  background: #2d2d2d !important;
  border-color: #3c4043 !important;
}

html.dark-mode .fmt-group {
  border-color: #3c4043 !important;
}

html.dark-mode .fmt-btn {
  color: #e8eaed !important;
}

html.dark-mode .fmt-btn:hover {
  background: #3c4043 !important;
}

html.dark-mode .fmt-dropdown {
  color: #e8eaed !important;
}

html.dark-mode .fmt-dropdown:hover {
  background: #3c4043 !important;
}

/* ============================================
   Gmail visual tune (popup compose) - Feb 14
   ============================================ */

/* Make the formatting bar look like Gmail's rounded light-grey strip */
#gmail-formatting-bar {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: calc(100% - 16px) !important;
  min-height: 34px !important;
  padding: 4px 10px !important;
  margin: 6px 8px 2px 8px !important;
  background: #f1f3f4 !important;
  border: none !important;
  border-radius: 18px !important;
  gap: 6px !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}

/* slimmer separators */
#gmail-formatting-bar .fmt-group {
  border-right: 1px solid #dadce0 !important;
  margin-right: 6px !important;
  padding-right: 6px !important;
  gap: 1px !important;
}

#gmail-formatting-bar .fmt-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  color: #444746 !important;
}

#gmail-formatting-bar .fmt-btn svg {
  width: 16px !important;
  height: 16px !important;
}

#gmail-formatting-bar .fmt-dropdown {
  height: 24px !important;
  min-width: 72px !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
  border-radius: 4px !important;
}

#gmail-formatting-bar .fmt-size {
  min-width: 54px !important;
}

/* Compact bottom action bar like Gmail */
#gmail-action-bar {
  min-height: 34px !important;
  height: 34px !important;
  padding: 2px 10px !important;
}

#gmail-send-btn {
  height: 30px !important;
  padding: 0 12px 0 14px !important;
  font-size: 14px !important;
  border-radius: 16px 0 0 16px !important;
}

#gmail-send-dropdown {
  height: 30px !important;
  padding: 0 8px !important;
  border-radius: 0 16px 16px 0 !important;
}

.gmail-action-btn {
  width: 26px !important;
  height: 26px !important;
}

.gmail-action-btn svg {
  width: 17px !important;
  height: 17px !important;
}

.gmail-action-separator {
  height: 16px !important;
  margin: 0 5px !important;
}

/* Ensure overall bottom block isn't chunky */
#gmail-compose-bottom {
  border-top: 1px solid #dadce0 !important;
}