/* DP Mail - phone / installed-app layout (see app-mobile.js). Everything is scoped to html.dpm-m. */

/* no menu bar: ribbon, top navigation, folder strip */
html.dpm-m .mail-shell > .ribbon { display: none !important; }
html.dpm-m header.topbar nav.topnav,
html.dpm-m header.topbar .brand-name,
html.dpm-m header.topbar .brand-sub,
html.dpm-m nav.mail-nav,
html.dpm-m .splitter { display: none !important; }

/* one-row header: logo, search, settings, account */
html.dpm-m header.topbar { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px; height: auto !important; min-height: 0 !important; padding: 8px 10px !important; }
html.dpm-m header.topbar .brand { flex: none; }
html.dpm-m header.topbar .topbar-slot { order: 0; flex: 1 1 auto; min-width: 0; width: auto !important; margin: 0 !important; position: static !important; }
html.dpm-m header.topbar .tsearch, html.dpm-m header.topbar .tsearch input { width: 100% !important; max-width: none !important; }
html.dpm-m header.topbar .tsearch input { height: 38px !important; font-size: 16px !important; border-radius: 19px !important; }
html.dpm-m header.topbar .ticon { flex: none; }

/* list fills the screen */
html.dpm-m .mail-shell { height: auto !important; }
html.dpm-m .mail { display: block !important; }
html.dpm-m section.mail-list { width: auto !important; max-width: none !important; height: auto !important; min-height: calc(100vh - 56px); border: 0 !important; }
html.dpm-m .mlist { height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
html.dpm-m .mail-list-head { position: sticky; top: 0; z-index: 5; background: var(--panel, var(--bg, #fff)); }
html.dpm-m .mail-list-head h1 { cursor: pointer; display: inline-flex; align-items: center; gap: 2px; -webkit-tap-highlight-color: transparent; }
html.dpm-m .mail-list-head h1 .dpm-m-caret { display: inline-flex; color: var(--muted); }
html.dpm-m .mail-list-head h1 .dpm-m-caret svg { width: 16px; height: 16px; }
html.dpm-m .mail-list-head .lh-tools .rlab { display: none; }
html.dpm-m .msg-row { -webkit-tap-highlight-color: transparent; }

/* reading pane: hidden until a message is tapped, then full screen */
html.dpm-m:not(.dpm-m-open) main.reading { display: none !important; }
html.dpm-m.dpm-m-open body { overflow: hidden; }
html.dpm-m.dpm-m-open main.reading {
  display: block !important; position: fixed !important; inset: 0 !important; z-index: 70;
  width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important;
  overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--bg, #fff); border: 0 !important; border-radius: 0 !important;
  padding: calc(52px + env(safe-area-inset-top)) 12px calc(76px + env(safe-area-inset-bottom)) !important;
}
html.dpm-m.dpm-m-open.dpm-m-composing main.reading { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
/* the bottom bar replaces these header buttons */
html.dpm-m.dpm-m-open main.reading .msg-actions button[aria-label="Reply"],
html.dpm-m.dpm-m-open main.reading .msg-actions button[aria-label="Reply all"],
html.dpm-m.dpm-m-open main.reading .msg-actions button[aria-label="Forward"] { display: none !important; }
html.dpm-m.dpm-m-open main.reading img, html.dpm-m.dpm-m-open main.reading table { max-width: 100%; }
html.dpm-m.dpm-m-open main.reading .att-grid { display: flex !important; flex-direction: column; gap: 8px; }
html.dpm-m.dpm-m-open main.reading .att-card { width: 100% !important; max-width: none !important; min-height: 48px; }

.dpm-m-top, .dpm-m-bar, .dpm-m-fab, .dpm-m-tabs { display: none; }
html.dpm-m.dpm-m-open .dpm-m-top {
  display: flex; align-items: center; gap: 2px; position: fixed; left: 0; right: 0; top: 0; z-index: 72;
  padding: env(safe-area-inset-top) 4px 0; height: calc(50px + env(safe-area-inset-top)); box-sizing: border-box;
  background: var(--panel, #fff); border-bottom: 1px solid var(--line, #e4e7ec); color: var(--text);
}
.dpm-m-ttl { flex: 1; min-width: 0; font: 600 15px/1.2 var(--font-ui, system-ui, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.dpm-m-ib { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: inherit; border-radius: 22px; cursor: pointer; flex: none; }
.dpm-m-ib:active { background: var(--hover, #0f1a2b14); }
html.dpm-m.dpm-m-open.dpm-m-composing .dpm-m-top .dpm-m-ib[aria-label$="message"] { display: none; }

html.dpm-m.dpm-m-open:not(.dpm-m-composing) .dpm-m-bar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 72;
  padding: 4px 2px env(safe-area-inset-bottom); background: var(--panel, #fff); border-top: 1px solid var(--line, #e4e7ec);
  box-shadow: 0 -4px 16px #0f19280f;
}
.dpm-m-act {
  flex: 1 1 0; min-width: 0; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: transparent; color: var(--text); border-radius: 10px; cursor: pointer;
  font: 500 11px/1 var(--font-ui, system-ui, sans-serif); -webkit-tap-highlight-color: transparent;
}
.dpm-m-act span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dpm-m-act:active { background: var(--hover, #0f1a2b14); }
.dpm-m-act[data-act="Delete"] { color: var(--bad-fg, #B42318); }

html.dpm-m:not(.dpm-m-open) .dpm-m-fab {
  display: inline-flex; align-items: center; gap: 6px; position: fixed; z-index: 60;
  right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); height: 54px; padding: 0 20px 0 16px;
  border: 0; border-radius: 27px; background: var(--accent, #1d4ed8); color: #fff; cursor: pointer;
  font: 600 15px/1 var(--font-ui, system-ui, sans-serif); box-shadow: 0 6px 20px #0f192840;
}
/* keep the install banner clear of the button */
html.dpm-m .dpm-install { bottom: calc(140px + env(safe-area-inset-bottom)); }
html.dpm-m.dpm-m-open .dpm-install { display: none !important; }

/* bottom sheets (folders, more actions) */
.dpm-m-veil { position: fixed; inset: 0; z-index: 90; background: #0a142266; display: flex; align-items: flex-end; }
.dpm-m-sheet {
  width: 100%; max-height: 75vh; overflow-y: auto; background: var(--panel, #fff); color: var(--text);
  border-radius: 16px 16px 0 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  font-family: var(--font-ui, system-ui, sans-serif); animation: dpm-m-up .18s ease-out;
}
@keyframes dpm-m-up { from { transform: translateY(30px); opacity: .4; } }
.dpm-m-sh-h { font: 600 13px/1 inherit; color: var(--muted); padding: 10px 12px 8px; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.dpm-m-sh-i { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; border: 0; background: transparent; color: inherit; min-height: 48px; padding: 0 12px; border-radius: 10px; font: 15px/1.2 inherit; font-size: 15px; cursor: pointer; }
.dpm-m-sh-i:active { background: var(--hover, #0f1a2b14); }
.dpm-m-sh-i.on { font-weight: 600; color: var(--accent, #1d4ed8); }
.dpm-m-sh-c { margin-left: auto; font-size: 13px; color: var(--muted); }
.dpm-m-sh-x { justify-content: center; color: var(--muted); margin-top: 4px; border-top: 1px solid var(--line, #e4e7ec); border-radius: 0; }

.dpm-m-toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 95; background: #0f1a2b; color: #fff; padding: 9px 14px; border-radius: 10px; font: 14px/1.3 var(--font-ui, system-ui, sans-serif); transition: opacity .3s; max-width: 90vw; }
.dpm-m-toast.out { opacity: 0; pointer-events: none; }

/* Sheets / Open in… chips: always show their label on phones */
html.dpm-m .att-card .dpm-gs-btn span, html.dpm-m .att-card .dpm-pwa-share span { display: inline !important; }

/* bottom bar: Calendar, Meet, Notes (list screen only) */
html.dpm-m:not(.dpm-m-open) .dpm-m-tabs {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  padding: 4px 0 env(safe-area-inset-bottom); background: var(--panel, #fff); border-top: 1px solid var(--line, #e4e7ec);
}
.dpm-m-tab { flex: 1 1 0; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text); text-decoration: none; font: 500 11px/1 var(--font-ui, system-ui, sans-serif); -webkit-tap-highlight-color: transparent; }
.dpm-m-tab:active { background: var(--hover, #0f1a2b14); }

/* writing: plain body, no formatting / HTML toolbar */
html.dpm-m .compose-inline .rte-bar { display: none !important; }

/* subject: full width, buttons (Note, AI) wrap onto their own row below it */
html.dpm-m.dpm-m-open main.reading > h2 {
  display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 8px !important;
  position: static !important; margin: 0 0 4px !important; padding: 0 !important; box-shadow: none !important; background: transparent !important;
  font-size: 17px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; word-break: normal;
}
html.dpm-m.dpm-m-open main.reading > h2 > .dpm-note-btn,
html.dpm-m.dpm-m-open main.reading > h2 > .dpm-ai-strip { margin-left: 0 !important; flex: 0 0 auto; }
html.dpm-m.dpm-m-open main.reading > h2 .dpm-ai-strip { flex-wrap: wrap; }
html.dpm-m.dpm-m-open main.reading > .msg-head { width: 100%; box-sizing: border-box; }
html.dpm-m.dpm-m-open main.reading > h2 { flex-direction: row; }

/* no trust bar on phones (blocked content is shown automatically) */
html.dpm-m main.reading .trust-bar { display: none !important; }

/* composing: the pane ends above the on-screen keyboard; quoted mail scrolls and fits the width */
html.dpm-m.dpm-m-open main.reading { bottom: var(--dpm-kb, 0px) !important; inset-block-end: var(--dpm-kb, 0px) !important; }
html.dpm-m.dpm-m-open.dpm-m-composing main.reading { padding-bottom: calc(40vh + env(safe-area-inset-bottom)) !important; }
html.dpm-m .compose-inline, html.dpm-m .compose-inline .rte, html.dpm-m .compose-inline .rte-body { max-width: 100%; box-sizing: border-box; }
html.dpm-m .compose-inline .rte-body { overflow-wrap: anywhere; }
html.dpm-m .compose-inline .rte-body img, html.dpm-m .compose-inline .rte-body table { max-width: 100% !important; height: auto; }
html.dpm-m .compose-inline .rte-body blockquote { max-width: 100%; box-sizing: border-box; overflow: visible !important; }

/* ONE scroller on phones: the full-screen pane. The reply form / editor must not be scroll
   containers of their own (an unscrollable one with overscroll-behavior: contain swallows the
   finger drag on Android Chrome, so the quoted mail could not be scrolled). */
html.dpm-m main.reading .compose-inline,
html.dpm-m main.reading .compose-inline .rte,
html.dpm-m main.reading .compose-inline .rte-body {
  overflow: visible !important; overscroll-behavior: auto !important; height: auto !important; max-height: none !important; touch-action: auto !important;
}
html.dpm-m main.reading .compose-inline .rte-body { min-height: 200px; }
html.dpm-m main.reading { overscroll-behavior-y: auto !important; }
html.dpm-m main.reading .compose-inline .rte-bar { position: static !important; }

/* reply: a clear empty line to type in, above the quoted mail */
html.dpm-m .compose-inline .rte-body { caret-color: var(--accent, #1d4ed8); }
html.dpm-m .compose-inline .rte-body > p:first-child { min-height: 3.2em; }
html.dpm-m .compose-inline .rte-body > p:first-child:has(> br:only-child)::before { content: 'Write your reply\2026'; color: var(--muted, #6b7280); pointer-events: none; }