/* ═══════════════════════════════════════════════════════════════
   VIEW: HOME — Zamzam quick entry + expiring quotes rail
   Ported from the prototype: Kimi_Agent_Steelco ai/app/buyer.html
   ═══════════════════════════════════════════════════════════════ */

/* ─── zamzam quick input ─── */
.zamzam-hero{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-flat);padding:20px 24px;margin-bottom:24px;
}
.z-avatar-holder{flex:none;filter:drop-shadow(0 0 14px rgba(49,168,255,.55))}
.z-avatar{
  width:40px;height:40px;flex:none;
  border-radius:50%;
  background:#FFFFFF;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.z-avatar img{width:100%;height:100%;object-fit:cover}
.zamzam-form{flex:1;min-width:min(320px,100%);display:flex;flex-direction:column;align-items:stretch;gap:8px}
.zamzam-input{
  flex:1;display:flex;align-items:center;gap:8px;min-height:52px;
  border:1.5px solid var(--border-strong);border-radius:var(--radius-chip);
  background:var(--bg);padding:6px 8px 6px 18px;padding-inline-start:18px;padding-inline-end:8px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.zamzam-input:focus-within{border-color:var(--glow-blue);box-shadow:0 0 0 3px rgba(49,168,255,.18),0 0 24px rgba(49,168,255,.22)}
.zamzam-input input{
  flex:1;min-width:0;border:none;background:none;min-height:40px;
  font-family:var(--font-body);font-size:.9375rem;color:var(--heading);
}
.zamzam-input input:focus{outline:none}
.zamzam-input input::placeholder{color:var(--caption)}
.z-act{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ai-blue);border:1px solid var(--border);background:var(--surface);
  transition:box-shadow .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.z-act svg{width:20px;height:20px}
/* No always-on glow: #31A8FF glow is restricted to hover/focus/recording only */
.z-act.mic{color:#FFFFFF;background:var(--grad-accent);border:none}
.z-act.mic:hover,.z-act.mic:focus-visible,.z-act.mic.recording{box-shadow:0 0 28px rgba(49,168,255,.65)}
.z-act.photo:hover{border-color:var(--glow-blue);box-shadow:0 0 16px rgba(49,168,255,.30)}
.zamzam-hint{font-size:.75rem;color:var(--caption);width:100%}

/* ─── expiring quotes rail ─── */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,340px);gap:16px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.rail>*{scroll-snap-align:start}
.qmini{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-flat);padding:18px;display:flex;flex-direction:column;gap:10px;
  border-top:3px solid var(--brushed);
}
.qmini.warn{border-top-color:var(--warning)}
.qmini.clickable{cursor:pointer;transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.qmini.clickable:hover{box-shadow:var(--shadow-raised);transform:translateY(-2px)}
.qmini .qm-head{display:flex;align-items:center;gap:8px}
.qmini .qm-ref{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:.875rem;color:var(--heading);direction:ltr}
.qmini .qm-lines{font-size:.8125rem;color:var(--body);line-height:1.6}
.qmini .qm-total{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:1.125rem;color:var(--royal);direction:ltr;text-align:start}
html[data-theme="dark"] .qmini .qm-total{color:var(--heading)}
.qmini .qm-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;border-top:1px dashed var(--border-strong)}