/* FBR agent app, built to docs/design/spec.md ("Mixed", approved Nov 5 2026). Values below are the spec's. */
:root {
  --navy-deep: #0D2745; --navy-panel: #16305F; --navy-divider: #24406E; --navy: #1B315E;
  --gold: #C9A961; --gold-on-navy: #D3BE7B; --gold-on-light: #A6843B;
  --page: #F4F6F8; --card: #FFFFFF; --divider: #E6EAF0;
  --text: #14213D; --text-2: #5B6577; --muted: #7A8496;
  --on-navy: #FFFFFF; --on-navy-2: #AEB9CC; --on-navy-3: #DCE3EE;
  --up: #2E9E6A; --up-navy: #7FD3A8; --stop: #B4432F; --stop-navy: #F0A89A;
  --wa-bg: #EFEAE2; --wa-out: #D9FDD3; --wa-meta: #667781;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--page); color: var(--text); font: 400 15px/1.45 'Nunito Sans', system-ui, sans-serif; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.app { max-width: 430px; margin: 0 auto; min-height: 100vh; padding-bottom: 148px; position: relative; }

/* Navy header block with rounded bottom corners (28 px) */
.hero { background: var(--navy-deep); color: var(--on-navy); border-radius: 0 0 28px 28px; padding: 20px 20px 22px; }
.hero .top { display: flex; align-items: center; justify-content: space-between; color: var(--on-navy-2); font-size: 13px; }
.hero h1 { font: 300 28px/1.15 'Outfit', sans-serif; margin: 14px 0 4px; letter-spacing: 0; }
.hero p.lead { color: var(--on-navy-3); font-size: 14px; }
.gold { color: var(--gold-on-navy); font-weight: 400; }
.light .gold, h2 .gold { color: var(--gold-on-light); font-weight: 500; }
.avatar-n { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 400 15px 'Outfit', sans-serif; flex: none; }
.hero .avatar-n { background: var(--navy-panel); }
.sample { font-size: 11px; color: var(--on-navy-2); margin-left: 6px; }
.light .sample, .card .sample { color: var(--muted); }

/* Story circles, Instagram style, in the navy header: gold ring when new */
.stories { display: flex; gap: 14px; overflow-x: auto; margin: 18px -20px 0; padding: 0 20px 2px; scrollbar-width: none; }
.story { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 64px; }
.story .ring { width: 62px; height: 62px; border-radius: 50%; padding: 2.5px; background: var(--navy-divider); }
.story.new .ring { background: var(--gold); }
.story .face { width: 100%; height: 100%; border-radius: 50%; background: var(--navy-panel); border: 2.5px solid var(--navy-deep); display: grid; place-items: center; color: var(--on-navy-3); }
.story .face b { font: 400 18px 'Outfit', sans-serif; color: #fff; }
.story span { font-size: 11.5px; color: var(--on-navy-3); text-align: center; line-height: 1.2; }

/* Numbers in the header */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; background: var(--navy-panel); border-radius: 16px; }
.numbers div { padding: 12px 6px; text-align: center; }
.numbers div + div { border-left: 1px solid var(--navy-divider); }
.numbers b { display: block; font: 400 22px 'Outfit', sans-serif; color: #fff; }
.numbers span { font-size: 11.5px; color: var(--on-navy-2); }

/* Light page below */
.section { padding: 22px 16px 0; }
h2 { font: 300 21px 'Outfit', sans-serif; color: var(--text); margin: 0 4px 12px; }
h2 small { font: 400 13px 'Nunito Sans', sans-serif; color: var(--muted); margin-left: 6px; }
.card { background: var(--card); border-radius: 16px; overflow: hidden; }

/* Revolut-style list rows */
.row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%; text-align: left; }
.row + .row { border-top: 1px solid var(--divider); }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t span { display: block; color: var(--text-2); font-size: 13px; }
.row .v { color: var(--text); font: 400 15px 'Outfit', sans-serif; }
.chev { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); flex: none; }
.initials { width: 40px; height: 40px; border-radius: 50%; background: var(--page); color: var(--navy); display: grid; place-items: center; font: 400 15px 'Outfit', sans-serif; flex: none; }
.pill { font-size: 12px; font-weight: 700; color: var(--navy); background: var(--page); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pill.risk { color: var(--stop); }
.pill.up { color: var(--up); }

/* Client and listing cards, Airbnb style: photo area on top */
.cards { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.pcard { flex: none; width: 236px; background: var(--card); border-radius: 16px; overflow: hidden; text-align: left; }
.pcard .photo { height: 118px; background: var(--navy-panel) center/cover no-repeat; position: relative; display: grid; place-items: center; color: var(--on-navy-2); font-size: 12px; }
.pcard .photo .initials { width: 56px; height: 56px; font-size: 20px; background: var(--navy-deep); color: var(--gold-on-navy); }
.pcard .photo .pill { position: absolute; top: 10px; left: 10px; background: #fff; }
.pcard .body { padding: 12px 14px 14px; }
.pcard .body b { display: block; font-weight: 700; }
.pcard .body span { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; }

/* Round action buttons, Revolut style: 52 px circles, label under */
.actions { display: flex; justify-content: space-between; padding: 18px 8px 4px; }
.action { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--on-navy-3); width: 64px; }
.light .action { color: var(--text-2); }
.action .circle { width: 52px; height: 52px; border-radius: 50%; background: var(--navy-panel); display: grid; place-items: center; color: #fff; }
.light .action .circle { background: var(--card); color: var(--navy); }

/* Step tracker, Auto Mercado style: Drafted, You approve, Sent */
.steps { display: flex; align-items: flex-start; padding: 16px 8px 4px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); position: relative; text-align: center; }
.step::before { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--divider); z-index: 0; }
.step:first-child::before { display: none; }
.step .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 2px solid var(--divider); z-index: 1; display: grid; place-items: center; }
.step.done .dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.step.done::before, .step.now::before { background: var(--navy); }
.step.now .dot { border-color: var(--gold); background: #fff; }
.step.now .dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.step.done, .step.now { color: var(--text); font-weight: 700; }

/* WhatsApp preview, light WhatsApp colors */
.wa { background: var(--wa-bg); border-radius: 16px; padding: 14px 12px; }
.wa .who { font-size: 12px; color: var(--wa-meta); text-align: center; margin-bottom: 10px; }
.wa .bubble { margin-left: auto; max-width: 88%; background: var(--wa-out); border-radius: 10px 0 10px 10px; padding: 7px 9px 5px; font: 400 14.5px/1.4 -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #111B21; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 0.5px rgba(11,20,26,.13); }
.wa .bubble .meta { display: block; text-align: right; font-size: 11px; color: var(--wa-meta); margin-top: 2px; }
.reason { color: var(--text-2); font-size: 13px; padding: 12px 4px 0; }

/* Buttons */
.primary { display: block; width: 100%; background: var(--navy-deep); color: #fff; border-radius: 999px; padding: 15px 20px; font-weight: 700; font-size: 16px; text-align: center; }
.primary[disabled] { opacity: .5; }
.textbtns { display: flex; justify-content: center; gap: 36px; padding: 14px 0 0; }
.textbtn { color: var(--navy); font-weight: 700; }
.textbtn.stop { color: var(--stop); }
.note { text-align: center; color: var(--muted); font-size: 12.5px; padding: 10px 12px 0; }
textarea.edit { width: 100%; min-height: 150px; border: 0; border-radius: 12px; padding: 12px; font: 400 14.5px/1.4 'Nunito Sans', sans-serif; background: #fff; color: var(--text); }
.empty { padding: 28px 18px; text-align: center; color: var(--text-2); }

/* Message Noelle bar: white pill, navy N avatar, gold mic button */
.noelle-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 68px; width: min(398px, calc(100% - 32px)); background: #fff; border-radius: 999px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; box-shadow: 0 2px 10px rgba(13,39,69,.10); z-index: 5; }
.noelle-bar input { flex: 1; border: 0; outline: 0; font: 400 15px 'Nunito Sans', sans-serif; color: var(--text); background: transparent; min-width: 0; }
.noelle-bar input::placeholder { color: var(--muted); }
.mic { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--navy-deep); display: grid; place-items: center; flex: none; }

/* Bottom tab bar: plain white bar, top divider, 4 tabs, active navy and bold */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--divider); display: flex; justify-content: center; z-index: 6; padding-bottom: env(safe-area-inset-bottom); }
.tabs .in { display: flex; width: 100%; max-width: 430px; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 10px; font-size: 11.5px; color: var(--muted); }
.tab.on { color: var(--navy); font-weight: 700; }

/* Noelle chat */
.chat { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 84%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; white-space: pre-wrap; }
.msg.me { margin-left: auto; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.msg.noelle { background: #fff; color: var(--text); border-bottom-left-radius: 4px; }
.msg .tag { display: block; font-size: 11.5px; font-weight: 700; color: var(--gold-on-light); margin-bottom: 3px; }
.msg.noelle .steps { padding: 10px 0 2px; }

/* Sign-in */
.signin { padding: 22px 16px; }
.field { display: block; width: 100%; background: #fff; border: 0; border-radius: 14px; padding: 14px 16px; font: 400 16px 'Nunito Sans', sans-serif; color: var(--text); margin: 10px 0 14px; }
.error { color: var(--stop); font-size: 13px; padding: 6px 4px; }
.weeklabel { margin-top: 8px; font-size: 12px; color: var(--on-navy-2); }
.gap { height: 16px; }
.primary.stop { background: var(--stop); }
.back { color: var(--on-navy-2); }
.note.top { padding: 0 0 10px; }
.pcard { display: flex; flex-direction: column; justify-content: flex-start; align-self: flex-start; }
.cards { align-items: flex-start; }