/* SEHL-MAIL-ADAPTIVE-THEME-SYNC-V1 */
/* ==========================================================
   SEHL MAIL — ADAPTIVE APP UX V1
   This file is intentionally isolated from the desktop core.
   ========================================================== */

:root {
  --sehl-safe-top: env(safe-area-inset-top, 0px);
  --sehl-safe-right: env(safe-area-inset-right, 0px);
  --sehl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sehl-safe-left: env(safe-area-inset-left, 0px);
  --sehl-vvh: 100dvh;
  --sehl-mobile-header: 58px;
  --sehl-touch-min: 44px;
  --sehl-app-bg: var(--sehl-app-canvas, var(--bg, #12161e));
  --sehl-panel-bg: var(--sehl-app-surface, var(--surface, #181a1e));
  --sehl-panel-2: var(--sehl-app-surface-soft, var(--surface-2, #1e2025));
  --sehl-hairline: color-mix(in srgb, var(--ink) 8%, transparent);
  --sehl-shadow: 0 18px 55px rgba(0,0,0,.42);
  --sehl-ease: cubic-bezier(.22,.8,.22,1);
}

/* ---------- Platform foundation ---------- */

html.sehl-touch,
html.sehl-touch body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

html.sehl-standalone,
html.sehl-standalone body {
  background: var(--sehl-app-bg);
}

html.sehl-standalone body {
  padding-top: 0;
}

html.sehl-touch button,
html.sehl-touch [role="button"],
html.sehl-touch a,
html.sehl-touch input,
html.sehl-touch select,
html.sehl-touch textarea {
  touch-action: manipulation;
}

html.sehl-touch button,
html.sehl-touch [role="button"] {
  min-height: var(--sehl-touch-min);
}

html.sehl-touch input,
html.sehl-touch textarea,
html.sehl-touch select {
  font-size: max(16px, 1em);
}

html.sehl-touch * {
  -webkit-user-drag: none;
}

html.sehl-touch input,
html.sehl-touch textarea,
html.sehl-touch [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

html.sehl-touch .row,
html.sehl-touch button,
html.sehl-touch [role="button"],
html.sehl-touch .rail a,
html.sehl-touch .rail [data-view] {
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- Mobile application shell ---------- */

@media (max-width: 900px) {
  html.sehl-adaptive body {
    min-width: 0 !important;
    width: 100%;
    height: var(--sehl-vvh);
    overflow: hidden;
    background: var(--sehl-app-bg);
  }

  html.sehl-adaptive .app {
    min-width: 0 !important;
    width: 100%;
    height: var(--sehl-vvh) !important;
    max-height: var(--sehl-vvh) !important;
    overflow: hidden;
  }

  html.sehl-adaptive .top {
    position: relative;
    z-index: 50;
    flex: 0 0 auto;
    min-height: calc(var(--sehl-mobile-header) + var(--sehl-safe-top));
    padding-top: var(--sehl-safe-top) !important;
    padding-left: max(10px, var(--sehl-safe-left)) !important;
    padding-right: max(10px, var(--sehl-safe-right)) !important;
    border-bottom: 1px solid var(--sehl-hairline);
    background:
      linear-gradient(to bottom, rgba(24,26,30,.96), rgba(20,21,23,.94));
    -webkit-backdrop-filter: saturate(145%) blur(18px);
    backdrop-filter: saturate(145%) blur(18px);
  }

  html.sehl-adaptive .top-actions {
    gap: 4px;
  }

  html.sehl-adaptive .shell,
  html.sehl-adaptive [data-layout="bottom"] .shell,
  html.sehl-adaptive [data-layout="right"] .shell,
  html.sehl-adaptive [data-layout="none"] .shell {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: minmax(0,1fr) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;
  }

  html.sehl-adaptive .midwrap,
  html.sehl-adaptive [data-layout="bottom"] .midwrap,
  html.sehl-adaptive [data-layout="right"] .midwrap,
  html.sehl-adaptive [data-layout="none"] .midwrap {
    display: contents !important;
  }

  html.sehl-adaptive .list {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-inline-end: 0 !important;
    background: var(--sehl-app-bg);
  }

  html.sehl-adaptive body.reading .list {
    visibility: hidden;
    pointer-events: none;
  }

  html.sehl-adaptive .read,
  html.sehl-adaptive [data-layout="none"] .read,
  html.sehl-adaptive [data-layout="right"] .read,
  html.sehl-adaptive [data-layout="bottom"] .read {
    position: absolute !important;
    z-index: 40 !important;
    inset: 0 !important;
    display: none;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--sehl-app-bg) !important;
  }

  html.sehl-adaptive body.reading .read,
  html.sehl-adaptive body.sehl-reading .read {
    display: flex !important;
    animation: sehlReaderIn .22s var(--sehl-ease) both;
  }

  @keyframes sehlReaderIn {
    from {
      opacity: .74;
      transform: translate3d(18px,0,0);
    }
    to {
      opacity: 1;
      transform: translate3d(0,0,0);
    }
  }

  html.sehl-adaptive #reBack {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  html.sehl-adaptive .toolbar {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  html.sehl-adaptive .toolbar::-webkit-scrollbar {
    display: none;
  }

  html.sehl-adaptive .row {
    min-height: 68px;
    contain: layout paint;
  }

  html.sehl-adaptive .row:active {
    background-color: color-mix(in srgb,var(--ink) 4%,transparent);
  }

  html.sehl-adaptive #q {
    min-width: 0 !important;
    width: 100%;
  }

  /* Sidebar becomes a native-style drawer instead of consuming a column. */
  html.sehl-adaptive .rail {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    z-index: 90 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(84vw, 340px) !important;
    max-width: 340px !important;
    height: var(--sehl-vvh) !important;
    padding-top: var(--sehl-safe-top) !important;
    padding-bottom: var(--sehl-safe-bottom) !important;
    transform: translate3d(-103%,0,0);
    transition: transform .25s var(--sehl-ease);
    box-shadow: var(--sehl-shadow);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--sehl-panel-bg);
  }

  html[dir="rtl"].sehl-adaptive .rail {
    left: auto !important;
    right: 0 !important;
    transform: translate3d(103%,0,0);
  }

  html.sehl-adaptive body.sehl-rail-open .rail {
    transform: translate3d(0,0,0);
  }

  html.sehl-adaptive #sehlAdaptiveBackdrop {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(0,0,0,.46);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition:
      opacity .2s ease,
      visibility .2s ease;
  }

  html.sehl-adaptive body.sehl-rail-open #sehlAdaptiveBackdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  html.sehl-adaptive body.sehl-rail-open {
    overflow: hidden;
  }

  html.sehl-adaptive #btnRail {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Composer/editor: keep it above iOS keyboard and safe areas. */
  html.sehl-adaptive #cBody {
    min-height: 150px;
    max-height: min(46vh, 420px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.sehl-adaptive #fmtBar {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  html.sehl-adaptive #fmtBar::-webkit-scrollbar {
    display: none;
  }

  html.sehl-adaptive body.sehl-keyboard-open {
    height: var(--sehl-vvh);
  }
}

/* ---------- Phone ---------- */

@media (max-width: 560px) {
  :root {
    --sehl-mobile-header: 54px;
  }

  html.sehl-adaptive .top {
    gap: 6px !important;
  }

  html.sehl-adaptive .top-actions {
    flex: 0 0 auto;
  }

  html.sehl-adaptive .row {
    min-height: 72px;
  }

  html.sehl-adaptive body:not(.reading) .row {
    grid-template-columns: 18px 18px minmax(0,1fr) auto !important;
  }

  html.sehl-adaptive body:not(.reading) .row .who2 {
    min-width: 0 !important;
    max-width: none !important;
  }

  html.sehl-adaptive .read {
    padding-bottom: var(--sehl-safe-bottom);
  }

  html.sehl-adaptive #cSend {
    min-height: 46px;
  }
}

/* ---------- Tablet ---------- */

@media (min-width: 701px) and (max-width: 1100px) and (pointer: coarse) {
  html.sehl-tablet .shell {
    min-width: 0;
  }

  html.sehl-tablet .row {
    min-height: 64px;
  }

  html.sehl-tablet button,
  html.sehl-tablet [role="button"] {
    min-height: 42px;
  }
}

/* ---------- Standalone PWA ---------- */

@media (display-mode: standalone) {
  html.sehl-adaptive .top {
    padding-top: var(--sehl-safe-top) !important;
  }

  html.sehl-adaptive .rail {
    padding-top: var(--sehl-safe-top) !important;
  }
}

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  html.sehl-adaptive *,
  html.sehl-adaptive *::before,
  html.sehl-adaptive *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  html.sehl-adaptive .top,
  html.sehl-adaptive .toolbar {
    border-color: color-mix(in srgb,var(--ink) 22%,transparent);
  }
}

/* SEHL MAIL MOBILE INBOX ALIGNMENT V1 START */

/*
 * mail.js renders each inbox row as four grid children:
 *   action/star | avatar | message text | right/date
 *
 * Adaptive App UX V1 used an 18px avatar column on phones. The sender
 * avatar itself is ~32px, so initials such as "HR" visibly intrude into
 * the sender name. Give the avatar its own real column and explicitly
 * place the mobile row children.
 */
@media (max-width: 560px) {
  html.sehl-adaptive body:not(.reading) .row {
    grid-template-columns:
      28px
      38px
      minmax(0, 1fr)
      auto !important;

    column-gap: 8px !important;
    align-items: start !important;
  }

  html.sehl-adaptive body:not(.reading) .row > .avatar {
    grid-column: 2 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    margin: 0 !important;
    align-self: start !important;
    justify-self: center !important;
    position: static !important;
    transform: none !important;
  }

  html.sehl-adaptive body:not(.reading) .row > .who2 {
    grid-column: 3 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
  }

  html.sehl-adaptive body:not(.reading) .row > .who2 .l1,
  html.sehl-adaptive body:not(.reading) .row > .who2 .nm,
  html.sehl-adaptive body:not(.reading) .row > .who2 .subj {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html.sehl-adaptive body:not(.reading) .row > .who2 .nm,
  html.sehl-adaptive body:not(.reading) .row > .who2 .subj {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.sehl-adaptive body:not(.reading) .row > .rowright {
    grid-column: 4 !important;
    align-self: start !important;
    justify-self: end !important;
    margin-left: 2px !important;
  }
}

/* SEHL MAIL MOBILE INBOX ALIGNMENT V1 END */

/* SEHL-MOBILE-SCRIM-FIX-V1 START */
/*
 * iOS/WebKit can occasionally retain the drawer scrim compositing layer
 * after the mailbox rail has already closed.
 *
 * Closed state is authoritative: if rail-open is absent, the scrim must
 * be completely removed from painting and hit testing.
 */
@media (max-width:1024px) {
  body:not(.rail-open) #scrim {
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.rail-open #scrim {
    visibility:visible !important;
    pointer-events:auto !important;
  }
}
/* SEHL-MOBILE-SCRIM-FIX-V1 END */