html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f8fafc;
  color: #111827;
  overflow: hidden;
}

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

/* Hide the legacy global task links on the inbox */
.task-mail #layout-menu {
  display: none !important;
}

/* Overall inbox shell */
.task-mail #layout {
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.task-mail #hg-app {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.task-mail #layout-sidebar {
  width: 280px;
  min-width: 280px;
  background: #0b1120;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 45;
}

.task-mail #layout-list {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.task-mail.action-index #layout-content {
  display: none !important;
}

/* Sidebar brand and footer */
.hg-sidebar-logo-desktop {
  padding: 18px 18px 14px;
  flex-shrink: 0;
}

.hg-brand-logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
  object-position: left center;
}

.hg-sidebar-compose {
  padding: 0 14px 16px;
  flex-shrink: 0;
}

.hg-compose-btn {
  padding: 11px 16px;
  background: #2563eb;
  color: #fff !important;
  border: none;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background 0.18s;
}

.hg-compose-btn:hover {
  background: #1d4ed8;
}

.hg-compose-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: no-repeat center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}

#hg-toolbar {
  height: 52px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  flex-shrink: 0;
}

.hg-sidebar-folders {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.hg-sidebar-folders::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.hg-sidebar-folders::-webkit-scrollbar-track {
  background: transparent;
}

.hg-sidebar-folders::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

#mailboxlist {
  margin: 0;
  padding: 0;
}

#mailboxlist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mailboxlist li {
  list-style: none;
}

#mailboxlist a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
  min-width: 0;
}

#mailboxlist a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

#mailboxlist .selected > a,
#mailboxlist a.selected,
#mailboxlist a.current {
  background: rgba(37, 99, 235, 0.18);
  color: #fff;
  font-weight: 600;
  position: relative;
}

#mailboxlist .selected > a::before,
#mailboxlist a.selected::before,
#mailboxlist a.current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #2563eb;
}

#mailboxlist .unreadcount,
#mailboxlist .count,
#mailboxlist .badge {
  margin-left: auto;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  line-height: 1.6;
  flex-shrink: 0;
}

#mailboxlist li.drafts .unreadcount,
#mailboxlist li.drafts .count,
#mailboxlist li.drafts .badge,
#mailboxlist li.drafts .skip-content.unreadcount,
#mailboxlist li.drafts .skip-content.unread-count {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

#mailboxlist li.junk .unreadcount,
#mailboxlist li.junk .count,
#mailboxlist li.junk .badge,
#mailboxlist li.junk .skip-content.unreadcount,
#mailboxlist li.junk .skip-content.unread-count,
#mailboxlist li.spam .unreadcount,
#mailboxlist li.spam .count,
#mailboxlist li.spam .badge,
#mailboxlist li.spam .skip-content.unreadcount,
#mailboxlist li.spam .skip-content.unread-count {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

#mailboxlist li:not(.drafts):not(.junk):not(.spam) .unreadcount,
#mailboxlist li:not(.drafts):not(.junk):not(.spam) .count,
#mailboxlist li:not(.drafts):not(.junk):not(.spam) .badge,
#mailboxlist li:not(.drafts):not(.junk):not(.spam) .skip-content.unreadcount,
#mailboxlist li:not(.drafts):not(.junk):not(.spam) .skip-content.unread-count {
  background: #2563eb !important;
  color: #fff !important;
}

#mailboxlist li.mailboxroot,
#mailboxlist li.divider {
  list-style: none;
}

#mailboxlist li.hg-folders-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 6px 6px;
  pointer-events: auto;
  cursor: default;
}

#mailboxlist li.hg-folders-divider .hg-folders-divider-title {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

#mailboxlist li.hg-folders-divider .hg-folders-divider-add {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  transition: background 0.14s, color 0.14s;
}

#mailboxlist li.hg-folders-divider .hg-folders-divider-add:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

#mailboxlist li.mailbox > a svg,
#mailboxlist li.inbox > a svg,
#mailboxlist li.sent > a svg,
#mailboxlist li.drafts > a svg,
#mailboxlist li.trash > a svg,
#mailboxlist li.junk > a svg,
#mailboxlist li.archive > a svg,
#mailboxlist li > a svg,
#mailboxlist li > a > i {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.7;
  display: block;
}

#mailboxlist li.selected > a svg,
#mailboxlist li.selected > a > i {
  opacity: 1;
}

#mailboxlist li.mailboxroot > a,
#mailboxlist li.divider > a {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.3) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 14px 6px !important;
  pointer-events: none;
  background: transparent !important;
  border-radius: 0 !important;
}

#mailboxlist li > a.hg-nav-item {
  gap: 11px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: background 0.15s, color 0.15s;
}

#mailboxlist li > a.hg-folder-item {
  gap: 11px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: background 0.15s, color 0.15s;
}

#mailboxlist li > a.hg-nav-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

#mailboxlist li > a.hg-folder-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

#mailboxlist li.selected > a.hg-nav-item,
#mailboxlist li.focused > a.hg-nav-item,
#mailboxlist li.selected > a.hg-folder-item,
#mailboxlist li.focused > a.hg-folder-item {
  background: rgba(37, 99, 235, 0.18) !important;
  color: #fff !important;
  font-weight: 600;
}

#mailboxlist li.selected > a.hg-nav-item::before,
#mailboxlist li.focused > a.hg-nav-item::before,
#mailboxlist li.selected > a.hg-folder-item::before,
#mailboxlist li.focused > a.hg-folder-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #2563eb;
}

#mailboxlist li.selected > a::before,
#mailboxlist li.focused > a::before {
  opacity: 1;
}

.hg-sidebar-storage {
  padding: 14px;
  margin: 8px 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.hg-storage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.hg-storage-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(37, 99, 235, 0.2);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0;
  overflow: hidden;
}

.hg-storage-copy {
  flex: 1;
  min-width: 0;
}

.hg-storage-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.hg-storage-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hg-quota-source {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.hg-storage-bar {
  height: 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.hg-storage-bar > span {
  display: block;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  min-width: 8px;
}

/* Top bar */
#hg-desktop-topbar {
  height: 64px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  flex-shrink: 0;
}

.hg-search-shell {
  flex: 1;
  min-width: 0;
}

.hg-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hg-top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
}

.hg-top-link:hover {
  background: #f1f5f9;
}

.hg-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}

.hg-user-email {
  min-width: 0;
}

/* Search form */
.hg-search-wrap {
  flex: 1 1 0%;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 12px;
}

.hg-search-icon {
  position: absolute;
  left: 14px;
  pointer-events: none;
  z-index: 1;
}

#mailsearchform,
.hg-search-wrap .searchbar {
  width: 100%;
  min-width: 0;
}

#mailsearchform,
.hg-search {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 44px 11px 44px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  color: #111827 !important;
  font-family: inherit !important;
  background: #f9fafb !important;
  outline: none !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

.hg-search-clear{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  display:none;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border:0;
  border-radius:9999px;
  background:transparent;
  color:#9ca3af;
  cursor:pointer;
  padding:0;
  z-index:2;
}

.hg-search-wrap.hg-has-search-text .hg-search-clear{
  display:flex;
}

.hg-search-clear:hover,
.hg-search-clear:focus{
  color:#6b7280;
  background:#eef2ff;
  outline:none;
}

#mailsearchform .button.search,
#mailsearchform .button.reset,
#mailsearchform a.options,
#mailsearchform .reset-button,
#mailsearchform .searching,
#mailsearchform span.searching,
.searchbar > a.button,
.searchbar > a.reset,
.searchbar a.icon.search,
.searchbar a.icon.reset,
#searchoptionsbar,
.searchoptions {
  display: none !important;
}

.hg-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hg-top-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  transition: background 0.14s;
  outline: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.hg-top-btn:hover,
.hg-top-btn:focus,
.hg-top-btn:active {
  background: #f1f5f9;
  color: #374151;
  outline: none;
  box-shadow: none;
}

.hg-top-btn::-moz-focus-inner,
.hg-user-btn::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.hg-user-menu-wrap {
  position: relative;
}

.hg-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 9px;
  border: 1px solid #e5e7eb !important;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  outline: none !important;
  box-shadow: none !important;
}

#hg-user-btn {
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  outline: none !important;
}

.hg-user-btn:hover,
.hg-user-btn:focus,
.hg-user-btn:active {
  background: #fff !important;
  border-color: #e5e7eb !important;
  border-width: 1px !important;
  color: #374151 !important;
  outline: none !important;
  box-shadow: none !important;
}

.hg-user-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: #e5e7eb !important;
  border-width: 1px !important;
}

.hg-userdropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 224px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
  z-index: 200;
  padding: 6px;
}

.hg-userdropdown.hg-open {
  display: block;
}

.hg-menu-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #374151 !important;
  text-decoration: none !important;
  font-size: 13.5px;
  font-weight: 500;
}

.hg-menu-item:hover {
  background: #f8fafc;
}

.hg-menu-item.hg-danger {
  color: #dc2626 !important;
}

.hg-menu-sep {
  height: 1px;
  background: #e5e7eb;
  margin: 6px 4px;
}

.hg-menu-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background-color: currentColor;
  -webkit-mask: var(--hg-icon) no-repeat center / contain;
  mask: var(--hg-icon) no-repeat center / contain;
}

.hg-menu-contacts {
  --hg-icon: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23374151%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E');
}

.hg-menu-calendar {
  --hg-icon: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23374151%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2218%22 rx=%222%22 ry=%222%22/%3E%3Cline x1=%2216%22 y1=%222%22 x2=%2216%22 y2=%226%22/%3E%3Cline x1=%228%22 y1=%222%22 x2=%228%22 y2=%226%22/%3E%3Cline x1=%223%22 y1=%2210%22 x2=%2221%22 y2=%2210%22/%3E%3C/svg%3E');
}

.hg-menu-settings {
  --hg-icon: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23374151%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Cpath d=%22M19.07 4.93l-1.41 1.41M4.93 19.07l-1.41 1.41M19.07 19.07l-1.41-1.41M4.93 4.93l-1.41 1.41M21 12h-2M5 12H3M12 21v-2M12 5V3%22/%3E%3Cpath d=%22M20 12a8 8 0 1 0-8 8%22/%3E%3C/svg%3E');
}

.hg-menu-darkicon {
  --hg-icon: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23374151%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z%22/%3E%3C/svg%3E');
}

.hg-menu-logout {
  --hg-icon: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23dc2626%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4%22/%3E%3Cpolyline points=%2216 17 21 12 16 7%22/%3E%3Cline x1=%2221%22 y1=%2212%22 x2=%229%22 y2=%2212%22/%3E%3C/svg%3E');
}

/* =========================================================
   AVISOS DE CORREO NUEVO
   ========================================================= */
.hg-newmail-region {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}

.hg-newmail-toast {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .18);
  color: #0f172a;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  animation: hg-newmail-enter .24s ease-out both;
}

.hg-newmail-toast:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.hg-newmail-toast-leaving {
  animation: hg-newmail-leave .2s ease-in both;
}

.hg-newmail-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #eaf2ff;
  color: #2563eb;
}

.hg-newmail-toast-icon svg {
  width: 22px;
  height: 22px;
}

.hg-newmail-toast-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.hg-newmail-toast-copy strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.hg-newmail-toast-copy span {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hg-newmail-toast-sender {
  color: #334155 !important;
  font-weight: 600;
}

.hg-newmail-toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: -3px -3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.hg-newmail-toast-close:hover {
  background: #f1f5f9;
  color: #334155;
}

.hg-newmail-toast-close svg {
  width: 17px;
  height: 17px;
}

.hg-newmail-permission {
  cursor: default;
}

.hg-newmail-permission .hg-newmail-toast-copy span {
  overflow: visible;
  white-space: normal;
}

.hg-newmail-permission-button {
  align-self: flex-start;
  margin-top: 8px;
  padding: 7px 13px;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

@keyframes hg-newmail-enter {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hg-newmail-leave {
  to { opacity: 0; transform: translateY(8px) scale(.98); }
}

@media (max-width: 767px) {
  .hg-newmail-region {
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: calc(100vw - 28px);
  }

  .hg-newmail-toast {
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    gap: 10px;
    padding: 12px;
    border-radius: 13px;
  }

  .hg-newmail-toast-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
}

.hg-menu-logout::before {
  content: '';
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background-color: currentColor;
  -webkit-mask: var(--hg-icon) no-repeat center / contain;
  mask: var(--hg-icon) no-repeat center / contain;
}

.hg-menu-darkrow {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
}

.hg-menu-darkleft {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.hg-darkswitch {
  width: 36px;
  height: 20px;
  border: none;
  border-radius: 999px;
  background: #d1d5db;
  padding: 0;
  flex: 0 0 auto;
  position: relative;
  cursor: pointer;
}

.hg-darkswitch span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  position: absolute;
  top: 2px;
  left: 2px;
}

.hg-user-chip {
  display: none;
}

/* Compose */
#hg-compose-title {
  margin: 0;
}

[contenteditable]:focus {
  outline: 0;
}

.hg-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
  flex-wrap: nowrap;
}

.hg-toolbar-pagination {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.hg-select-group {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
}

.hg-select-group input[type="checkbox"].hg-chk,
#hg-checkall {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  transition: background .12s, border-color .12s;
  outline: none;
  box-shadow: none;
}

.hg-select-group input[type="checkbox"].hg-chk:checked,
#hg-checkall:checked {
  background: #2563eb;
  border-color: #2563eb;
}

.hg-select-group input[type="checkbox"].hg-chk:checked::after,
#hg-checkall:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 4px;
  height: 8px;
  margin: auto;
  margin-top: 2px;
  border: 1.5px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.hg-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  color: #64748b;
  transition: background .14s, color .14s;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.hg-icon-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.hg-native-search-filter {
  display: none !important;
}

.hg-unread-filter-btn.hg-active,
.hg-unread-filter-btn[aria-pressed="true"] {
  background: #eaf2ff;
  color: #2563eb;
}

.hg-unread-filter-btn.hg-active:hover,
.hg-unread-filter-btn[aria-pressed="true"]:hover {
  background: #dbeafe;
  color: #1d4ed8;
}

/* El sobre mantiene siempre la misma silueta rellena; solo la botonera
   conserva sus estados de fondo y hover. */
.hg-unread-filter-btn .hg-unread-envelope-static {
  fill: currentColor;
  stroke: none;
}

.hg-icon-btn .inner {
  display: none !important;
}

.hg-select-toggle {
  width: 22px;
}

.hg-toolbar-actions a,
.hg-toolbar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#pagenav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
}

#pagenav .message-count {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

#pagenav a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

#pagenav a:hover {
  background: #f1f5f9;
}

#pagenav a[aria-disabled="true"] {
  opacity: .35;
  pointer-events: none;
}

#pagenav a.hg-disabled {
  opacity: .35;
  pointer-events: none;
}

#listselect-menu.hg-toolbar-open,
#listoptions-menu.hg-toolbar-open,
#mailboxoptions-menu.hg-toolbar-open{
  display:block;
}

#hg-modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:240;
}
#hg-modal-backdrop.hg-open{display:block}

#listselect-menu.popupmenu{
  display:none;
  position:fixed;
  min-width:186px;
  padding:6px 0;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 18px 42px rgba(15, 23, 42, .16);
  z-index:250;
}
#listselect-menu.hg-toolbar-open{display:block}
.hg-select-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  font-size:14px;
  line-height:1.1;
  color:#334155;
  text-decoration:none;
  white-space:nowrap;
}
.hg-select-menu-item svg{
  flex:0 0 auto;
  color:#475569;
}
.hg-select-menu-item:hover{
  background:#38bdf8;
  color:#fff;
}
.hg-select-menu-item:hover svg{
  color:#fff;
}

#message-menu.popupmenu{
  display:none;
  position:fixed;
  min-width:250px;
  padding:6px 0;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 18px 42px rgba(15, 23, 42, .16);
  z-index:250;
}
#message-menu.hg-toolbar-open{display:block!important}
#markmessage-menu.popupmenu{
  display:none;
  position:fixed;
  min-width:220px;
  padding:6px 0;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 18px 42px rgba(15, 23, 42, .16);
  z-index:261;
}
#markmessage-menu.hg-toolbar-open{display:block!important}
.hg-message-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  font-size:14px;
  line-height:1.1;
  color:#334155;
  text-decoration:none;
  white-space:nowrap;
}
.hg-message-menu-item svg{
  flex:0 0 auto;
  color:#64748b;
}
.hg-message-menu-item .hg-message-menu-arrow{
  margin-left:auto;
  color:#94a3b8;
}
.hg-message-menu-item--submenu{
  padding-right:12px;
}
.hg-message-menu-item--submenu .hg-message-menu-arrow{
  margin-left:auto;
}
.hg-message-menu-item:hover{
  background:#38bdf8;
  color:#fff;
}
.hg-message-menu-item:hover svg{
  color:#fff;
}

/* Estos menús conservan su estado activo mediante color de fondo. El
   contorno nativo de los enlaces producía un borde negro después del clic. */
#message-menu .hg-message-menu-item:focus,
#message-menu .hg-message-menu-item:focus-visible,
#message-menu li > a.move:focus,
#message-menu li > a.move:focus-visible,
#message-menu li > a.copy:focus,
#message-menu li > a.copy:focus-visible,
#markmessage-menu .hg-message-menu-item:focus,
#markmessage-menu .hg-message-menu-item:focus-visible,
#folder-selector .toolbarmenu > li > a:focus,
#folder-selector .toolbarmenu > li > a:focus-visible {
  outline:none !important;
  box-shadow:none !important;
}
.hg-message-menu-item.hg-disabled,
.hg-message-menu-item[aria-disabled="true"]{
  color:#cbd5e1;
  pointer-events:none;
}
.hg-message-menu-item.hg-disabled svg,
.hg-message-menu-item[aria-disabled="true"] svg{
  color:#cbd5e1;
}
#message-menu .hg-mobile-only{
  display:none;
}

#message-menu li > a.move,
#message-menu li > a.copy{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  font-size:14px;
  line-height:1.1;
  color:#334155;
  text-decoration:none;
  white-space:nowrap;
}

#message-menu li > a.move:hover,
#message-menu li > a.copy:hover{
  background:#38bdf8;
  color:#fff;
}

#message-menu li > a.move .folder-selector-link,
#message-menu li > a.copy .folder-selector-link{
  display:inline-flex;
  align-items:center;
  flex:1 1 auto;
}

#message-menu li > a.move::after,
#message-menu li > a.copy::after{
  content:"";
  width:12px;
  height:12px;
  margin-left:auto;
  flex:0 0 12px;
  background: no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  opacity:.9;
}

#message-menu li > a.move:hover::after,
#message-menu li > a.copy:hover::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Roundcube reemplaza las clases de estos dos botones al habilitarlos. Esta
   regla específica mantiene el mismo aspecto desactivado del resto del menú. */
#message-menu li > a.move.hg-disabled,
#message-menu li > a.move.disabled,
#message-menu li > a.move[aria-disabled="true"],
#message-menu li > a.copy.hg-disabled,
#message-menu li > a.copy.disabled,
#message-menu li > a.copy[aria-disabled="true"] {
  background:transparent !important;
  color:#cbd5e1 !important;
  cursor:default !important;
  pointer-events:none !important;
}

#message-menu li > a.move.hg-disabled::after,
#message-menu li > a.move.disabled::after,
#message-menu li > a.move[aria-disabled="true"]::after,
#message-menu li > a.copy.hg-disabled::after,
#message-menu li > a.copy.disabled::after,
#message-menu li > a.copy[aria-disabled="true"]::after {
  opacity:.42;
}

#folder-selector.popupmenu{
  display:none;
  position:fixed;
  min-width:240px;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
  overflow:auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .65) transparent;
  padding:6px 0;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 18px 42px rgba(15, 23, 42, .16);
  z-index:261;
}

#folder-selector::-webkit-scrollbar{
  width:5px;
  height:5px;
}

#folder-selector::-webkit-scrollbar-track{
  background:transparent;
}

#folder-selector::-webkit-scrollbar-thumb{
  background:rgba(148, 163, 184, .65);
  border-radius:10px;
}

#folder-selector[aria-hidden="false"]{
  display:block;
}

#folder-selector .toolbarmenu{
  list-style:none;
  margin:0;
  padding:0;
}

#folder-selector .toolbarmenu > li > a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  color:#334155;
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
}

#folder-selector .toolbarmenu > li.inbox > a{
  padding-left:16px !important;
}

#folder-selector .toolbarmenu > li > a:hover{
  background:#38bdf8;
  color:#fff;
}

#folder-selector .hg-folder-menu-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  flex:0 0 17px;
  color:inherit;
}

#folder-selector .hg-folder-menu-icon svg{
  width:17px;
  height:17px;
  display:block;
}

#listoptions-menu.popupmenu{
  display:none!important;
  position:fixed!important;
  inset:0!important;
  z-index:250!important;
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  min-width:0!important;
}
#listoptions-menu.hg-toolbar-open{display:block!important}

.hg-options-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.hg-options-stage{
  position:relative;
  width:460px;
  max-width:calc(100vw - 32px);
  pointer-events:auto;
}
.hg-options-dialog{
  width:100%;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  overflow:hidden;
}
.hg-options-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 24px 18px;
  border-bottom:1px solid #f1f5f9;
}
.hg-options-header h3{
  margin:0;
  font-size:17px;
  font-weight:800;
  color:#111827;
  letter-spacing:-0.01em;
}
.hg-options-close{
  width:32px;
  height:32px;
  border:none;
  border-radius:8px;
  background:#f1f5f9;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
  transition:background .14s;
  flex-shrink:0;
}
.hg-options-close:hover{background:#e2e8f0}
.hg-options-body{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.hg-options-row{
  display:flex;
  align-items:center;
  gap:16px;
}
.hg-options-row label{
  width:175px;
  flex-shrink:0;
  font-size:13.5px;
  font-weight:600;
  color:#374151;
  line-height:1.4;
}
.hg-options-row select{
  flex:1;
  padding:10px 14px;
  border:1.5px solid #e5e7eb;
  border-radius:10px;
  font-size:14px;
  color:#111827;
  font-family:inherit;
  background:#f9fafb;
  cursor:pointer;
  outline:none;
  transition:border-color .18s;
  appearance:auto;
}
.hg-options-row select:focus{border-color:#3b82f6}
.hg-options-footer{
  padding:16px 24px;
  border-top:1px solid #f1f5f9;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.hg-options-cancel,
.hg-options-save{
  height:38px;
  padding:0 16px;
  border:none;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
.hg-options-cancel{
  background:#fff;
  color:#6b7280;
  border:1px solid #e5e7eb;
}
.hg-options-save{
  background:#2563eb;
  color:#fff;
}

/* Message list */
#hg-list-loading{
  display:none;
  position:absolute;
  inset:0;
  z-index:15;
  align-items:center;
  justify-content:center;
  background:rgba(248,250,252,.9);
  backdrop-filter:saturate(180%) blur(2px);
  pointer-events:none;
}
#hg-list-loading.hg-open{
  display:flex;
}
.hg-list-loading-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:14px;
  background:#fff;
  color:#334155;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  font-size:14px;
  font-weight:600;
}
.hg-list-loading-spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #cbd5e1;
  border-top-color:#2563eb;
  animation:hgSpin .8s linear infinite;
}
.hg-list-loading-card span:last-child{
  white-space:nowrap;
}
@keyframes hgSpin{
  to{transform:rotate(360deg)}
}

.scroller{flex:1;min-height:0;overflow:auto}
#messagelist-content{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}
#messagelist-content table#messagelist{
  flex:0 0 auto;
}
#messagelist-content.hg-search-pending .hg-mail-list-footer{
  visibility:hidden;
}
#messagelist-content:focus{
  outline:none;
}
#messagelist-content,
.scroller{
}
#messagelist-content::-webkit-scrollbar,
.scroller::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
#messagelist-content::-webkit-scrollbar-track,
.scroller::-webkit-scrollbar-track{
  background: transparent;
}
#messagelist-content::-webkit-scrollbar-thumb,
.scroller::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.65);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
#messagelist-content::-webkit-scrollbar-button,
.scroller::-webkit-scrollbar-button{
  width:0;
  height:0;
  display:none;
}
.hg-mail-search-empty{
  flex:1 1 auto;
  min-height:270px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:38px 24px;
  color:#64748b;
  text-align:center;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hg-mail-search-empty[hidden]{
  display:none !important;
}
.hg-mail-search-empty-icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  border-radius:17px;
  background:#eff6ff;
  color:#2563eb;
  box-shadow:inset 0 0 0 1px #dbeafe;
}
.hg-mail-search-empty h3{
  margin:0 0 7px;
  color:#0f172a;
  font-size:16px;
  line-height:1.3;
  font-weight:700;
}
.hg-mail-search-empty p{
  max-width:430px;
  margin:0;
  font-size:13px;
  line-height:1.55;
}
.hg-mail-search-empty p strong{
  color:#334155;
  font-weight:600;
  overflow-wrap:anywhere;
}
.hg-mail-search-clear-btn{
  min-height:38px;
  margin-top:18px;
  padding:8px 15px;
  border:1px solid #dbe4f0;
  border-radius:10px;
  background:#fff;
  color:#2563eb;
  font:600 13px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hg-mail-search-clear-btn:hover{
  border-color:#bfdbfe;
  background:#eff6ff;
}
.hg-mail-search-clear-btn:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:2px;
}
.hg-mail-search-toast{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:15000;
  max-width:min(360px, calc(100vw - 32px));
  min-height:50px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 17px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:#fff;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:13px;
  line-height:1.35;
  font-weight:600;
  box-shadow:0 14px 34px rgba(15,23,42,.2);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.hg-mail-search-toast.hg-show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.hg-mail-search-toast.hg-search-toast-success{
  background:#16a34a;
}
.hg-mail-search-toast.hg-search-toast-empty{
  background:#334155;
}
.hg-mail-search-toast-icon{
  width:26px;
  height:26px;
  display:flex;
  flex:0 0 26px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}
.hg-mail-search-toast-success-icon,
.hg-mail-search-toast-empty-icon{
  display:none;
}
.hg-search-toast-success .hg-mail-search-toast-success-icon,
.hg-search-toast-empty .hg-mail-search-toast-empty-icon{
  display:block;
}
.hg-mail-list-footer{
  width:100%;
  min-height:72px;
  box-sizing:border-box;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  padding:17px 24px max(18px, env(safe-area-inset-bottom));
  border-top:1px solid #e8edf4;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color:#94a3b8;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:11.5px;
  line-height:1.45;
  text-align:center;
  margin-top:auto;
}
.hg-mail-list-footer-brand,
.hg-mail-list-footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hg-mail-list-footer-brand{
  gap:7px;
  color:#475569;
  font-weight:600;
  white-space:nowrap;
}
.hg-mail-list-footer-mark{
  width:22px;
  height:22px;
  display:block;
  flex:0 0 22px;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 2px 7px rgba(37,99,235,.16);
}
.hg-mail-list-footer-links{
  gap:1px;
  flex-wrap:wrap;
}
.hg-mail-list-footer-separator,
.hg-mail-list-footer-links > span{
  margin:0 3px;
  color:#cbd5e1;
}
.hg-mail-list-footer a{
  color:#64748b;
  text-decoration:none;
  border-radius:6px;
  padding:3px 5px;
  transition:color .15s ease, background-color .15s ease;
}
.hg-mail-list-footer a:hover{
  color:#2563eb;
  background:#eff6ff;
  text-decoration:none;
}
.hg-mail-list-footer a:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:3px;
  border-radius:3px;
}
table#messagelist{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
table#messagelist thead{display:none!important}
.hg-email-row,
table#messagelist tr.message{
  display:grid;
  grid-template-columns:28px 24px 14px minmax(150px,220px) auto minmax(0,1fr) 20px 92px;
  column-gap:10px;
  align-items:center;
  border-bottom:1px solid #f1f5f9;
  min-height:52px;
  padding:0 20px;
  cursor:pointer;
  background:#fff;
  transition:background 0.1s;
}
.hg-email-row *,
table#messagelist tr.message *{
  cursor:inherit;
}
.hg-email-row a,
table#messagelist tr.message a,
.hg-email-row input,
table#messagelist tr.message input{
  cursor:pointer;
}
.hg-email-row:hover,
table#messagelist tr.message:hover{background:#f8fafc}
.hg-email-row.hg-selected,
table#messagelist tr.message.selected{
  background:#eff6ff !important;
  border-bottom-color:#dbeafe !important;
}
.hg-email-row > *,
table#messagelist tr.message td{
  display:contents;
  width:auto!important;
  min-width:0;
  padding:0;
  vertical-align:middle;
  font-size:14px;
  color:#111827;
  overflow:hidden;
}
.hg-col-check,
table#messagelist td.selection{
  display:contents;
  white-space:nowrap;
}
.hg-col-check input[type="checkbox"].hg-chk,
.hg-col-check input[type="checkbox"].hg-row-check,
table#messagelist td.selection input[type="checkbox"].hg-chk,
table#messagelist td.selection input[type="checkbox"].hg-row-check{
  grid-column:1;
  grid-row:1;
  appearance:none;
  -webkit-appearance:none;
  width:17px;
  height:17px;
  flex-shrink:0;
  margin:0;
  cursor:pointer;
  position:relative;
  border:1.5px solid #d1d5db;
  border-radius:4px;
  background:#fff;
  transition:background .12s,border-color .12s;
  outline:none;
  box-shadow:none;
}
.hg-col-check input[type="checkbox"].hg-chk:checked,
.hg-col-check input[type="checkbox"].hg-row-check:checked,
table#messagelist td.selection input[type="checkbox"].hg-chk:checked,
table#messagelist td.selection input[type="checkbox"].hg-row-check:checked{
  background:#2563eb;
  border-color:#2563eb;
}
.hg-col-check input[type="checkbox"].hg-chk:checked::after,
.hg-col-check input[type="checkbox"].hg-row-check:checked::after,
table#messagelist td.selection input[type="checkbox"].hg-chk:checked::after,
table#messagelist td.selection input[type="checkbox"].hg-row-check:checked::after{
  content:'';
  position:absolute;
  inset:0;
  width:4px;
  height:8px;
  margin:auto;
  margin-top:2px;
  border:1.5px solid #fff;
  border-top:none;
  border-left:none;
  transform:rotate(45deg);
}
.hg-col-sender,
.hg-col-subject,
.hg-col-preview,
.hg-col-date,
.hg-col-clip{
  display:block;
  min-width:0;
}
table#messagelist td.subject{
  display:contents!important;
  grid-template-columns:none;
  align-items:initial;
  gap:0;
  min-width:0;
}
.hg-email-row td.subject{
  cursor:pointer;
}
.msgicon.status{
  grid-column:3;
  grid-row:1;
  width:16px;
  height:16px;
  padding:0;
  border:none;
  border-radius:50%;
  background:transparent;
  flex:0 0 auto;
  justify-self:start;
  align-self:center;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  outline:none;
  position:relative;
  pointer-events:auto;
}
.msgicon.status{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d1d5db;
  cursor:pointer;
  flex-shrink:0;
  transition:background 0.18s;
}
.msgicon.status.unread{
  background:#2563eb;
}
.hg-col-sender,
table#messagelist td.subject > .fromto{
  grid-column:4;
  grid-row:1;
  display:grid;
  align-items:center;
  min-width:0;
  color:#374151;
  font-weight:500;
  font-size:13.5px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  align-self:stretch;
  justify-self:start;
}
.hg-col-subject,
table#messagelist td.subject > .subject{
  grid-column:5;
  grid-row:1;
  display:grid;
  align-items:center;
  min-width:0;
  color:#374151;
  font-weight:500;
  font-size:13.5px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  align-self:stretch;
}
.hg-col-preview,
table#messagelist td.subject > .preview{
  grid-column:6;
  grid-row:1;
  display:grid;
  align-items:center;
  min-width:0;
  color:#94a3b8;
  font-weight:500;
  font-size:13px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  align-self:stretch;
}
.hg-col-date,
table#messagelist td.subject > .date{
  grid-column:8;
  grid-row:1;
  display:grid;
  align-items:center;
  justify-items:end;
  height:100%;
  color:#94a3b8;
  text-align:right;
  white-space:nowrap;
  font-size:12.5px;
  line-height:1.15;
  align-self:stretch;
  font-weight:400;
}
table#messagelist td.subject > .size,
.hg-col-size{
  display:none !important;
}
table#messagelist td.subject > .subject a{
  color:inherit;
  text-decoration:none;
}
table#messagelist td.subject > .subject .msgicon{
  display:block;
}
.hg-email-row.unread .hg-col-sender,
.hg-email-row.unread .hg-col-subject,
table#messagelist tr.message.unread td.subject > .fromto,
table#messagelist tr.message.unread td.subject > .subject{
  font-weight:700;
  color:#111827;
}
.hg-email-row.unread .hg-col-date,
table#messagelist tr.message.unread td.subject > .date{
  font-weight:600;
  color:#374151;
  font-size:12.5px;
}
.hg-email-row:not(.unread) .hg-col-sender,
.hg-email-row:not(.unread) .hg-col-subject,
.hg-email-row:not(.unread) .hg-col-date,
table#messagelist tr.message:not(.unread) td.subject > .fromto,
table#messagelist tr.message:not(.unread) td.subject > .subject{
  font-weight:500;
}
.hg-email-row:not(.unread) .hg-col-date,
table#messagelist tr.message:not(.unread) td.subject > .date{
  font-weight:400;
  color:#94a3b8;
}
table#messagelist td.flags{
  display:none!important;
}
table#messagelist td.icon.flag,
table#messagelist td.icon.status{
  display:none!important;
}
.hg-col-clip,
table#messagelist td.flags .attachment{
  grid-column:7;
  grid-row:1;
  display:block;
  width:20px;
  min-width:20px;
  height:1px;
  align-self:center;
  justify-self:center;
  overflow:hidden;
  color:transparent;
  pointer-events:none;
}
.hg-col-clip.hg-attachment-icon{
  height:16px;
  min-width:16px;
  width:16px;
  overflow:visible;
  color:#94a3b8;
  pointer-events:auto;
}
.hg-col-clip.hg-attachment-icon::before{
  content:'';
  display:block;
  width:16px;
  height:16px;
  background-color:#94a3b8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-8.49 8.49a5.5 5.5 0 0 1-7.78-7.78l9.19-9.19a3.5 3.5 0 0 1 4.95 4.95l-9.19 9.19a1.5 1.5 0 0 1-2.12-2.12l8.49-8.49'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-8.49 8.49a5.5 5.5 0 0 1-7.78-7.78l9.19-9.19a3.5 3.5 0 0 1 4.95 4.95l-9.19 9.19a1.5 1.5 0 0 1-2.12-2.12l8.49-8.49'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hg-row-star-toggle{
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:0;
  padding:0;
  border:none;
  background:transparent;
  color:#d1d5db;
  cursor:pointer;
  flex:0 0 auto;
  justify-self:start;
  align-self:center;
  pointer-events:auto;
}
.hg-row-star-toggle svg{
  display:block;
  cursor:pointer;
}
.hg-row-star-toggle{
  cursor:pointer;
}
.hg-email-row.hg-starred .hg-row-star-toggle,
table#messagelist tr.message.hg-starred .hg-row-star-toggle{
  color:#2563eb;
}
.hg-email-row.hg-starred .hg-row-star-toggle svg,
table#messagelist tr.message.hg-starred .hg-row-star-toggle svg{
  fill:#2563eb;
  stroke:#2563eb;
}

/* Preview pane / content */
body.task-mail.action-index #layout-content{
  display:none!important;
  min-height:0;
  flex:0 0 0!important;
  width:0!important;
  max-width:0!important;
  overflow:hidden!important;
  background:#fff;
}
body.task-mail.action-index #layout-content.selected{display:none!important}
body.task-mail.action-show #layout-list{
  display:flex!important;
  flex-direction:column;
  min-width:0;
}
body.task-mail.action-show #layout-content{
  display:block!important;
  min-height:0;
  flex:1 1 auto!important;
  width:auto!important;
  max-width:none!important;
  overflow:auto!important;
  background:#fff;
}
.back-list-button{display:none}
body.task-mail.action-show .back-list-button{
  display:inline-flex;
}

body.task-mail.action-show #hg-desktop-actionbar{
  height:56px;
  background:#fff;
  border-bottom:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  padding:0 12px;
  gap:2px;
  flex-shrink:0;
}
.hg-act-btn { display:flex; flex-direction:row; align-items:center; gap:6px; padding:8px 14px; border-radius:9px; border:none; background:transparent; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:500; color:#374151; transition:background .14s; white-space:nowrap; flex-shrink:0; }
.hg-act-btn:hover { background:#f1f5f9; }
.hg-list-action-btn {
  height:34px;
  padding:0 10px;
}
.hg-list-action-btn > svg {
  flex:0 0 16px;
}
[data-junk-mode="junk"] .hg-spam-action-icon {
  display:block!important;
}
[data-junk-mode="junk"] .hg-not-spam-action-icon {
  display:none!important;
}
[data-junk-mode="notjunk"] .hg-spam-action-icon {
  display:none!important;
}
[data-junk-mode="notjunk"] .hg-not-spam-action-icon {
  display:block!important;
}
.hg-list-action-btn:disabled,
.hg-list-action-btn[aria-disabled="true"] {
  color:#cbd5e1;
  cursor:default;
  background:transparent;
}
.hg-list-action-btn:disabled:hover,
.hg-list-action-btn[aria-disabled="true"]:hover {
  color:#cbd5e1;
  background:transparent;
}
.hg-list-action-sep {
  width:1px;
  height:24px;
  margin:0 2px;
  flex:0 0 1px;
  background:#e5e7eb;
}
body.task-mail.action-show #hg-desktop-actionbar .hg-act-sep{
  width:1px;
  height:24px;
  background:#e5e7eb;
  flex-shrink:0;
  margin:0 2px;
}
body.task-mail.action-show .hg-mobile-message-actionbar{
  display:none;
}
body.task-mail.action-show #hg-mobile-actionbar{
  height:56px;
  background:#fff;
  border-bottom:1px solid #e2e8f0;
  display:none;
  align-items:center;
  padding:0 12px;
  gap:2px;
  flex-shrink:0;
}
body.task-mail.action-show #hg-mobile-actionbar .hg-act-sep{
  width:1px;
  height:24px;
  background:#e5e7eb;
  flex-shrink:0;
  margin:0 2px;
}

body.task-mail.action-show #mailtoolbar{
  height:52px;
  background:#fff;
  border-bottom:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 16px;
  flex-shrink:0;
  flex-wrap:nowrap;
}
body.task-mail.action-show #mailtoolbar a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  min-width:34px;
  padding:0 12px;
  border-radius:8px;
  color:#64748b;
  text-decoration:none;
  border:none;
  background:transparent;
}
body.task-mail.action-show #mailtoolbar a:hover{
  background:#f1f5f9;
  color:#0f172a;
}
body.task-mail.action-show #mailtoolbar .inner{
  display:none !important;
}
body.task-mail.action-show #mailtoolbar a.reply::before,
body.task-mail.action-show #mailtoolbar a.reply-all::before,
body.task-mail.action-show #mailtoolbar a.forward::before,
body.task-mail.action-show #mailtoolbar a.delete::before,
body.task-mail.action-show #mailtoolbar a.print::before,
body.task-mail.action-show #mailtoolbar a.markmessage::before,
body.task-mail.action-show #mailtoolbar a.more::before,
body.task-mail.action-show #mailtoolbar a.prev::before,
body.task-mail.action-show #mailtoolbar a.next::before,
body.task-mail.action-show #mailtoolbar .dropdown::before{
  content:"";
  width:16px;
  height:16px;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
}
body.task-mail.action-show #mailtoolbar a.reply::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='10 9 5 12 10 15'%3E%3C/polyline%3E%3Cpath d='M19 18v-4a4 4 0 0 0-4-4H5'%3E%3C/path%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='10 9 5 12 10 15'%3E%3C/polyline%3E%3Cpath d='M19 18v-4a4 4 0 0 0-4-4H5'%3E%3C/path%3E%3C/svg%3E");
}
body.task-mail.action-show #mailtoolbar a.reply-all::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 9 6 12 11 15'%3E%3C/polyline%3E%3Cpath d='M20 18v-4a4 4 0 0 0-4-4H6'%3E%3C/path%3E%3Cpolyline points='7 9 2 12 7 15'%3E%3C/polyline%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 9 6 12 11 15'%3E%3C/polyline%3E%3Cpath d='M20 18v-4a4 4 0 0 0-4-4H6'%3E%3C/path%3E%3Cpolyline points='7 9 2 12 7 15'%3E%3C/polyline%3E%3C/svg%3E");
}
body.task-mail.action-show #mailtoolbar a.forward::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='14 5 21 12 14 19'%3E%3C/polyline%3E%3Cpath d='M3 12h18'%3E%3C/path%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='14 5 21 12 14 19'%3E%3C/polyline%3E%3Cpath d='M3 12h18'%3E%3C/path%3E%3C/svg%3E");
}
body.task-mail.action-show #mailtoolbar a.delete::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'%3E%3C/path%3E%3Cpath d='M10 11v6M14 11v6M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'%3E%3C/path%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'%3E%3C/path%3E%3Cpath d='M10 11v6M14 11v6M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'%3E%3C/path%3E%3C/svg%3E");
}
body.task-mail.action-show #mailtoolbar a.print::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V4h12v5'%3E%3C/path%3E%3Cpath d='M6 18h12v2H6z'%3E%3C/path%3E%3Crect x='4' y='9' width='16' height='8' rx='2'%3E%3C/rect%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V4h12v5'%3E%3C/path%3E%3Cpath d='M6 18h12v2H6z'%3E%3C/path%3E%3Crect x='4' y='9' width='16' height='8' rx='2'%3E%3C/rect%3E%3C/svg%3E");
}
body.task-mail.action-show #mailtoolbar a.markmessage::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z'%3E%3C/path%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z'%3E%3C/path%3E%3C/svg%3E");
}
body.task-mail.action-show #mailtoolbar a.more::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E");
}
body.task-mail.action-show #mailtoolbar a.prev::before,
body.task-mail.action-show #mailtoolbar a.next::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
}
body.task-mail.action-show #mailtoolbar a.next::before{
  transform:scaleX(-1);
}
body.task-mail.action-show #mailtoolbar .dropbutton{
  display:flex;
  align-items:center;
  gap:1px;
}
body.task-mail.action-show #mailtoolbar .dropdown{
  width:22px;
  min-width:22px;
  padding:0;
}
body.task-mail.action-show #mailtoolbar .dropdown::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
body.task-mail.action-show #forward-menu,
body.task-mail.action-show #replyall-menu{
  display:none!important;
}
body.task-mail.action-show #mailtoolbar .spacer{
  flex:1 1 auto;
}
body.task-mail.action-show #layout-content{
  background:#f8fafc;
}
body.task-mail.action-show #hg-email-scroll {
    flex: 1 1 0%;
    overflow-y: auto;
    padding: 28px 32px;
    background: rgb(248, 250, 252);
}
body.task-mail.action-show #message-header{
  margin-bottom:24px;
}
body.task-mail.action-show #message-header .subject{
  margin:0 0 16px;
  font-size:28px;
  line-height:1.18;
  font-weight:800;
  color:#111827;
  word-break:break-word;
}
body.task-mail.action-show #message-header .header{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  box-shadow:0 1px 4px rgba(15,23,42,.04);
}
body.task-mail.action-show #message-header .contactphoto{
  width:56px;
  height:56px;
  border-radius:50%;
  flex:0 0 auto;
}
body.task-mail.action-show #message-header .header-content{
  flex:1 1 auto;
  min-width:0;
}
body.task-mail.action-show #message-header .header-summary,
body.task-mail.action-show #message-header .header-headers{
  font-size:14px;
  line-height:1.5;
  color:#334155;
}
body.task-mail.action-show #message-header .header-headers{
  margin-top:4px;
}
body.task-mail.action-show #message-header .header-links{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  font-size:13px;
  color:#2563eb;
}
body.task-mail.action-show #message-header .attachmentslist{
  margin-left:auto;
  flex:0 0 280px;
  max-width:280px;
}
body.task-mail.action-show #message-content{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
body.task-mail.action-show #messagebody,
body.task-mail.action-show #message-objects{
  display:block;
}

body.task-mail.action-show .hg-email-card{
  max-width:860px;
  margin:0 auto;
  background:#fff;
  border-radius:16px;
  border:1px solid #e2e8f0;
  overflow:hidden;
}
body.task-mail.action-show .hg-email-head{
  padding:24px 28px 18px;
  border-bottom:1px solid #f1f5f9;
}
body.task-mail.action-show .hg-email-topline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
body.task-mail.action-show .hg-email-subject{
  font-size:20px;
  font-weight:800;
  color:#111827;
  letter-spacing:-0.02em;
  line-height:1.2;
  margin:0;
  min-width:0;
  flex:1 1 auto;
  word-break:break-word;
}
body.task-mail.action-show .hg-star-btn{
  border:0;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
body.task-mail.action-show .hg-star-btn.is-marked svg{
  stroke:#2563eb;
  fill:#2563eb;
}
body.task-mail.action-show .hg-star-btn.is-marked svg polygon{
  fill:#2563eb;
}
body.task-mail.action-show .hg-email-meta{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
body.task-mail.action-show .hg-email-avatar{
  position:relative;
  width:44px;
  height:44px;
  border-radius:50%;
  flex:0 0 auto;
  overflow:hidden;
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
}
body.task-mail.action-show .hg-email-avatar-photo,
body.task-mail.action-show .hg-email-avatar-photo img,
body.task-mail.action-show .hg-email-avatar-photo svg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
body.task-mail.action-show .hg-email-avatar-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:800;
  line-height:1;
  color:#fff;
  letter-spacing:.02em;
  text-transform:uppercase;
  user-select:none;
}
body.task-mail.action-show .hg-email-avatar.is-photo .hg-email-avatar-fallback{
  display:none;
}
body.task-mail.action-show .hg-email-avatar.is-placeholder .hg-email-avatar-photo{
  display:none;
}
body.task-mail.action-show .hg-email-meta-body{
  flex:1 1 auto;
  min-width:0;
}
body.task-mail.action-show .hg-email-meta-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
body.task-mail.action-show .hg-email-person{
  min-width:0;
  flex:1 1 auto;
}
body.task-mail.action-show .hg-email-from{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:15px;
  font-weight:700;
  color:#111827;
  margin-bottom:3px;
}
body.task-mail.action-show .hg-email-from-name{
  margin:0;
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  color:#111827;
}
body.task-mail.action-show .hg-email-from-email{
  margin:0;
  font-size:13.5px;
  font-weight:400;
  line-height:1.25;
  color:#6b7280;
}
body.task-mail.action-show .hg-email-summary-source{
  display:none;
}
body.task-mail.action-show .hg-email-summary .text-nowrap{
  display:none;
}
body.task-mail.action-show .hg-email-summary{
  display:inline;
}
body.task-mail.action-show .hg-email-recipient-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
body.task-mail.action-show .hg-email-recipient-label{
  font-size:13.5px;
  font-weight:600;
  color:#374151;
}
body.task-mail.action-show .hg-email-recipient{
  color:#2563eb;
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
}
body.task-mail.action-show .hg-headers-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:none;
  border:1px solid #e5e7eb;
  border-radius:6px;
  cursor:pointer;
  padding:2px 8px;
  font-family:inherit;
  font-size:11.5px;
  color:#6b7280;
  font-weight:500;
  transition:background .14s;
}
body.task-mail.action-show .hg-headers-btn:hover{
  background:#f8fafc;
}
body.task-mail.action-show .hg-headers-source{
  display:none;
}
body.task-mail.action-show .hg-email-date{
  font-size:13px;
  color:#9ca3af;
  white-space:nowrap;
  flex-shrink:0;
}
body.task-mail.action-show .hg-headers-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:500;
}
body.task-mail.action-show .hg-headers-modal.is-open{
  display:flex;
}
body.task-mail.action-show .hg-headers-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.4);
}
body.task-mail.action-show .hg-headers-modal-panel{
  position:relative;
  width:min(600px, calc(100vw - 48px));
  max-height:calc(100vh - 48px);
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(15,23,42,.22);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.task-mail.action-show .hg-headers-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px 14px;
  border-bottom:1px solid rgb(241, 245, 249);
  flex-shrink:0;
}
body.task-mail.action-show .hg-headers-modal-title{
  margin:0;
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  color:#111827;
}
body.task-mail.action-show .hg-headers-modal-close{
  width:30px;
  height:30px;
  border-radius:7px;
  border-width:medium;
  border-style:none;
  border-color:currentcolor;
  border-image:initial;
  background:rgb(241, 245, 249);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgb(107, 114, 128);
  font-size:20px;
}
body.task-mail.action-show .hg-headers-modal-content{
  margin: 0;
  padding: 20px 22px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgb(55, 65, 81);
  flex: 1 1 0%;
  background: rgb(250, 250, 250);
}
body.task-mail.action-show .hg-headers-modal-content::-webkit-scrollbar{
  width:0;
  height:0;
}
body.task-mail.action-show .hg-headers-modal-loading{
  display:none;
  padding:24px 28px 0;
  font-size:13.5px;
  color:#64748b;
}
body.hg-headers-open{
  overflow:hidden;
}
body.task-mail.action-show .hg-attachment-viewer{
  position:fixed;
  inset:0;
  display:none;
  z-index:720;
  color:#fff;
}
body.task-mail.action-show .hg-attachment-viewer.is-open{
  display:block;
}
body.task-mail.action-show .hg-attachment-viewer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(11,17,32,.92);
  backdrop-filter:blur(2px);
}
body.task-mail.action-show .hg-attachment-viewer-shell{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
}
body.task-mail.action-show .hg-attachment-viewer-toolbar{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 24px;
  background:rgba(15,23,42,.82);
  border-bottom:1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
}
body.task-mail.action-show .hg-attachment-viewer-heading,
body.task-mail.action-show .hg-attachment-viewer-actions{
  display:flex;
  align-items:center;
  min-width:0;
}
body.task-mail.action-show .hg-attachment-viewer-heading{
  gap:11px;
}
body.task-mail.action-show .hg-attachment-viewer-actions{
  gap:8px;
  flex:0 0 auto;
}
body.task-mail.action-show .hg-attachment-viewer-file-icon{
  width:34px;
  height:34px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#dbeafe;
  background:rgba(37,99,235,.28);
  flex:0 0 auto;
}
body.task-mail.action-show .hg-attachment-viewer-title{
  margin:0;
  color:#f8fafc;
  font-size:14px;
  line-height:1.35;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.task-mail.action-show .hg-attachment-viewer-download,
body.task-mail.action-show .hg-attachment-viewer-close{
  height:40px;
  border:0;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f8fafc;
  background:rgba(255,255,255,.08);
  cursor:pointer;
  text-decoration:none;
}
body.task-mail.action-show .hg-attachment-viewer-download{
  gap:8px;
  padding:0 14px;
  font-size:13px;
  font-weight:600;
}
body.task-mail.action-show .hg-attachment-viewer-close{
  width:40px;
  padding:0;
}
body.task-mail.action-show .hg-attachment-viewer-download:hover,
body.task-mail.action-show .hg-attachment-viewer-close:hover{
  color:#fff;
  background:rgba(255,255,255,.16);
}
body.task-mail.action-show .hg-attachment-viewer-stage{
  position:relative;
  min-width:0;
  min-height:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:28px;
}
body.task-mail.action-show .hg-attachment-viewer-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#cbd5e1;
  font-size:13px;
  pointer-events:none;
}
body.task-mail.action-show .hg-attachment-viewer-loading[hidden]{
  display:none;
}
body.task-mail.action-show .hg-attachment-viewer-image{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 18px 55px rgba(0,0,0,.34);
}
body.task-mail.action-show .hg-attachment-viewer-image[hidden],
body.task-mail.action-show .hg-attachment-viewer-frame[hidden]{
  display:none;
}
body.task-mail.action-show .hg-attachment-viewer-frame{
  width:min(1120px, 100%);
  height:100%;
  min-height:320px;
  border:0;
  border-radius:6px;
  background:#fff;
  box-shadow:0 18px 55px rgba(0,0,0,.34);
}
body.hg-attachment-viewer-open{
  overflow:hidden !important;
}
@media (max-width:767px){
  body.task-mail.action-show .hg-attachment-viewer-toolbar{
    min-height:56px;
    gap:10px;
    padding:0 12px;
  }
  body.task-mail.action-show .hg-attachment-viewer-heading{
    gap:8px;
  }
  body.task-mail.action-show .hg-attachment-viewer-file-icon{
    width:32px;
    height:32px;
    border-radius:8px;
  }
  body.task-mail.action-show .hg-attachment-viewer-title{
    font-size:12.5px;
  }
  body.task-mail.action-show .hg-attachment-viewer-download,
  body.task-mail.action-show .hg-attachment-viewer-close{
    height:38px;
  }
  body.task-mail.action-show .hg-attachment-viewer-download{
    width:38px;
    padding:0;
  }
  body.task-mail.action-show .hg-attachment-viewer-download span{
    display:none;
  }
  body.task-mail.action-show .hg-attachment-viewer-close{
    width:38px;
  }
  body.task-mail.action-show .hg-attachment-viewer-stage{
    padding:12px;
  }
  body.task-mail.action-show .hg-attachment-viewer-frame{
    width:100%;
    border-radius:4px;
  }
}
body.task-mail.action-show .hg-email-attachments{
  padding:14px 28px;
  border-bottom:1px solid #f1f5f9;
  background:#fafafa;
}
body.task-mail.action-show .hg-email-attachments-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
body.task-mail.action-show .hg-email-attachments-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  color:#374151;
}
body.task-mail.action-show .hg-email-download-all{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:5px;
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  color:#2563eb;
  font-weight:500;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist{
  margin:0;
  padding:0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist.hg-attachments-ready ul{
  gap:12px;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist ul{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li{
  min-width:0;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  min-width:200px;
  flex:1 1 0%;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card .hg-attachment-badge{
  width:36px;
  height:36px;
  border-radius:8px;
  background:rgb(254, 226, 226);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:9px;
  font-weight:800;
  color:rgb(239, 68, 68);
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card.hg-attachment-doc .hg-attachment-badge{
  color:#2563eb;
  background:#dbeafe;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card.hg-attachment-xls .hg-attachment-badge{
  color:#16a34a;
  background:#dcfce7;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card.hg-attachment-image .hg-attachment-badge{
  color:#8b5cf6;
  background:#ede9fe;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card.hg-attachment-archive .hg-attachment-badge{
  color:#f59e0b;
  background:#fef3c7;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card .hg-attachment-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 0%;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card .hg-attachment-name{
  font-size:13px;
  font-weight:600;
  color:rgb(17, 24, 39);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card .hg-attachment-size{
  font-size:11.5px;
  color:rgb(156, 163, 175);
  margin-top:1px;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card .hg-attachment-download{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  color:#9ca3af;
  flex-shrink:0;
  text-decoration:none;
  position:relative;
  z-index:2;
}
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card .hg-attachment-link{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  appearance:none;
  text-indent:-9999px;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  z-index:1;
}
body.task-mail.action-show .hg-email-body{
  min-width:0;
  max-width:100%;
  padding:28px 28px 36px;
  font-size:14.5px;
  color:#374151;
  line-height:1.8;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}
body.task-mail.action-show #messagebody,
body.task-mail.action-show #message-objects{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overflow-wrap:anywhere;
  word-break:normal;
}
body.task-mail.action-show #messagebody a:not([style*="color"]),
body.task-mail.action-show #message-objects a:not([style*="color"]){
  color:#2563eb;
}
body.task-mail.action-show #messagebody a:not([style*="color"]):hover,
body.task-mail.action-show #message-objects a:not([style*="color"]):hover{
  color:#1d4ed8;
}
body.task-mail.action-show #messagebody iframe,
body.task-mail.action-show #message-objects iframe{
  display:block;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  border:0;
}
body.task-mail.action-show #messagebody table,
body.task-mail.action-show #message-objects table{
  max-width:100% !important;
  box-sizing:border-box !important;
}
/* Repair only malformed email data cells declared at impractically small widths. */
body.task-mail.action-show #messagebody .hg-repaired-narrow-cell,
body.task-mail.action-show #message-objects .hg-repaired-narrow-cell{
  width:auto !important;
  min-width:6.5em !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
/* Transactional receipts commonly identify their price cells this way. */
body.task-mail.action-show #messagebody td[class*="Table-amount"],
body.task-mail.action-show #messagebody th[class*="Table-amount"],
body.task-mail.action-show #message-objects td[class*="Table-amount"],
body.task-mail.action-show #message-objects th[class*="Table-amount"]{
  width:auto !important;
  min-width:6.5em !important;
  white-space:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
body.task-mail.action-show #messagebody pre,
body.task-mail.action-show #message-objects pre{
  max-width:100%;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}
body.task-mail.action-show #messagebody p.image-attachment{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  width:fit-content;
  max-width:min(100%, 280px);
  margin:18px 0 22px;
  padding:10px 10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f8fafc;
  box-shadow:none;
  box-sizing:border-box;
  overflow:hidden;
}
body.task-mail.action-show #messagebody p.image-attachment > .image-link{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 auto;
  text-decoration:none;
  align-self:center;
}
body.task-mail.action-show #messagebody p.image-attachment > .image-link img.image-thumbnail{
  display:block;
  max-width:240px !important;
  max-height:240px !important;
  width:auto;
  height:auto;
  margin:0 auto;
  border-radius:8px;
  object-fit:contain;
}
body.task-mail.action-show #messagebody p.image-attachment > .image-filename{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:240px;
  font-size:11px;
  font-weight:600;
  color:#111827;
  line-height:1.25;
}
body.task-mail.action-show #messagebody p.image-attachment > .image-filesize{
  display:block;
  white-space:nowrap;
  font-size:11.5px;
  color:#94a3b8;
  line-height:1.25;
}
body.task-mail.action-show #messagebody p.image-attachment > .attachment-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  width:100%;
  margin-top:2px;
}
body.task-mail.action-show #messagebody p.image-attachment > .attachment-links a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#2563eb;
  text-decoration:none;
}
body.task-mail.action-show #messagebody p.image-attachment > .attachment-links a:hover{
  text-decoration:underline;
}
body.task-mail.action-show #messagebody p.image-attachment > br{
  display:none;
}
body.task-mail.action-show .hg-desktop-footer{
  padding:16px 28px;
  border-top:1px solid #f1f5f9;
  display:flex;
  gap:10px;
}
body.task-mail.action-show .hg-mobile-footer{
  display:none;
}
body.task-mail.action-show .hg-footer-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:10px;
  border:1.5px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:#374151;
}

/* Mobile sidebar backdrop */
#hg-sidebar-backdrop{
  display:none;
}

/* Mobile */
#hg-mobile-nav,
#hg-mobile-search,
#hg-mobile-compose{display:none}

#hg-mobile-nav{
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:0 14px;
  background:#0b1120;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
  z-index:60;
}

#hg-hamburger{
  width:38px;
  height:38px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  padding:0;
}

.hg-mobile-logo{
  display:block;
  height:28px;
  width:auto;
  max-width:200px;
  object-fit:contain;
  object-position:left center;
  flex-shrink:0;
}

.hg-mobile-nav-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.hg-mobile-top-btn,
.hg-mobile-user-btn{
  width:38px;
  height:38px;
  border:0;
  border-radius:11px;
  background:rgba(255,255,255,.06);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  padding:0;
}

.hg-mobile-user-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:2px;
}

.hg-mobile-user-wrap .hg-userdropdown{
  right:0;
  top:calc(100% + 8px);
}

.hg-mobile-compose{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:85;
  align-items:center;
  gap:10px;
  height:56px;
  padding:16px 26px;
  border:0;
  border-radius:18px;
  background:#2563eb;
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  box-shadow:0 14px 30px rgba(37,99,235,.35);
  cursor:pointer;
}

.hg-mobile-compose svg{
  flex-shrink:0;
}

@media (max-width: 900px){
  #hg-sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:44;
    background:rgba(15,23,42,.34);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, visibility 0s linear .18s;
  }
  #hg-sidebar-backdrop.hg-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
  #layout-sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);box-shadow:0 18px 50px rgba(0,0,0,.28)}
  #layout-sidebar.hg-sidebar-open{transform:translateX(0)}
  #hg-main{margin-left:0}
  #hg-desktop-topbar{padding:0 16px}
}

@media (max-width: 767px){
  #hg-mobile-nav{
    display:flex;
  }
  #hg-app{
    flex-direction:column;
  }
  #hg-desktop-topbar{
    min-height:56px !important;
    height:auto !important;
    padding:4px 14px !important;
    gap:10px !important;
    align-items:center !important;
  }
  body.task-mail.action-show #hg-desktop-actionbar{
    display:none;
  }
  body.task-mail.action-show .hg-mobile-message-actionbar{
    display:flex !important;
  }
  #message-menu .hg-mobile-only{
    display:flex;
  }
  .hg-search-wrap{
    flex:1 1 auto !important;
    width:100% !important;
    margin-right:0 !important;
  }
  .hg-search-wrap .searchbar,
  #mailsearchform{
    width:100% !important;
    max-width:none !important;
  }
  .hg-top-actions{
    display:none !important;
  }
  .hg-mobile-user-btn{
    width:auto;
    min-width:38px;
    padding:0 9px;
    gap:4px;
  }
  #layout-sidebar{
    width:280px;
    min-width:280px;
  }
  body.task-mail.action-show #hg-email-scroll {
        padding: 16px !important;
    }
  body.task-mail.action-show .hg-email-card{
    max-width:none;
    border-radius:14px;
  }
  body.task-mail.action-show .hg-email-head{
    padding:20px 20px 16px;
  }
  body.task-mail.action-show .hg-email-topline{
    align-items:flex-start;
  }
  body.task-mail.action-show .hg-email-subject{
    font-size:18px;
  }
  body.task-mail.action-show .hg-email-meta{
    gap:12px;
  }
  body.task-mail.action-show .hg-email-avatar{
    width:40px;
    height:40px;
  }
  body.task-mail.action-show .hg-email-attachments{
      padding:12px 20px;
    }
    body.task-mail.action-show .hg-email-attachments .attachmentslist li{
      min-width:0;
    }
    body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card{
      width:100%;
    }
  body.task-mail.action-show .hg-email-body{
    padding:20px;
  }
  body.task-mail.action-show #messagebody table,
  body.task-mail.action-show #message-objects table{
    width:100% !important;
    max-width:100% !important;
    table-layout:auto !important;
  }
  body.task-mail.action-show #messagebody td,
  body.task-mail.action-show #messagebody th,
  body.task-mail.action-show #message-objects td,
  body.task-mail.action-show #message-objects th{
    min-width:0 !important;
    max-width:100% !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  body.task-mail.action-show #messagebody p.image-attachment{
    max-width:100%;
    width:100%;
    padding:10px;
    margin:16px 0;
  }
  body.task-mail.action-show #messagebody p.image-attachment > .image-filename{
    font-size:11px;
  }
  body.task-mail.action-show #messagebody p.image-attachment > .image-link img.image-thumbnail{
    max-width:100% !important;
    max-height:240px !important;
  }
  body.task-mail.action-show .hg-desktop-footer{
    display:none;
  }
  body.task-mail.action-show .hg-mobile-footer{
    display:flex;
    gap:10px;
    padding:16px 20px 20px;
  }
  body.task-mail.action-show .hg-mobile-footer .hg-footer-btn{
    flex:1 1 0%;
    justify-content:center;
    padding:13px;
    border-radius:10px;
    font-size:14.5px;
  }
  #hg-toolbar{
    height:48px;
    padding:0 12px;
    gap:8px;
  }
  .hg-toolbar-actions{
    width:100%;
    min-width:0;
    flex-wrap:nowrap;
    gap:4px;
  }
  #list-actions{
    width:auto;
    flex:0 1 auto;
    min-width:0;
  }
  .hg-toolbar-pagination{
    margin-left:auto;
    flex:0 0 auto;
    min-width:0;
  }
  #pagenav{
    gap:6px;
  }
  #pagenav .message-count{
    font-size:12px;
  }
  #pagenav a{
    width:30px;
    height:30px;
  }
  #layout-list{display:flex}
  body.task-mail #layout-list{
    min-height:0;
  }
  body.task-mail.action-index #layout-content{display:none}
  #hg-mobile-compose{display:flex}
  #hg-mobile-compose{
    border-radius:9999px;
    height:52px;
    padding:16px 26px;
    box-shadow:0 12px 26px rgba(37,99,235,.34);
  }
  #messagelist-content{
    padding-bottom:0;
  }
  #messagelist-content::after{
    display:none;
  }
  .hg-mail-list-footer{
    min-height:96px;
    flex-direction:column;
    gap:7px;
    /* Keep the footer links above the fixed mobile compose button and the
       device navigation area when the list is scrolled to its end. */
    padding:17px 14px calc(92px + env(safe-area-inset-bottom, 0px));
    font-size:11px;
  }
  .hg-mail-search-empty{
    min-height:340px;
    padding:34px 22px;
  }
  .hg-mail-search-toast{
    left:14px;
    right:14px;
    bottom:max(18px, env(safe-area-inset-bottom));
    max-width:none;
  }
  .hg-mail-list-footer-separator{
    display:none;
  }
  .hg-mail-list-footer-links{
    width:100%;
    gap:0;
  }
  .hg-email-row,
  table#messagelist tr.message {
    display: grid !important;
    grid-template-columns: 26px 26px minmax(0, 1fr) 18px 62px !important;
    grid-template-rows: auto auto;
    grid-template-areas:         "check star sender . date"        ". . subject clip ." !important;
    column-gap: 4px !important;
    row-gap: 6px;
    min-height: auto !important;
    padding: 15px 16px !important;
  }
  table#messagelist td.checkbox{grid-area:check}
  table#messagelist td.icon.flag{grid-area:star}
  table#messagelist td.icon.status,
  .msgicon.status{
    display:none !important;
  }
  .hg-col-sender,
  table#messagelist td.subject > .fromto{
    grid-column:3 / 4 !important;
    grid-row:1 !important;
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14.5px;
    color:#111827;
  }
  .hg-col-clip,
  table#messagelist td.subject > .hg-col-clip{
    grid-column:4 / 5 !important;
    grid-row:2 !important;
    align-self:center;
    justify-self:end;
    width:14px;
    min-width:14px;
    height:14px;
    margin-right:2px;
  }
  .hg-col-date,
  table#messagelist td.subject > .date{
    grid-column:5 / 6 !important;
    grid-row:1 !important;
    justify-self:end;
    align-self:center;
    font-size:13px;
    color:#64748b;
  }
  .hg-col-subject,
  table#messagelist td.subject > .subject{
    grid-column:3 / 4 !important;
    grid-row:2 !important;
    display:block;
    align-self:start;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13.5px;
    color:#111827;
    padding-right:4px;
  }
  table#messagelist td.subject > .subject a{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  table#messagelist td.subject > .subject .msgicon.status{
    display:inline-block;
    vertical-align:middle;
    margin-right:8px;
  }
  .hg-col-preview{display:none!important}
}

/* Address book page */
body.task-addressbook #layout-menu {
  display: none !important;
}

body.task-addressbook #layout {
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

body.task-addressbook #hg-app {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.task-addressbook #layout-sidebar {
  width: 280px;
  min-width: 280px;
  background: #0b1120;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 45;
}

body.task-addressbook .hg-addressbook-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  overflow: hidden;
}

body.task-addressbook .hg-addressbook-main {
  min-width: 0;
}

body.task-addressbook #layout-list {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.task-addressbook .hg-addressbook-shell {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

body.task-addressbook .hg-addressbook-shell-native {
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

body.task-addressbook .hg-addressbook-stack {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.task-addressbook .hg-addressbook-pane {
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.task-addressbook .hg-addressbook-pane-header {
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid #eef2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.task-addressbook .hg-addressbook-pane-header .header-title,
body.task-addressbook .hg-addressbook-pane-header .addressbook-title {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  color: #111827;
}

body.task-addressbook .hg-addressbook-pane-header-list {
  justify-content: flex-start;
}

body.task-addressbook .hg-addressbook-pane-header-list .toolbar {
  margin-left: auto;
}

body.task-addressbook .hg-addressbook-pane-header-detail {
  justify-content: flex-start;
}

body.task-addressbook .hg-addressbook-pane-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
}

body.task-addressbook .hg-addressbook-pane #contacts-table {
  width: 100%;
}

body.task-addressbook .hg-addressbook-framewrap {
  flex: 1 1 auto;
  min-height: 320px;
  padding: 0 16px 16px;
  box-sizing: border-box;
}

body.task-addressbook .hg-addressbook-framewrap #contact-frame {
  width: 100%;
  min-height: 300px;
  border: 1px solid #e5ebf3;
  border-radius: 14px;
  background: #fff;
}

body.task-addressbook #layout-list {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.task-addressbook #layout-content {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.task-addressbook .hg-addressbook-shell-three {
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr) minmax(364px, 1.12fr);
  gap: 16px;
  align-items: stretch;
}

body.task-addressbook .hg-addressbook-librarypane {
  max-width: none;
  align-self: stretch;
  box-sizing: border-box;
}

body.task-addressbook .hg-addressbook-contactpane,
body.task-addressbook .hg-addressbook-detailpane {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.task-addressbook .hg-addressbooks-card {
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  max-width: 100%;
}

body.task-addressbook .hg-addressbooks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
}

body.task-addressbook .hg-addressbooks-head-center {
  justify-content: center;
  padding-bottom: 10px;
}

body.task-addressbook .hg-addressbooks-head-detail {
  padding-bottom: 10px;
}

body.task-addressbook .hg-addressbooks-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  color: #111827;
}

body.task-addressbook .hg-addressbooks-title-center {
  font-size: 16px;
  text-align: center;
  width: 100%;
}

body.task-addressbook .hg-addressbooks-more {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

body.task-addressbook .hg-addressbooks-more:hover {
  background: #f8fafc;
  color: #6b7280;
}

body.task-addressbook .hg-addressbooks-listwrap {
  border-top: 1px solid #eef2f7;
}

body.task-addressbook .hg-addressbook-contactpane {
  overflow: hidden;
}

body.task-addressbook .hg-addressbook-searchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 12px;
  border-top: 1px solid #eef2f7;
  border-bottom: 1px solid #eef2f7;
}

body.task-addressbook .hg-addressbook-searchbox {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  border-radius: 10px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: transparent;
  color: #475569;
}

body.task-addressbook .hg-addressbook-searchbox:focus-within {
  background: #fff;
  border-color: #d6deeb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

body.task-addressbook .hg-addressbook-searchbox input {
  border: 0;
  outline: none;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  color: #334155;
  font-size: 14px;
}

body.task-addressbook .hg-addressbook-searchbox input::placeholder {
  color: #9ca3af;
}

body.task-addressbook .hg-addressbook-searchtoggle {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

body.task-addressbook .hg-addressbook-searchtoggle:hover {
  background: #f8fafc;
}

body.task-addressbook .hg-addressbook-contactlistwrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

body.task-addressbook .hg-addressbook-contactlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.task-addressbook .hg-addressbook-contactitem {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #eef2f7;
}

body.task-addressbook .hg-addressbook-contactrow {
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  border: 0;
  background: #fff;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

body.task-addressbook .hg-addressbook-contactitem.selected .hg-addressbook-contactrow,
body.task-addressbook .hg-addressbook-contactrow:hover {
  background: #f8fbff;
}

body.task-addressbook .hg-addressbook-avatar {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

body.task-addressbook .hg-addressbook-contactcopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.task-addressbook .hg-addressbook-contactname {
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.task-addressbook .hg-addressbook-contactsubtitle {
  color: #94a3b8;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.task-addressbook .hg-addressbook-contactchevron {
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.task-addressbook .hg-addressbook-empty {
  padding: 22px 16px;
  color: #64748b;
  font-size: 14px;
}

body.task-addressbook .hg-addressbook-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid #eef2f7;
  color: #64748b;
  font-size: 13px;
}

body.task-addressbook .hg-addressbook-pagination-text {
  min-width: 118px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.task-addressbook .hg-addressbook-pagebtn {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body.task-addressbook .hg-addressbook-pagebtn:hover {
  background: #f8fafc;
}

body.task-addressbook .hg-addressbook-detailpane {
  overflow: hidden;
}

body.task-addressbook .hg-addressbook-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 16px 16px;
}

body.task-addressbook .hg-addressbook-detail-empty,
body.task-addressbook .hg-addressbook-detail-card {
  border: 1px solid #dbe3ee;
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

body.task-addressbook .hg-addressbook-detail-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 160px;
}

body.task-addressbook .hg-addressbook-detail-avatar {
  width: 54px;
  height: 54px;
  border-radius: 9999px;
  background: #dbeafe;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex: 0 0 auto;
}

body.task-addressbook .hg-addressbook-detail-emptycopy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #475569;
}

body.task-addressbook .hg-addressbook-detail-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eef2f7;
}

body.task-addressbook .hg-addressbook-detail-heading {
  min-width: 0;
}

body.task-addressbook .hg-addressbook-detail-heading h3 {
  margin: 0;
  color: #111827;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 800;
}

body.task-addressbook .hg-addressbook-detail-heading p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.35;
}

body.task-addressbook .hg-addressbook-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.task-addressbook .hg-addressbook-action {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #d9e2ef;
  background: #fff;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

body.task-addressbook .hg-addressbook-action.primary {
  background: #fff;
  color: #2563eb;
  border-color: #bfdbfe;
}

body.task-addressbook .hg-addressbook-action.icon {
  width: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

body.task-addressbook .hg-addressbook-info {
  padding-top: 18px;
}

body.task-addressbook .hg-addressbook-infobox {
  border: 1px solid #e5ebf3;
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(180deg, #fff, #fbfdff);
}

body.task-addressbook .hg-addressbook-infobox-title {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 14px;
}

body.task-addressbook .hg-addressbook-infobox dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

body.task-addressbook .hg-addressbook-infobox dl > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

body.task-addressbook .hg-addressbook-infobox dt {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
}

body.task-addressbook .hg-addressbook-infobox dd {
  margin: 0;
  color: #334155;
  font-size: 13.5px;
  min-width: 0;
  overflow-wrap: anywhere;
}

body.task-addressbook #directorylist,
body.task-addressbook #directorylist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.task-addressbook #directorylist li {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.task-addressbook #directorylist > li > a,
body.task-addressbook #directorylist li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
}

body.task-addressbook #directorylist > li:last-child > a,
body.task-addressbook #directorylist li:last-child > a {
  border-bottom: 0;
}

body.task-addressbook #directorylist > li > a:hover,
body.task-addressbook #directorylist li > a:hover {
  background: #f8fbff;
}

body.task-addressbook #directorylist > li.addressbook.hg-addressbook-root > a,
body.task-addressbook #directorylist > li.selected > a,
body.task-addressbook #directorylist > li.current > a {
  background: #eaf3ff;
  color: #0f172a;
  font-weight: 700;
}

body.task-addressbook #directorylist li.selected > a,
body.task-addressbook #directorylist li.current > a,
body.task-addressbook #directorylist a.selected,
body.task-addressbook #directorylist a.current {
  background: #eef4ff;
  color: #1d4ed8;
  font-weight: 600;
}

body.task-addressbook #directorylist li.selected > a::before,
body.task-addressbook #directorylist li.current > a::before,
body.task-addressbook #directorylist a.selected::before,
body.task-addressbook #directorylist a.current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #2563eb;
  border-radius: 0 3px 3px 0;
}

body.task-addressbook #directorylist a {
  position: relative;
}

body.task-addressbook #directorylist .hg-addressbook-row {
  padding-left: 16px;
  padding-right: 18px;
}

body.task-addressbook #directorylist .hg-addressbook-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.task-addressbook #directorylist .hg-addressbook-icon-primary {
  color: #2563eb;
}

body.task-addressbook #directorylist .hg-addressbook-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

body.task-addressbook #directorylist .hg-addressbook-chevron {
  margin-left: auto;
  flex: 0 0 auto;
  color: #a8b0bd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.task-addressbook #directorylist .hg-addressbook-chevron-up {
  color: #6b7280;
  transform: translateY(-1px);
}

body.task-addressbook #directorylist .hg-addressbook-row-sub {
  padding-left: 42px;
  min-height: 46px;
}

body.task-addressbook #directorylist .hg-addressbook-subitem {
  border-bottom: 1px solid #eef2f7;
}

body.task-addressbook #directorylist .hg-addressbook-subitem > a {
  padding-left: 42px;
  background: #fbfcfe;
}

body.task-addressbook #directorylist .hg-addressbook-subitem.selected > a,
body.task-addressbook #directorylist .hg-addressbook-subitem.current > a {
  background: #eef4ff;
}

body.task-addressbook #directorylist .hg-addressbook-subitem .hg-addressbook-icon-sub {
  color: #8fa2c1;
}

body.task-addressbook #directorylist .hg-addressbook-subitem:last-child {
  border-bottom: 0;
}

body.task-addressbook #directorylist .groups {
  background: #fff;
}

body.task-addressbook #directorylist .groups[style*="display: none"] {
  display: block !important;
}

body.task-addressbook #directorylist .group {
  flex: 1 1 auto;
  min-width: 0;
}

body.task-addressbook #directorylist .count,
body.task-addressbook #directorylist .unreadcount,
body.task-addressbook #directorylist .badge {
  margin-left: auto;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  line-height: 1.6;
  flex-shrink: 0;
}

body.task-addressbook #directorylist li.selected > a .count,
body.task-addressbook #directorylist li.current > a .count,
body.task-addressbook #directorylist li.selected > a .unreadcount,
body.task-addressbook #directorylist li.current > a .unreadcount {
  background: #1d4ed8;
}

body.task-addressbook .hg-addressbook-shell .scroller {
  min-height: 0;
}

@media (max-width: 900px){
  body.task-addressbook #layout-sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);box-shadow:0 18px 50px rgba(0,0,0,.28)}
  body.task-addressbook #layout-sidebar.hg-sidebar-open{transform:translateX(0)}
  body.task-addressbook #hg-main{margin-left:0}
  body.task-addressbook #hg-desktop-topbar{padding:0 16px}
}

@media (max-width: 767px){
  body.task-addressbook #hg-mobile-nav{display:flex}
  body.task-addressbook #hg-app{flex-direction:column}
  body.task-addressbook #hg-desktop-topbar{
    min-height:56px !important;
    height:auto !important;
    padding:4px 14px !important;
    gap:10px !important;
    align-items:center !important;
  }
  body.task-addressbook .hg-search-wrap{
    flex:1 1 auto !important;
    width:100% !important;
    margin-right:0 !important;
  }
  body.task-addressbook .hg-top-actions{
    display:none !important;
  }
  body.task-addressbook #layout-sidebar{
    width:280px;
    min-width:280px;
  }
  body.task-addressbook .hg-addressbook-shell{
    padding:12px 12px 16px;
  }
  body.task-addressbook .hg-addressbook-shell-native,
  body.task-addressbook .hg-addressbook-shell-three{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.task-addressbook .hg-addressbooks-head{
    padding:14px 14px 10px;
  }
  body.task-addressbook .hg-addressbook-searchbar{
    padding: 10px 12px 12px;
  }
  body.task-addressbook .hg-addressbook-detail-main{
    grid-template-columns: 54px minmax(0, 1fr);
  }
  body.task-addressbook .hg-addressbook-detail-actions{
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 4px;
  }
  body.task-addressbook #directorylist > li > a,
  body.task-addressbook #directorylist li > a{
    min-height:46px;
    padding:0 14px;
    font-size:13.5px;
  }
  body.task-addressbook #directorylist ul ul a{
    padding-left:38px;
  }
  body.task-addressbook #directorylist ul ul ul a{
    padding-left:52px;
  }
}

/* Inbox overrides for the real Roundcube markup */
.voice,
.voice * {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

#hg-desktop-topbar {
  min-height: 64px;
}

#mailsearchform {
  display: block;
}

#mailsearchform label,
#mailsearchform .searchlabel,
#mailsearchform .screen-reader-text,
#mailsearchform .button,
#mailsearchform input[type="submit"],
#mailsearchform a {
  display: none !important;
}

table#messagelist {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

table#messagelist thead {
  display: none !important;
}

table#messagelist tr.message {
  display: grid;
  grid-template-columns: 28px 24px 14px minmax(150px, 220px) auto minmax(0, 1fr) 20px 92px;
  column-gap: 10px;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  min-height: 52px;
  padding: 0 20px;
  cursor: pointer;
  background: #fff;
  transition: background 0.1s;
}

#messagelist-content.hg-mode-compact table#messagelist tr.message {
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}

#messagelist-content.hg-mode-compact .hg-col-preview {
  opacity: .82;
}

#messagelist-content.hg-mode-threads table#messagelist tr.message {
  border-left: 3px solid transparent;
  padding-left: 24px;
}

#messagelist-content.hg-mode-threads table#messagelist tr.message.hg-starred {
  border-left-color: #2563eb;
}

table#messagelist tr.message * {
  cursor: inherit;
}

table#messagelist tr.message a,
table#messagelist tr.message input {
  cursor: pointer;
}

table#messagelist tr.message:hover {
  background: #f8fafc;
}

table#messagelist tr.message.selected {
  background: #eff6ff;
  border-bottom-color: #dbeafe;
}

table#messagelist tr.message td {
  display: contents;
  width: auto !important;
  min-width: 0;
  padding: 0;
  vertical-align: middle;
  font-size: 14px;
  color: #111827;
  overflow: hidden;
}

table#messagelist td.selection {
  display: contents;
  white-space: nowrap;
}

table#messagelist td.selection input[type="checkbox"].hg-chk,
table#messagelist td.selection input[type="checkbox"].hg-row-check {
  grid-column: 1;
  grid-row: 1;
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  transition: background .12s, border-color .12s;
  outline: none;
  box-shadow: none;
}

table#messagelist td.selection input[type="checkbox"].hg-chk:checked,
table#messagelist td.selection input[type="checkbox"].hg-row-check:checked {
  background: #2563eb;
  border-color: #2563eb;
}

table#messagelist td.selection input[type="checkbox"].hg-chk:checked::after,
table#messagelist td.selection input[type="checkbox"].hg-row-check:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 4px;
  height: 8px;
  margin: auto;
  margin-top: 2px;
  border: 1.5px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

table#messagelist td.subject {
  display: contents !important;
  grid-template-columns: none;
  align-items: initial;
  gap: 0;
  min-width: 0;
}

table#messagelist td.subject > .fromto,
table#messagelist td.subject > .subject,
table#messagelist td.subject > .preview,
table#messagelist td.subject > .date,
table#messagelist td.subject > .size {
  display: grid;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: stretch;
}

table#messagelist td.subject > .fromto {
  grid-column: 4;
  grid-row: 1;
  color: #374151;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.15;
  justify-self: start;
  width: 100%;
  max-width: 100%;
}

.hg-col-sender .adr,
.hg-col-sender .rcmContactAddress,
table#messagelist td.subject > .fromto .adr,
table#messagelist td.subject > .fromto .rcmContactAddress {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table#messagelist td.subject > .subject {
  grid-column: 5;
  grid-row: 1;
  color: #374151;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.15;
  justify-self: start;
  width: auto;
  max-width: 100%;
}

table#messagelist td.subject > .preview {
  grid-column: 6;
  grid-row: 1;
  justify-self: start;
  color: #94a3b8;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.15;
  display: inline-block;
  max-width: 100%;
}

table#messagelist td.subject > .date {
  grid-column: 8;
  grid-row: 1;
  justify-items: end;
  height: 100%;
  color: #94a3b8;
  text-align: right;
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.15;
  font-weight: 400;
}

table#messagelist td.subject > .size,
.hg-col-size {
  display: none !important;
}

.msgicon.status {
  grid-column: 3;
  grid-row: 1;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  flex: 0 0 auto;
  justify-self: start;
  align-self: center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  position: relative;
  pointer-events: auto;
  display: block;
}

.msgicon.status::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
  transition: background 0.18s;
}

.msgicon.status.unread::before {
  background: #2563eb;
}

table#messagelist td.flags {
  display: none !important;
}

table#messagelist td.icon.flag,
table#messagelist td.icon.status {
  display: none !important;
}

table#messagelist tr.message.unread td.subject > .fromto,
table#messagelist tr.message.unread td.subject > .subject {
  font-weight: 700;
  color: #111827;
}

table#messagelist tr.message.unread td.subject > .date {
  font-weight: 600;
  color: #374151;
}

@media (max-width: 767px) {
  table#messagelist td.preview,
  table#messagelist td.attachment {
    display: none !important;
  }
}

/* Address book: live Roundcube data in the 05-contacts handoff layout */
body.task-addressbook .hg-addressbook-shell-live {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px 294px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #f8fafc;
}

body.task-addressbook .hg-addressbook-livepane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-right: 1px solid #dbe3ee;
  border-radius: 0;
  box-shadow: none;
}

body.task-addressbook .hg-addressbook-shell-live .hg-addressbooks-head {
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #e7edf5;
  background: #fff;
}

body.task-addressbook .hg-addressbook-shell-live .hg-addressbooks-title {
  color: #111827;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
}

body.task-addressbook .hg-addressbooks-head-contacts {
  justify-content: flex-start !important;
  padding-left: 16px !important;
}

body.task-addressbook .hg-addressbook-title-chevron {
  color: #94a3b8;
  flex: 0 0 auto;
}

body.task-addressbook .hg-addressbook-total {
  margin-left: auto;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

body.task-addressbook .hg-addressbook-shell-live .hg-addressbooks-more {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font-size: 0;
}

body.task-addressbook .hg-addressbook-shell-live .hg-addressbooks-more::before {
  content: "•••";
  font-size: 13px;
  letter-spacing: 1px;
}

body.task-addressbook .hg-addressbook-shell-live .hg-addressbooks-more:hover {
  background: #f1f5f9;
  color: #475569;
}

body.task-addressbook .hg-addressbook-shell-live .hg-addressbooks-listwrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 0;
  padding: 8px 8px 14px;
  background: #fff;
}

body.task-addressbook .hg-addressbook-shell-live #directorylist,
body.task-addressbook .hg-addressbook-shell-live #directorylist ul,
body.task-addressbook .hg-addressbook-shell-live #savedsearchlist,
body.task-addressbook .hg-addressbook-shell-live #savedsearchlist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.task-addressbook .hg-addressbook-shell-live #directorylist li,
body.task-addressbook .hg-addressbook-shell-live #savedsearchlist li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.task-addressbook .hg-addressbook-shell-live #directorylist li > a,
body.task-addressbook .hg-addressbook-shell-live #savedsearchlist li > a {
  box-sizing: border-box;
  min-height: 48px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 500;
  text-decoration: none;
}

body.task-addressbook .hg-addressbook-shell-live #directorylist .treetoggle {
  display: none !important;
}

body.task-addressbook .hg-addressbook-native-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

body.task-addressbook .hg-addressbook-native-icon-book {
  color: inherit;
}

body.task-addressbook .hg-addressbook-native-icon-group {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

body.task-addressbook .hg-addressbook-native-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}

body.task-addressbook .hg-addressbook-native-chevron {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  color: #64748b;
}

body.task-addressbook .hg-addressbook-shell-live #directorylist ul li > a,
body.task-addressbook .hg-addressbook-shell-live #savedsearchlist ul li > a {
  padding-left: 34px;
}

body.task-addressbook .hg-addressbook-shell-live #directorylist li > a:hover,
body.task-addressbook .hg-addressbook-shell-live #savedsearchlist li > a:hover {
  background: #f6f9fd;
}

body.task-addressbook .hg-addressbook-shell-live #directorylist li.selected > a,
body.task-addressbook .hg-addressbook-shell-live #directorylist li.current > a,
body.task-addressbook .hg-addressbook-shell-live #directorylist a.selected,
body.task-addressbook .hg-addressbook-shell-live #directorylist a.current,
body.task-addressbook .hg-addressbook-shell-live #savedsearchlist li.selected > a,
body.task-addressbook .hg-addressbook-shell-live #savedsearchlist li.current > a {
  background: #eaf3ff;
  color: #1d4ed8;
  font-weight: 600;
}

body.task-addressbook .hg-addressbook-shell-live #directorylist li.selected > a::before,
body.task-addressbook .hg-addressbook-shell-live #directorylist li.current > a::before,
body.task-addressbook .hg-addressbook-shell-live #directorylist a.selected::before,
body.task-addressbook .hg-addressbook-shell-live #directorylist a.current::before {
  display: none;
}

body.task-addressbook .hg-addressbook-savedsearches:empty {
  display: none;
}

body.task-addressbook .hg-addressbook-searchbar {
  display: none;
}

body.task-addressbook .hg-addressbook-contactlistwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0;
  background: #fff;
}

body.task-addressbook .hg-addressbook-empty-state {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(240px, calc(100% - 36px));
  transform: translate(-50%, -50%);
  display: none;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}

body.task-addressbook .hg-addressbook-empty-state.hg-visible {
  display: block;
}

body.task-addressbook #contacts-table,
body.task-addressbook #contacts-table tbody {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

body.task-addressbook #contacts-table tr.hg-addressbook-native-row {
  position: relative;
  height: 67px;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  background: #fff;
  cursor: pointer;
}

body.task-addressbook #contacts-table tr.hg-addressbook-native-row:hover {
  background: #f7faff;
}

body.task-addressbook #contacts-table tr.hg-addressbook-native-row.selected {
  background: #eaf3ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

body.task-addressbook #contacts-table tr.hg-addressbook-native-row:focus,
body.task-addressbook #contacts-table tr.hg-addressbook-native-row > td:focus {
  outline: none !important;
}

body.task-addressbook #contacts-table tr.hg-addressbook-native-row > td:focus {
  box-shadow: none !important;
}

body.task-addressbook #contacts-table tr.hg-addressbook-native-row > td {
  box-sizing: border-box;
  height: 67px;
  padding: 9px 14px;
  vertical-align: middle;
  overflow: hidden;
  color: #111827;
  font-size: 13.5px;
  line-height: 1.35;
}

body.task-addressbook #contacts-table tr.hg-addressbook-native-row > td:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.task-addressbook .hg-addressbook-native-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
}

body.task-addressbook .hg-addressbook-native-copy {
  min-width: 0;
  flex: 1 1 auto;
}

body.task-addressbook #contacts-table .contactname,
body.task-addressbook #contacts-table .name,
body.task-addressbook #contacts-table .listing-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.task-addressbook #contacts-table .email,
body.task-addressbook #contacts-table .organization,
body.task-addressbook #contacts-table .contactemail {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #94a3b8;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.task-addressbook #layout-list > .pagenav {
  box-sizing: border-box;
  min-height: 54px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid #e7edf5;
  background: #fff;
}

body.task-addressbook #layout-list > .pagenav a {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #64748b;
  font-size: 0;
  text-decoration: none;
}

body.task-addressbook #layout-list > .pagenav a .inner {
  display: none !important;
}

body.task-addressbook #layout-list > .pagenav a::before,
body.task-addressbook #layout-list > .pagenav a::after {
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
}

body.task-addressbook #layout-list > .pagenav a.prevpage::before,
body.task-addressbook #layout-list > .pagenav a.firstpage::before,
body.task-addressbook #layout-list > .pagenav a.firstpage::after {
  content: "";
  transform: rotate(45deg);
}

body.task-addressbook #layout-list > .pagenav a.nextpage::before,
body.task-addressbook #layout-list > .pagenav a.lastpage::before,
body.task-addressbook #layout-list > .pagenav a.lastpage::after {
  content: "";
  transform: rotate(225deg);
}

body.task-addressbook #layout-list > .pagenav a.firstpage::before,
body.task-addressbook #layout-list > .pagenav a.lastpage::before {
  margin-right: -3px;
}

body.task-addressbook #layout-list > .pagenav a:hover {
  background: #f1f5f9;
}

body.task-addressbook #layout-list > .pagenav a.disabled {
  opacity: .28;
  pointer-events: none;
}

body.task-addressbook #layout-list > .pagenav .pagenav-text {
  min-width: 104px;
  color: #64748b;
  font-size: 12.5px;
  text-align: center;
}

body.task-addressbook .hg-addressbook-detailpane {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: #f8fafc;
}

body.task-addressbook .hg-addressbook-framewrap {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
}

body.task-addressbook .hg-addressbook-framewrap #contact-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.task-addressbook .hg-addressbook-detail-toolbar {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  flex: 0 0 46px;
  overflow-x: hidden;
  overflow-y: hidden;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .55) transparent;
}

body.task-addressbook .hg-addressbook-detail-toolbar::-webkit-scrollbar {
  height: 4px;
}

body.task-addressbook .hg-addressbook-detail-toolbar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, .55);
}

body.task-addressbook .hg-addressbook-toolbar-actions {
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  height: 45px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}

body.task-addressbook .hg-addressbook-toolbar-button {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 8px 14px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #374151;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s;
}

body.task-addressbook .hg-addressbook-toolbar-button:hover,
body.task-addressbook .hg-addressbook-toolbar-button:focus-visible {
  outline: 0;
  background: #f1f5f9;
  color: #374151;
}

body.task-addressbook .hg-addressbook-toolbar-button.disabled,
body.task-addressbook .hg-addressbook-toolbar-button[aria-disabled="true"] {
  color: #cbd5e1;
  pointer-events: none;
  cursor: default;
}

body.task-addressbook .hg-addressbook-toolbar-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

body.task-addressbook .hg-addressbook-toolbar-icon svg,
body.task-addressbook .hg-addressbook-popup-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.task-addressbook .hg-addressbook-toolbar-button .inner {
  display: block;
}

body.task-addressbook .hg-addressbook-export-wrap {
  position: relative;
  min-width: 0;
  height: auto;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border-radius: 9px;
  color: #374151;
  transition: background .14s;
}

body.task-addressbook .hg-addressbook-export-wrap .hg-addressbook-toolbar-button {
  min-width: 0;
  padding: 8px 3px 8px 14px;
}

body.task-addressbook .hg-addressbook-export-dropdown {
  position: static;
  width: 24px;
  min-width: 24px;
  height: 32px;
  padding: 0 8px 0 1px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0 9px 9px 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

body.task-addressbook .hg-addressbook-export-dropdown::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg);
}

body.task-addressbook .hg-addressbook-export-dropdown:hover,
body.task-addressbook .hg-addressbook-export-dropdown:focus-visible {
  outline: 0;
  background: transparent;
  color: inherit;
}

body.task-addressbook .hg-addressbook-export-wrap:hover,
body.task-addressbook .hg-addressbook-export-wrap:focus-within {
  background: #f1f5f9;
}

body.task-addressbook .hg-addressbook-export-wrap .hg-addressbook-toolbar-button:hover,
body.task-addressbook .hg-addressbook-export-wrap .hg-addressbook-toolbar-button:focus-visible {
  background: transparent;
}

body.task-addressbook .hg-addressbook-export-dropdown.disabled,
body.task-addressbook .hg-addressbook-export-dropdown[aria-disabled="true"],
body.task-addressbook .hg-addressbook-export-wrap.disabled .hg-addressbook-toolbar-button {
  color: #cbd5e1;
  pointer-events: none;
}

body.task-addressbook #export-menu.popupmenu,
body.task-addressbook #contact-menu.popupmenu,
body.task-addressbook #contactgroup-selector.popupmenu,
body.task-addressbook #addressbook-selector.popupmenu {
  display: none;
  position: fixed;
  z-index: 520;
  box-sizing: border-box;
  min-width: 224px;
  max-width: min(310px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 6px 0;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}

body.task-addressbook #export-menu > ul,
body.task-addressbook #contact-menu > ul,
body.task-addressbook #contactgroup-selector > ul,
body.task-addressbook #addressbook-selector > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.task-addressbook #export-menu li,
body.task-addressbook #contact-menu li,
body.task-addressbook #contactgroup-selector li,
body.task-addressbook #addressbook-selector li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.task-addressbook #export-menu li > a,
body.task-addressbook #contact-menu li > a,
body.task-addressbook #contactgroup-selector li > a,
body.task-addressbook #addressbook-selector li > a {
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

body.task-addressbook #export-menu li > a:hover,
body.task-addressbook #contact-menu li > a:hover,
body.task-addressbook #contactgroup-selector li > a:hover,
body.task-addressbook #addressbook-selector li > a:hover {
  background: #2563eb;
  color: #fff;
}

body.task-addressbook #export-menu li > a.disabled,
body.task-addressbook #contact-menu li > a.disabled,
body.task-addressbook #contactgroup-selector li > a.disabled,
body.task-addressbook #addressbook-selector li > a.disabled,
body.task-addressbook #export-menu li > a[aria-disabled="true"],
body.task-addressbook #contact-menu li > a[aria-disabled="true"] {
  color: #cbd5e1;
  pointer-events: none;
}

body.task-addressbook .hg-addressbook-popup-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

body.task-addressbook #contact-menu a.assigngroup::after,
body.task-addressbook #contact-menu a.move::after,
body.task-addressbook #contact-menu a.copy::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  flex: 0 0 7px;
  border-top: 1.7px solid currentColor;
  border-right: 1.7px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
}

body.task-addressbook #contact-menu li + li,
body.task-addressbook #export-menu li + li {
  border-top: 1px solid #f1f5f9;
}

body.task-addressbook .hg-addressbook-mobile-back {
  display: none;
}

body.task-addressbook .hg-addressbook-mobile-stagebar,
body.task-addressbook .hg-addressbook-native-mobile-chevron,
body.task-addressbook .hg-addressbook-native-row-chevron {
  display: none;
}

body.task-addressbook .hg-addressbook-searchmenu {
  position: fixed;
  z-index: 360;
  top: 118px;
  left: min(520px, 38vw);
  width: 250px;
  padding: 14px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15,23,42,.18);
}

body.task-addressbook .hg-addressbook-searchmenu.hidden {
  display: none !important;
}

body.task-addressbook .hg-addressbook-searchmenu.hg-open {
  display: block !important;
}

/* Contact details and native edit form rendered inside Roundcube's contact iframe */
html.hg-contact-document {
  height: 100%;
  overflow: hidden;
}

html.hg-contact-document body.task-addressbook.action-show,
html.hg-contact-document body.task-addressbook.action-edit,
html.hg-contact-document body.task-addressbook.action-add {
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

html.hg-contact-document body.task-addressbook.action-show #layout,
html.hg-contact-document body.task-addressbook.action-edit #layout,
html.hg-contact-document body.task-addressbook.action-add #layout {
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
}

.hg-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.hg-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.hg-scroll::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}

.hg-scroll::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none !important;
  background: transparent;
  -webkit-appearance: none;
}

body.task-addressbook.action-show #layout-menu,
body.task-addressbook.action-show #layout-sidebar,
body.task-addressbook.action-show #layout-list,
body.task-addressbook.action-show #layout-content > .header,
body.task-addressbook.action-edit #layout-menu,
body.task-addressbook.action-edit #layout-sidebar,
body.task-addressbook.action-edit #layout-list,
body.task-addressbook.action-edit #layout-content > .header,
body.task-addressbook.action-add #layout-menu,
body.task-addressbook.action-add #layout-sidebar,
body.task-addressbook.action-add #layout-list,
body.task-addressbook.action-add #layout-content > .header {
  display: none !important;
}

body.task-addressbook.action-show .hg-contact-view {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 100%;
  margin: 0 auto;
  padding: 28px 32px 24px;
  color: #111827;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.task-addressbook.action-show .hg-contact-hero,
body.task-addressbook.action-show .hg-contact-fieldset,
body.task-addressbook.action-edit .hg-contact-edit-card,
body.task-addressbook.action-edit .hg-contact-edit-fieldset,
body.task-addressbook.action-add .hg-contact-edit-card,
body.task-addressbook.action-add .hg-contact-edit-fieldset {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 16px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

body.task-addressbook.action-show .hg-contact-hero,
body.task-addressbook.action-show .hg-contact-fieldset {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
}

body.task-addressbook.action-show .hg-contact-hero {
  padding: 24px;
}

body.task-addressbook.action-show .hg-contact-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  margin-bottom: 20px;
}

body.task-addressbook.action-show .hg-contact-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  min-width: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}

body.task-addressbook.action-show .hg-contact-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.task-addressbook.action-show .hg-contact-head {
  min-width: 0;
  flex: 1 1 auto;
}

body.task-addressbook.action-show .hg-contact-head h2 {
  margin: 0 0 3px;
  color: #111827;
  font-size: 20px;
  line-height: normal;
  font-weight: 800;
  letter-spacing: -.01em;
}

body.task-addressbook.action-show .hg-contact-head p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: normal;
}

body.task-addressbook.action-show .hg-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}

body.task-addressbook.action-show .hg-contact-action {
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

body.task-addressbook.action-show .hg-contact-action-primary {
  color: #2563eb;
}

body.task-addressbook.action-show .hg-contact-action:hover,
body.task-addressbook.action-show .hg-contact-action:focus-visible {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #111827;
  text-decoration: none;
  outline: none;
}

body.task-addressbook.action-show .hg-contact-action-primary:hover,
body.task-addressbook.action-show .hg-contact-action-primary:focus-visible {
  color: #1d4ed8;
}

body.task-addressbook.action-show .hg-contact-action-edit::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.task-addressbook.action-show .hg-contact-details,
body.task-addressbook.action-show .hg-contact-details .tab-content {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.task-addressbook.action-show .hg-contact-fieldset {
  padding: 20px;
}

body.task-addressbook.action-show .hg-contact-fieldset > legend {
  float: left;
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  color: #111827;
  font-size: 14px;
  line-height: normal;
  font-weight: 700;
}

body.task-addressbook.action-show .hg-contact-fieldset > [id^="contactsection"] {
  clear: both;
  width: 100%;
  min-width: 0;
}

body.task-addressbook.action-show .hg-contact-fieldset .contactfieldgroup {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.task-addressbook.action-show .hg-contact-fieldset .contactfieldgroup > legend {
  display: none;
}

body.task-addressbook.action-show .hg-contact-card--information #contactsectioncontact,
body.task-addressbook.action-show .hg-contact-card--information .contactfieldgroup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.task-addressbook.action-show .hg-contact-card--information .contactfieldgroup,
body.task-addressbook.action-show .hg-contact-card--information .contactfieldgroup > .row {
  width: 100%;
}

body.task-addressbook.action-show .hg-contact-fieldset .contactfieldgroup > .row {
  min-height: 28px;
  margin: 0;
  padding: 4px 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: start;
}

body.task-addressbook.action-show .hg-contact-card--information .contactfieldgroup > .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0;
}

body.task-addressbook.action-show .hg-contact-card--information .contactcontrolleraddress > .row {
  align-items: flex-start;
}

body.task-addressbook.action-show .hg-contact-card--information .hg-contact-field-icon {
  order: 1;
  flex: 0 0 16px;
  margin: 1px 12px 0 0;
}

body.task-addressbook.action-show .hg-contact-card--information .contactfieldcontent,
body.task-addressbook.action-show .hg-contact-card--information .contactfield {
  order: 2;
  min-width: 0;
  flex: 1 1 auto;
  color: #374151;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body.task-addressbook.action-show .hg-contact-card--information .contactfieldlabel {
  order: 3;
  max-width: 100px;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding-left: 12px;
  color: #9ca3af;
  font-size: 12.5px;
  text-align: right;
  white-space: nowrap;
}

body.task-addressbook.action-show .hg-contact-field-icon {
  grid-column: 1;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #94a3b8;
}

body.task-addressbook.action-show .hg-contact-field-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

body.task-addressbook.action-show .hg-contact-fieldset .contactfieldlabel {
  grid-column: 3;
  grid-row: 1;
  max-width: 100px;
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  white-space: normal;
}

body.task-addressbook.action-show .hg-contact-fieldset .contactfieldcontent,
body.task-addressbook.action-show .hg-contact-fieldset .contactfield {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  color: #334155;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body.task-addressbook.action-show .hg-contact-fieldset a {
  color: inherit;
  text-decoration: none;
}

body.task-addressbook.action-show .hg-contact-fieldset .contactcontrollerwebsite a,
body.task-addressbook.action-show .hg-contact-fieldset .contactcontrolleremail a:hover,
body.task-addressbook.action-show .hg-contact-fieldset .contactcontrollerwebsite a:hover {
  color: #2563eb;
}

body.task-addressbook.action-show .hg-contact-card--notes .contactfieldcontent,
body.task-addressbook.action-show .hg-contact-card--notes .contactfield {
  white-space: pre-wrap;
}

body.task-addressbook.action-show .hg-contact-card--additional #contactsectionpersonal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.task-addressbook.action-show .hg-contact-card--additional .contactfieldgroup {
  min-width: 0;
}

body.task-addressbook.action-show .hg-contact-card--additional .contactfieldgroup > .row {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0;
}

body.task-addressbook.action-show .hg-contact-card--additional .hg-contact-field-icon {
  display: none;
}

body.task-addressbook.action-show .hg-contact-card--additional .contactfieldlabel {
  order: 1;
  max-width: 100%;
  margin: 0;
  color: #9ca3af;
  font-size: 12.5px;
  line-height: normal;
  text-align: left;
}

body.task-addressbook.action-show .hg-contact-card--additional .contactfieldcontent,
body.task-addressbook.action-show .hg-contact-card--additional .contactfield {
  order: 2;
  min-width: 0;
  margin: 0;
  color: #374151;
  font-size: 13.5px;
  line-height: normal;
  font-weight: 500;
  text-transform: capitalize;
  overflow-wrap: anywhere;
}

body.task-addressbook.action-show .hg-contact-card--groups .contactfieldgroup > .row {
  grid-template-columns: 18px minmax(0, 1fr);
}

/* Native contact editor: all controls and persistence remain Roundcube-owned. */
.hg-ui-select {
  box-sizing: border-box;
  padding: 9px 32px 9px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 9px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: #111827;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.hg-ui-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

body.task-addressbook.action-edit .hg-contact-edit-view,
body.task-addressbook.action-add .hg-contact-edit-view {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: 28px 32px 86px;
  color: #111827;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.task-addressbook.action-edit .hg-contact-edit-card,
body.task-addressbook.action-add .hg-contact-edit-card {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
  padding: 20px;
}

body.task-addressbook.action-edit .hg-contact-edit-fieldset,
body.task-addressbook.action-add .hg-contact-edit-fieldset {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
}

body.task-addressbook .hg-contact-edit-heading h2 {
  margin: 0;
  color: #050a14;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
}

body.task-addressbook .hg-contact-edit-heading p {
  margin: 4px 0 18px;
  color: #64748b;
  font-size: 13px;
}

body.task-addressbook .hg-contact-edit-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

body.task-addressbook .hg-contact-edit-photo {
  width: 72px;
  min-width: 72px;
  margin: 0;
  padding: 0;
  border: 0;
}

body.task-addressbook .hg-contact-edit-photo #contactpic,
body.task-addressbook .hg-contact-edit-photo #contactpic img,
body.task-addressbook .hg-contact-edit-photo img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 999px !important;
  object-fit: cover;
}

body.task-addressbook .hg-contact-edit-photo #contactpic {
  display: block;
  overflow: hidden;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition: outline-color .16s ease, transform .16s ease;
}

body.task-addressbook .hg-contact-edit-photo #contactpic:hover,
body.task-addressbook .hg-contact-edit-photo #contactpic:focus-visible {
  outline-color: rgba(37, 99, 235, .22);
}

body.task-addressbook .hg-contact-edit-head > legend,
body.task-addressbook .hg-contact-edit-head > .source,
body.task-addressbook .hg-contact-edit-head .contactsource {
  display: none !important;
}

body.task-addressbook .hg-contact-edit-head {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
}

body.task-addressbook .hg-contact-edit-head .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  margin: 0 0 10px;
}

body.task-addressbook .hg-contact-edit-head .names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px 12px;
  margin: 0 0 10px;
}

body.task-addressbook .hg-contact-edit-head .names > .row {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

body.task-addressbook .hg-contact-edit-head .names > .hg-contact-name-primary {
  grid-column: auto;
}

body.task-addressbook .hg-contact-edit-head .names > * {
  min-width: 0;
}

body.task-addressbook .hg-contact-edit-head label,
body.task-addressbook .hg-contact-edit-fieldset label {
  color: #64748b;
  font-size: 13px;
  font-weight: 550;
}

body.task-addressbook .hg-contact-edit-head input,
body.task-addressbook .hg-contact-edit-head select,
body.task-addressbook .hg-contact-edit-fieldset input,
body.task-addressbook .hg-contact-edit-fieldset select,
body.task-addressbook .hg-contact-edit-fieldset textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  background: #fff;
  color: #111827;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 400;
  box-shadow: none;
}

body.task-addressbook select.hg-ui-select {
  border: 1.5px solid #e5e7eb;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: #111827;
  font-size: 13.5px;
  font-weight: 400;
  appearance: none;
}

body.task-addressbook select.hg-ui-select:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

body.task-addressbook .hg-contact-edit-head option,
body.task-addressbook .hg-contact-edit-fieldset option {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
}

body.task-addressbook .hg-contact-edit-fieldset textarea {
  min-height: 108px;
  resize: vertical;
}

body.task-addressbook .hg-contact-edit-head input:focus,
body.task-addressbook .hg-contact-edit-head select:focus,
body.task-addressbook .hg-contact-edit-fieldset input:focus,
body.task-addressbook .hg-contact-edit-fieldset select:focus,
body.task-addressbook .hg-contact-edit-fieldset textarea:focus {
  border-color: #2563eb;
  outline: 3px solid rgba(37, 99, 235, .12);
}

body.task-addressbook .hg-contact-edit-fieldset {
  padding: 18px 20px 20px;
}

body.task-addressbook .hg-contact-edit-fieldset > legend {
  display: none !important;
}

body.task-addressbook .hg-contact-edit-fieldset-title {
  margin: 0 0 16px;
  color: #111827;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

body.task-addressbook #contactsectioncontact,
body.task-addressbook #contactsectionpersonal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px 12px;
}

body.task-addressbook #contactsectioncontact > .contactcontrolleraddress,
body.task-addressbook #contactsectioncontact > .addfield,
body.task-addressbook #contactsectionpersonal > .addfield {
  grid-column: 1 / -1;
}

body.task-addressbook .hg-contact-edit-fieldset .contactfieldgroup {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.task-addressbook .hg-contact-edit-fieldset .contactfieldgroup > legend {
  margin: 0 0 7px;
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
}

body.task-addressbook .hg-contact-edit-fieldset .contactfieldgroup > .row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: start;
  gap: 8px;
  margin: 0 0 8px;
}

body.task-addressbook .hg-contact-edit-fieldset .contactselectsubtype {
  grid-column: 1 / -1;
}

body.task-addressbook .hg-contact-edit-fieldset .contactfieldcontent,
body.task-addressbook .hg-contact-edit-fieldset .contactfield {
  min-width: 0;
}

body.task-addressbook .hg-contact-edit-fieldset .contactfieldbutton.deletebutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  background: #fff;
  color: #64748b;
  font-size: 0;
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

body.task-addressbook .hg-contact-edit-fieldset .contactfieldbutton.deletebutton::before {
  content: '\00d7';
  display: block;
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

body.task-addressbook .hg-contact-edit-fieldset .contactfieldbutton.deletebutton:hover,
body.task-addressbook .hg-contact-edit-fieldset .contactfieldbutton.deletebutton:focus-visible {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #111827;
  outline: none;
}

/* Roundcube wraps labels/buttons only while a field is being inserted dynamically. */
body.task-addressbook .hg-contact-edit-fieldset .contactfieldgroup > .row.input-group > span.input-group-prepend {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  min-width: 0;
}

body.task-addressbook .hg-contact-edit-fieldset .contactfieldgroup > .row.input-group > span.input-group-append {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  width: 38px;
  min-width: 38px;
}

body.task-addressbook #contactsectioncontact .contactcontrolleremail > .row > input,
body.task-addressbook #contactsectioncontact .contactcontrollerphone > .row > input,
body.task-addressbook #contactsectionpersonal .contactfieldgroup > .row > input,
body.task-addressbook #contactsectionpersonal .contactfieldgroup > .row > select {
  grid-column: 1;
  grid-row: 2;
}

body.task-addressbook #contactsectionpersonal .contactfieldgroup > .row > label {
  grid-column: 1 / -1;
  grid-row: 1;
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress > .row {
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress .contactselectsubtype {
  grid-column: 1;
  grid-row: 1;
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress .deletebutton {
  grid-column: 2;
  grid-row: 1;
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress .content {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  min-width: 0;
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress .content > input {
  width: 100%;
  min-width: 0;
}

/* Contact information uses visually unified controls without replacing Roundcube inputs. */
body.task-addressbook #contactsectioncontact .contactcontrolleremail > .row,
body.task-addressbook #contactsectioncontact .contactcontrollerphone > .row {
  grid-template-columns: 66px minmax(0, 1fr) 36px;
  gap: 0;
  min-height: 40px;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

body.task-addressbook #contactsectioncontact .contactcontrolleremail > .row:focus-within,
body.task-addressbook #contactsectioncontact .contactcontrollerphone > .row:focus-within,
body.task-addressbook #contactsectioncontact .contactcontrolleraddress > .row:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

body.task-addressbook #contactsectioncontact .contactcontrolleremail > .row:focus-within,
body.task-addressbook #contactsectioncontact .contactcontrollerphone > .row:focus-within {
  border-bottom-left-radius: 0;
}

body.task-addressbook #contactsectioncontact .contactcontrolleremail .contactselectsubtype,
body.task-addressbook #contactsectioncontact .contactcontrollerphone .contactselectsubtype {
  grid-column: 1;
  grid-row: 1;
  width: 66px;
  min-width: 66px;
  min-height: 40px;
  padding: 0 20px 0 9px;
  border: 0;
  border-radius: 0;
  background-color: #2563eb;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  color: #fff;
  font-size: 12.5px;
  box-shadow: none;
}

body.task-addressbook #contactsectioncontact .contactcontrolleremail > .row > input,
body.task-addressbook #contactsectioncontact .contactcontrollerphone > .row > input {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.task-addressbook #contactsectioncontact .contactcontrolleremail > .row > .deletebutton,
body.task-addressbook #contactsectioncontact .contactcontrollerphone > .row > .deletebutton,
body.task-addressbook #contactsectioncontact .contactcontrolleremail > .row > .input-group-append,
body.task-addressbook #contactsectioncontact .contactcontrollerphone > .row > .input-group-append {
  grid-column: 3;
  grid-row: 1;
  align-self: stretch;
  width: 36px;
  min-width: 36px;
  height: 40px;
  min-height: 40px;
}

body.task-addressbook #contactsectioncontact .contactcontrolleremail .deletebutton,
body.task-addressbook #contactsectioncontact .contactcontrollerphone .deletebutton {
  width: 36px;
  min-width: 36px;
  height: 40px;
  min-height: 40px;
  border: 0;
  border-left: 1px solid #eef2f7;
  border-radius: 0;
  background: #fff;
}

body.task-addressbook #contactsectioncontact .contactcontrolleremail .contactselectsubtype:focus,
body.task-addressbook #contactsectioncontact .contactcontrollerphone .contactselectsubtype:focus,
body.task-addressbook #contactsectioncontact .contactcontrolleremail > .row > input:focus,
body.task-addressbook #contactsectioncontact .contactcontrollerphone > .row > input:focus {
  outline: none;
  box-shadow: none;
}

body.task-addressbook #contactsectioncontact .contactselectsubtype option {
  background-color: #6b7280;
  color: #fff;
}

body.task-addressbook #contactsectioncontact .contactselectsubtype option:hover,
body.task-addressbook #contactsectioncontact .contactselectsubtype option:focus,
body.task-addressbook #contactsectioncontact .contactselectsubtype option:checked {
  background-color: #374151;
  background-image: linear-gradient(#374151, #374151);
  color: #fff;
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress > .row {
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 0;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress .contactselectsubtype {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-height: 40px;
  padding: 0 32px 0 10px;
  border: 0;
  border-radius: 0;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"), linear-gradient(90deg, #2563eb 0, #2563eb 66px, #ffffff 66px, #ffffff 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 10px center, 0 0;
  background-size: 11px 11px, 100% 100%;
  color: #fff;
  font-size: 12.5px;
  box-shadow: none;
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress > .row > .deletebutton,
body.task-addressbook #contactsectioncontact .contactcontrolleraddress > .row > .input-group-append {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: 38px;
  min-width: 38px;
  height: 40px;
  min-height: 40px;
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress .deletebutton {
  width: 38px;
  min-width: 38px;
  height: 40px;
  min-height: 40px;
  border: 0;
  border-left: 1px solid #eef2f7;
  border-radius: 0;
  background: #fff;
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress .content {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 8px;
  border-top: 1px solid #eef2f7;
  background: #fff;
}

body.task-addressbook #contactsectioncontact .contactcontrolleraddress .contactselectsubtype:focus,
body.task-addressbook #contactsectioncontact .contactcontrolleraddress .content > input:focus {
  outline: none;
  box-shadow: none;
}

/* En la ficha de solo lectura, cada dato se presenta sin apariencia de input.
   Los bordes anteriores se reservan exclusivamente para editar/agregar. */
body.task-addressbook.action-show .hg-contact-card--information .contactfieldgroup > .row,
body.task-addressbook.action-show .hg-contact-card--information .contactfieldgroup > .row:focus-within {
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
}

body.task-addressbook .hg-contact-edit-fieldset .addfield {
  margin: 14px 0 0;
}

body.task-addressbook .hg-contact-edit-fieldset .addfieldmenu {
  width: auto;
  max-width: 100%;
  min-height: 38px;
  padding-right: 34px;
  border-color: #dbe3ee;
  background-color: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

body.task-addressbook .hg-contact-edit-head .addfield {
  margin: 12px 0 0;
}

body.task-addressbook .hg-contact-edit-head .addfieldmenu {
  width: auto;
  max-width: 100%;
  min-height: 36px;
  padding: 7px 34px 7px 11px;
  border-color: #dbe3ee;
  background-color: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

body.task-addressbook .hg-contact-edit-actions {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}

body.task-addressbook .hg-contact-edit-cancel,
body.task-addressbook .hg-contact-edit-save {
  box-sizing: border-box;
  min-width: 112px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

body.task-addressbook .hg-contact-edit-save {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

body.task-addressbook .hg-contact-edit-cancel:hover,
body.task-addressbook .hg-contact-edit-cancel:focus-visible {
  background: #f8fafc;
  outline: none;
}

body.task-addressbook .hg-contact-edit-save:hover,
body.task-addressbook .hg-contact-edit-save:focus-visible {
  border-color: #1d4ed8;
  background: #1d4ed8;
  outline: none;
}

@media (max-width: 767px) {
  body.task-addressbook #layout {
    height: 100vh;
    height: 100dvh;
    height: var(--hg-addressbook-viewport-height, 100dvh);
    min-height: 0;
    max-height: var(--hg-addressbook-viewport-height, 100dvh);
  }

  body.task-addressbook #hg-app,
  body.task-addressbook .hg-addressbook-main {
    min-height: 0;
  }

  body.task-addressbook .hg-addressbook-shell-live {
    display: flex;
    flex-direction: column;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: hidden;
    background: #f8fafc;
  }

  body.task-addressbook .hg-addressbook-shell-live > .hg-addressbook-librarypane,
  body.task-addressbook .hg-addressbook-shell-live > .hg-addressbook-contactpane,
  body.task-addressbook .hg-addressbook-shell-live > .hg-addressbook-detailpane {
    display: none !important;
    box-sizing: border-box;
    flex: 1 1 auto;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }

  body.task-addressbook .hg-addressbook-shell-live[data-hg-mobile-view="books"] > .hg-addressbook-librarypane,
  body.task-addressbook .hg-addressbook-shell-live[data-hg-mobile-view="contacts"] > .hg-addressbook-contactpane {
    display: flex !important;
  }

  body.task-addressbook .hg-addressbook-shell-live[data-hg-mobile-view="detail"] > .hg-addressbook-detailpane {
    display: flex !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #f8fafc;
  }

  body.task-addressbook .hg-addressbook-shell-live[data-hg-mobile-view="books"] > .hg-addressbook-librarypane {
    flex: 0 1 auto;
    max-height: calc(100% - 32px);
  }

  body.task-addressbook .hg-addressbook-shell-live[data-hg-mobile-view="contacts"] > .hg-addressbook-contactpane {
    flex: 1 1 auto;
    max-height: none;
  }

  body.task-addressbook .hg-addressbook-mobile-stagebar {
    box-sizing: border-box;
    min-height: 56px;
    padding: 8px 16px;
    flex: 0 0 56px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
  }

  body.task-addressbook .hg-addressbook-shell-live[data-hg-mobile-view="contacts"] > .hg-addressbook-mobile-stagebar,
  body.task-addressbook .hg-addressbook-shell-live[data-hg-mobile-view="detail"] > .hg-addressbook-mobile-stagebar {
    display: flex;
  }

  body.task-addressbook .hg-addressbook-mobile-stageback {
    min-height: 34px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  body.task-addressbook .hg-addressbook-mobile-stagetitle {
    color: #111827;
    font-size: 14px;
    font-weight: 700;
  }

  body.task-addressbook .hg-addressbook-shell-live .hg-addressbooks-listwrap {
    flex: 0 1 auto;
    padding: 0;
  }

  body.task-addressbook .hg-addressbook-shell-live #directorylist li > a,
  body.task-addressbook .hg-addressbook-shell-live #savedsearchlist li > a {
    min-height: 48px;
    padding: 13px 16px;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
  }

  body.task-addressbook .hg-addressbook-shell-live #directorylist ul li > a,
  body.task-addressbook .hg-addressbook-shell-live #savedsearchlist ul li > a {
    padding-left: 48px;
    background: #f8faff;
  }

  body.task-addressbook .hg-addressbook-native-mobile-chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
  }

  body.task-addressbook .hg-addressbook-native-mobile-chevron {
    display: inline-flex;
  }

  body.task-addressbook .hg-addressbook-mobile-back {
    display: none;
  }

  body.task-addressbook .hg-addressbook-title-chevron {
    display: none;
  }

  body.task-addressbook .hg-addressbook-total {
    font-size: 12px;
  }

  body.task-addressbook .hg-addressbook-searchbar {
    display: none;
  }

  body.task-addressbook .hg-addressbook-detailpane {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #f8fafc;
  }

  body.task-addressbook .hg-addressbook-detail-toolbar {
    display: none;
  }

  body.task-addressbook .hg-addressbook-toolbar-actions {
    height: 55px;
    min-width: max-content;
    padding-left: 6px;
    padding-right: 6px;
    scroll-snap-type: x proximity;
  }

  body.task-addressbook .hg-addressbook-toolbar-button,
  body.task-addressbook .hg-addressbook-export-wrap {
    scroll-snap-align: start;
  }

  body.task-addressbook .hg-addressbook-framewrap {
    padding: 0;
  }

  body.task-addressbook #contacts-table tr.hg-addressbook-native-row,
  body.task-addressbook #contacts-table tr.hg-addressbook-native-row > td {
    height: 73px;
  }

  body.task-addressbook #contacts-table tr.hg-addressbook-native-row > td {
    padding: 12px 16px;
    gap: 14px;
  }

  body.task-addressbook .hg-addressbook-native-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 14px;
  }

  body.task-addressbook .hg-addressbook-native-row-chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    color: #d1d5db;
  }

  body.task-addressbook #layout-list > .pagenav {
    min-height: 54px;
    flex: 0 0 54px;
  }

  body.task-addressbook.action-show .hg-contact-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.task-addressbook.action-show .hg-contact-hero {
    padding: 24px;
  }

  body.task-addressbook.action-show .hg-contact-avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    flex-basis: 72px;
    font-size: 24px;
  }

  body.task-addressbook.action-show .hg-contact-head h2 {
    font-size: 20px;
  }

  body.task-addressbook.action-show .hg-contact-fieldset {
    padding: 20px;
  }

  body.task-addressbook.action-show .hg-contact-fieldset .contactfieldgroup > .row {
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }

  body.task-addressbook .hg-contact-edit-card,
  body.task-addressbook .hg-contact-edit-fieldset {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
  }

  body.task-addressbook .hg-contact-edit-card,
  body.task-addressbook .hg-contact-edit-fieldset {
    padding: 20px;
  }

  body.task-addressbook .hg-contact-edit-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }

  body.task-addressbook .hg-contact-edit-photo {
    margin: 0;
  }

  body.task-addressbook .hg-contact-edit-head .row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  body.task-addressbook #contactsectioncontact .contactcontrolleraddress > .row {
    grid-template-columns: minmax(0, 1fr) 38px;
  }

  body.task-addressbook #contactsectioncontact > .contactcontrolleremail,
  body.task-addressbook #contactsectioncontact > .contactcontrollerphone {
    grid-column: 1 / -1;
  }

  body.task-addressbook #contactsectioncontact .contactcontrolleraddress .content {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.task-addressbook .hg-contact-edit-actions {
    padding: 12px;
  }

  body.task-addressbook .hg-contact-edit-cancel,
  body.task-addressbook .hg-contact-edit-save {
    min-width: 0;
    flex: 1 1 50%;
  }
}

@media (max-width: 420px) {
  body.task-addressbook.action-show .hg-contact-view {
    padding: 16px 16px 24px;
  }

  body.task-addressbook.action-edit .hg-contact-edit-view,
  body.task-addressbook.action-add .hg-contact-edit-view {
    padding: 16px 16px 86px;
  }

  body.task-addressbook.action-show .hg-contact-hero,
  body.task-addressbook.action-show .hg-contact-fieldset {
    padding: 20px;
    border-radius: 14px;
  }

  body.task-addressbook.action-show .hg-contact-identity {
    gap: 16px;
    margin-bottom: 18px;
  }

  body.task-addressbook.action-show .hg-contact-avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    flex-basis: 64px;
    font-size: 20px;
  }

  body.task-addressbook.action-show .hg-contact-head h2 {
    font-size: 17px;
  }

  body.task-addressbook.action-show .hg-contact-card--additional #contactsectionpersonal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compose: native Roundcube discard/unsaved-changes dialog */
body.task-mail.action-compose .ui-widget-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, .52) !important;
  backdrop-filter: blur(2px);
  opacity: 1 !important;
  z-index: 1000 !important;
}

body.task-mail.action-compose .ui-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(460px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: calc(100vh - 32px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28) !important;
  color: #111827 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  z-index: 1001 !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-titlebar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 58px !important;
  padding: 17px 18px 13px 22px !important;
  border: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-title {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 0 !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close::before,
body.task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close::before {
  transform: rotate(45deg);
}

body.task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close::after {
  transform: rotate(-45deg);
}

body.task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close:hover {
  background: #e2e8f0 !important;
  color: #334155 !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close .ui-icon {
  display: none !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-content.popup {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 180px) !important;
  padding: 20px 22px 8px !important;
  overflow: auto !important;
  border: 0 !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane {
  margin: 0 !important;
  padding: 18px 22px 20px !important;
  border: 0 !important;
  background: #fff !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-buttonset {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  float: none !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 17px !important;
  border: 1px solid #dbe1e8 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #334155 !important;
  box-shadow: none !important;
  font: 700 13.5px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  cursor: pointer !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane button:hover {
  background: #f8fafc !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane button.mainaction.discard,
body.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane button.discard {
  border-color: #dc2626 !important;
  background: #dc2626 !important;
  color: #fff !important;
}

body.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane button.mainaction.discard:hover,
body.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane button.discard:hover {
  border-color: #b91c1c !important;
  background: #b91c1c !important;
}

@media (max-width: 520px) {
  body.task-mail.action-compose .ui-dialog .ui-dialog-content.popup {
    padding: 18px 18px 6px !important;
  }

  body.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane {
    padding: 16px 18px 18px !important;
  }

  body.task-mail.action-compose .ui-dialog .ui-dialog-buttonset {
    flex-direction: column !important;
  }

  body.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane button {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  #hg-desktop-topbar {
    min-height: 56px !important;
    height: auto !important;
    padding: 4px 14px !important;
    gap: 10px !important;
  }
  #mailsearchform,
  .hg-search-wrap .searchbar {
    min-width: 0 !important;
  }
  #mailsearchform,
  .hg-search {
    height: 41px !important;
    font-size: 14px !important;
  }
  #hg-toolbar {
    height: 48px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .hg-toolbar-actions {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .hg-toolbar-pagination {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  #pagenav {
    gap: 6px !important;
  }
  #pagenav .message-count {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  #pagenav a {
    width: 30px !important;
    height: 30px !important;
  }
}

/* Message view: compact separator when there are no attachments */
body.task-mail.action-show .hg-email-attachments.hg-attachments-pending,
body.task-mail.action-show .hg-email-attachments.hg-no-attachments {
  height: 4px;
  min-height: 4px;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #fafafa;
  border-bottom: 1px solid #f1f5f9;
}

body.task-mail.action-show .hg-email-attachments.hg-attachments-pending .hg-email-attachments-head,
body.task-mail.action-show .hg-email-attachments.hg-attachments-pending .attachmentslist,
body.task-mail.action-show .hg-email-attachments.hg-no-attachments .hg-email-attachments-head,
body.task-mail.action-show .hg-email-attachments.hg-no-attachments .attachmentslist {
  display: none !important;
}

/* Message view: keep the complete bottom actions reachable on mobile */
@media (max-width: 767px) {
  body.task-mail.action-show #layout {
    height: 100vh;
    height: 100dvh;
  }

  body.task-mail.action-show #hg-email-scroll {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }

  body.task-mail.action-show .hg-email-card {
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}



/* Vista móvil del mensaje: barra de acciones compacta y navegación anterior/siguiente */
@media (max-width: 767px) {
  body.task-mail.action-show #hg-mobile-actionbar {
    width:100%;
    min-width:0;
    height:50px;
    padding:0 8px;
    gap:0;
    box-sizing:border-box;
    justify-content:space-between;
    overflow:hidden;
  }

  body.task-mail.action-show #hg-mobile-actionbar .hg-act-sep {
    display:none;
  }

  body.task-mail.action-show #hg-mobile-actionbar .hg-act-btn {
    min-width:0;
    flex:0 0 auto;
    padding:6px 4px;
    gap:3px;
    border-radius:7px;
    font-size:12px;
    line-height:1;
  }

  body.task-mail.action-show #hg-mobile-actionbar .hg-act-btn > svg {
    width:15px;
    height:15px;
    flex:0 0 15px;
  }

  body.task-mail.action-show #hg-mobile-actionbar .hg-message-nav-btn {
    width:30px;
    height:30px;
    padding:0;
    justify-content:center;
  }

  body.task-mail.action-show #hg-mobile-actionbar .hg-message-nav-btn > svg {
    width:17px;
    height:17px;
    flex-basis:17px;
  }

  body.task-mail.action-show #hg-mobile-actionbar .hg-message-nav-btn:disabled {
    opacity:.35;
    cursor:default;
  }
}

@media (max-width: 340px) {
  body.task-mail.action-show #hg-mobile-actionbar {
    padding-left:5px;
    padding-right:5px;
  }

  body.task-mail.action-show #hg-mobile-actionbar .hg-act-btn {
    padding-left:2px;
    padding-right:2px;
    gap:2px;
    font-size:11px;
  }

  body.task-mail.action-show #hg-mobile-actionbar .hg-act-btn > svg {
    width:14px;
    height:14px;
    flex-basis:14px;
  }

  body.task-mail.action-show #hg-mobile-actionbar .hg-message-nav-btn {
    width:27px;
    height:27px;
  }
}

/* Message view: attachment sizing, remote-content alert and responsive message images */
body.task-mail.action-show .hg-email-attachments .attachmentslist,
body.task-mail.action-show .hg-email-attachments .attachmentslist > ul {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.task-mail.action-show .hg-email-attachments.hg-single-attachment .attachmentslist li.hg-attachment-card,
body.task-mail.action-show .hg-email-attachments .attachmentslist.hg-single-attachment li.hg-attachment-card,
body.task-mail.action-show .hg-email-attachments .attachmentslist li.hg-attachment-card:only-child {
  flex: 0 0 calc(50% - 5px);
  width: calc(50% - 5px);
  max-width: calc(50% - 5px);
}

body.task-mail.action-show #message-objects #remote-objects-message.notice,
body.task-mail.action-show #message-objects .notice[id*="remote-object"],
body.task-mail.action-show #message-objects .notice[id*="remote_objects"] {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 9px;
  margin: 0 0 14px;
  padding: 7px 10px;
  min-height: 42px;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 9px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12.5px;
  line-height: 1.3;
  box-sizing: border-box;
}

body.task-mail.action-show #message-objects #remote-objects-message.notice::before,
body.task-mail.action-show #message-objects .notice[id*="remote-object"]::before,
body.task-mail.action-show #message-objects .notice[id*="remote_objects"]::before {
  content: "!";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: #fef3c7;
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
}

body.task-mail.action-show #message-objects #remote-objects-message.notice > span:not(.boxbuttons):not(.box-buttons),
body.task-mail.action-show #message-objects .notice[id*="remote-object"] > span:not(.boxbuttons):not(.box-buttons),
body.task-mail.action-show #message-objects .notice[id*="remote_objects"] > span:not(.boxbuttons):not(.box-buttons) {
  flex: 1 1 auto;
  min-width: 0;
}

body.task-mail.action-show #message-objects #remote-objects-message .boxbuttons,
body.task-mail.action-show #message-objects #remote-objects-message .box-buttons,
body.task-mail.action-show #message-objects .notice[id*="remote-object"] .boxbuttons,
body.task-mail.action-show #message-objects .notice[id*="remote-object"] .box-buttons,
body.task-mail.action-show #message-objects .notice[id*="remote_objects"] .boxbuttons,
body.task-mail.action-show #message-objects .notice[id*="remote_objects"] .box-buttons {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
}

/* The visible Permitir action already stores the sender as trusted. */
body.task-mail.action-show #message-objects a[href="#loadremotealways"],
body.task-mail.action-show #message-objects a[href="#load-remote-always"] {
  display: none !important;
}

body.task-mail.action-show #message-objects #remote-objects-message a[href="#loadremote"],
body.task-mail.action-show #message-objects #remote-objects-message a[href="#load-remote"],
body.task-mail.action-show #message-objects #remote-objects-message .boxbuttons a,
body.task-mail.action-show #message-objects #remote-objects-message .box-buttons a,
body.task-mail.action-show #message-objects .notice[id*="remote-object"] a[href="#load-remote"],
body.task-mail.action-show #message-objects .notice[id*="remote_objects"] a[href="#load-remote"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 5px 11px;
  border: 0;
  border-radius: 7px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

body.task-mail.action-show #message-objects #remote-objects-message a[href="#loadremote"]:hover,
body.task-mail.action-show #message-objects #remote-objects-message a[href="#load-remote"]:hover,
body.task-mail.action-show #message-objects #remote-objects-message .boxbuttons a:hover,
body.task-mail.action-show #message-objects #remote-objects-message .box-buttons a:hover,
body.task-mail.action-show #message-objects .notice[id*="remote-object"] a[href="#load-remote"]:hover,
body.task-mail.action-show #message-objects .notice[id*="remote_objects"] a[href="#load-remote"]:hover {
  background: #1d4ed8;
  color: #fff;
  text-decoration: none;
}

body.task-mail.action-show .hg-email-body img,
body.task-mail.action-show #messagebody img,
body.task-mail.action-show #message-objects img {
  max-width: min(100%, calc(100vw - 40px)) !important;
  height: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  body.task-mail.action-show #message-objects #remote-objects-message.notice,
  body.task-mail.action-show #message-objects .notice[id*="remote-object"],
  body.task-mail.action-show #message-objects .notice[id*="remote_objects"] {
    gap: 8px;
    padding: 7px 9px;
    font-size: 12px;
  }

  body.task-mail.action-show #message-objects #remote-objects-message .boxbuttons,
  body.task-mail.action-show #message-objects #remote-objects-message .box-buttons,
  body.task-mail.action-show #message-objects .notice[id*="remote-object"] .boxbuttons,
  body.task-mail.action-show #message-objects .notice[id*="remote-object"] .box-buttons,
  body.task-mail.action-show #message-objects .notice[id*="remote_objects"] .boxbuttons,
  body.task-mail.action-show #message-objects .notice[id*="remote_objects"] .box-buttons {
    width: auto;
    padding-left: 0;
  }
}

/* ================================================================
   SETTINGS — estructura nativa de Roundcube con diseño HandOff 06
   ================================================================ */
body.task-settings { overflow:hidden; background:#f8fafc; }
body.task-settings #layout-menu,
body.task-settings #layout > h1.voice { display:none !important; }
body.task-settings #layout { height:100vh; height:100dvh; min-height:100dvh; overflow:hidden; }
body.task-settings .hg-settings-app { display:flex; width:100%; height:100vh; height:100dvh; min-height:100dvh; overflow:hidden; background:#f8fafc; }
body.task-settings #layout-sidebar { width:280px; min-width:280px; background:#0b1120; color:rgba(255,255,255,.72); display:flex; flex-direction:column; overflow:hidden; flex-shrink:0; z-index:45; }
body.task-settings .hg-settings-main { flex:1; min-width:0; height:100vh; height:100dvh; min-height:100dvh; display:flex; flex-direction:column; overflow:hidden; margin-left:0; background:#f8fafc; }
/* Allow the settings content to yield space to its viewport-bound siblings. */
body.task-settings .hg-settings-main { min-height:0; }
body.task-settings .hg-settings-shell { flex:1; min-height:0; display:grid; grid-template-columns:200px 240px minmax(0,1fr); overflow:hidden; }
body.task-settings .hg-settings-pane { min-width:0; display:flex; flex-direction:column; background:#fff; border-right:1px solid #e2e8f0; overflow:hidden; }
body.task-settings .hg-settings-pane-title { display:flex; align-items:center; padding:20px 14px 12px; color:#9ca3af; font-size:13px; font-weight:700; letter-spacing:.06em; border:0; }
body.task-settings .hg-settings-pane-scroll { flex:1; min-height:0; overflow-y:auto; padding:0 12px 20px; }
body.task-settings .hg-settings-native-list { list-style:none; margin:0; padding:0; border:0; background:transparent; }
body.task-settings .hg-settings-native-list li,
body.task-settings .hg-settings-native-list tr { display:block; margin:0 0 2px; border:0; background:transparent; }
body.task-settings .hg-settings-native-list a,
body.task-settings .hg-settings-native-list td { min-height:40px; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:9px; background:transparent; color:#374151; font-family:Inter,Arial,sans-serif; font-size:13.5px; font-weight:500; line-height:1.25; text-decoration:none; cursor:pointer; }
body.task-settings .hg-settings-native-list a:hover,
body.task-settings .hg-settings-native-list tr:hover td { background:#f1f5f9; color:#374151; }
body.task-settings .hg-settings-native-list .selected > a,
body.task-settings .hg-settings-native-list a.selected,
body.task-settings .hg-settings-native-list tr.selected td { background:#eff6ff; color:#2563eb; font-weight:600; }
body.task-settings .hg-settings-native-list a:focus,
body.task-settings .hg-settings-native-list tr:focus,
body.task-settings .hg-settings-native-list td:focus { outline:none !important; box-shadow:none; }
body.task-settings .hg-settings-item-icon { width:17px; height:17px; display:flex; align-items:center; justify-content:center; flex:0 0 17px; color:currentColor; }
body.task-settings .hg-settings-item-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
body.task-settings .hg-settings-mobile-arrow { display:none; margin-left:auto; width:16px; height:16px; color:#d1d5db; }
body.task-settings .hg-settings-mobile-arrow svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
body.task-settings .hg-settings-detail { min-width:0; position:relative; overflow:hidden; background:#f8fafc; }
body.task-settings .hg-settings-detail-title { box-sizing:border-box; max-width:744px; margin:0 auto; padding:28px 32px 18px; color:#111827; font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-.02em; }
body.task-settings .hg-settings-framewrap { position:absolute; inset:72px 0 0; overflow:hidden; padding:0; }
body.task-settings #preferences-frame { display:block; width:100%; height:100%; min-height:0; border:0; background:transparent; }
body.task-settings .hg-settings-mobile-stagebar { display:none; }

/* Ajustes: Carpetas, Identidades y Respuestas */
body.task-settings .hg-settings-module-shell .hg-settings-module-list {
  min-width:0;
}

body.task-settings .hg-settings-module-shell .hg-settings-module-search {
  box-sizing:border-box;
  flex:0 0 auto;
  margin:0;
  padding:10px 12px;
  border:0;
  border-bottom:1px solid #e2e8f0;
  background:#fff;
}

body.task-settings .hg-settings-module-shell .hg-settings-module-search input {
  box-sizing:border-box;
  width:100%;
  min-height:36px;
  padding:8px 12px 8px 36px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
  color:#111827;
}

body.task-settings .hg-settings-module-shell .hg-settings-pane-scroll {
  padding-right:0;
  padding-left:0;
}

body.task-settings .hg-settings-module-native-list {
  width:100%;
}

body.task-settings .hg-settings-module-native-list tr,
body.task-settings .hg-settings-module-native-list > li.mailbox:not(.root) {
  box-sizing:border-box;
  width:100%;
  margin:0;
  border:0;
  border-bottom:1px solid #f1f5f9;
}

body.task-settings .hg-settings-module-native-list tr:last-child,
body.task-settings .hg-settings-module-native-list > li.mailbox:not(.root):last-child {
  border-bottom:0;
}

body.task-settings .hg-settings-module-native-list > li.root {
  display:none !important;
}

body.task-settings .hg-settings-module-native-list td,
body.task-settings .hg-settings-module-native-list > li.mailbox:not(.root) > a {
  display:flex;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:48px;
  padding:12px 14px;
  align-items:center;
  gap:10px;
  border:0;
  border-radius:0;
  color:#111827;
  font-size:13.5px;
  font-weight:500;
  line-height:1.3;
  text-decoration:none;
}

body.task-settings .hg-settings-module-native-list > li.mailbox:not(.root) {
  position:relative;
  display:flex;
  align-items:center;
}

body.task-settings .hg-settings-module-native-list > li.mailbox:not(.root) > a {
  padding-right:58px;
}

body.task-settings .hg-settings-module-native-list > li.mailbox:not(.root) > input[type="checkbox"] {
  position:absolute;
  right:12px;
  width:36px;
  height:20px;
  min-height:20px;
}

body.task-settings .hg-settings-module-native-list > li.mailbox:not(.root) > input[type="checkbox"]::after {
  top:3px;
  left:3px;
  width:14px;
  height:14px;
}

body.task-settings .hg-settings-module-native-list > li.mailbox:not(.root) > input[type="checkbox"]:checked::after {
  transform:translateX(16px);
}

body.task-settings .hg-settings-module-native-list tr.selected td,
body.task-settings .hg-settings-module-native-list tr.focused td,
body.task-settings .hg-settings-module-native-list > li.mailbox.selected > a {
  background:#eff6ff;
  color:#2563eb;
  font-weight:600;
}

body.task-settings .hg-settings-module-detail .hg-settings-subtoolbar {
  display:flex;
  box-sizing:border-box;
  height:46px;
  min-height:46px;
  padding:0 14px;
  align-items:center;
  gap:4px;
  border-bottom:1px solid #e2e8f0;
  background:#fff;
}

body.task-settings .hg-settings-module-detail .hg-settings-subtoolbar a {
  display:inline-flex;
  min-height:34px;
  padding:8px 10px;
  align-items:center;
  border-radius:8px;
  color:#374151;
  font-size:13.5px;
  font-weight:500;
  text-decoration:none;
}

body.task-settings .hg-settings-module-detail .hg-settings-subtoolbar a:hover {
  background:#f1f5f9;
}

body.task-settings .hg-settings-module-detail .hg-settings-subtoolbar a.disabled {
  color:#cbd5e1;
  pointer-events:none;
}

body.task-settings .hg-settings-module-detail .hg-settings-framewrap {
  inset:46px 0 0;
}

/* Formularios nativos de Carpetas, Identidades y Respuestas */
html:has(body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response)),
body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) {
  min-height:100%;
  background:#f8fafc;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) {
  height:100%;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) #layout {
  height:auto;
  min-height:100%;
  overflow:visible;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) #layout > h1.voice {
  position:static !important;
  left:auto !important;
  top:auto !important;
  display:block !important;
  box-sizing:border-box;
  width:100% !important;
  max-width:744px;
  height:auto !important;
  margin:0 auto;
  padding:26px 32px 18px;
  overflow:visible !important;
  clip:auto !important;
  white-space:normal !important;
  color:#111827;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) .hg-settings-formcontent {
  width:100%;
  max-width:744px;
  margin:0 auto;
  padding:0 32px 24px;
  background:#f8fafc;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform {
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform > fieldset {
  width:100%;
  margin:0 0 20px;
  padding:0;
  border:0;
  background:transparent;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform > fieldset > legend {
  display:block;
  width:100%;
  margin:0 0 14px;
  padding:0;
  color:#111827;
  font-size:16px;
  font-weight:700;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform > table.propform,
body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform > fieldset > table.propform {
  display:block;
  box-sizing:border-box;
  width:100%;
  margin:0;
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform table.propform > tbody {
  display:grid;
  box-sizing:border-box;
  width:100%;
  padding:20px 24px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 24px;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform table.propform > tbody > tr {
  display:grid;
  min-width:0;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform table.propform > tbody > tr:has(textarea),
body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform table.propform > tbody > tr:has(> td[colspan]) {
  grid-column:1 / -1;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform table.propform td {
  display:block;
  box-sizing:border-box;
  width:100% !important;
  min-width:0;
  padding:0;
  border:0;
  color:#374151;
  font-size:13.5px;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform input:not([type="checkbox"]):not([type="radio"]),
body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform select,
body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform textarea {
  box-sizing:border-box;
  width:100%;
  max-width:none;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) .hg-settings-formbuttons {
  position:static !important;
  display:flex;
  box-sizing:border-box;
  width:100%;
  max-width:744px;
  margin:0 auto;
  padding:0 32px 34px;
  justify-content:flex-start;
  border:0;
  background:#f8fafc;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) .hg-settings-formbuttons button {
  display:inline-flex;
  width:auto;
  min-width:138px;
  min-height:42px;
  padding:11px 28px;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:10px;
  background:#2563eb;
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
}

body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) .hg-settings-formbuttons button::before {
  content:"";
  width:16px;
  height:16px;
  flex:0 0 16px;
  background:center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1 2 2z'/%3E%3Cpolyline points='17 21 17 13 7 13 7 21'/%3E%3Cpolyline points='7 3 7 8 15 8'/%3E%3C/svg%3E");
}

/* Formularios nativos que Roundcube carga dentro de preferences-frame */
body.task-settings form,
body.task-settings .formcontainer { font-family:Inter,Arial,sans-serif; color:#111827; }
body.task-settings .formcontainer,
body.task-settings .hg-settings-formcontent { box-sizing:border-box; width:100%; max-width:744px; margin:0 auto; padding:0 32px 82px; background:#f8fafc; }
body.task-settings .formcontainer > h2,
body.task-settings .formcontainer > h3,
body.task-settings .formcontainer .boxtitle,
body.task-settings #preferences-details > h2 { margin:0 0 18px; color:#111827; font-size:20px; font-weight:700; line-height:1.3; }
body.task-settings fieldset,
body.task-settings .propform { box-sizing:border-box; margin:0 0 18px; padding:8px 24px; border:1px solid #e2e8f0; border-radius:14px; background:#fff; }
body.task-settings .hg-settings-formcontent .propform { width:100%; }
body.task-settings .hg-settings-formcontent .propform fieldset { margin:0 0 18px; }
body.task-settings .hg-settings-formcontent .propform fieldset > legend { margin-left:0; padding:0 0 10px; }
body.task-settings fieldset legend { padding:0; margin:0 0 4px; color:#111827; font-size:16px; font-weight:700; }
body.task-settings table.propform { width:100%; border-collapse:separate; border-spacing:0; }
body.task-settings table.propform td { padding:12px 0; border-bottom:1px solid #f1f5f9; color:#374151; font-size:13.5px; vertical-align:middle; }
body.task-settings table.propform tr:last-child td { border-bottom:0; }
body.task-settings table.propform td.title { width:52%; padding-right:18px; font-weight:500; }
body.task-settings input[type="text"],
body.task-settings input[type="email"],
body.task-settings input[type="password"],
body.task-settings input[type="number"],
body.task-settings textarea,
body.task-settings select { box-sizing:border-box; min-height:36px; padding:8px 34px 8px 12px; border:1.5px solid #e5e7eb; border-radius:9px; background-color:#fff; color:#111827; font-family:Inter,Arial,sans-serif; font-size:13.5px; outline:none; }
body.task-settings select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
body.task-settings input:focus,
body.task-settings textarea:focus,
body.task-settings select:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
body.task-settings input[type="checkbox"] { accent-color:#2563eb; }
body.task-settings input[type="checkbox"]:not(.form-check-input) { position:relative; appearance:none; width:44px; height:24px; min-height:24px; padding:0; border:0; border-radius:999px; background:#cbd5e1; box-shadow:none; cursor:pointer; transition:background .18s; vertical-align:middle; }
body.task-settings input[type="checkbox"]:not(.form-check-input)::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.2); transition:transform .18s; }
body.task-settings input[type="checkbox"]:not(.form-check-input):checked { background:#2563eb; }
body.task-settings input[type="checkbox"]:not(.form-check-input):checked::after { transform:translateX(20px); }
body.task-settings table.propform td:not(.title) > select,
body.task-settings table.propform td:not(.title) > input:not([type="checkbox"]):not([type="radio"]) { width:100%; max-width:320px; }
body.task-settings .formbuttons { display:flex; justify-content:flex-end; gap:10px; padding:2px 32px 22px; background:#f8fafc; }
body.task-settings .formbuttons .button,
body.task-settings .formbuttons button { min-height:40px; padding:10px 22px; border:0; border-radius:10px; background:#2563eb; color:#fff; font-family:Inter,Arial,sans-serif; font-size:14px; font-weight:700; }

@media (max-width: 767px) {
  body.task-settings { overflow:hidden; }
  body.task-settings .hg-settings-app { height:100dvh; min-height:100dvh; flex-direction:column; }
  body.task-settings .hg-settings-main { width:100%; height:auto; min-height:0; margin-left:0; flex:1; }
  body.task-settings .hg-settings-main #hg-desktop-topbar { display:flex !important; height:86px; min-height:86px; padding:16px 14px; border-bottom:1px solid #e2e8f0; }
  body.task-settings .hg-settings-main #hg-desktop-topbar .hg-top-actions { display:none; }
  body.task-settings .hg-settings-mobile-stagebar { height:54px; min-height:54px; display:flex; align-items:center; gap:18px; padding:0 16px; border-bottom:1px solid #e2e8f0; background:#fff; }
  body.task-settings .hg-settings-mobile-stagebar.hg-root-stage { display:none; }
  body.task-settings .hg-settings-mobile-back { display:flex; align-items:center; gap:6px; color:#2563eb; font-size:14px; font-weight:600; text-decoration:none; }
  body.task-settings .hg-settings-mobile-back svg { flex:0 0 auto; }
  body.task-settings .hg-settings-mobile-title { color:#111827; font-size:14px; font-weight:700; }
  body.task-settings .hg-settings-shell { display:block; position:relative; flex:1; min-height:0; overflow:hidden; padding:16px; background:#f8fafc; }
  body.task-settings .hg-settings-pane,
  body.task-settings .hg-settings-detail { display:none; width:100%; height:100%; border:1px solid #e2e8f0; border-radius:14px; background:#fff; overflow:hidden; }
  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] .hg-settings-root,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] .hg-settings-sections,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="detail"] .hg-settings-detail { display:flex; }
  body.task-settings .hg-settings-shell[data-hg-settings-stage="detail"] { padding:0; }
  body.task-settings .hg-settings-shell[data-hg-settings-stage="detail"] .hg-settings-detail { border:0; border-radius:0; background:#f8fafc; }
  body.task-settings .hg-settings-pane-title { padding:16px; color:#111827; font-size:14px; letter-spacing:0; border-bottom:1px solid #e2e8f0; }
  body.task-settings .hg-settings-pane-scroll { padding:0; }
  body.task-settings .hg-settings-native-list li,
  body.task-settings .hg-settings-native-list tr { margin:0; border-bottom:1px solid #f1f5f9; }
  body.task-settings .hg-settings-native-list li:last-child,
  body.task-settings .hg-settings-native-list tr:last-child { border-bottom:0; }
  body.task-settings .hg-settings-native-list a,
  body.task-settings .hg-settings-native-list td { min-height:54px; padding:14px 16px; border-radius:0; font-size:14.5px; font-weight:600; }
  body.task-settings .hg-settings-native-list .selected > a,
  body.task-settings .hg-settings-native-list a.selected,
  body.task-settings .hg-settings-native-list tr.selected td { background:#eff6ff; }
  body.task-settings .hg-settings-item-icon { width:21px; height:21px; flex-basis:21px; color:#2563eb; }
  body.task-settings .hg-settings-item-icon svg { width:21px; height:21px; }
  body.task-settings .hg-settings-mobile-arrow { display:flex; }
  body.task-settings .hg-settings-detail-title { max-width:none; padding:20px 16px 14px; font-size:18px; }
  body.task-settings .hg-settings-framewrap { position:absolute; inset:58px 0 0; }
  body.task-settings .formcontainer,
  body.task-settings .hg-settings-formcontent { padding:20px 16px 90px; }
  body.task-settings fieldset,
  body.task-settings .propform { padding:6px 16px; }
  body.task-settings table.propform td { display:block; width:100% !important; padding:7px 0; border:0; }
  body.task-settings table.propform td.title { padding-top:12px; padding-bottom:3px; }
  body.task-settings input[type="text"],
  body.task-settings input[type="email"],
  body.task-settings input[type="password"],
  body.task-settings input[type="number"],
  body.task-settings textarea,
  body.task-settings select { width:100%; }
  body.task-settings .formbuttons { position:fixed; left:0; right:0; bottom:0; z-index:20; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid #e2e8f0; background:#fff; }
  body.task-settings .formbuttons .button,
  body.task-settings .formbuttons button { width:100%; }
}

/* Ajustes > Interfaz de usuario: composicion literal del HandOff con datos nativos */
html:has(body.task-settings.action-edit-prefs),
body.task-settings.action-edit-prefs {
  min-height:100%;
  background:#f8fafc;
}

body.task-settings.action-edit-prefs {
  height:100%;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

body.task-settings.action-edit-prefs #layout {
  height:auto;
  min-height:100%;
  overflow:visible;
}

/* El titulo visible pertenece al documento nativo cargado en el iframe. */
body.task-settings.action-preferences .hg-settings-detail-title {
  display:none;
}

body.task-settings.action-preferences .hg-settings-framewrap {
  inset:0;
}

body.task-settings.action-edit-prefs #layout > h1.voice {
  position:static !important;
  left:auto !important;
  top:auto !important;
  display:block !important;
  box-sizing:border-box;
  width:100% !important;
  max-width:744px;
  height:auto !important;
  margin:0 auto;
  padding:28px 32px 18px;
  overflow:visible !important;
  color:#111827;
  font-family:Inter,Arial,sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.02em;
}

html:has(body.task-settings.action-edit-prefs)::-webkit-scrollbar,
body.task-settings.action-edit-prefs::-webkit-scrollbar {
  width:5px;
  height:5px;
}

html:has(body.task-settings.action-edit-prefs)::-webkit-scrollbar-track,
body.task-settings.action-edit-prefs::-webkit-scrollbar-track {
  background:transparent;
}

html:has(body.task-settings.action-edit-prefs)::-webkit-scrollbar-thumb,
body.task-settings.action-edit-prefs::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:#e2e8f0;
}

html:has(body.task-settings.action-edit-prefs)::-webkit-scrollbar-button,
body.task-settings.action-edit-prefs::-webkit-scrollbar-button {
  display:none !important;
  width:0;
  height:0;
  background:transparent;
  -webkit-appearance:none;
}

body.task-settings.action-edit-prefs .hg-settings-formcontent {
  width:100%;
  max-width:744px;
  margin:0 auto;
  padding:0 32px 24px;
  background:#f8fafc;
}

body.task-settings.action-edit-prefs form.propform {
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

body.task-settings.action-edit-prefs form.propform > fieldset {
  width:100%;
  margin:0 0 20px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

body.task-settings.action-edit-prefs form.propform > fieldset.skin {
  display:none;
}

body.task-settings.action-edit-prefs form.propform > fieldset > legend {
  display:block;
  width:100%;
  margin:0 0 14px;
  padding:0;
  color:#111827;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
}

body.task-settings.action-edit-prefs form.propform > fieldset > table.propform {
  display:block;
  box-sizing:border-box;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
}

body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) > table.propform > tbody {
  display:grid;
  box-sizing:border-box;
  width:100%;
  padding:20px 24px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 24px;
}

body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) > table.propform > tbody > tr {
  display:grid;
  min-width:0;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  align-content:start;
}

body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) > table.propform > tbody > tr:has(> td[colspan]) {
  grid-column:1 / -1;
}

body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) > table.propform > tbody > tr:has(input[type="checkbox"]) {
  min-height:36px;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}

body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) > table.propform > tbody > tr > td {
  display:block;
  box-sizing:border-box;
  width:100% !important;
  min-width:0;
  padding:0;
  border:0;
  color:#374151;
  font-size:13.5px;
}

body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) > table.propform > tbody > tr > td.title {
  padding:0;
  font-weight:500;
}

body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) > table.propform > tbody > tr:has(input[type="checkbox"]) > td:last-child {
  width:auto !important;
}

body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) select,
body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) input:not([type="checkbox"]):not([type="radio"]),
body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) textarea {
  box-sizing:border-box;
  width:100%;
  max-width:none;
}

body.task-settings.action-edit-prefs form.propform > fieldset.browser > table.propform > tbody {
  display:block;
  box-sizing:border-box;
  width:100%;
  padding:8px 24px;
}

body.task-settings.action-edit-prefs form.propform > fieldset.browser > table.propform > tbody > tr {
  display:grid;
  box-sizing:border-box;
  width:100%;
  min-height:52px;
  padding:12px 0;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  border-bottom:1px solid #f1f5f9;
}

body.task-settings.action-edit-prefs form.propform > fieldset.browser > table.propform > tbody > tr:last-child {
  display:block;
  min-height:0;
  padding:8px 0;
  border-bottom:0;
}

body.task-settings.action-edit-prefs form.propform > fieldset.browser td {
  box-sizing:border-box;
  width:auto !important;
  padding:0;
  border:0;
  color:#374151;
  font-size:13.5px;
}

body.task-settings.action-edit-prefs form.propform > fieldset.browser td.title {
  width:100% !important;
  padding:0;
  font-weight:500;
}

body.task-settings.action-edit-prefs form.propform > fieldset.browser a {
  color:#2563eb;
  font-weight:500;
  text-decoration:none;
}

body.task-settings.action-edit-prefs .hg-settings-formbuttons {
  position:static !important;
  display:flex;
  box-sizing:border-box;
  width:100%;
  max-width:744px;
  margin:0 auto;
  padding:0 32px 34px;
  justify-content:flex-start;
  border:0;
  background:#f8fafc;
}

body.task-settings.action-edit-prefs .hg-settings-formbuttons button {
  display:inline-flex;
  width:auto;
  min-width:138px;
  min-height:42px;
  padding:11px 28px;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:10px;
  background:#2563eb;
  box-shadow:0 4px 14px rgba(37,99,235,.28);
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
}

body.task-settings.action-edit-prefs .hg-settings-formbuttons button::before {
  content:"";
  width:16px;
  height:16px;
  flex:0 0 16px;
  background:center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpolyline points='17 21 17 13 7 13 7 21'/%3E%3Cpolyline points='7 3 7 8 15 8'/%3E%3C/svg%3E");
}

body.task-settings.action-edit-prefs .hg-settings-formbuttons button:hover,
body.task-settings.action-edit-prefs .hg-settings-formbuttons button:focus-visible {
  background:#1d4ed8;
}

/* El media query se evalua contra el ancho del iframe, no contra la ventana.
   520px separa el iframe de escritorio (646px) de un telefono real. */
@media (max-width:520px) {
  body.task-settings.action-edit-prefs .hg-settings-formcontent {
    padding:20px 16px 18px;
  }

  body.task-settings.action-edit-prefs form.propform > fieldset:not(.browser):not(.skin) > table.propform > tbody {
    padding:18px 16px;
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }

  body.task-settings.action-edit-prefs form.propform > fieldset.browser > table.propform > tbody {
    padding:8px 16px;
  }

  body.task-settings.action-edit-prefs .hg-settings-formbuttons {
    padding:0 16px calc(24px + env(safe-area-inset-bottom));
  }

  body.task-settings.action-edit-prefs .hg-settings-formbuttons button {
    width:100%;
  }

  body.task-settings.action-edit-prefs #layout > h1.voice {
    display:none !important;
  }

  body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) #layout > h1.voice {
    display:none !important;
  }

  body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) .hg-settings-formcontent {
    padding:20px 16px 18px;
  }

  body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) form.propform table.propform > tbody {
    padding:18px 16px;
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }

  body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) .hg-settings-formbuttons {
    padding:0 16px calc(24px + env(safe-area-inset-bottom));
  }

  body.task-settings:is(.action-edit-folder,.action-add-folder,.action-edit-identity,.action-add-identity,.action-edit-response,.action-add-response) .hg-settings-formbuttons button {
    width:100%;
  }
}

/* Ajustes en movil: una sola etapa visible (raiz > preferencias > detalle). */
@media (max-width:767px) {
  body.task-settings .hg-settings-main #hg-desktop-topbar {
    display:none !important;
  }

  body.task-settings .hg-settings-shell {
    display:block;
    position:relative;
    flex:1;
    min-height:0;
    padding:16px;
    overflow:hidden;
    background:#f8fafc;
  }

  body.task-settings .hg-settings-shell > .hg-settings-pane,
  body.task-settings .hg-settings-shell > .hg-settings-detail {
    display:none !important;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] > .hg-settings-root,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] > .hg-settings-sections,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="detail"] > .hg-settings-detail {
    display:flex !important;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] > .hg-settings-root,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] > .hg-settings-sections {
    width:100%;
    height:100%;
    min-height:0;
    flex-direction:column;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] .hg-settings-pane-title {
    flex:0 0 auto;
    min-height:0;
    margin:0 0 18px;
    padding:0;
    border:0;
    color:#111827;
    font-size:20px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:-.01em;
    text-transform:none;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] .hg-settings-pane-title {
    display:none;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] .hg-settings-pane-scroll,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] .hg-settings-pane-scroll {
    min-height:0;
    padding:0;
    overflow-x:hidden;
    overflow-y:auto;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] .hg-settings-pane-scroll {
    flex:0 1 auto;
    max-height:100%;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] .hg-settings-pane-scroll {
    flex:1;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] #sections-table,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] #sections-table > tbody,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] #sections-table > tbody > tr {
    display:block;
    box-sizing:border-box;
    width:100% !important;
    max-width:none !important;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] #sections-table > tbody > tr > td {
    display:flex;
    box-sizing:border-box;
    width:100% !important;
    max-width:none !important;
    align-items:center;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] #settings-menu .selected > a,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] #settings-menu a.selected {
    background:transparent;
    color:#111827;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] #settings-menu a,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] #sections-table td {
    min-height:54px;
    color:#111827;
    font-size:14.5px;
    font-weight:600;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] #settings-menu li,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] #sections-table tr {
    border-bottom:1px solid #f1f5f9;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="root"] #settings-menu li:last-child,
  body.task-settings .hg-settings-shell[data-hg-settings-stage="sections"] #sections-table tr:last-child {
    border-bottom:0;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="detail"] {
    padding:0;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="detail"] > .hg-settings-detail {
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#f8fafc;
  }

  body.task-settings .hg-settings-shell[data-hg-settings-stage="detail"] .hg-settings-framewrap {
    inset:0;
  }

  body.task-settings .hg-settings-module-shell[data-hg-settings-stage="detail"] .hg-settings-framewrap {
    inset:46px 0 0;
  }

  body.task-settings .hg-settings-module-shell[data-hg-settings-stage="sections"] .hg-settings-pane-title {
    display:flex;
    min-height:48px;
    margin:0;
    padding:14px 16px;
    align-items:center;
    border-bottom:1px solid #e2e8f0;
    background:#fff;
    font-size:14.5px;
    font-weight:700;
  }

  body.task-settings .hg-settings-module-shell[data-hg-settings-stage="sections"] .hg-settings-module-list {
    overflow:hidden;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
  }

  body.task-settings .hg-settings-module-shell[data-hg-settings-stage="sections"] .hg-settings-module-list > .hg-settings-pane-scroll {
    border:0;
    border-radius:0;
  }
}

/* --------------------------------------------------------------------------
   Hostingroup Calendar
   -------------------------------------------------------------------------- */
body.task-calendar #layout-menu{display:none!important}
body.task-calendar #layout{height:100vh;height:100dvh;overflow:hidden}
body.task-calendar #hg-app{display:flex;width:100%;height:100%;min-height:0;overflow:hidden}
body.task-calendar #layout-sidebar{width:280px;min-width:280px;background:#0b1120;color:rgba(255,255,255,.72);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;z-index:45}
body.task-calendar .hg-calendar-main{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;background:#f8fafc;overflow:hidden}
body.task-calendar .hg-calendar-main #hg-desktop-topbar{flex:0 0 auto}
.hg-calendar-mobile-titlebar{display:none}
.hg-calendar-shell{flex:1 1 auto;min-height:0;min-width:0;display:grid;grid-template-columns:252px minmax(0,1fr);background:#f8fafc;overflow:hidden}
.hg-calendar-panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff;border-right:1px solid #dbe3ee;overflow-y:auto;padding:0 14px 20px}
.hg-calendar-panel-head{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px;border-bottom:1px solid #e8edf4;color:#111827;font-size:14.5px;font-weight:700}
.hg-calendar-panel-more{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:3px;border:0;border-radius:9px;background:transparent;color:#94a3b8;cursor:pointer}
.hg-calendar-panel-more:hover{background:#f1f5f9}
.hg-calendar-panel-more span{width:3px;height:3px;border-radius:50%;background:currentColor}
.hg-calendar-new{min-height:42px;margin:14px 0 12px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:10px;background:#2563eb;color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .16s ease,transform .16s ease}
.hg-calendar-new:hover{background:#1d4ed8}
.hg-calendar-new:active{transform:translateY(1px)}
.hg-calendar-list{padding:3px 0 12px}
.hg-calendar-source{position:relative;display:grid;grid-template-columns:18px 10px minmax(0,1fr);align-items:center;column-gap:9px;min-height:48px;padding:7px 9px;border-radius:9px;color:#1f2937;cursor:pointer}
.hg-calendar-source:hover{background:#f8fafc}
.hg-calendar-source input{position:absolute;opacity:0;pointer-events:none}
.hg-calendar-source-check{width:16px;height:16px;border:1.5px solid #cbd5e1;border-radius:5px;background:#fff;grid-row:1/span 2}
.hg-calendar-source input:checked + .hg-calendar-source-check{border-color:#2563eb;background:#2563eb no-repeat center/11px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.hg-calendar-source-dot{width:9px;height:9px;border-radius:50%;background:#2563eb;grid-row:1/span 2}
.hg-calendar-source > span:nth-of-type(3){font-size:13.5px;font-weight:600}
.hg-calendar-source small{color:#94a3b8;font-size:11.5px;line-height:1.2}
.hg-mini-calendar{margin-top:6px;padding:14px 10px 10px;border-top:1px solid #e8edf4}
.hg-mini-calendar-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:#1f2937;font-size:12.5px;text-transform:capitalize}
.hg-mini-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.hg-mini-calendar-weekday{display:flex;align-items:center;justify-content:center;height:24px;color:#94a3b8;font-size:10px;font-weight:700}
.hg-mini-calendar-day{aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:7px;background:transparent;color:#475569;font-family:inherit;font-size:10.5px;cursor:pointer}
.hg-mini-calendar-day:hover{background:#eff6ff;color:#2563eb}
.hg-mini-calendar-day.is-outside{color:#cbd5e1}
.hg-mini-calendar-day.is-today{color:#2563eb;font-weight:700}
.hg-mini-calendar-day.is-selected{background:#2563eb;color:#fff;font-weight:700}
.hg-calendar-content{min-width:0;min-height:0;display:flex;flex-direction:column;padding:16px 18px 18px;overflow:hidden}
.hg-calendar-toolbar{flex:0 0 auto;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.hg-calendar-toolbar-left{min-width:0;display:flex;align-items:center;gap:7px}
.hg-calendar-nav,.hg-calendar-today{height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #dce4ee;border-radius:9px;background:#fff;color:#475569;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.hg-calendar-nav{width:36px;padding:0}
.hg-calendar-nav svg{width:16px;height:16px}
.hg-calendar-today{padding:0 13px}
.hg-calendar-nav:hover,.hg-calendar-today:hover{border-color:#bfdbfe;background:#eff6ff;color:#2563eb}
.hg-calendar-period{min-width:0;margin:0 0 0 8px;color:#111827;font-size:20px;line-height:1.25;font-weight:700;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hg-calendar-views{display:inline-flex;align-items:center;padding:3px;border:1px solid #dce4ee;border-radius:10px;background:#fff}
.hg-calendar-views button{height:30px;min-width:64px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:#64748b;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.hg-calendar-views button:hover{color:#1f2937}
.hg-calendar-views button.is-active{background:#eff6ff;color:#2563eb}
.hg-calendar-scroll{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;border:1px solid #dbe3ee;border-radius:14px;background:#fff}
.hg-calendar-canvas{min-width:740px;min-height:100%}
.hg-calendar-month{display:grid;grid-template-columns:repeat(7,minmax(96px,1fr));grid-template-rows:36px repeat(6,minmax(92px,1fr))}
.hg-calendar-weekday{display:flex;align-items:center;justify-content:center;border-right:1px solid #edf1f6;border-bottom:1px solid #dbe3ee;color:#7c8799;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.hg-calendar-weekday:nth-child(7){border-right:0}
.hg-calendar-day{position:relative;min-width:0;min-height:92px;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:7px;border:0;border-right:1px solid #edf1f6;border-bottom:1px solid #edf1f6;background:#fff;color:#334155;font-family:inherit;text-align:left;cursor:pointer;overflow:hidden}
.hg-calendar-day:nth-child(7n + 7){border-right:0}
.hg-calendar-day:hover{background:#f8fbff}
.hg-calendar-day.is-outside{background:#fbfcfe;color:#b6c0ce}
.hg-calendar-day-number{width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:11.5px;font-weight:600}
.hg-calendar-day.is-today .hg-calendar-day-number{background:#2563eb;color:#fff;font-weight:700}
.hg-calendar-day-events{min-width:0;display:flex;flex-direction:column;gap:3px;pointer-events:none}
.hg-calendar-event{position:relative;width:100%;min-width:0;display:flex;align-items:flex-start;gap:7px;padding:9px 10px;border:0;border-radius:9px;background:#eff6ff;color:#1f2937;font-family:inherit;text-align:left;cursor:pointer;overflow:hidden}
.hg-calendar-event::before{content:"";width:4px;align-self:stretch;min-height:22px;border-radius:999px;background:var(--event-color);flex:0 0 auto}
.hg-calendar-event:hover{box-shadow:inset 0 0 0 1px #bfdbfe}
.hg-calendar-event-compact{min-height:20px;padding:3px 5px;gap:4px;border-radius:5px;pointer-events:auto}
.hg-calendar-event-compact::before{width:3px;min-height:13px}
.hg-calendar-event-time{flex:0 0 auto;color:#64748b;font-size:10.5px;line-height:1.35}
.hg-calendar-event-title{min-width:0;color:#1f2937;font-size:11px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hg-calendar-more{padding-left:5px;color:#64748b;font-size:10.5px;font-weight:600}
.hg-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr))}
.hg-calendar-week-column{min-height:100%;border-right:1px solid #edf1f6;background:#fff}
.hg-calendar-week-column:last-child{border-right:0}
.hg-calendar-week-column.is-today{background:#fbfdff}
.hg-calendar-week-heading{width:100%;height:48px;border:0;border-bottom:1px solid #dbe3ee;background:transparent;color:#475569;font-family:inherit;font-size:12px;font-weight:700;text-transform:capitalize;cursor:pointer}
.hg-calendar-week-column.is-today .hg-calendar-week-heading{color:#2563eb;background:#eff6ff}
.hg-calendar-week-events{display:flex;flex-direction:column;gap:7px;padding:9px}
.hg-calendar-column-empty{margin:8px 0;color:#a3adbb;font-size:11px;text-align:center}
.hg-calendar-agenda{min-width:0;display:flex;flex-direction:column}
.hg-calendar-agenda-heading{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 20px;border-bottom:1px solid #e5eaf1}
.hg-calendar-agenda-date{color:#111827;font-size:15px;font-weight:700;text-transform:capitalize}
.hg-calendar-agenda-add{height:34px;padding:0 13px;border:1px solid #bfdbfe;border-radius:9px;background:#eff6ff;color:#2563eb;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.hg-calendar-agenda-list{display:flex;flex-direction:column;gap:10px;padding:18px 20px}
.hg-calendar-agenda-event{position:relative;min-height:68px;display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:18px;padding:13px 16px 13px 20px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#111827;font-family:inherit;text-align:left;cursor:pointer}
.hg-calendar-agenda-event::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--event-color)}
.hg-calendar-agenda-event:hover{border-color:#bfdbfe;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.hg-calendar-agenda-time{color:#64748b;font-size:12px;font-weight:600}
.hg-calendar-agenda-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.hg-calendar-agenda-copy strong{font-size:14px;font-weight:700}
.hg-calendar-agenda-copy small{color:#94a3b8;font-size:12px}
.hg-calendar-empty{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#64748b;text-align:center}
.hg-calendar-empty-icon{width:50px;height:50px;margin-bottom:14px;border-radius:14px;background:#eff6ff no-repeat center/24px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E")}
.hg-calendar-empty strong{color:#1f2937;font-size:15px;font-weight:700}
.hg-calendar-empty p{margin:6px 0 0;font-size:12.5px}
.hg-calendar-modal{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(15,23,42,.42);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility 0s linear .16s}
.hg-calendar-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.hg-calendar-modal-card{width:min(620px,100%);max-height:min(760px,calc(100dvh - 44px));display:flex;flex-direction:column;border:1px solid #dbe3ee;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.24);transform:translateY(8px) scale(.99);transition:transform .16s ease;overflow:hidden}
.hg-calendar-modal.is-open .hg-calendar-modal-card{transform:translateY(0) scale(1)}
.hg-calendar-modal-head{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px;border-bottom:1px solid #e5eaf1}
.hg-calendar-modal-head > div{display:flex;align-items:center;gap:12px}
.hg-calendar-title-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#eff6ff;color:#2563eb;flex:0 0 auto}
.hg-calendar-title-icon svg{width:19px;height:19px}
.hg-calendar-modal-head h2{margin:0;color:#111827;font-size:18px;font-weight:700}
.hg-calendar-modal-close{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:9px;background:transparent;color:#64748b;cursor:pointer}
.hg-calendar-modal-close:hover{background:#f1f5f9;color:#111827}
.hg-calendar-modal-close svg{width:18px;height:18px}
.hg-calendar-modal-body{min-height:0;display:flex;flex-direction:column;gap:17px;padding:22px;overflow-y:auto}
.hg-calendar-form-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(130px,.65fr);gap:14px}
.hg-calendar-field{min-width:0;display:flex;flex-direction:column;gap:7px;color:#475569;font-size:12.5px;font-weight:600}
.hg-calendar-field input,.hg-calendar-field textarea,.hg-calendar-field select{width:100%;min-width:0;min-height:42px;box-sizing:border-box;padding:9px 12px;border:1px solid #d8e1ec;border-radius:10px;outline:0;background:#fff;color:#111827;font-family:inherit;font-size:13.5px;font-weight:400}
.hg-calendar-field textarea{min-height:96px;resize:vertical}
.hg-calendar-field input:focus,.hg-calendar-field textarea:focus,.hg-calendar-field select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.hg-calendar-field input:disabled{background:#f8fafc;color:#94a3b8}
.hg-calendar-options-panel{display:flex;flex-direction:column;gap:15px;padding:16px;border:1px solid #dbe3ee;border-radius:12px;background:#f8fafc}
.hg-calendar-options-panel[hidden]{display:none!important}
.hg-calendar-inline-input{min-height:42px;display:grid;grid-template-columns:auto 76px minmax(0,1fr);align-items:center;gap:8px;padding:0 11px;border:1px solid #d8e1ec;border-radius:10px;background:#fff;color:#64748b;font-size:12.5px;font-weight:500}
.hg-calendar-inline-input input{min-height:32px;padding:5px 8px;text-align:center}
.hg-calendar-weekday-field{min-width:0;margin:0;padding:0;border:0}
.hg-calendar-weekday-field[hidden]{display:none!important}
.hg-calendar-weekday-field legend{margin:0 0 8px;color:#475569;font-size:12.5px;font-weight:600}
.hg-calendar-weekday-field>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hg-calendar-weekday-field label{position:relative;display:block;cursor:pointer}
.hg-calendar-weekday-field input{position:absolute;opacity:0;pointer-events:none}
.hg-calendar-weekday-field span{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d8e1ec;border-radius:9px;background:#fff;color:#64748b;font-size:12px;font-weight:700;transition:background .15s ease,border-color .15s ease,color .15s ease}
.hg-calendar-weekday-field input:checked+span{border-color:#2563eb;background:#2563eb;color:#fff}
.hg-calendar-weekday-field input:focus-visible+span{box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.hg-calendar-scope-modal{z-index:1700}
.hg-calendar-scope-card{width:min(500px,100%)}
.hg-calendar-scope-copy{margin:0;color:#64748b;font-size:13px;line-height:1.55}
.hg-calendar-scope-options{display:flex;flex-direction:column;gap:9px}
.hg-calendar-scope-options button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:13px 15px;border:1px solid #dbe3ee;border-radius:11px;background:#fff;color:#1f2937;font-family:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.hg-calendar-scope-options button:hover{border-color:#bfdbfe;background:#eff6ff}
.hg-calendar-scope-options strong{font-size:13.5px;font-weight:700}
.hg-calendar-scope-options small{color:#64748b;font-size:11.5px;line-height:1.4}
.hg-calendar-color-field{max-width:220px}
.hg-calendar-switch-row{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 2px;cursor:pointer}
.hg-calendar-switch-row > span:first-child{display:flex;flex-direction:column;gap:3px}
.hg-calendar-switch-row strong{color:#334155;font-size:13px;font-weight:600}
.hg-calendar-switch-row small{color:#94a3b8;font-size:11.5px}
.hg-calendar-switch-row input{position:absolute;opacity:0}
.hg-calendar-switch{position:relative;width:43px;height:24px;border-radius:999px;background:#cbd5e1;flex:0 0 auto;transition:background .16s ease}
.hg-calendar-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.2);transition:transform .16s ease}
.hg-calendar-switch-row input:checked + .hg-calendar-switch{background:#2563eb}
.hg-calendar-switch-row input:checked + .hg-calendar-switch::after{transform:translateX(19px)}
.hg-calendar-modal-actions{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 22px;border-top:1px solid #e5eaf1;background:#fff}
.hg-calendar-modal-actions-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.hg-calendar-delete,.hg-calendar-cancel,.hg-calendar-save{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 17px;border-radius:10px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.hg-calendar-delete{border:1px solid #fecaca;background:#fff;color:#dc2626}
.hg-calendar-delete.is-armed{border-color:#dc2626;background:#dc2626;color:#fff}
.hg-calendar-cancel{border:1px solid #d8e1ec;background:#fff;color:#475569}
.hg-calendar-save{min-width:116px;border:1px solid #2563eb;background:#2563eb;color:#fff;box-shadow:0 7px 18px rgba(37,99,235,.18)}
.hg-calendar-save:hover{background:#1d4ed8}
.hg-calendar-save:disabled{opacity:.65;cursor:wait}
.hg-calendar-toast{position:fixed;right:22px;bottom:22px;z-index:1800;max-width:min(360px,calc(100vw - 44px));padding:12px 16px;border-radius:10px;background:#0f172a;color:#fff;font-size:13px;font-weight:600;box-shadow:0 12px 32px rgba(15,23,42,.22);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.hg-calendar-toast.is-visible{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.hg-calendar-toast.is-error{background:#b91c1c}
body.hg-calendar-loading .hg-calendar-canvas{opacity:.62;pointer-events:none}
@media (max-width:1100px){
  .hg-calendar-shell{grid-template-columns:220px minmax(0,1fr)}
  .hg-calendar-content{padding:14px}
  .hg-calendar-period{max-width:240px;font-size:18px}
}
@media (max-width:900px){
  body.task-calendar #layout-sidebar{position:fixed;left:0;top:0;bottom:0}
}
@media (max-width:767px){
  body.task-calendar{overflow:hidden}
  body.task-calendar #hg-app{flex-direction:column}
  body.task-calendar .hg-calendar-main{width:100%}
  body.task-calendar .hg-calendar-main #hg-desktop-topbar{min-height:68px!important;height:68px!important;padding:10px 14px!important}
  .hg-calendar-mobile-titlebar{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 16px;border-bottom:1px solid #e2e8f0;background:#fff}
  .hg-calendar-mobile-titlebar > div{display:flex;align-items:center;gap:11px}
  .hg-calendar-mobile-titlebar strong{color:#111827;font-size:17px;font-weight:700}
  .hg-calendar-mobile-titlebar .hg-calendar-title-icon{width:34px;height:34px}
  .hg-calendar-mobile-titlebar > button{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:#2563eb;color:#fff;cursor:pointer}
  .hg-calendar-mobile-titlebar > button svg{width:18px;height:18px}
  .hg-calendar-shell{display:flex;flex:1 1 auto;min-height:0}
  .hg-calendar-panel{display:none}
  .hg-calendar-content{flex:1 1 auto;width:100%;padding:10px 12px 12px}
  .hg-calendar-toolbar{min-height:auto;flex-direction:column;align-items:stretch;gap:9px;margin-bottom:10px}
  .hg-calendar-toolbar-left{width:100%}
  .hg-calendar-period{flex:1 1 auto;max-width:none;margin-left:4px;font-size:16px;text-align:right}
  .hg-calendar-views{width:100%;box-sizing:border-box}
  .hg-calendar-views button{flex:1 1 0}
  .hg-calendar-scroll{border-radius:12px}
  .hg-calendar-canvas{min-width:680px}
  .hg-calendar-month{grid-template-columns:repeat(7,minmax(92px,1fr));grid-template-rows:34px repeat(6,minmax(84px,1fr))}
  .hg-calendar-week{grid-template-columns:repeat(7,minmax(125px,1fr))}
  .hg-calendar-agenda{min-width:0}
  .hg-calendar-agenda-heading{padding:0 14px}
  .hg-calendar-agenda-list{padding:14px}
  .hg-calendar-agenda-event{grid-template-columns:88px minmax(0,1fr);gap:12px}
  .hg-calendar-modal{align-items:flex-end;padding:0}
  .hg-calendar-modal-card{width:100%;max-height:calc(100dvh - 18px);border-radius:18px 18px 0 0;border-bottom:0}
  .hg-calendar-modal-head{min-height:64px;padding:0 17px}
  .hg-calendar-modal-body{gap:15px;padding:18px 17px}
  .hg-calendar-modal-actions{min-height:72px;padding:0 17px max(0px,env(safe-area-inset-bottom))}
  .hg-calendar-toast{right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
}
@media (max-width:440px){
  .hg-calendar-form-row{grid-template-columns:1fr}
  .hg-calendar-color-field{max-width:none}
  .hg-calendar-delete,.hg-calendar-cancel,.hg-calendar-save{padding:0 12px;font-size:12.5px}
  .hg-calendar-modal-actions{gap:8px}
  .hg-calendar-modal-actions-right{gap:7px}
}

/* Mail list: direct delete/spam actions reuse the message-view controls. */
@media (max-width:767px){
  body.task-mail.action-index #hg-toolbar{
    padding-left:10px!important;
    padding-right:10px!important;
    gap:4px!important;
  }
  body.task-mail.action-index .hg-toolbar-actions{
    width:auto!important;
    flex:1 1 auto!important;
    gap:4px!important;
  }
  body.task-mail.action-index .hg-select-group{
    gap:1px;
  }
  body.task-mail.action-index .hg-icon-btn{
    width:30px;
    height:30px;
    flex:0 0 30px;
  }
  body.task-mail.action-index .hg-list-action-btn{
    width:30px;
    height:30px;
    padding:0;
    gap:0;
    justify-content:center;
  }
  body.task-mail.action-index .hg-list-action-btn:disabled,
  body.task-mail.action-index .hg-list-action-btn[aria-disabled="true"]{
    display:none!important;
  }
  body.task-mail.action-index .hg-list-action-btn .hg-list-action-label,
  body.task-mail.action-index .hg-list-action-sep{
    display:none;
  }
  body.task-mail.action-index .hg-toolbar-pagination{
    margin-left:auto!important;
    flex:0 0 auto!important;
  }
  body.task-mail.action-index #pagenav{
    gap:2px!important;
  }
  body.task-mail.action-index #pagenav .message-count{
    margin-right:1px;
    font-size:11.5px!important;
    line-height:1;
  }
  body.task-mail.action-index #pagenav a{
    width:26px!important;
    height:30px!important;
  }
  body.task-mail.action-index #hg-toolbar.hg-has-message-selection #pagenav .message-count{
    display:none!important;
  }
}
@media (max-width:360px){
  body.task-mail.action-index #hg-toolbar{
    padding-left:8px!important;
    padding-right:8px!important;
    gap:4px!important;
  }
  body.task-mail.action-index .hg-toolbar-actions{
    gap:3px!important;
  }
}
@media (max-width:340px){
  body.task-mail.action-index #pagenav .message-count{display:none!important;}
}