/* DP Mail - "Gmail style" theme (see theme-gmail.js): light chrome, a pill search bar, pill-shaped folders and
 * unread / read rows, in the plain Material look. Only applies while this theme is chosen. */
html[data-theme=gmail] { --font-head: var(--font-ui); --icon: #444746; --icon-bg: #E9EEF6; --icon-bg-hover: #DDE3EA; }
html[data-theme=gmail] body { background: var(--surface); }

/* top bar */
html[data-theme=gmail] .topbar { background: var(--surface); min-height: 64px; padding: 8px 16px; border-bottom: 0; }
html[data-theme=gmail] .brand-name, html[data-theme=gmail] .brand-sub { color: var(--text); }
html[data-theme=gmail] .brand-sub { color: var(--muted); }
html[data-theme=gmail] .topnav a:hover { background: #E1E6EE; color: var(--text); }
html[data-theme=gmail] .topnav a.active { background: #D3E3FD; color: #041E49; }
html[data-theme=gmail] .tsearch input { height: 46px; border: 0; border-radius: 24px; background: #E9EEF6; color: var(--text); padding: 0 16px 0 50px; font-size: 16px; transition: background .15s, box-shadow .15s; }
html[data-theme=gmail] .tsearch input:focus { background: #FFFFFF; box-shadow: 0 1px 1px rgba(60,64,67,.3), 0 1px 4px 1px rgba(60,64,67,.15); outline: none; }
html[data-theme=gmail] .tsearch input::placeholder { color: var(--muted); }
html[data-theme=gmail] .tsearch svg { left: 17px; top: 15px; color: #444746; }
html[data-theme=gmail] .ticon { border-radius: 50%; width: 40px; height: 40px; color: #444746; }
html[data-theme=gmail] .ticon:hover { background: rgba(60,64,67,.08); }
html[data-theme=gmail] .topbar .btn-ghost { color: var(--text); border-color: #747775; }
html[data-theme=gmail] .brand-mark { border-radius: 50%; }

/* ribbon and folders */
html[data-theme=gmail] .ribbon { background: var(--surface); border-bottom: 0; }
html[data-theme=gmail] .mail-nav { background: var(--surface); border-right: 0; padding: 8px 8px 8px 12px; gap: 1px; }
html[data-theme=gmail] .mail-nav button.folder { border-radius: 999px; padding: 6px 14px; min-height: 32px; color: var(--text); }
html[data-theme=gmail] .mail-nav button.folder:hover { background: #E1E6EE; }
html[data-theme=gmail] .mail-nav button.folder.active { background: #D3E3FD; color: #041E49; font-weight: 700; box-shadow: none; }
html[data-theme=gmail] .mail-nav .label { letter-spacing: .04em; }

/* message list: read mail is tinted, unread is white and bold, like Gmail */
html[data-theme=gmail] .mail-list { background: var(--panel); }
html[data-theme=gmail] .mail-list-head { background: var(--panel); }
html[data-theme=gmail] .msg-row { background: #F2F6FC; border-bottom-color: #E3E6EA; }
html[data-theme=gmail] .msg-row.unread { background: #FFFFFF; }
html[data-theme=gmail] .msg-row:hover { box-shadow: inset 1px 0 0 #DADCE0, inset -1px 0 0 #DADCE0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); z-index: 1; }
html[data-theme=gmail] .msg-row.selected { background: #C2DBFF; }
html[data-theme=gmail] .msg-row.checked { background: #C2DBFF; box-shadow: none; }
html[data-theme=gmail] .msg-row.unread .who, html[data-theme=gmail] .msg-row.unread .subj { font-weight: 700; }

/* buttons, menus, toasts */
html[data-theme=gmail] .btn-primary { border-radius: 999px; }
html[data-theme=gmail] .menu { border: 0; border-radius: 12px; box-shadow: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.3); }
html[data-theme=gmail] .undo-toast { background: #2E3134; color: #F1F3F4; }
html[data-theme=gmail] .fw-bar { background: #E9EEF6; color: var(--text); }
html[data-theme=gmail] .theme-dot { border-color: #BDC1C6; }
html[data-theme=gmail] .theme-dot[aria-pressed=true] { border-color: #1F1F1F; }
.theme-dot[data-dpm-gmail] { border-color: #BDC1C6; }

/* phone */
html[data-theme=gmail].dpm-m .dpm-m-fab { background: #C2E7FF; color: #001D35; border-radius: 16px; box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15); }
html[data-theme=gmail].dpm-m .tsearch input { height: 42px; border-radius: 22px; font-size: 15px; }
html[data-theme=gmail].dpm-m .tsearch svg { top: 13px; }

/* rounded panels (computers; phones keep their own full-screen layout) */
html[data-theme=gmail]:not(.dpm-m) div.mail { padding: 0 16px 16px 0; background: var(--surface); }
html[data-theme=gmail]:not(.dpm-m) section.mail-list,
html[data-theme=gmail]:not(.dpm-m) main.reading { border-radius: 16px; clip-path: inset(0 round 16px); background: var(--panel); border: 0; }
html[data-theme=gmail]:not(.dpm-m) div.splitter { background: transparent; }
html[data-theme=gmail]:not(.dpm-m) div.splitter:hover { background: #D3E3FD; }