/*
 * Email reader content card module.
 * Scope: the desktop split reader card and its direct content sections.
 */

.email-page {
  --email-reader-card-gap: clamp(18px, 1.7vw, 28px);
  --email-reader-card-inset: 22px;
  --email-reader-body-inset-left: 22px;
  --email-reader-card-surface: rgba(255, 253, 250, 0.98);
  --email-reader-card-border: rgba(232, 220, 214, 0.9);
  --email-reader-card-shadow: 0 14px 36px rgba(71, 52, 45, 0.055), 0 2px 8px rgba(71, 52, 45, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --email-reader-panel-bg: rgba(250, 247, 243, 0.62);
  --email-reader-text: #2f2934;
  --email-reader-muted: #7d746f;
  --email-reader-summary-bg: rgba(247, 251, 248, 0.82);
  --email-reader-summary-border: rgba(168, 197, 184, 0.28);
  --email-reader-summary-text: #4a7a68;
}

@media (min-width: 1200px) {
  .email-page .email-app.is-thread-open.is-reader-split .email-reader {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 18px 8px var(--email-reader-card-gap) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background-color: var(--email-reader-panel-bg) !important;
    background-image: linear-gradient(180deg, rgba(255, 254, 251, 0.68) 0%, rgba(250, 247, 243, 0.58) 100%) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-content {
    position: relative !important;
    z-index: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background-color: var(--email-reader-card-surface) !important;
    background-image: linear-gradient(180deg, rgba(255, 254, 251, 0.99) 0%, rgba(255, 253, 250, 0.96) 100%) !important;
    border: 1px solid var(--email-reader-card-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--email-reader-card-shadow) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-content::after {
    content: "" !important;
    position: absolute !important;
    right: -96px !important;
    bottom: -104px !important;
    width: 270px !important;
    height: 270px !important;
    border: 1px solid rgba(212, 168, 154, 0.18) !important;
    border-radius: 50% !important;
    box-shadow: inset 74px 0 0 -72px rgba(212, 168, 154, 0.11) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-content > * {
    position: relative !important;
    z-index: 1 !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-header {
    z-index: 3 !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "meta actions" !important;
    column-gap: var(--calm-rh-gap) !important;
    row-gap: 6px !important;
    align-items: start !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: var(--calm-rh-pad-y) var(--calm-rh-pad-x) calc(var(--calm-rh-pad-y) - 2px) !important;
    border: 0 !important;
    background: transparent !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-back {
    display: none !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-avatar {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--bb-sage-dark, #4A7A68) 0%, var(--bb-sage-text, #3D6B57) 100%);
    color: #fffefb !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    box-shadow: 0 7px 18px rgba(74, 122, 104, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-meta {
    grid-area: meta !important;
    align-self: start !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-from {
    display: flex !important;
    align-items: baseline !important;
    column-gap: var(--calm-rh-meta-gap) !important;
    row-gap: 2px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--email-reader-text) !important;
    line-height: 1.4 !important;
    flex-wrap: wrap !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-from strong {
    min-width: 0 !important;
    color: var(--calm-rh-anchor) !important;
    font-family: var(--font-family) !important;
    font-size: var(--calm-rh-name-size) !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    text-overflow: initial !important;
    white-space: normal !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-email {
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    color: var(--calm-rh-muted) !important;
    display: inline !important;
    font-family: var(--font-family) !important;
    font-size: var(--calm-rh-email-size) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    text-overflow: initial !important;
    white-space: normal !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-to,
  .email-page .email-app.is-thread-open.is-reader-split .email-reader-date {
    margin: 0 0 6px !important;
    color: var(--email-reader-muted) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-subject {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: var(--calm-rh-subject-clamp) !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    border: 0 !important;
    text-overflow: initial !important;
    font-size: var(--calm-rh-subject-size) !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    color: var(--calm-rh-anchor) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-actions {
    grid-area: actions !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-width: max-content !important;
    margin: -2px 0 0 !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-actions .email-reader-time {
    align-self: center !important;
    margin-right: 8px !important;
    color: var(--calm-rh-muted) !important;
    font-size: var(--calm-rh-time-size) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  /* 40px square lock removed for action btns — calm-preview.css owns sizing (#2306) */

  .email-page .email-app.is-thread-open.is-reader-split .email-calm-action {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    gap: 6px !important;
    border: 1px solid rgba(168, 197, 184, 0.28) !important;
    border-radius: 999px !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium, 500) !important;
    color: var(--email-reader-muted) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-calm-action:hover {
    background: rgba(168, 197, 184, 0.1) !important;
    border-color: rgba(168, 197, 184, 0.4) !important;
    color: var(--email-reader-text) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-header-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 2px !important;
    border-color: rgba(168, 197, 184, 0.22) !important;
    color: var(--email-reader-muted) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 16px 22px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--email-reader-text) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-body p {
    margin: 0 0 22px !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-body > *,
  .email-page .email-app.is-thread-open.is-reader-split .email-reader-iframe {
    max-width: 780px !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-attachments {
    margin: 0 22px !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-chip {
    max-width: 260px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-reply {
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 22px 22px !important;
    border-top: 0 !important;
    background: transparent !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reply-input-wrap {
    min-height: 54px !important;
    box-sizing: border-box !important;
    padding: 6px 7px 6px 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(228, 220, 212, 0.72) !important;
    background: rgba(255, 254, 251, 0.94) !important;
    box-shadow: 0 8px 22px rgba(71, 52, 45, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reply-input-wrap:hover {
    border-color: rgba(228, 220, 212, 0.8) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reply-input-wrap:focus-within {
    border-color: var(--reply-pill-border-focus, rgba(92, 77, 67, 0.55)) !important;
    box-shadow: var(--reply-pill-shadow-focus, 0 0 0 2px rgba(92, 77, 67, 0.08), 0 1px 2px rgba(58, 47, 38, 0.05)) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reply-send,
  .email-page .email-app.is-thread-open.is-reader-split .email-reply-draft {
    flex-shrink: 0 !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reply-draft {
    border-color: rgba(168, 197, 184, 0.28) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reply-draft:hover {
    background: rgba(168, 197, 184, 0.1) !important;
    border-color: rgba(168, 197, 184, 0.4) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1320px) {
  .email-page .email-app.is-thread-open.is-reader-split .email-reader-header {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-actions {
    gap: 6px !important;
  }

  /* 40px square lock removed for action btns — calm-preview.css owns sizing (#2306) */
}

/*
 * Reader layout contract.
 * The app owns viewport height, columns own horizontal layout, the reader card
 * owns the visual frame, and .email-reader-body is the only message scroll area.
 * The !important flags neutralize older responsive modules that still assign
 * overflow/height ownership to the reader wrapper on mobile and split view.
 */
.email-page .email-app,
.email-page .email-columns,
.email-page .email-folders,
.email-page .email-list,
.email-page .email-reader,
.email-page .email-reader-content {
  min-height: 0 !important;
}

.email-page .email-columns {
  overflow: hidden !important;
}

.email-page .email-list,
.email-page .email-reader {
  min-width: 0 !important;
  overflow: hidden !important;
}

.email-page .email-reader-content {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.email-page .email-reader-content::after,
.email-page .email-app.is-thread-open.is-reader-split .email-reader-content::after {
  right: 0 !important;
  bottom: 0 !important;
  width: min(210px, 32%) !important;
  height: min(210px, 32%) !important;
  transform: none !important;
}

.email-page .email-reader-header,
.email-page .email-meeting-bar,
.email-page .email-reader-attachments,
.email-page .email-reader-reply {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.email-page .email-reader-body {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.email-page .email-reader-body:focus-visible {
  outline: none;
  outline-offset: 2px;
}

.email-page .email-reader-body > *,
.email-page .email-reader-iframe {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.email-page .email-app.ask-ai-open .email-reader,
.email-page .email-app.ask-ai-open .email-reader-content,
.email-page .email-app.ask-ai-open .email-reader-body {
  min-width: 0 !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .email-page .email-app.is-thread-open .email-reader-body {
    min-height: 120px !important;
  }

  .email-page .email-app.is-thread-open .email-chips-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding: 8px 0 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .email-page .email-app.is-thread-open .email-chip {
    flex: 0 0 auto !important;
    max-width: min(240px, calc(100% - 8px)) !important;
  }
}

@media (max-width: 767px) {
  .email-page .email-reader {
    height: 100% !important;
    min-height: 0 !important;
  }

  .email-page .email-reader.mobile-visible {
    display: flex !important;
    flex-direction: column !important;
  }

  .email-page .email-reader-content {
    height: 100% !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .email-page .email-reader-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 16px !important;
  }

  .email-page .email-reader-header,
  .email-page .email-meeting-bar,
  .email-page .email-reader-attachments,
  .email-page .email-reader-reply {
    flex: 0 0 auto !important;
  }
}

/* Dark mode: reader panel */

@media (min-width: 1200px) {
  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader {
    background: rgba(30, 26, 23, 0.95) !important;
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader-content {
    background: transparent !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader-content::after {
    display: none !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader-header {
    background: transparent !important;
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader-from strong {
    color: #E8DDD4 !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader-date {
    color: #B8ACA3 !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader-body {
    background: rgba(36, 31, 27, 0.6) !important;
    color: #D8CFC5 !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reply-input-wrap {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reply-input-wrap:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reply-input-wrap:focus-within {
    border-color: rgba(200, 190, 178, 0.48) !important;
    box-shadow: 0 0 0 2px rgba(200, 190, 178, 0.10) !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reply-input {
    color: #E8DDD4 !important;
    font-family: var(--font-family) !important;
    font-style: normal !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reply-input::placeholder {
    color: #9F9184 !important;
    font-style: normal !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reply-send {
    background: var(--bb-sage-dark, #4A7A68) !important;
    box-shadow: 0 4px 12px rgba(92, 77, 67, 0.12) !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader-actions button {
    color: #B8ACA3 !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader-actions button:hover {
    color: #E8DDD4 !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }
}

@media (min-width: 1200px) {
  .email-page .email-app.is-thread-open.is-reader-split .email-reader {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    margin-left: 16px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 14px !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-reader-content {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background-color: var(--email-reader-card-surface) !important;
    background-image: linear-gradient(180deg, rgba(255, 254, 251, 0.99) 0%, rgba(255, 253, 250, 0.96) 100%) !important;
    border: 1px solid var(--email-reader-card-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--email-reader-card-shadow) !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader {
    background: transparent !important;
    background-image: none !important;
  }

  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-reader-content {
    background-color: rgba(30, 26, 23, 0.95) !important;
    background-image: linear-gradient(180deg, rgba(42, 38, 34, 0.98) 0%, rgba(30, 26, 23, 0.95) 100%) !important;
    border-color: rgba(168, 197, 184, 0.14) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 34px rgba(20, 18, 15, 0.28) !important;
  }
}

/* ── Reply bar: two-lane layout (#412) ─────────────────────────── */

.email-page .email-reply-input-zone {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

.email-page .email-chip {
  background: rgba(92, 77, 67, 0.06) !important;
  font-size: var(--font-size-sm) !important;
  border-radius: 999px !important;
}

.email-page .email-reply-hint-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 18px !important;
  min-height: 20px !important;
  box-sizing: border-box !important;
}

.email-page .email-reply-hint {
  font-size: var(--font-size-xs) !important;
  color: var(--sk-text-muted, #9F9184) !important;
  transition: opacity 0.3s ease !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

.email-page .email-reply-hint--fade {
  opacity: 0 !important;
}

.email-page .email-reply-svar {
  font-size: var(--font-size-sm) !important;
  color: var(--bb-sage-dark, #4A7A68) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
}

.email-page .email-reply-svar:hover {
  text-decoration: underline !important;
}

@keyframes email-reply-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.email-page .email-reply-loading {
  background: linear-gradient(90deg,
    rgba(255, 254, 251, 0.94) 0%,
    rgba(168, 197, 184, 0.18) 40%,
    rgba(255, 254, 251, 0.94) 80%) !important;
  background-size: 200% 100% !important;
  animation: email-reply-shimmer 1.8s ease-in-out infinite !important;
}

.email-page .email-reply-loading .email-reply-input {
  color: var(--sk-text-muted, #9F9184) !important;
}

/* Dark mode: two-lane reply bar */

[data-theme="dark"] .email-page .email-chip {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page .email-reply-hint {
  color: #9F9184 !important;
}

[data-theme="dark"] .email-page .email-reply-svar {
  color: #8FB8A7 !important;
}

[data-theme="dark"] .email-page .email-reply-loading {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(168, 197, 184, 0.12) 40%,
    rgba(255, 255, 255, 0.07) 80%) !important;
  background-size: 200% 100% !important;
  animation: email-reply-shimmer 1.8s ease-in-out infinite !important;
}

[data-theme="dark"] .email-page .email-reply-loading .email-reply-input {
  color: #9F9184 !important;
}

/* Mobile: two-lane reply bar */

@media (max-width: 767px) {
  .email-page .email-reply-hint-row {
    display: none !important;
  }

  .email-page .email-reply-input-wrap {
    min-height: 44px !important;
  }

  .email-page .email-chip {
    min-height: 44px !important;
    flex: 0 0 auto !important;
  }
}