:root{--bg:#f4f5f7;--card:#fff;--ink:#17202a;--muted:#6b7280;--line:#e5e7eb;--accent:#1f6feb;--accent-ink:#fff;--warn:#b45309;--ok:#15803d;--danger:#b91c1c;--in:#eef2ff;--out:#e7f7ec;--radius:14px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.5}
a{color:var(--accent);text-decoration:none}
button,.btn{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 14px;cursor:pointer}
.btn-primary,button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-sm{padding:4px 10px;font-size:.9rem}
input,select,textarea{font:inherit;width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink)}
textarea{min-height:80px;resize:vertical}
label{display:block;font-size:.9rem;color:var(--muted);margin:10px 0 4px}
.topbar{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px 14px}
.topbar .brand{font-weight:700}
.topbar .spacer{flex:1}
.topbar .user{color:var(--muted);font-size:.9rem}
.wrap{max-width:900px;margin:0 auto;padding:12px}
/* login */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:0 6px 24px rgba(0,0,0,.05)}
.auth-card h1{margin:0 0 4px;font-size:1.4rem}
.auth-card .sub{color:var(--muted);margin:0 0 14px}
.auth-card .actions{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.error{background:#fef2f2;color:var(--danger);border:1px solid #fecaca;border-radius:10px;padding:8px 12px;margin:10px 0}
.notice{background:#f0fdf4;color:var(--ok);border:1px solid #bbf7d0;border-radius:10px;padding:8px 12px;margin:10px 0}
/* lanes */
.lanes{display:flex;gap:6px;margin:8px 0 10px;overflow-x:auto}
.lanes a{white-space:nowrap;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.95rem}
.lanes a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.lanes .count{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.08);font-size:.8rem;margin-inline-start:4px;text-align:center}
.lanes a.active .count{background:rgba(255,255,255,.25)}
.search{margin:6px 0 10px}
/* list */
.list{display:flex;flex-direction:column;gap:8px}
.row{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;color:var(--ink)}
.row.unread{border-inline-start:4px solid var(--accent)}
.row .r1{display:flex;align-items:baseline;gap:8px}
.row .name{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .when{color:var(--muted);font-size:.85rem;white-space:nowrap}
.row .r2{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem;margin-top:2px}
.row .snippet{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#374151}
.chip{display:inline-block;font-size:.75rem;padding:1px 8px;border-radius:999px;background:#eef0f3;color:#374151;white-space:nowrap}
.chip.status-new{background:#dbeafe;color:#1e40af}
.chip.status-attempted{background:#fef3c7;color:#92400e}
.chip.status-in_conversation{background:#e0f2fe;color:#075985}
.chip.status-waiting_customer{background:#f3e8ff;color:#6b21a8}
.chip.status-meeting_set{background:#dcfce7;color:#166534}
.chip.status-proposal_sent{background:#ccfbf1;color:#115e59}
.chip.status-won{background:#bbf7d0;color:#14532d}
.chip.status-not_relevant{background:#e5e7eb;color:#4b5563}
.chip.overdue{background:#fee2e2;color:#991b1b}
.chip.warm{background:#ffedd5;color:#9a3412}
.empty{color:var(--muted);text-align:center;padding:40px 10px}
/* card */
.card-head{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px}
.card-head h1{margin:0;font-size:1.25rem}
.card-head .meta{color:var(--muted);font-size:.9rem;display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:4px}
.card-head .tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.card-head .tools select{width:auto}
.next{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-top:10px}
.next .loc{flex-basis:100%;gap:8px;align-items:end}
.next label{margin:0 0 4px}
.next .grow{flex:1}
.next input[type=date]{width:150px}
.next input[type=time]{width:110px}
@media (max-width:600px){.next{flex-wrap:wrap}.next .grow{flex-basis:100%}}
.timeline{display:flex;flex-direction:column;gap:8px;padding:6px 0 40px}
.msg{max-width:88%;border-radius:14px;padding:8px 12px;background:var(--card);border:1px solid var(--line);white-space:pre-wrap;word-break:break-word}
.msg.in{align-self:flex-start;background:var(--in)}
.msg.out{align-self:flex-end;background:var(--out)}
.msg .m{display:flex;gap:8px;color:var(--muted);font-size:.75rem;margin-top:4px}
.msg.sys{align-self:center;background:transparent;border:none;color:var(--muted);font-size:.85rem;text-align:center;max-width:100%}
.msg.note{align-self:center;background:#fffbeb;border-color:#fde68a;max-width:92%}
.composer{position:fixed;bottom:0;inset-inline:0;background:var(--card);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
.composer .inner{max-width:900px;margin:0 auto;display:flex;gap:8px;align-items:end}
.composer textarea{min-height:44px;max-height:160px}
.composer .ch{display:flex;gap:4px;margin-bottom:6px}
.composer .ch button{padding:3px 10px;font-size:.85rem;border-radius:999px}
.composer .ch button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:.85rem}
@media (max-width:600px){.wrap{padding:8px}.msg{max-width:94%}.card-head .tools select{flex:1}}
/* today */
.sec{font-size:1rem;margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.sec .count{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.08);font-size:.8rem;text-align:center;font-weight:400}
.topbar a.today{color:var(--muted);font-size:.9rem}
.empty.small{padding:14px 10px}
/* opportunities board */
.wrap.wide{max-width:1400px}
.chip.opp{background:#fef9c3;color:#854d0e}
.chip.warn{background:#ffedd5;color:#9a3412}
.chip.today{background:#dbeafe;color:#1e40af}
.topbar .btn .count{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:.75rem;text-align:center}
.hygiene{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;margin:8px 0}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.board .col{min-width:0}
.board .sec{margin:8px 0}
.sec .spacer{flex:1}
.sec .sum{font-weight:400;color:var(--muted);font-size:.9rem}
.sec.won{margin-top:24px}
.row.opp{padding:10px 12px}
.row.opp .r1{display:flex;gap:8px;align-items:baseline;color:var(--ink)}
.row.opp .name{font-weight:600;flex:1;white-space:normal;line-height:1.3}
.ils{color:var(--ok);font-weight:600;white-space:nowrap;font-size:.95rem}
.row.opp .r2{margin-top:6px}
.row.opp .snippet{white-space:normal;overflow:visible;line-height:1.35}
.row.opp .r3{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.row.opp .r3 .spacer{flex:1}
.inline-stage select{width:auto;padding:2px 6px;font-size:.8rem;border-radius:8px}
.oppform{display:flex;gap:6px;align-items:center}
.oppform button.on{background:#fef9c3;border-color:#fde68a}
.won-list .row .r1{display:flex;gap:8px}
@media (max-width:900px){.board{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.board{grid-template-columns:1fr}.wrap.wide{padding:8px}}

/* status filters / settings */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.filters .chip{padding:4px 10px;font-size:.85rem;border:1px solid transparent}
.filters .chip.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.filters .chip b{font-weight:600;opacity:.75}
.chip.fu{background:#e0e7ff;color:#3730a3}
.strow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.strow input{width:auto}
.strow input[type=color]{width:44px;height:36px;padding:2px}
.strow label.inline{display:flex;align-items:center;gap:4px;margin:0;font-size:.9rem}
.strow .spacer{flex:1}

/* card: composer inline under the header, newest first */
.composer.inline{position:static;border:1px solid var(--line);border-radius:var(--radius);margin:0 0 10px;padding:8px 12px}
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0}
#timeline .msg.sys{display:none}
#timeline.show-sys .msg.sys{display:block}

/* task state */
.taskstate{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.taskstate button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.taskstate button.on.st-done{background:var(--ok);border-color:var(--ok)}
.taskstate button.on.st-dropped{background:#6b7280;border-color:#6b7280}
.chip.doing{background:#dbeafe;color:#1e40af}
.inline-done{display:inline}
.inline-done button{padding:1px 8px;font-size:.8rem;border-radius:999px}
.today-actions .list > a.row{margin-bottom:0}
.row-side{display:flex;gap:4px;justify-content:flex-end;margin:-4px 0 4px}
.chip.meeting{background:#dcfce7;color:#166534}
.next select{padding:10px 8px}

/* scheduled sends: the queue above the thread on a lead card */
.sched{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.sched-row{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:#f8fafc}
.sched-row.held,.sched-row.failed{background:#fef2f2;border-color:#fecaca}
.sched-row .s1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sched-row .stext{flex:1;min-width:140px;color:#374151;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched-row .s2{display:flex;gap:6px;margin-top:6px}
.sched-ctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.sched-ctl input[type=datetime-local]{width:auto;padding:3px 6px;font-size:.85rem}

.auth-card .or{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:var(--muted);font-size:.85rem}
.auth-card .or:before,.auth-card .or:after{content:"";flex:1;border-top:1px solid var(--line)}
.auth-card .gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#1f2937;font-weight:500;text-decoration:none}
.auth-card .gbtn:hover{background:#f8fafc}