/* ============================================================
   Ezylife Mobile — production mount layer (admin)
   Adds only what the static handoff leaves to engineering:
   a full-viewport host, real-device safe-area insets, real
   <img> inside the photo frame, and touch feedback.
   Everything visual lives in ezm-tokens.css + ezm-components.css.
   ============================================================ */

/* Full-viewport host that replaces the desktop shell on phones. */
.ezm-host { position: fixed; inset: 0; z-index: 1000; height: 100dvh; background: var(--canvas); }
.ezm-host > .ezm, .ezm-host .ezm-screen { height: 100%; }

/* Real-device safe areas override the mock's fixed 54/30px values. */
.ezm {
  --safe-top: calc(env(safe-area-inset-top, 0px) + 16px);
  --safe-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
}

/* Real product image fills the photo frame at the designed ratio. */
.ezm-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ezm-photo.has-img { background-image: none; }

/* Touch-first feedback (no hover transforms). */
.ezm button:active, .ezm a:active, .ezm-card.is-tappable:active { opacity: .82; }
.ezm :focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* A tappable card/row shows it. */
.ezm-tap { cursor: pointer; }

/* Search field (live) — matches the inline style used in the Stock mock. */
.ezm-search { flex: 1; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel);
  display: flex; align-items: center; gap: 8px; padding: 0 13px; color: var(--ink-faint); }
.ezm-search input { flex: 1; border: 0; background: none; outline: none; font-family: var(--body); font-size: 14.5px; color: var(--ink); }
.ezm-search input::placeholder { color: var(--ink-faint); }

/* Toast (not in the static kit; spec'd in README §4). */
.ezm-toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 74px); transform: translateX(-50%) translateY(8px);
  z-index: 1200; max-width: 88%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-family: var(--body); font-size: 13.5px;
  display: flex; align-items: center; gap: 9px; opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
  box-shadow: 0 10px 30px rgba(58,50,43,.16); }
.ezm-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.ezm-toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.ezm-toast.is-error::before { background: var(--alert); }

/* Photo code overlay on a real image (ref chip, bottom-left). */
.ezm-photo__code.on-img { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* ============================================================
   Responsive: the .ezm app is mobile-first and scales up to a
   desktop nav-rail layout. Phone = bottom tabs; ≥768px = left rail.
   ============================================================ */
.ezm-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }

@media (min-width: 768px) {
  /* Screen becomes a row: nav rail on the left, content fills the rest. */
  .ezm-screen { flex-direction: row; }

  .ezm-tabbar {
    order: -1; flex-direction: column; width: 232px; height: 100%;
    border-top: 0; border-right: 1px solid var(--line);
    padding: calc(var(--safe-top)) 14px 18px; gap: 4px; justify-content: flex-start;
    background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .ezm-tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 13px; padding: 12px 14px; border-radius: 12px; }
  .ezm-tab.is-active { background: var(--panel-2); }
  .ezm-tab__label { font-size: 14.5px; }
  .ezm-tab__ico { width: 23px; display: inline-flex; justify-content: center; }
  .ezm-tab__badge { position: static; margin-left: auto; }

  /* Comfortable reading column; header + body content centre within the pane. */
  .ezm-header { padding-top: 22px; }
  .ezm-header__row, .ezm-body > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

  /* Catalogue grids fill the extra width instead of staying 2-up. */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)) !important; }
}

@media (min-width: 1280px) {
  .ezm-tabbar { width: 256px; }
  .ezm-header__row, .ezm-body > * { max-width: 1160px; }
}

/* ============================================================
   Inbox cockpit — 1 pane on mobile (switcher), 3 panes ≥1080px.
   ============================================================ */
.ezm-ck { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ezm-ck-switch { flex-shrink: 0; padding: 6px 14px 12px; }
.ezm-ck-panes { flex: 1; min-height: 0; display: flex; position: relative; }
.ezm-ck-pane { display: none; flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
/* Mobile shows exactly one pane at a time, driven by the show-state. The thread
   pane is a flex column when shown, but must stay hidden until show-thread — it
   previously forced display:flex unconditionally, which stacked panes and made
   the inbox unreadable on a phone. */
.ezm-ck.show-list .ezm-ck-list,
.ezm-ck.show-context .ezm-ck-context { display: block; }

.ezm-ck-row { display: flex; gap: 12px; padding: 13px 6px; }
.ezm-ck-row.is-active { background: var(--panel-2); border-radius: 12px; }

.ezm-ck-thread { flex-direction: column; }
.ezm-ck.show-thread .ezm-ck-thread { display: flex; }

/* Conversation-header tabs: Back / Details / Commands are mobile-only; the
   inline desktop actions appear only when all three panes are visible (≥1080). */
.ezm-ck-mob { display: inline-flex; gap: 7px; align-items: center; }
.ezm-ck-desk { display: none; gap: 7px; align-items: center; }

.ezm-ck-thead { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ezm-ck-tscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }
.ezm-ck-draft { width: 100%; min-height: 130px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--panel); padding: 13px; font-family: var(--body); font-size: 14.5px; color: var(--ink); line-height: 1.5; resize: vertical; }
.ezm-ck-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ezm-ck-kv span { color: var(--ink-faint); }
.ezm-ck-kv strong { font-weight: 500; color: var(--ink); }

@media (min-width: 1080px) {
  /* Desktop = all three panes always visible, regardless of show-state. */
  .ezm-ck-switch { display: none; }
  .ezm-ck-mob { display: none; }
  .ezm-ck-desk { display: inline-flex; }
  .ezm-ck-list { display: block; flex: 0 0 320px; width: 320px; border-right: 1px solid var(--line); }
  .ezm-ck-thread { display: flex; flex: 1; }
  .ezm-ck-context { display: block; flex: 0 0 300px; width: 300px; border-left: 1px solid var(--line); }
  /* the cockpit fills the whole content pane, no centring cap */
  .ezm-ck { max-width: none; }
}

/* ---- Cockpit: thread bubbles + composer + context detail ---- */
.ezm-ck-day { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 0; }
.ezm-ck-msg { max-width: 78%; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.ezm-ck-msg.them { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.ezm-ck-msg.us { align-self: flex-end; background: var(--ink); color: var(--canvas); border-bottom-right-radius: 3px; }
.ezm-ck-mt { font-size: 10px; color: var(--ink-faint); margin-top: 5px; }
.ezm-ck-msg.us .ezm-ck-mt { color: rgba(255,255,255,.6); }
.ezm-ck-composer { flex-shrink: 0; border-top: 1px solid var(--line); padding: 14px 18px var(--safe-bottom); background: var(--canvas); }
.ezm-ck-composer .ezm-ck-draft { min-height: 84px; }
.ezm-ck-cacts { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.ezm-ck-card { border: 1px solid var(--line); border-radius: 12px; padding: 15px; margin-bottom: 16px; background: var(--panel); }
.ezm-ck-lab { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.ezm-ck-cname { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ezm-ck-tier { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--gold); font-weight: 600; flex-shrink: 0; }
.ezm-ck-crow { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ezm-ck-crow:last-child { border-bottom: 0; }
.ezm-ck-crow .k { color: var(--ink-faint); } .ezm-ck-crow .v { font-weight: 500; text-align: right; }
.ezm-ck-want { background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 10px; padding: 13px; margin-bottom: 16px; }
.ezm-ck-wit { font-family: var(--display); font-size: 16px; font-weight: 500; margin-bottom: 3px; }
.ezm-ck-wsp { font-size: 12px; color: var(--ink-soft); }
.ezm-ck-match { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ezm-ck-match:last-child { border-bottom: 0; }
.ezm-ck-sw { width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0; background: var(--photo); overflow: hidden; }
.ezm-ck-send { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; border: 1px solid var(--ink); background: none; cursor: pointer; border-radius: 6px; color: var(--ink); flex-shrink: 0; }
.ezm-ck-send:hover { background: var(--ink); color: var(--canvas); }
.ezm-ck-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ezm-ck-qa button { font-size: 11.5px; padding: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; border-radius: 8px; color: var(--ink); }
.ezm-ck-qa button:hover { border-color: var(--gold-line); }
.ezm-ck-note { font-size: 12.5px; color: var(--ink); background: var(--gold-soft); border-left: 2px solid var(--gold); padding: 10px 12px; line-height: 1.5; }
.ezm-ck-noteedit { width: 100%; min-height: 84px; resize: vertical; font-family: var(--body); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); border-left: 2px solid var(--gold); }
.ezm-ck-noteedit:focus { outline: 0; border-color: var(--gold-line); }