:root{
  --teal-900:#002028; --teal-800:#00323D; --teal-700:#004D5C; --teal-600:#0A6989; --aqua:#13707F; --aqua-200:#9AD7E0;
  --sand:#EFE8DC; --paper:#FAF8F5; --ink:#10262C; --mute:#5E7176; --line:#E3DDD2;
  --mine:#D6F0EA; --theirs:#FFFFFF; --sys:#FFF6D9;
  --open:#0A6989; --need:#B26A00; --resolved:#1E8E5A; --closed:#6E7F82;
  --hdr:58px; --safe-b:env(safe-area-inset-bottom); --safe-t:env(safe-area-inset-top);
  --serif:'Cormorant Garamond', Georgia, serif; --sans:'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; margin:0}
body{font-family:var(--sans); color:var(--ink); background:var(--teal-900); font-size:16px; -webkit-font-smoothing:antialiased; overscroll-behavior:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
input,textarea,select{font:inherit; color:inherit}
img{display:block; max-width:100%}
.app{height:100dvh; max-width:720px; margin:0 auto; background:var(--paper); position:relative; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 0 40px rgba(0,0,0,.25)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* boot */
.boot{flex:1; display:grid; place-content:center; justify-items:center; gap:14px; background:var(--teal-800); color:#fff; font-family:var(--serif); font-size:1.3rem; letter-spacing:.06em}
.boot img{width:74px; animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.07); opacity:.8}}

/* ---------- login ---------- */
.login{flex:1; display:flex; flex-direction:column; background:linear-gradient(170deg,var(--teal-700),var(--teal-900) 70%); color:#fff; padding:calc(40px + var(--safe-t)) 26px calc(24px + var(--safe-b)); overflow-y:auto}
.login .mark{width:84px; margin:4vh auto 14px}
.login h1{font-family:var(--serif); font-weight:500; text-align:center; font-size:2rem; letter-spacing:.14em; text-transform:uppercase; margin:0}
.login .sub{text-align:center; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; opacity:.75; margin:6px 0 0}
.card{background:#fff; color:var(--ink); border-radius:16px; padding:24px 20px; margin:6vh auto 0; width:100%; max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,.25)}
.card h2{font-family:var(--serif); font-weight:500; font-size:1.55rem; margin:0 0 4px}
.card p{margin:0 0 18px; color:var(--mute); font-size:.92rem; line-height:1.5}
.phone{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .2s}
.phone:focus-within{border-color:var(--teal-700)}
.phone span{padding:0 12px; font-weight:700; color:var(--mute); border-right:1px solid var(--line); line-height:52px}
.phone input{flex:1; border:0; outline:0; padding:0 14px; height:52px; font-size:1.15rem; letter-spacing:.06em; min-width:0; background:transparent}
.otp{width:100%; height:58px; border:1.5px solid var(--line); border-radius:12px; text-align:center; font-size:1.6rem; letter-spacing:.5em; padding-left:.5em; outline:0}
.otp:focus{border-color:var(--teal-700)}
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:52px; border-radius:12px; background:var(--teal-700); color:#fff; font-weight:700; letter-spacing:.06em; margin-top:16px; transition:background .2s, opacity .2s}
.btn:active{background:var(--teal-800)}
.btn[disabled]{opacity:.55; pointer-events:none}
.btn.ghost{background:transparent; color:var(--teal-700); border:1.5px solid var(--line)}
.link{display:block; margin:14px auto 0; color:var(--teal-700); font-size:.9rem; font-weight:700; text-align:center; padding:8px}
.err{color:#B4472F; font-size:.88rem; margin-top:10px; min-height:1.2em}
.foot-note{margin-top:auto; padding-top:28px; text-align:center; font-size:.78rem; opacity:.6}
.team{color:#fff; opacity:.75; font-size:.82rem; text-decoration:underline; margin-top:10px}

/* ---------- top bar ---------- */
.bar{height:calc(var(--hdr) + var(--safe-t)); padding-top:var(--safe-t); background:var(--teal-800); color:#fff; display:flex; align-items:center; gap:8px; padding-inline:8px 10px; flex:none; position:relative; z-index:3}
.bar .icon{width:44px; height:44px; display:grid; place-items:center; border-radius:50%}
.bar .icon:active{background:rgba(255,255,255,.12)}
.bar .icon svg{width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bar .brand{display:flex; align-items:center; gap:10px; flex:1; min-width:0; padding-left:6px}
.bar .brand img{width:34px}
.bar .t{min-width:0; flex:1}
.bar .t b{display:block; font-family:var(--serif); font-weight:500; font-size:1.22rem; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.15}
.bar .t small{display:block; font-size:.74rem; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.menu{position:fixed; right:max(8px, calc((100vw - 720px) / 2 + 8px)); top:calc(var(--hdr) + var(--safe-t) - 6px); background:#fff; color:var(--ink); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.22); min-width:200px; padding:6px; z-index:20}
.menu button{display:block; width:100%; text-align:left; padding:12px 14px; border-radius:8px; font-size:.95rem}
.menu button:active{background:var(--sand)}

/* ---------- tabs ---------- */
.tabs{display:flex; background:var(--teal-800); flex:none; overflow-x:auto; scrollbar-width:none; position:relative; z-index:2}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto; color:rgba(255,255,255,.66); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:12px 12px 13px; border-bottom:3px solid transparent; white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:6px}
.tabs button[aria-selected="true"]{color:#fff; border-bottom-color:var(--aqua-200)}
.tabs .n{min-width:20px; height:20px; border-radius:10px; background:rgba(255,255,255,.18); font-size:.7rem; display:grid; place-items:center; padding:0 6px; letter-spacing:0}
.tabs button[aria-selected="true"] .n{background:var(--aqua-200); color:var(--teal-900)}
.tabs .n.alert{background:#F2A93B; color:#2b1a00}

/* ---------- list ---------- */
.list{flex:1; overflow-y:auto; background:#fff; padding-bottom:calc(96px + var(--safe-b))}
.row{display:flex; gap:12px; align-items:center; padding:10px 14px; width:100%; text-align:left; position:relative}
.row:active{background:#F4F1EB}
.row + .row .main{border-top:1px solid #EFEBE4}
.av{width:52px; height:52px; border-radius:50%; flex:none; overflow:hidden; background:var(--sand); display:grid; place-items:center}
.av img{width:100%; height:100%; object-fit:cover}
.av svg{width:24px; height:24px; stroke:var(--teal-700); fill:none; stroke-width:1.8}
.main{flex:1; min-width:0; padding:4px 0 10px}
.r1{display:flex; align-items:baseline; gap:8px}
.r1 b{flex:1; min-width:0; font-weight:700; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.r1 time{font-size:.74rem; color:var(--mute); flex:none}
.row.unread .r1 time{color:var(--resolved); font-weight:700}
.r2{display:flex; align-items:center; gap:8px; margin-top:3px}
.r2 span.p{flex:1; min-width:0; color:var(--mute); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dot{width:20px; height:20px; border-radius:50%; background:var(--resolved); color:#fff; font-size:.68rem; font-weight:700; display:grid; place-items:center; flex:none}
.num{font-size:.72rem; color:var(--mute); font-weight:700; letter-spacing:.04em}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; flex:none; white-space:nowrap}
.chip::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.open{color:var(--open); background:#E3F1F6}
.chip.need_input{color:var(--need); background:#FFF0D9}
.chip.resolved{color:var(--resolved); background:#E2F4EA}
.chip.closed{color:var(--closed); background:#ECEFEF}
.empty{padding:70px 30px; text-align:center; color:var(--mute)}
.empty img{width:70px; margin:0 auto 16px; opacity:.55}
.empty b{display:block; color:var(--ink); font-family:var(--serif); font-size:1.4rem; font-weight:500; margin-bottom:6px}
.fab{position:absolute; right:18px; bottom:calc(20px + var(--safe-b)); height:56px; border-radius:18px; background:var(--teal-700); color:#fff; display:flex; align-items:center; gap:8px; padding:0 20px 0 16px; font-weight:700; box-shadow:0 10px 26px rgba(0,50,61,.35); z-index:4}
.fab svg{width:24px; height:24px; stroke:#fff; stroke-width:2.2; fill:none}
.fab:active{transform:scale(.97)}
.hello{padding:14px 16px 10px; background:#F7F4EE; border-bottom:1px solid #EFEBE4; font-size:.9rem; color:var(--mute); line-height:1.45}
.hello b{color:var(--ink)}

/* ---------- chat ---------- */
.chat{flex:1; overflow-y:auto; background-color:#ECE5DA;
  background-image:radial-gradient(rgba(0,77,92,.06) 1.2px, transparent 1.3px), radial-gradient(rgba(0,77,92,.04) 1.2px, transparent 1.3px);
  background-size:26px 26px, 26px 26px; background-position:0 0, 13px 13px; padding:10px 10px 14px}
.day{display:flex; justify-content:center; margin:12px 0 8px; position:sticky; top:4px; z-index:1}
.day span{background:#FFFFFFE6; color:var(--mute); font-size:.74rem; font-weight:700; padding:5px 12px; border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.06)}
.msg{display:flex; margin:3px 0}
.msg.me{justify-content:flex-end}
.bub{max-width:min(82%, 460px); background:var(--theirs); border-radius:12px; padding:6px 8px 6px 10px; box-shadow:0 1px 1px rgba(0,0,0,.09); position:relative; overflow-wrap:anywhere}
.msg.me .bub{background:var(--mine)}
.msg.first:not(.me) .bub{border-top-left-radius:4px}
.msg.first.me .bub{border-top-right-radius:4px}
.who{font-size:.78rem; font-weight:700; color:var(--teal-600); margin-bottom:2px}
.who.client{color:#A35A00}
.txt{white-space:pre-wrap; font-size:.96rem; line-height:1.42}
.meta{float:right; margin:6px 0 -2px 10px; font-size:.68rem; color:var(--mute); display:flex; gap:4px; align-items:center}
.meta .via{font-weight:700; color:#5E9C6E}
.imgs{display:grid; gap:3px; margin:-2px -4px 4px -6px; border-radius:9px; overflow:hidden}
.imgs.n2,.imgs.n3,.imgs.n4{grid-template-columns:1fr 1fr}
.imgs button{display:block; background:#d9d2c6; position:relative; overflow:hidden; min-height:80px}
.imgs img{width:100%; height:100%; object-fit:cover; max-height:360px}
.imgs.n1 img{max-height:420px; object-fit:contain; background:#d9d2c6}
.imgs .more{position:absolute; inset:0; background:rgba(0,0,0,.45); color:#fff; display:grid; place-items:center; font-size:1.4rem; font-weight:700}
.sys{display:flex; justify-content:center; margin:10px 0}
.sys span{background:var(--sys); color:#5A4A1E; font-size:.78rem; padding:6px 12px; border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.06); text-align:center; max-width:88%; line-height:1.4}
.sys span b{text-transform:uppercase; letter-spacing:.05em}
.link-card{display:flex; align-items:center; gap:8px; margin:4px 0 2px; padding:8px 10px; background:rgba(0,77,92,.07); border-radius:8px; color:var(--teal-700); font-size:.86rem; font-weight:700; text-decoration:none}
.link-card svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; flex:none}

/* action banner (resolved / need input) */
.act{flex:none; background:#fff; border-top:1px solid var(--line); padding:12px 12px calc(12px + var(--safe-b))}
.act p{margin:0 0 10px; font-size:.9rem; line-height:1.45; color:var(--ink)}
.act .two{display:flex; gap:10px}
.act .two .btn{margin:0; height:46px}
.act .btn.ok{background:var(--resolved)}
.adminbar{flex:none; display:flex; gap:8px; align-items:center; padding:8px 10px; background:#F7F4EE; border-top:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.adminbar span{font-size:.72rem; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.06em; flex:none}
.adminbar button{flex:none; border:1.5px solid var(--line); border-radius:999px; padding:6px 12px; font-size:.78rem; font-weight:700; background:#fff}
.adminbar button[aria-pressed="true"]{border-color:currentColor}
.adminbar button.open{color:var(--open)} .adminbar button.need_input{color:var(--need)} .adminbar button.resolved{color:var(--resolved)} .adminbar button.closed{color:var(--closed)}
.adminbar label{flex:none; display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:var(--mute); padding-left:6px}

/* composer */
.composer{flex:none; background:#F0EBE3; padding:8px 8px calc(8px + var(--safe-b)); display:flex; align-items:flex-end; gap:6px}
.composer .box{flex:1; background:#fff; border-radius:24px; display:flex; align-items:flex-end; min-height:48px; padding:0 4px 0 14px; box-shadow:0 1px 1px rgba(0,0,0,.06)}
.composer textarea{flex:1; border:0; outline:0; resize:none; background:transparent; font-size:1rem; line-height:1.35; padding:13px 0; max-height:140px; min-width:0}
.composer .att{width:42px; height:48px; display:grid; place-items:center; flex:none; color:var(--mute)}
.composer .att svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.send{width:48px; height:48px; border-radius:50%; background:var(--teal-700); display:grid; place-items:center; flex:none; box-shadow:0 2px 6px rgba(0,50,61,.3)}
.send svg{width:22px; height:22px; fill:#fff; margin-left:3px}
.send[disabled]{opacity:.5}
.tray{flex:none; display:flex; gap:8px; padding:8px 10px 0; background:#F0EBE3; overflow-x:auto}
.tray .t{position:relative; width:68px; height:68px; border-radius:10px; overflow:hidden; flex:none; background:#ddd}
.tray .t img{width:100%; height:100%; object-fit:cover}
.tray .t button{position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:14px; line-height:22px}
.hint{margin:16px auto; max-width:340px; background:#FFFFFFEE; border-radius:12px; padding:14px 16px; text-align:center; font-size:.9rem; color:var(--mute); line-height:1.5; box-shadow:0 1px 2px rgba(0,0,0,.06)}
.hint b{display:block; color:var(--ink); font-family:var(--serif); font-size:1.25rem; font-weight:500; margin-bottom:4px}

/* lightbox */
.lb{position:fixed; inset:0; background:rgba(0,0,0,.94); z-index:50; display:flex; flex-direction:column}
.lb .top{display:flex; justify-content:flex-end; padding:calc(8px + var(--safe-t)) 8px 8px}
.lb .top button{width:48px; height:48px; border-radius:50%; color:#fff; font-size:2rem; line-height:1}
.lb .stage{flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; touch-action:pan-x pan-y pinch-zoom}
.lb .stage img{max-width:100%; max-height:100%; object-fit:contain}
.lb .stage.zoom{display:block}
.lb .stage.zoom img{max-width:none; max-height:none; width:220%}
.lb .cnt{color:#fff; text-align:center; font-size:.8rem; opacity:.7; padding:8px 0 calc(14px + var(--safe-b))}

.toast{position:fixed; left:50%; bottom:calc(90px + var(--safe-b)); transform:translateX(-50%); background:rgba(16,38,44,.92); color:#fff; padding:10px 16px; border-radius:10px; font-size:.88rem; z-index:60; max-width:90vw; text-align:center}
.spin{width:22px; height:22px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{padding:40px; display:grid; place-items:center}
.loading .spin{border-color:rgba(0,77,92,.2); border-top-color:var(--teal-700)}
@media (min-width:721px){ body{padding:0} }