/*
 * LESH mobile experience refinement
 * Shared presentation layer for the WeCom employee app and Sales Assistant.
 * Business markup, state and interactions remain owned by their existing files.
 */

:root {
  --mobile-shell-width: 440px;
  --mobile-ink: #151517;
  --mobile-muted: #707278;
  --mobile-line: #e5e1d8;
  --mobile-surface: #f5f4f0;
  --mobile-card: #fff;
  --mobile-gold: #a98b54;
  --mobile-gold-soft: #f3ede1;
  --mobile-radius: 18px;
  --mobile-shadow: 0 1px 2px rgba(18,18,20,.04), 0 12px 30px rgba(18,18,20,.065);
}

body.wecom-demo,
body.mobile-assistant {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(680px 520px at 50% 8%, rgba(169,139,84,.14), transparent 65%),
    linear-gradient(145deg, #202024, #0d0d0f 70%);
  color: var(--mobile-ink);
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.wecom-demo {
  --wc-blue: #8b7145;
  --wc-blue-dark: #171719;
  --wc-bg: var(--mobile-surface);
  --wc-card: var(--mobile-card);
  --wc-ink: var(--mobile-ink);
  --wc-muted: var(--mobile-muted);
  --wc-line: var(--mobile-line);
  --wc-gold: var(--mobile-gold);
}

.wecom-shell,
.mobile-shell {
  width: min(100%, var(--mobile-shell-width));
  background: var(--mobile-surface);
  box-shadow: 0 30px 90px rgba(0,0,0,.42), 0 4px 18px rgba(0,0,0,.28);
}

.wecom-content,
.mobile-content {
  padding: 16px;
}

.phone-status {
  height: 28px;
  padding: 7px 18px 5px;
  background: #0b0b0c;
  font-weight: 700;
  letter-spacing: .01em;
}

.wecom-header,
.mobile-top {
  border-bottom: 1px solid rgba(205,187,149,.38);
  background:
    radial-gradient(260px 100px at 86% -20%, rgba(169,139,84,.22), transparent 65%),
    linear-gradient(135deg, #0c0c0d, #242321);
}

.wecom-header {
  min-height: 82px;
  padding: 15px 18px;
}

.mobile-assistant .mobile-top {
  padding: 22px 18px 16px;
}

.work-hero,
#assistant-tasks-view .mobile-greeting,
.customer-hero,
.assistant-journey-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(169,139,84,.48);
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(17,17,19,.16);
}

.work-hero {
  min-height: 246px;
  padding: 22px;
  align-items: flex-end;
  background:
    linear-gradient(180deg, rgba(8,8,10,.18) 0%, rgba(8,8,10,.28) 38%, rgba(8,8,10,.9) 100%),
    url("./lexus-rz-hero.jpg") center 42% / cover no-repeat;
}

.work-hero h2 {
  max-width: 270px;
  margin: 9px 0 7px;
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: -.025em;
}

.work-hero p {
  max-width: 285px;
  font-size: 11px;
  line-height: 1.55;
}

.work-score {
  min-width: 78px;
  padding: 12px 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  background: rgba(15,15,17,.48);
  backdrop-filter: blur(12px);
}

.work-metrics {
  position: relative;
  z-index: 2;
  margin: 10px 0 18px;
  padding: 6px;
  gap: 4px;
  border: 1px solid rgba(229,225,216,.9);
  border-radius: 17px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--mobile-shadow);
  backdrop-filter: blur(14px);
}

.work-hero + .wecom-notice:not(.show) + .work-metrics {
  margin: -24px 10px 18px;
}

.work-metrics > div,
.work-metrics > button {
  min-height: 64px;
  padding: 9px 3px;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

.work-metrics > button:active,
.app-grid button:active,
.content-hub-grid button:active,
.priority-followups button:active,
.mobile-task:active {
  transform: scale(.975);
}

.wecom-card,
.mobile-card,
.mobile-task,
.list-card,
.task-list,
.library-list article,
.group-summary > div {
  border-color: var(--mobile-line);
  border-radius: var(--mobile-radius);
  background: var(--mobile-card);
  box-shadow: var(--mobile-shadow);
}

.wecom-card,
.mobile-card,
.mobile-task {
  padding: 16px;
}

.mobile-task {
  position: relative;
  margin-bottom: 12px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.mobile-task.ai {
  border-left: 1px solid var(--mobile-line);
}

.mobile-task.ai::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #cdbb95, var(--mobile-gold));
  box-shadow: 0 0 14px rgba(169,139,84,.26);
}

.mobile-task h3,
.wecom-card h3 {
  font-size: 15px;
  letter-spacing: -.012em;
}

.mobile-task p,
.wecom-card p {
  font-size: 11px;
  line-height: 1.58;
}

.section-title {
  margin: 21px 4px 10px;
  font-size: 15px;
  letter-spacing: -.01em;
}

.priority-followups button,
.content-hub-grid button,
.app-grid button,
.task-list > button,
.chat-list > button {
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.priority-followups button,
.content-hub-grid button,
.app-grid button {
  border-color: var(--mobile-line);
  border-radius: 15px;
  box-shadow: 0 1px 2px rgba(18,18,20,.035);
}

.content-hub-grid {
  gap: 9px;
}

.content-hub-grid button {
  min-height: 78px;
  padding: 12px;
}

.app-grid {
  gap: 8px;
}

.app-grid button {
  min-height: 80px;
}

.app-grid i,
.content-hub-grid i,
.list-icon {
  border-radius: 12px;
}

.view-head {
  margin: -16px -16px 14px;
  padding: 13px 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
}

.view-head h2 {
  font-size: 16px;
  letter-spacing: -.01em;
}

.chat-thread {
  gap: 10px;
}

.message > div,
.chat-sop,
.next-business,
.offer-option,
.inline-editor,
.reminder-picker {
  border-radius: 14px;
}

.message > div {
  padding: 11px 13px;
  box-shadow: 0 2px 8px rgba(18,18,20,.055);
}

.message.mine > div {
  background: #eee4cf;
}

.chat-toolbar {
  padding: 10px 12px;
  border-radius: 17px 17px 0 0;
  box-shadow: 0 -8px 24px rgba(17,17,19,.055);
}

.chat-toolbar input,
.mobile-input,
.inline-editor textarea,
.reminder-picker input,
.next-business select,
.wecom-card select {
  min-height: 44px;
  border-color: #d8d3c9;
  border-radius: 12px;
}

.wecom-btn,
.btn,
.primary,
.secondary,
.danger {
  min-height: 44px;
  border-radius: 13px;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.wecom-btn:active,
.btn:active,
.primary:active,
.secondary:active,
.danger:active {
  transform: translateY(1px) scale(.985);
}

#assistant-tasks-view .mobile-greeting {
  min-height: 252px;
  margin: 8px 0 18px;
  padding: 22px;
  align-items: flex-end;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(8,8,10,.08) 0%, rgba(8,8,10,.24) 38%, rgba(8,8,10,.92) 100%),
    url("./lexus-rz-road-front.jpg") 54% center / cover no-repeat;
}

#assistant-tasks-view .mobile-greeting h2 {
  margin-bottom: 8px;
  color: #fff;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -.035em;
}

#assistant-tasks-view .mobile-greeting p {
  max-width: 280px;
  color: rgba(255,255,255,.76);
  font-size: 11px;
}

#assistant-tasks-view .mobile-count {
  flex: 0 0 auto;
  min-width: 62px;
  border-color: rgba(205,187,149,.7);
  background: rgba(15,15,17,.6);
  backdrop-filter: blur(12px);
}

.mobile-tabs {
  gap: 4px;
  margin-bottom: 16px;
  padding: 5px;
  border: 1px solid #dedad1;
  border-radius: 15px;
  background: #e9e6df;
}

.mobile-tab {
  min-height: 40px;
  border-radius: 11px;
}

.mobile-assistant .mobile-tab.active {
  box-shadow: 0 7px 18px rgba(17,17,19,.18);
}

.customer-hero {
  min-height: 212px;
  padding: 20px;
  align-content: end;
  background:
    linear-gradient(180deg, rgba(8,8,10,.12), rgba(8,8,10,.9)),
    url("./lexus-rz-cockpit.jpg") center / cover no-repeat !important;
}

.assistant-journey-hero {
  min-height: 236px;
  padding: 20px;
  display: grid;
  align-content: end;
  background:
    linear-gradient(180deg, rgba(8,8,10,.1), rgba(8,8,10,.92)),
    url("./lexus-rz-road-rear.jpg") 58% center / cover no-repeat;
}

.nba-card {
  border-color: rgba(169,139,84,.62);
  background: linear-gradient(145deg, #fff, #faf6ed);
}

.nba-card .reason {
  border-radius: 12px;
}

.assistant-journey-step,
.assistant-object-list {
  border-radius: 14px;
}

.assistant-journey-step {
  padding: 13px;
}

.wecom-bottom,
.mobile-bottom {
  width: min(100%, var(--mobile-shell-width));
  min-height: 72px;
  padding: 8px 7px calc(9px + env(safe-area-inset-bottom));
  border-top-color: rgba(215,209,197,.9);
  background: #fcfbf8;
  box-shadow: 0 -10px 28px rgba(17,17,19,.07);
  backdrop-filter: blur(18px);
}

.wecom-bottom button,
.mobile-bottom button,
.mobile-bottom a {
  border-radius: 11px;
}

.wecom-toast,
.mobile-toast {
  width: min(calc(100% - 32px), 408px);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
}

@media (hover: hover) {
  .mobile-task:hover,
  .wecom-card:hover,
  .priority-followups button:hover,
  .content-hub-grid button:hover,
  .app-grid button:hover {
    border-color: rgba(169,139,84,.58);
    box-shadow: 0 2px 4px rgba(18,18,20,.04), 0 16px 34px rgba(18,18,20,.085);
  }
}

@media (min-width: 541px) {
  .wecom-shell,
  .mobile-shell {
    min-height: calc(100vh - 48px);
    margin: 24px auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 42px;
  }

  .phone-status {
    padding-top: 8px;
  }

  .wecom-bottom,
  .mobile-bottom {
    bottom: 24px;
    border-radius: 0 0 41px 41px;
    box-shadow:
      0 -10px 28px rgba(17,17,19,.07),
      0 28px 0 #fcfbf8;
  }

  .wecom-toast,
  .mobile-toast {
    bottom: 108px;
  }
}

@media (max-width: 540px) {
  body.wecom-demo,
  body.mobile-assistant {
    background: var(--mobile-surface);
  }

  .wecom-shell,
  .mobile-shell {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .work-hero,
  #assistant-tasks-view .mobile-greeting {
    min-height: 226px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-task,
  .wecom-btn,
  .btn,
  .priority-followups button,
  .content-hub-grid button,
  .app-grid button {
    transition: none;
  }
}

/* Sales Assistant · customer operations context */
body.mobile-assistant .assistant-why-now {
  margin-top: 13px;
  padding: 12px;
  border: 1px solid #e4ddcf;
  border-radius: 13px;
  background: linear-gradient(145deg, #fbf8f1, #fff);
}

body.mobile-assistant .assistant-why-now-head,
body.mobile-assistant .assistant-ops-identifiers,
body.mobile-assistant .assistant-ops-lines p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.mobile-assistant .assistant-why-now-head strong {
  font-size: 12px;
}

body.mobile-assistant .assistant-why-now-grid,
body.mobile-assistant .assistant-value-summary {
  display: grid;
  gap: 8px;
}

body.mobile-assistant .assistant-why-now-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

body.mobile-assistant .assistant-why-now-grid > span,
body.mobile-assistant .assistant-value-summary > span {
  min-width: 0;
  padding: 9px;
  border-radius: 11px;
  background: #f3f1eb;
}

body.mobile-assistant .assistant-why-now-grid small,
body.mobile-assistant .assistant-value-summary small,
body.mobile-assistant .assistant-ops-identifiers span,
body.mobile-assistant .assistant-ops-lines span {
  display: block;
  color: var(--mobile-muted);
  font-size: 9px;
  line-height: 1.4;
}

body.mobile-assistant .assistant-why-now-grid b {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
}

body.mobile-assistant .assistant-why-now > p,
body.mobile-assistant .assistant-nba-experiment,
body.mobile-assistant .assistant-ops-note,
body.mobile-assistant .assistant-preference-sync {
  margin: 9px 0 0;
  color: var(--mobile-muted);
  font-size: 9px;
  line-height: 1.55;
}

body.mobile-assistant .mobile-task.priority-suppressed::before {
  background: #aaa7a0;
  box-shadow: none;
}

body.mobile-assistant .mobile-task.priority-suppressed .assistant-why-now {
  border-color: #ddd9d1;
  background: #f7f6f3;
}

body.mobile-assistant .assistant-later-card > h3 {
  margin: 0 0 12px;
}

body.mobile-assistant .assistant-later-card .mobile-task {
  margin-bottom: 10px;
  box-shadow: none;
}

body.mobile-assistant .assistant-later-card .mobile-task:last-child {
  margin-bottom: 0;
}

body.mobile-assistant [data-assistant-customer]:focus-visible,
body.mobile-assistant [data-assistant-journey-step]:focus-visible {
  outline: 2px solid var(--mobile-gold);
  outline-offset: 3px;
}

body.mobile-assistant [data-assistant-journey-step][role="link"] {
  cursor: pointer;
}

body.mobile-assistant .assistant-operations-card {
  border-color: rgba(169,139,84,.54);
  background: linear-gradient(145deg, #fff, #faf7f0);
}

body.mobile-assistant .assistant-operations-card h3 {
  margin: 0;
  font-size: 13px;
}

body.mobile-assistant .assistant-ops-identifiers {
  align-items: stretch;
  margin-top: 12px;
}

body.mobile-assistant .assistant-ops-identifiers span {
  flex: 1 1 0;
  padding: 9px;
  border: 1px solid #e6e0d5;
  border-radius: 10px;
  background: rgba(255,255,255,.78);
}

body.mobile-assistant .assistant-ops-identifiers strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--mobile-ink);
  font-size: 10px;
  line-height: 1.35;
}

body.mobile-assistant .assistant-value-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}

body.mobile-assistant .assistant-value-summary b {
  display: block;
  margin: 2px 0;
  color: #826a3f;
  font-size: 18px;
}

body.mobile-assistant .assistant-value-summary em {
  display: block;
  color: var(--mobile-muted);
  font-size: 8px;
  font-style: normal;
  line-height: 1.35;
}

body.mobile-assistant .assistant-ops-lines {
  margin-top: 9px;
  border-top: 1px solid #e8e3da;
}

body.mobile-assistant .assistant-ops-lines p {
  align-items: flex-start;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid #eeeae3;
}

body.mobile-assistant .assistant-ops-lines span {
  flex: 0 0 84px;
}

body.mobile-assistant .assistant-ops-lines strong {
  color: var(--mobile-ink);
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}

body.mobile-assistant .assistant-nba-experiment {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f2ecdf;
}

body.mobile-assistant .assistant-preference-sync {
  display: block;
}

body.mobile-assistant .assistant-preference-sync.synced {
  color: #477653;
}