/* Mobile consumer refinement: a softer, continuous visual language for all App pages. */
body[data-app-surface="mobile"] {
  --app-accent: #1478d4;
  --app-accent-deep: #0f5f9f;
  --app-ink: #19324b;
  --app-muted: #667b91;
  --app-surface: #ffffff;
  --app-soft-blue: #eaf4fd;
  --app-soft-warm: #fff7e9;
  --app-radius-section: 16px;
  --app-radius-control: 12px;
  --app-shadow-soft: 0 8px 24px rgb(32 73 111 / 6%);
}

/* One device shell for login and every mobile route, without shrinking the content canvas. */
body[data-app-surface="mobile"] .phone-frame {
  border-radius: 32px;
  box-shadow: 0 0 0 7px #202c3b, 0 0 0 9px #718397, 0 26px 68px rgb(9 32 67 / 24%);
}

body[data-app-surface="mobile"] .phone-frame .mobile-login-app {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

body[data-app-surface="mobile"] .mobile-login-app .login-shell.is-mobile-login {
  width: 100%;
  min-height: 100%;
}

body[data-app-surface="mobile"] .mobile-login-app .login-shell.is-mobile-login .login-brand-panel {
  min-height: 290px;
  padding: 22px 18px 38px;
}

body[data-app-surface="mobile"] .mobile-login-app .login-message h1 {
  font-size: 24px;
  line-height: 1.3;
}

body[data-app-surface="mobile"] .mobile-login-app .login-panel {
  min-height: 0;
  padding: 0 14px 22px;
}

body[data-app-surface="mobile"] .mobile-login-app .login-card {
  box-sizing: border-box;
  max-width: 100%;
  padding: 18px 16px;
}

body[data-app-surface="mobile"] .mobile-login-app .login-shell.is-mobile-login .login-card > header h2 {
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 430px) {
  body[data-app-surface="mobile"] .mobile-stage {
    box-sizing: border-box;
    min-height: 100dvh;
    padding: 5px;
  }

  body[data-app-surface="mobile"] .phone-frame {
    width: 100%;
    height: calc(100dvh - 10px);
    border: 1px solid #718397;
    border-radius: 22px;
    box-shadow: 0 0 0 3px #202c3b;
  }
}

body[data-app-surface="mobile"] .mobile-content {
  background:
    radial-gradient(circle at 94% 0, rgb(64 157 232 / 8%), transparent 180px),
    #f1f6fb;
}

/* Typography: mobile hierarchy comes from rhythm and colour, not heavy black type. */
body[data-app-surface="mobile"] .mobile-content :where(h1, h2, h3, legend) {
  color: var(--app-ink);
  font-weight: 600 !important;
  letter-spacing: -.012em;
}

body[data-app-surface="mobile"] .mobile-content :where(p, dd, small) {
  color: var(--app-muted);
}

/* Scene headers replace bare black page titles across generic and domain pages. */
body[data-app-surface="mobile"] :where(
  .mobile-page-intro,
  .m-mat-intro,
  .m-saf-intro
) {
  position: relative;
  overflow: hidden;
  margin: 0 0 12px !important;
  padding: 14px 16px 15px 18px !important;
  border: 0 !important;
  border-radius: var(--app-radius-section) !important;
  background:
    linear-gradient(112deg, rgb(218 238 255 / 95%) 0%, rgb(242 248 253 / 92%) 58%, rgb(255 255 255 / 72%) 100%) !important;
  box-shadow: none !important;
  color: var(--app-ink) !important;
}

body[data-app-surface="mobile"] :where(.mobile-page-intro, .m-mat-intro, .m-saf-intro)::before {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0;
  width: 4px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #16a0f5, #1769aa);
  content: "";
}

body[data-app-surface="mobile"] :where(.mobile-page-intro, .m-mat-intro, .m-saf-intro) > span {
  display: block;
  margin: 0 0 4px !important;
  color: var(--app-accent-deep) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
}

body[data-app-surface="mobile"] :where(.mobile-page-intro, .m-mat-intro, .m-saf-intro) h2 {
  margin: 0 !important;
  color: var(--app-ink) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 25px !important;
}

body[data-app-surface="mobile"] :where(.mobile-page-intro, .m-mat-intro, .m-saf-intro) p {
  margin: 5px 0 0 !important;
  color: #60758b !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

/* Generic section titles use a small brand marker and medium weight. */
body[data-app-surface="mobile"] :where(
  .mobile-section > header,
  .m-prg-form-section > header,
  .m-mat-form-section > header
) {
  min-height: 36px !important;
  margin-bottom: 10px !important;
}

body[data-app-surface="mobile"] :where(
  .mobile-section > header > h3,
  .m-prg-form-section > header > h2,
  .m-mat-form-section > header > h2
) {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
}

body[data-app-surface="mobile"] :where(
  .mobile-section > header,
  .m-prg-form-section > header,
  .m-mat-form-section > header
)::before {
  width: 3px;
  height: 16px;
  flex: 0 0 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #19a4f7, #176fb4);
  content: "";
}

body[data-app-surface="mobile"] :where(
  .mobile-section > header > h3,
  .m-prg-form-section > header > h2,
  .m-mat-form-section > header > h2
)::before {
  content: none !important;
}

/* Surfaces: remove enterprise outlines and use quiet grouped sections. */
body[data-app-surface="mobile"] :where(
  .mobile-section,
  .mobile-form-card,
  .mobile-profile-card,
  .m-prg-form-section,
  .m-prg-card,
  .m-prg-milestone-detail,
  .m-mat-form,
  .m-mat-order,
  .m-mat-evidence,
  .m-saf-context,
  .m-saf-task,
  .m-saf-form,
  .m-saf-candidate,
  .ai-result-v2__overview,
  .ai-result-v2__evidence
) {
  border: 0 !important;
  border-radius: var(--app-radius-section) !important;
  background-color: var(--app-surface) !important;
  box-shadow: var(--app-shadow-soft) !important;
}

/* Record collections become one continuous grouped list instead of repeated cards. */
body[data-app-surface="mobile"] .mobile-card-list {
  display: block !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--app-radius-section) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-soft) !important;
}

body[data-app-surface="mobile"] .mobile-card-list > article {
  margin: 0 !important;
  padding: 15px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #e9f0f6 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-surface="mobile"] .mobile-card-list > article:last-of-type {
  border-bottom: 0 !important;
}

/* M04 keeps each task visually independent while retaining the compact list rhythm. */
body[data-app-surface="mobile"] .mobile-task-card-list {
  display: grid !important;
  gap: 2px !important;
  overflow: visible;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-surface="mobile"] .mobile-task-card-list > article,
body[data-app-surface="mobile"] .mobile-task-card-list > article:last-of-type {
  border: 1px solid #e3ebf3 !important;
  border-radius: var(--app-radius-section) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-soft) !important;
}

body[data-app-surface="mobile"] .mobile-card-list > article > h3 {
  margin: 8px 0 6px !important;
  color: var(--app-ink) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 23px !important;
}

body[data-app-surface="mobile"] .mobile-card-list article > button {
  display: flex !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 8px 0 -8px !important;
  padding: 0 !important;
  align-items: center;
  justify-content: flex-end !important;
  border: 0 !important;
  border-top: 1px solid #eef3f7 !important;
  border-radius: 0 !important;
  color: var(--app-accent-deep) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 550 !important;
}

/* AI home: recommendation is an editorial spotlight, not a B2B border card. */
body[data-app-surface="mobile"] .m-ai-focus {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 190px !important;
  flex: 0 0 auto !important;
  margin: 10px 0 !important;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0, rgb(255 203 104 / 22%), transparent 120px),
    linear-gradient(145deg, #eaf5ff 0%, #f8fbff 55%, #fff8ec 100%) !important;
  box-shadow: 0 10px 28px rgb(42 91 132 / 8%) !important;
}

body[data-app-surface="mobile"] .m-ai-focus::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 3px;
  border-radius: 0 0 8px 0;
  background: linear-gradient(90deg, #1687e3, #ffb247);
  content: "";
}

body[data-app-surface="mobile"] .m-ai-focus h2 {
  max-width: 310px;
  margin: 9px 0 5px !important;
  color: #17344f !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 26px !important;
}

body[data-app-surface="mobile"] .m-ai-focus > header em {
  border-radius: 999px !important;
  color: #8d530b !important;
  background: rgb(255 245 224 / 92%) !important;
}

body[data-app-surface="mobile"] .m-ai-focus > footer {
  margin-top: 13px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

body[data-app-surface="mobile"] .m-ai-focus > footer button {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: var(--app-radius-control) !important;
  color: #155f9a !important;
  background: rgb(255 255 255 / 78%) !important;
  box-shadow: inset 0 0 0 1px rgb(56 116 165 / 16%) !important;
}

body[data-app-surface="mobile"] .m-ai-focus > footer button.is-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #1687e3, #116caf) !important;
  box-shadow: none !important;
}

/* AI analysis title: designed context band with a compact period control. */
body[data-app-surface="mobile"] .m-ai-analysis-head {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 96px !important;
  min-height: 76px !important;
  margin: 0 0 10px !important;
  padding: 12px 12px 12px 17px !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: var(--app-radius-section) !important;
  background: linear-gradient(110deg, #e4f2ff 0%, #f4f8fc 62%, #ffffff 100%) !important;
}

body[data-app-surface="mobile"] .m-ai-analysis-head::before {
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0;
  width: 4px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #16a0f5, #1769aa);
  content: "";
}

body[data-app-surface="mobile"] .m-ai-analysis-head > div > span {
  margin: 0 0 2px !important;
  color: var(--app-accent-deep) !important;
  font-size: 10px !important;
}

body[data-app-surface="mobile"] .m-ai-analysis-head h2 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 25px !important;
}

body[data-app-surface="mobile"] .m-ai-analysis-head select {
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background-color: rgb(255 255 255 / 88%) !important;
  box-shadow: inset 0 0 0 1px #d6e2ed !important;
}

body[data-app-surface="mobile"] .m-ai-judgement-summary {
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--app-radius-section) !important;
  background: linear-gradient(135deg, #fff5e8, #fffaf3) !important;
  box-shadow: none !important;
}

body[data-app-surface="mobile"] .m-ai-priority,
body[data-app-surface="mobile"] .m-ai-role-prompts {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--app-radius-section) !important;
  background: #fff !important;
  box-shadow: var(--app-shadow-soft) !important;
}

body[data-app-surface="mobile"] :where(.m-ai-first-open, .m-ai-analysis-scroll) {
  scrollbar-width: none !important;
}

body[data-app-surface="mobile"] :where(.m-ai-first-open, .m-ai-analysis-scroll)::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Domain objects retain grouping but lose the heavy enterprise title treatment. */
body[data-app-surface="mobile"] :where(.m-prg-card, .m-mat-order, .m-saf-task) > :where(h2, h3),
body[data-app-surface="mobile"] :where(.mobile-form-card, .ai-result-v2__overview) h2 {
  color: var(--app-ink) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
}

body[data-app-surface="mobile"] .m-mat-order dl > div,
body[data-app-surface="mobile"] .m-prg-card dl > div {
  border-color: #edf2f6 !important;
}

/* Modals and evidence sheets use the same softer type hierarchy. */
body[data-app-surface="mobile"] :where(.mobile-detail-sheet, .el-overlay--mobile) :where(h2, h3) {
  color: var(--app-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -.012em;
}

body[data-app-surface="mobile"] .ai-result-detail-layer .ai-answer-card > h2 {
  margin: 10px 0 14px !important;
  padding: 12px 14px !important;
  border-radius: 12px;
  color: #17344f !important;
  background: linear-gradient(112deg, #e8f4ff, #f6f9fc) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 26px !important;
}

body[data-app-surface="mobile"] .mobile-trace-detail > h2 {
  font-size: 18px !important;
  line-height: 26px !important;
}

/* Controls are tactile without adopting desktop button geometry. */
body[data-app-surface="mobile"] :where(button, a, select) {
  -webkit-tap-highlight-color: transparent;
}

body[data-app-surface="mobile"] .mobile-content button {
  transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
}

body[data-app-surface="mobile"] .mobile-content button:active {
  opacity: .86;
  transform: scale(.985);
}

@media (max-width: 375px) {
  body[data-app-surface="mobile"] :where(.mobile-page-intro, .m-mat-intro, .m-saf-intro) {
    padding-right: 13px !important;
    padding-left: 15px !important;
  }
  body[data-app-surface="mobile"] .m-ai-focus h2 { font-size: 17px !important; line-height: 24px !important; }
  body[data-app-surface="mobile"] .m-ai-analysis-head { grid-template-columns: minmax(0, 1fr) 90px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-app-surface="mobile"] .mobile-content button { transition: none !important; }
  body[data-app-surface="mobile"] .mobile-content button:active { transform: none !important; }
}

/* Mobile semantics must win even when the prototype sits in a wide desktop canvas. */
body[data-app-surface="mobile"] :where(.el-dialog, .el-drawer, .el-message-box) {
  width: min(392px, 100vw) !important;
  max-width: 100vw !important;
}
body[data-app-surface="mobile"] :where(.el-dialog__header, .el-drawer__header, .el-message-box__header) { min-height: 56px !important; padding: 12px 16px !important; }
body[data-app-surface="mobile"] :where(.el-dialog__body, .el-drawer__body, .el-message-box__content) { min-width: 0; padding: 14px !important; overflow-x: hidden !important; }
body[data-app-surface="mobile"] :where(.el-dialog__footer, .el-drawer__footer, .el-message-box__footer) { padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important; }
body[data-app-surface="mobile"] .event-confirm-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
body[data-app-surface="mobile"] .event-confirm-layout figure { margin: 0 !important; }
body[data-app-surface="mobile"] .event-confirm-layout figure img { width: 100% !important; min-height: 0 !important; max-height: 280px !important; object-fit: contain !important; }
body[data-app-surface="mobile"] .drawer-detail-list { grid-template-columns: minmax(0, 1fr) !important; }
body[data-app-surface="mobile"] .drawer-detail-list > div { grid-template-columns: 92px minmax(0, 1fr) !important; border-right: 0 !important; }
body[data-app-surface="mobile"] .drawer-detail-list :where(dt, dd) { min-width: 0; padding: 10px !important; overflow-wrap: anywhere; }

/* C-end function menus are continuous touch lists, not desktop icon cards. */
body[data-app-surface="mobile"] .mobile-domain-function-grid { display: block !important; overflow: hidden; border-radius: var(--app-radius-section) !important; background: #fff !important; box-shadow: var(--app-shadow-soft) !important; }
body[data-app-surface="mobile"] .mobile-domain-function-grid > :where(a, button) { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) 20px !important; width: 100% !important; min-height: 66px !important; padding: 10px 12px !important; gap: 10px !important; border: 0 !important; border-bottom: 1px solid #e9f0f6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
body[data-app-surface="mobile"] .mobile-domain-function-grid > :where(a, button):last-child { border-bottom: 0 !important; }
body[data-app-surface="mobile"] .mobile-domain-function-grid > :where(a, button) > span { width: 38px !important; height: 38px !important; border-radius: 11px !important; color: #1478d4 !important; background: #eaf4fd !important; box-shadow: none !important; }
body[data-app-surface="mobile"] .mobile-domain-function-grid > :where(a, button) > span .ui-icon { color: #1478d4 !important; }
body[data-app-surface="mobile"] .mobile-domain-function-grid b { font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important; }
body[data-app-surface="mobile"] .mobile-domain-function-grid small { margin-top: 2px !important; font-size: 11px !important; line-height: 16px !important; }

/* Project profile sections need visible rhythm instead of touching card edges. */
body[data-app-surface="mobile"] .mobile-content[data-page-code="M11"] > :where(.mobile-page-intro, .mobile-form-card, .mobile-section) + :where(.mobile-form-card, .mobile-section) {
  margin-top: 12px !important;
}

/* AI judgement owns one bounded scroll region above the persistent composer. */
body[data-app-surface="mobile"] .mobile-content[data-page-code="M71"] {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  box-sizing: border-box;
  overflow: hidden !important;
}
body[data-app-surface="mobile"] .mobile-content[data-page-code="M71"] .m-ai-analysis-scroll {
  flex: 1 1 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  grid-auto-rows: max-content !important;
  padding-bottom: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
body[data-app-surface="mobile"] .mobile-content[data-page-code="M71"] .m-ai-priority {
  min-height: max-content !important;
  overflow: visible !important;
}
body[data-app-surface="mobile"] .mobile-content[data-page-code="M71"] > .m-ai-composer-v5 {
  position: relative !important;
  bottom: auto !important;
  margin-top: 0 !important;
}
body[data-app-surface="mobile"] .mobile-content[data-page-code="M71"] .m-ai-risk-row {
  min-height: 66px !important;
  height: auto !important;
}
body[data-app-surface="mobile"] .mobile-content[data-page-code="M71"] .m-ai-risk-row small {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
}
body[data-app-surface="mobile"] .mobile-content[data-page-code="M71"] .m-ai-risk-row small em {
  min-width: 0;
  overflow-wrap: anywhere;
}
body[data-app-surface="mobile"] .mobile-content[data-page-code="M71"] .m-ai-risk-row > span > b {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
body[data-app-surface="mobile"] .mobile-domain-kpis.is-four article > i .ui-icon {
  width: 20px !important;
  height: 20px !important;
}

/* Status owns a real grid column and cannot cover record content. */
body[data-app-surface="mobile"] .mobile-task-list > :where(a, button) { grid-template-columns: 7px minmax(0, 1fr) max-content !important; align-items: start !important; }
body[data-app-surface="mobile"] .mobile-task-list > :where(a, button) > .el-tag { position: static !important; align-self: start !important; justify-self: end !important; max-width: 76px; margin: 1px 0 0 !important; white-space: nowrap !important; }
body[data-app-surface="mobile"] .mobile-content { overflow-x: hidden !important; overflow-anchor: none; }

/* Link rows and dot-status rows have different DOM shapes; keep their columns explicit. */
body[data-app-surface="mobile"] .mobile-task-list > a {
  grid-template-columns: minmax(0, 1fr) max-content 16px !important;
  align-items: center !important;
}
body[data-app-surface="mobile"] .mobile-task-list > button:has(> i:first-child) {
  grid-template-columns: 7px minmax(0, 1fr) max-content !important;
  align-items: start !important;
}

body[data-app-surface="mobile"] .mobile-upload,
body[data-app-surface="mobile"] .mobile-upload > span {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
body[data-app-surface="mobile"] .mobile-upload small {
  min-width: 0;
  max-width: 56%;
  overflow-wrap: anywhere;
  text-align: right;
}

body[data-app-surface="mobile"] .el-dialog--mobile .el-layer__header { min-height: 56px !important; padding: 12px 16px !important; }
body[data-app-surface="mobile"] .el-dialog--mobile .el-layer__body { min-width: 0; padding: 14px !important; overflow-x: hidden !important; }
body[data-app-surface="mobile"] .el-dialog--mobile .el-layer__footer { padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important; }

body[data-app-surface="mobile"] :where(.mobile-sticky-actions, .mobile-page-actionbar) {
  right: 0 !important;
  left: 0 !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* Manual report history is a separate information group, not part of the permission notice. */
body[data-app-surface="mobile"] .mobile-manual-report-history {
  margin-top: 12px !important;
  margin-bottom: 16px !important;
}

body[data-app-surface="mobile"] .ai-result-v2__trail { overflow: hidden; border-radius: var(--app-radius-section); background: #fff; box-shadow: var(--app-shadow-soft); }
body[data-app-surface="mobile"] .ai-result-v2__trail > header { display: flex; min-height: 44px; padding: 0 14px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf2f6; }
body[data-app-surface="mobile"] .ai-result-v2__trail > header span { color: var(--app-ink); font-size: 13px; font-weight: 600; }
body[data-app-surface="mobile"] .ai-result-v2__trail > header small { font-size: 10px; }
body[data-app-surface="mobile"] .ai-result-v2__trail ol { margin: 0; padding: 8px 14px 10px; list-style: none; }
body[data-app-surface="mobile"] .ai-result-v2__trail li { position: relative; display: grid; grid-template-columns: 14px minmax(0,1fr); min-height: 54px; gap: 9px; }
body[data-app-surface="mobile"] .ai-result-v2__trail li:not(:last-child)::after { position: absolute; top: 18px; bottom: 0; left: 5px; width: 1px; background: #d8e3ec; content: ""; }
body[data-app-surface="mobile"] .ai-result-v2__trail li i { width: 11px; height: 11px; margin-top: 5px; border: 2px solid #b8c7d6; border-radius: 50%; background: #fff; }
body[data-app-surface="mobile"] .ai-result-v2__trail li.is-done i { border-color: #2b91dc; background: #2b91dc; }
body[data-app-surface="mobile"] .ai-result-v2__trail li b,
body[data-app-surface="mobile"] .ai-result-v2__trail li small { display: block; }
body[data-app-surface="mobile"] .ai-result-v2__trail li b { color: var(--app-ink); font-size: 12px; font-weight: 600; line-height: 20px; }
body[data-app-surface="mobile"] .ai-result-v2__trail li small { font-size: 10px; line-height: 16px; }

/* Typography governance: C-end pages use colour, spacing and surfaces before size or weight. */
body[data-app-surface="mobile"] {
  --app-ink: #213850;
  --app-ink-strong: #172f47;
  --app-text: #344b63;
  --app-muted: #657a90;
}

body[data-app-surface="mobile"] :where(.mobile-app, .el-layer, .el-dialog, .el-drawer, .el-message-box) { color: var(--app-text); }
body[data-app-surface="mobile"] .mobile-header strong { color: #fff !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
body[data-app-surface="mobile"] .mobile-content :where(h1, h2) { color: var(--app-ink-strong) !important; font-size: 17px !important; font-weight: 600 !important; line-height: 24px !important; }
body[data-app-surface="mobile"] .mobile-content :where(h3, h4),
body[data-app-surface="mobile"] :where(.el-layer, .el-dialog, .el-drawer, .el-message-box) :where(h2, h3) { color: var(--app-ink) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 22px !important; }
body[data-app-surface="mobile"] :where(.mobile-card-list > article > h3, .mobile-task-list b, .mobile-domain-function-grid b, .mobile-readiness-list b, .mobile-detail-list dd, .cg-card h3, .m-ai-risk-row b, .m-ai-priority b, .mobile-form-card > header b) { color: var(--app-ink) !important; font-weight: 600 !important; }
body[data-app-surface="mobile"] .mobile-card-list > article > h3,
body[data-app-surface="mobile"] .mobile-approval-head h2,
body[data-app-surface="mobile"] :where(.mobile-page-intro, .m-mat-intro, .m-saf-intro) h2,
body[data-app-surface="mobile"] :where(.m-ai-focus, .m-ai-analysis-head) h2,
body[data-app-surface="mobile"] :where(.mobile-form-card, .ai-result-v2__overview) h2,
body[data-app-surface="mobile"] .ai-result-detail-layer .ai-answer-card > h2,
body[data-app-surface="mobile"] .mobile-trace-detail > h2 { font-size: 16px !important; line-height: 23px !important; }
body[data-app-surface="mobile"] :where(.el-layer__header, .el-dialog__header, .el-drawer__header, .el-message-box__header) :where(h2, h3, strong, .el-dialog__title, .el-drawer__title) { color: var(--app-ink-strong) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 23px !important; }

/* Workbench AI entry: prominent once, compact enough for a dense field-work home. */
body[data-app-surface="mobile"] .mobile-ai-companion { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) 32px; min-height: 76px; margin: 12px 0; padding: 8px 10px 8px 8px; align-items: center; gap: 10px; overflow: hidden; border: 1px solid #d8e8f6; border-radius: 16px; color: var(--app-ink); background: linear-gradient(110deg, #e8f5ff 0%, #f3f9ff 54%, #dcedff 100%); box-shadow: 0 8px 22px rgb(38 91 139 / 8%); text-decoration: none; }
body[data-app-surface="mobile"] .mobile-ai-companion__avatar { align-self: end; width: 58px; height: 66px; overflow: hidden; }
body[data-app-surface="mobile"] .mobile-ai-companion__avatar img { display: block; width: 58px; height: 66px; margin: 0; object-fit: contain; object-position: center bottom; }
body[data-app-surface="mobile"] .mobile-ai-companion__copy { min-width: 0; }
body[data-app-surface="mobile"] .mobile-ai-companion__copy b,
body[data-app-surface="mobile"] .mobile-ai-companion__copy small { display: block; }
body[data-app-surface="mobile"] .mobile-ai-companion__copy b { color: #173c68 !important; font-size: 15px; font-weight: 600; line-height: 22px; }
body[data-app-surface="mobile"] .mobile-ai-companion__copy em { margin-left: 5px; color: #617b96; font-size: 12px; font-style: normal; font-weight: 400; }
body[data-app-surface="mobile"] .mobile-ai-companion__copy small { margin-top: 2px; color: #61778e; font-size: 11px; line-height: 17px; }
body[data-app-surface="mobile"] .mobile-ai-companion__arrow { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #fff; background: #2084e3; }
body[data-app-surface="mobile"] .mobile-ai-companion__arrow .ui-icon { width: 17px; height: 17px; }
body[data-app-surface="mobile"] .mobile-ai-companion:active { opacity: .88; }

/* Edge assistant: hidden by default, then runs out and waves on hover, focus or tap. */
body[data-app-surface="mobile"] .mobile-ai-peek {
  position: absolute;
  top: 70%;
  right: 0;
  z-index: 18;
  width: 94px;
  height: 126px;
  transform: translate3d(76px, -50%, 0);
  transition: transform 420ms cubic-bezier(.22, .78, .28, 1);
  will-change: transform;
}

body[data-app-surface="mobile"] .mobile-ai-peek::before {
  position: absolute;
  top: 30px;
  bottom: 22px;
  left: -28px;
  width: 46px;
  content: "";
}

body[data-app-surface="mobile"] .mobile-ai-peek:is(.is-open, :hover, :focus-within) {
  transform: translate3d(0, -50%, 0);
}

body[data-app-surface="mobile"] .mobile-ai-peek__character {
  position: relative;
  display: block;
  width: 94px;
  height: 100px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

body[data-app-surface="mobile"] .mobile-ai-peek__character:active { cursor: grabbing; }
body[data-app-surface="mobile"] .mobile-ai-peek.is-dragging {
  transition: none !important;
  transform: translate3d(0, -50%, 0) !important;
  user-select: none;
}
body[data-app-surface="mobile"] .mobile-ai-peek[data-edge="left"] {
  right: auto;
  left: 0;
  transform: translate3d(-76px, -50%, 0);
}
body[data-app-surface="mobile"] .mobile-ai-peek[data-edge="left"]:is(.is-open, :hover, :focus-within) {
  transform: translate3d(0, -50%, 0);
}
body[data-app-surface="mobile"] .mobile-ai-peek[data-edge="left"]::before { right: -28px; left: auto; }
body[data-app-surface="mobile"] .mobile-ai-peek[data-edge="left"] .mobile-ai-peek__character img { right: auto; left: 3px; }
body[data-app-surface="mobile"] .mobile-ai-peek[data-edge="left"] .mobile-ai-peek__handle {
  right: 0;
  left: auto;
  border-right: 1px solid #b7daf6;
  border-left: 0;
  border-radius: 0 14px 14px 0;
  transform: rotate(180deg);
}
body[data-app-surface="mobile"] .mobile-ai-peek[data-edge="left"]:is(.is-open, :hover, :focus-within) .mobile-ai-peek__handle { transform: translate3d(-8px, 0, 0) rotate(180deg); }
body[data-app-surface="mobile"] .mobile-ai-peek[data-edge="left"] .mobile-ai-peek__hello { right: 4px; left: auto; border-radius: 10px 10px 10px 2px; }
body[data-app-surface="mobile"] .mobile-ai-peek[data-edge="left"] .mobile-ai-peek__cta { right: auto; left: 8px; }

body[data-app-surface="mobile"] .mobile-ai-peek__character img {
  position: absolute;
  right: 3px;
  bottom: 0;
  width: 78px;
  height: 100px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 10px rgb(22 68 108 / 20%));
  transform-origin: 58% 86%;
}

body[data-app-surface="mobile"] .mobile-ai-peek__handle {
  position: absolute;
  top: 35px;
  left: 0;
  display: grid;
  width: 20px;
  height: 42px;
  place-items: center;
  border: 1px solid #b7daf6;
  border-right: 0;
  border-radius: 14px 0 0 14px;
  color: #176eaf;
  background: #eaf6ff;
  box-shadow: -3px 4px 12px rgb(29 80 121 / 12%);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 160ms ease, transform 220ms cubic-bezier(.22, .78, .28, 1);
}

body[data-app-surface="mobile"] .mobile-ai-peek__handle .ui-icon { width: 15px; height: 15px; }
body[data-app-surface="mobile"] .mobile-ai-peek:is(.is-open, :hover, :focus-within) .mobile-ai-peek__handle {
  opacity: 0;
  transform: translate3d(8px, 0, 0);
  pointer-events: none;
}

body[data-app-surface="mobile"] .mobile-ai-peek__hello {
  position: absolute;
  top: 3px;
  left: 4px;
  padding: 4px 7px;
  border: 1px solid #cfe6f8;
  border-radius: 10px 10px 2px 10px;
  color: #165e97;
  background: #fff;
  box-shadow: 0 5px 14px rgb(22 68 108 / 12%);
  font-size: 10px;
  font-weight: 600;
  opacity: 0;
  transform: translate3d(8px, 4px, 0) scale(.86);
  transition: opacity 180ms ease 190ms, transform 260ms cubic-bezier(.22, .78, .28, 1) 170ms;
}

body[data-app-surface="mobile"] .mobile-ai-peek:is(.is-open, :hover, :focus-within) .mobile-ai-peek__hello {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

body[data-app-surface="mobile"] .mobile-ai-peek:is(.is-open, :hover, :focus-within) .mobile-ai-peek__character img {
  animation: mobile-ai-run-wave 760ms cubic-bezier(.22, .78, .28, 1) both;
}

body[data-app-surface="mobile"] .mobile-ai-peek__cta {
  position: absolute;
  right: 8px;
  bottom: 0;
  display: grid;
  width: 58px;
  min-height: 30px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #187ed4;
  box-shadow: 0 6px 14px rgb(24 105 170 / 20%);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transform: translate3d(12px, -4px, 0);
  transition: opacity 180ms ease 210ms, transform 280ms cubic-bezier(.22, .78, .28, 1) 190ms;
  pointer-events: none;
}

body[data-app-surface="mobile"] .mobile-ai-peek:is(.is-open, :hover, :focus-within) .mobile-ai-peek__cta {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

@keyframes mobile-ai-run-wave {
  0% { opacity: .55; transform: translate3d(28px, 8px, 0) rotate(5deg) scale(.92); }
  45% { opacity: 1; transform: translate3d(-3px, -3px, 0) rotate(-4deg) scale(1.03); }
  68% { transform: translate3d(1px, 0, 0) rotate(3deg) scale(1); }
  84% { transform: translate3d(0, -2px, 0) rotate(-2deg) scale(1.01); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

/* One active indicator only: remove the inherited full-width border under the shorter marker. */
body[data-app-surface="mobile"] .mobile-message-tabs button.is-active {
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-surface="mobile"] .mobile-message-tabs button.is-active::after {
  right: 12px !important;
  left: 12px !important;
  height: 2px !important;
  border-radius: 999px 999px 0 0;
}

/* Workbench applications are visible by default; the summary remains a compact collapse control. */
body[data-app-surface="mobile"] .mobile-all-apps > summary > em::before { content: "展开"; }
body[data-app-surface="mobile"] .mobile-all-apps[open] > summary > em::before { content: "收起"; }

/* Message centre: reading status and business type are independent dimensions. */
body[data-app-surface="mobile"] .mobile-message-filters {
  margin: 0 -12px;
  padding: 12px;
  border-bottom: 1px solid #e3eaf2;
  background: #fff;
}

body[data-app-surface="mobile"] .mobile-message-filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

body[data-app-surface="mobile"] .mobile-message-filter-head b {
  color: #20354f;
  font-size: 13px;
  font-weight: 600;
}

body[data-app-surface="mobile"] .mobile-message-filter-head span {
  color: #77879a;
  font-size: 10px;
}

body[data-app-surface="mobile"] .mobile-message-read-filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 9px;
  background: #f0f4f8;
}

body[data-app-surface="mobile"] .mobile-message-read-filter button {
  min-height: 34px;
  border-radius: 7px;
  color: #64758a;
  font-size: 12px;
  background: transparent;
}

body[data-app-surface="mobile"] .mobile-message-read-filter button.is-active {
  color: #126fc0;
  font-weight: 600;
  background: #fff;
  box-shadow: 0 1px 4px rgb(32 53 79 / 10%);
}

body[data-app-surface="mobile"] .mobile-message-read-filter em {
  margin-left: 3px;
  color: inherit;
  font-style: normal;
}

body[data-app-surface="mobile"] .mobile-message-type-filter {
  display: flex;
  overflow-x: auto;
  margin-top: 10px;
  gap: 7px;
  scrollbar-width: none;
}

body[data-app-surface="mobile"] .mobile-message-type-filter::-webkit-scrollbar { display: none; }

body[data-app-surface="mobile"] .mobile-message-type-filter button {
  min-width: max-content;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #dce5ef;
  border-radius: 999px;
  color: #5f7085;
  font-size: 11px;
  background: #fff;
}

body[data-app-surface="mobile"] .mobile-message-type-filter button.is-active {
  border-color: #9dccf5;
  color: #126fc0;
  font-weight: 600;
  background: #edf7ff;
}

body[data-app-surface="mobile"] .mobile-message-list {
  margin: 0 -12px !important;
  gap: 0 !important;
  background: #fff !important;
}

body[data-app-surface="mobile"] .mobile-message-list > button[data-action="open-mobile-message"] {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 82px;
  grid-template-columns: 36px minmax(0, 1fr) 8px;
  align-items: start;
  padding: 12px;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid #e7edf4;
  border-radius: 0;
  color: #20354f;
  text-align: left;
  background: #fff;
}

body[data-app-surface="mobile"] .mobile-message-list > button.is-unread { background: #fbfdff; }
body[data-app-surface="mobile"] .mobile-message-list > button > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: #1687f8; background: #eaf5ff; }
body[data-app-surface="mobile"] .mobile-message-list > button.is-danger > span { color: #cf3b35; background: #fff0ef; }
body[data-app-surface="mobile"] .mobile-message-list > button.is-warning > span { color: #a45b08; background: #fff5e8; }
body[data-app-surface="mobile"] .mobile-message-list > button.is-success > span { color: #13965b; background: #eaf8f1; }
body[data-app-surface="mobile"] .mobile-message-list > button > i { width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: #1687f8; }
body[data-app-surface="mobile"] .mobile-message-list > button header { display: flex; justify-content: space-between; gap: 8px; }
body[data-app-surface="mobile"] .mobile-message-list > button header b { color: #20354f; font-size: 13px; font-weight: 600; }
body[data-app-surface="mobile"] .mobile-message-list > button time { flex: 0 0 auto; color: #77879a; font-size: 10px; }
body[data-app-surface="mobile"] .mobile-message-list > button p { display: -webkit-box; overflow: hidden; margin: 3px 0 4px; color: #52657c; font-size: 11px; line-height: 17px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body[data-app-surface="mobile"] .mobile-message-list > button small { color: #7a8a9d; font-size: 10px; }

body[data-app-surface="mobile"] .mobile-message-detail > header { display: flex; align-items: center; justify-content: space-between; }
body[data-app-surface="mobile"] .mobile-message-detail > header span { padding: 4px 9px; border-radius: 999px; color: #126fc0; font-size: 11px; background: #edf7ff; }
body[data-app-surface="mobile"] .mobile-message-detail > header time { color: #77879a; font-size: 11px; }
body[data-app-surface="mobile"] .mobile-message-detail h2 { margin: 14px 0 7px; color: #20354f; font-size: 17px; font-weight: 600; line-height: 1.4; }
body[data-app-surface="mobile"] .mobile-message-detail__summary { margin: 0; color: #4e6279; font-size: 13px; line-height: 1.7; }
body[data-app-surface="mobile"] .mobile-message-detail dl { margin: 16px 0 0; border-top: 1px solid #e7edf4; }
body[data-app-surface="mobile"] .mobile-message-detail dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); padding: 11px 0; border-bottom: 1px solid #e7edf4; gap: 10px; }
body[data-app-surface="mobile"] .mobile-message-detail dt { color: #77879a; font-size: 12px; }
body[data-app-surface="mobile"] .mobile-message-detail dd { margin: 0; color: #20354f; font-size: 12px; line-height: 1.6; }
body[data-app-surface="mobile"] .mobile-message-detail aside { margin-top: 14px; padding: 11px 12px; border-radius: 9px; color: #52657c; background: #f4f7fa; }
body[data-app-surface="mobile"] .mobile-message-detail aside b { color: #344a63; font-size: 12px; font-weight: 600; }
body[data-app-surface="mobile"] .mobile-message-detail aside p { margin: 4px 0 0; font-size: 11px; line-height: 1.6; }

/* AI assistant is a single, user-triggered conversation. */
body[data-app-surface="mobile"] .mobile-content[data-page-code="M70"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M71"] {
  padding-top: 0;
}

body[data-app-surface="mobile"] .m-ai-first-open {
  padding: 0 0 12px;
  gap: 14px;
}

body[data-app-surface="mobile"] .m-ai-scene-hero {
  position: relative;
  height: 154px;
  margin: 0 -14px;
  overflow: hidden;
  background: #dbe8f5;
}

body[data-app-surface="mobile"] .m-ai-scene-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 42px;
  content: "";
  background: linear-gradient(transparent, rgb(8 50 92 / 22%));
}

body[data-app-surface="mobile"] .m-ai-scene-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-app-surface="mobile"] .m-ai-welcome-message {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  margin: 0 12px;
  padding: 14px;
  gap: 10px;
  border: 1px solid #dbe6f1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgb(24 71 118 / 7%);
}

body[data-app-surface="mobile"] .m-ai-welcome-message .m-ai-avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #fff;
  background: #1687f8;
}

body[data-app-surface="mobile"] .m-ai-welcome-message b {
  color: #20354f;
  font-size: 14px;
  font-weight: 650;
  line-height: 21px;
}

body[data-app-surface="mobile"] .m-ai-welcome-message p {
  margin: 4px 0 0;
  color: #5d7086;
  font-size: 12px;
  line-height: 19px;
}

/* M70 already renders its own scene image in .m-ai-scene-hero.  The inherited
   page-level pseudo hero created a second copy above it and squeezed the
   first-open state into the remaining viewport. */
body[data-app-surface="mobile"] .mobile-content[data-page-code="M70"]::before {
  display: none !important;
  content: none !important;
}

body[data-app-surface="mobile"] .mobile-content[data-page-code="M70"] .m-ai-welcome-message {
  display: block;
  min-width: 0;
}

body[data-app-surface="mobile"] .m-ai-answered {
  padding-top: 14px;
}

/* Message detail is a compact business card, not a raw field dump. */
body[data-app-surface="mobile"] .mobile-message-detail {
  display: grid;
  gap: 12px;
}

body[data-app-surface="mobile"] .mobile-message-detail__lead {
  padding: 15px;
  border: 1px solid #dce7f2;
  border-radius: 14px;
  background: linear-gradient(145deg, #f7fbff, #fff);
}

body[data-app-surface="mobile"] .mobile-message-detail__lead > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body[data-app-surface="mobile"] .mobile-message-detail__lead > header span {
  padding: 4px 9px;
  border-radius: 999px;
  color: #126fc0;
  font-size: 11px;
  background: #eaf5ff;
}

body[data-app-surface="mobile"] .mobile-message-detail__lead > header time {
  color: #77879a;
  font-size: 11px;
}

body[data-app-surface="mobile"] .mobile-message-detail__lead h2 {
  margin: 12px 0 6px;
  color: #172d48;
  font-size: 19px;
  line-height: 1.4;
}

body[data-app-surface="mobile"] .mobile-message-detail__lead p {
  margin: 0;
  color: #50657d;
  font-size: 13px;
  line-height: 1.7;
}

body[data-app-surface="mobile"] .mobile-message-detail__facts {
  padding: 14px;
  border: 1px solid #e3eaf2;
  border-radius: 12px;
  background: #fff;
}

body[data-app-surface="mobile"] .mobile-message-detail__facts h3 {
  margin: 0 0 8px;
  color: #20354f;
  font-size: 13px;
}

body[data-app-surface="mobile"] .mobile-message-detail__facts dl {
  margin: 0;
  border: 0;
}

body[data-app-surface="mobile"] .mobile-message-detail__facts dl > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  padding: 9px 0;
  gap: 8px;
  border-bottom: 1px solid #edf1f5;
}

body[data-app-surface="mobile"] .mobile-message-detail__facts dl > div:last-child { border-bottom: 0; }
body[data-app-surface="mobile"] .mobile-message-detail__facts dt { color: #7a8a9d; font-size: 11px; }
body[data-app-surface="mobile"] .mobile-message-detail__facts dd { margin: 0; color: #263b53; font-size: 12px; line-height: 1.55; }
body[data-app-surface="mobile"] .mobile-message-detail__facts dd span { display: inline-flex; padding: 2px 7px; border-radius: 999px; color: #9a5b12; background: #fff5e8; }

body[data-app-surface="mobile"] .mobile-message-detail__next {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  padding: 13px;
  gap: 10px;
  border-radius: 12px;
  color: #1f4f7d;
  background: #edf7ff;
}

body[data-app-surface="mobile"] .mobile-message-detail__next > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: #1687f8;
}

body[data-app-surface="mobile"] .mobile-message-detail__next b { font-size: 12px; }
body[data-app-surface="mobile"] .mobile-message-detail__next p { margin: 3px 0 0; font-size: 12px; line-height: 1.6; }
body[data-app-surface="mobile"] .mobile-message-detail__notice { margin: 0; padding: 0 2px; color: #7a8a9d; font-size: 10px; line-height: 1.6; background: transparent; }

/* The profile card only identifies the current context; switching lives in one menu item. */
body[data-app-surface="mobile"] .mobile-profile-card {
  grid-template-columns: 56px minmax(0, 1fr) !important;
}

/* Keep the AI answer state in the same visual shell as the first-open recommendation state. */
body[data-app-surface="mobile"] .m-ai-answered {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 8px 12px 6px;
  gap: 6px;
}
body[data-app-surface="mobile"] .m-ai-answered > .m-ai-data-status { flex: none; }
body[data-app-surface="mobile"] .m-ai-answered > .m-ai-chat { padding-inline: 0 !important; }
body[data-app-surface="mobile"] .mobile-content[data-page-code="M70"] .m-ai-chat .is-user > span {
  color: rgb(255 255 255 / 86%) !important;
}
body[data-app-surface="mobile"] .mobile-content[data-page-code="M70"] .m-ai-chat .is-user p {
  color: #fff !important;
}

@media (max-width: 375px) {
  body[data-app-surface="mobile"] .mobile-ai-companion { grid-template-columns: 52px minmax(0, 1fr) 32px; }
  body[data-app-surface="mobile"] .mobile-ai-companion__avatar { width: 52px; }
  body[data-app-surface="mobile"] .mobile-ai-companion__copy em { display: block; margin-left: 0; }
}

@media (hover: none) {
  body[data-app-surface="mobile"] .mobile-ai-peek:hover:not(.is-open):not(:focus-within) { transform: translate3d(76px, -50%, 0); }
  body[data-app-surface="mobile"] .mobile-ai-peek:hover:not(.is-open):not(:focus-within) .mobile-ai-peek__hello,
  body[data-app-surface="mobile"] .mobile-ai-peek:hover:not(.is-open):not(:focus-within) .mobile-ai-peek__cta { opacity: 0; pointer-events: none; transform: translate3d(10px, 4px, 0) scale(.9); }
  body[data-app-surface="mobile"] .mobile-ai-peek:hover:not(.is-open):not(:focus-within) .mobile-ai-peek__character img { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-app-surface="mobile"] :where(.mobile-ai-companion, .mobile-ai-peek, .mobile-ai-peek__handle, .mobile-ai-peek__hello, .mobile-ai-peek__cta) { transition-duration: .01ms !important; }
  body[data-app-surface="mobile"] .mobile-ai-peek__character img { animation: none !important; }
}