/* Chat Copilot — design system from Claude Design "Sales Copilot App.html" */
:root{
  --bone:#F1EBE0; --paper:#FBF8F2; --paper-2:#F6F1E8;
  --ink:#3B3630; --ink-soft:#7A7065; --meta:#665D51;
  --line:#D8CEBE; --line-2:#C3B7A3; --line-strong:#A89C86;
  --clay:#BF6244; --clay-btn:#B25837; --clay-deep:#A24E33; --clay-soft:#EBD2C5; --clay-tint:#F4E3DA;
  --mine:#E7E0CF; --mine-line:#D2C8B0;
  --priv:#5E6E8E; --priv-deep:#4A5875; --priv-soft:#DCE0EA; --priv-tint:#EBEEF4;
  --ok:#3F6446; --warn-ink:#8A4E1E; --warn-bg:rgba(181,113,61,.13);
  --r:12px; --r-sm:8px;
  --sb:env(safe-area-inset-bottom,0px);
}
.copilot-app *{box-sizing:border-box}
html.copilot-page,html.copilot-page body{margin:0;padding:0;height:100%;overflow:hidden}
html.copilot-page body{background:var(--bone); color:var(--ink); font-family:'Work Sans',system-ui,-apple-system,sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
.copilot-app button,.copilot-app input,.copilot-app textarea{font-family:inherit}
.copilot-app a{color:var(--clay-deep)}.copilot-app a:hover{color:var(--clay)}
.serif{font-family:'Lora',Georgia,serif}
/* Read by a screen reader, never shown: for meaning a sighted user gets from
   colour or a symbol alone. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

/* ============ APP SHELL ============ */
#app{height:100dvh; display:grid; grid-template-columns:284px minmax(0,1fr) 400px; background:var(--paper)}
.zone{overflow:hidden; display:flex; flex-direction:column; min-width:0; min-height:0}
.zone + .zone{border-left:1.5px solid var(--line)}
/* scrollbar-gutter: see .cop-body. Here it keeps the conversation rows from
   narrowing the moment the list grows past the viewport. */
.scroll{overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; flex:1; min-height:0; -webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}
.scroll::-webkit-scrollbar-track{background:transparent}

/* ============ ZONE 1 · CONVERSATIONS ============ */
#zList{background:var(--paper)}
.list-head{padding:14px 15px 12px; border-bottom:1.5px solid var(--line); background:var(--paper-2); flex:none}
.brand{display:flex; align-items:center; gap:9px; margin-bottom:13px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 3px var(--clay-tint);flex:none}
.brand h1{margin:0; font-family:'Lora',serif; font-size:16px; font-weight:600; letter-spacing:.2px}
.brand .conn{margin-left:auto; display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--ok); font-weight:500; white-space:nowrap}
.brand .conn .led{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.list-actions{display:flex; gap:8px; align-items:center}
.search{flex:1; min-width:0; height:34px; background:var(--paper); border:1.4px solid var(--line-2); border-radius:18px; display:flex; align-items:center; gap:8px; padding:0 12px}
.search:focus-within{border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-tint)}
.search .mag{width:13px;height:13px;border:1.7px solid var(--meta);border-radius:50%;position:relative;flex:none}
.search .mag::after{content:'';position:absolute;width:5px;height:1.7px;background:var(--meta);bottom:-2px;right:-3px;transform:rotate(45deg)}
.search input{flex:1; min-width:0; border:none; outline:none; background:none; font-size:12.5px; color:var(--ink)}
.search input::placeholder{color:var(--meta)}
.btn-new{background:var(--clay-btn); color:#fff; border:none; border-radius:18px; height:34px; padding:0 14px; font-size:12.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap; box-shadow:0 2px 0 var(--clay-deep); flex:none}
.btn-new:active{transform:translateY(1px); box-shadow:0 1px 0 var(--clay-deep)}

.conv{display:flex; gap:11px; padding:13px 15px; border-bottom:1.5px solid var(--line); cursor:pointer; position:relative; text-align:left; width:100%; background:none; font:inherit; color:inherit; transition:background .12s; text-decoration:none}
.conv:hover{background:var(--paper-2); color:inherit}
.conv.active{background:var(--clay-tint)}
.conv.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3.5px;background:var(--clay)}
.avatar{width:40px;height:40px;border-radius:50%;flex:none;background:var(--paper-2);border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:'Lora',serif;font-weight:600;font-size:14.5px;color:var(--ink-soft)}
.conv-main{flex:1; min-width:0}
.conv-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.conv-name{font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.conv-time{font-size:10.5px; color:var(--meta); flex:none}
.conv-prev{font-size:12px; color:var(--ink-soft); margin-top:3px; padding-right:14px; display:-webkit-box; -webkit-line-clamp:1; line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.conv-prev i{color:var(--meta)}
.conv-flags{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.flag{font-size:10px; font-weight:600; display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.flag.reply{color:var(--clay-deep)}
.flag.expired{color:var(--warn-ink)}
.unread{position:absolute; right:14px; bottom:14px; width:9px; height:9px; border-radius:50%; background:var(--clay); box-shadow:0 0 0 3px var(--clay-tint)}
.list-empty{padding:36px 22px; text-align:center; color:var(--meta); font-size:12.5px}
.list-foot{flex:none; border-top:1.5px solid var(--line); padding:8px 15px; background:var(--paper-2); display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.list-foot a{font-size:11px; color:var(--meta); text-decoration:none}
.list-foot a:hover{color:var(--ink-soft)}
.logout-btn{background:none; border:none; padding:0; font-size:11px; color:var(--meta); cursor:pointer; font-family:inherit}
.logout-btn:hover{color:var(--clay-deep)}

/* ============ ZONE 2 · THREAD ============ */
.thread-head{padding:11px 16px; border-bottom:1.5px solid var(--line); background:var(--paper-2); display:flex; align-items:center; gap:12px; flex:none; min-height:60px}
.thread-head .avatar{width:38px;height:38px}
.th-info{flex:1; min-width:0}
.th-name{font-family:'Lora',serif; font-weight:600; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.th-meta{font-size:11.5px; color:var(--meta); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1.4px solid var(--line-2);background:var(--paper);display:none;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.icon-btn:active{background:var(--paper-2)}
.chev{width:8px;height:8px;border-left:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);margin-left:-3px}
/* scrollbar-gutter: see .cop-body. Bubbles are max-width:min(76%,520px), so
   without it they all narrow once a thread is long enough to scroll. */
.thread-body{flex:1; padding:18px 16px; overflow-y:auto; scrollbar-gutter:stable; min-height:0; background:var(--paper-2); display:flex; flex-direction:column; gap:12px; -webkit-overflow-scrolling:touch}
.thread-body::-webkit-scrollbar{width:9px}
.thread-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}
.daysep{align-self:center; font-size:10.5px; color:var(--meta); background:var(--paper); border:1.3px solid var(--line); padding:3px 13px; border-radius:12px}
.bubble{max-width:min(76%,520px); padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.45; box-shadow:0 1px 1px rgba(60,50,40,.05); word-wrap:break-word; overflow-wrap:anywhere}
.bubble .bt{font-size:10px; color:var(--meta); display:block; text-align:right; margin-top:4px}
.bubble.in{align-self:flex-start; background:var(--paper); border:1.4px solid var(--line-2); border-bottom-left-radius:4px}
.bubble.out{align-self:flex-end; background:var(--mine); border:1.4px solid var(--mine-line); border-bottom-right-radius:4px}
.bubble .media-tag{font-size:10.5px; color:var(--meta); font-style:italic}
.thread-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; text-align:center; padding:30px}
.thread-empty .ic{width:54px;height:54px;border-radius:15px;background:var(--paper);border:1.5px dashed var(--line-2);display:flex;align-items:center;justify-content:center;font-size:22px}
.thread-empty h3{margin:0; font-family:'Lora',serif; font-size:16px; font-weight:600}
.thread-empty p{margin:0; font-size:12.5px; color:var(--ink-soft); max-width:270px; line-height:1.5}

/* composer */
.composer{border-top:1.5px solid var(--line); background:var(--paper-2); padding:12px 15px calc(12px + var(--sb)); flex:none}
.window-notice{background:var(--warn-bg); border:1.3px solid rgba(181,113,61,.3); border-radius:10px; padding:9px 11px; margin-bottom:9px; font-size:11.5px; color:var(--warn-ink); line-height:1.4; display:flex; gap:8px; align-items:flex-start}
.window-notice .fl{flex:none}
.composer-box{border:1.6px solid var(--line-2); border-radius:14px; background:var(--paper); padding:10px 12px; display:flex; flex-direction:column; gap:9px; transition:border-color .18s, box-shadow .18s}
.composer-box:focus-within{border-color:var(--line-strong); box-shadow:0 0 0 3px var(--line)}
.composer-box.loaded{border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-tint)}
.composer-box textarea{border:none; outline:none; resize:none; background:none; width:100%; font-size:13.5px; color:var(--ink); line-height:1.5; min-height:52px; max-height:150px}
.composer-box textarea::placeholder{color:var(--meta)}
.composer-bar{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.loaded-tag{font-size:10.5px; color:var(--clay-deep); background:var(--clay-tint); border:1.2px solid var(--clay-soft); padding:3px 9px; border-radius:12px; display:none; align-items:center; gap:5px}
.composer-box.loaded .loaded-tag{display:inline-flex}
.win-tag{font-size:10.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:11px}
.win-tag .ck{width:6px;height:6px;border-radius:50%;flex:none}
.win-tag.open{color:var(--ok); background:rgba(79,122,87,.13)}
.win-tag.open .ck{background:var(--ok)}
.win-tag.closed{color:var(--warn-ink); background:var(--warn-bg)}
.win-tag.closed .ck{background:var(--warn-ink)}
.grow{flex:1}
.btn-send{background:var(--clay-btn); color:#fff; border:none; border-radius:20px; padding:10px 22px; font-size:13.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; box-shadow:0 2px 0 var(--clay-deep); min-height:44px}
.btn-send:active:not(:disabled){transform:translateY(1px); box-shadow:0 1px 0 var(--clay-deep)}
.btn-send:disabled{background:var(--line-2); box-shadow:0 2px 0 var(--line-strong); cursor:not-allowed; opacity:.75}
.btn-send .tri{width:0;height:0;border:6px solid transparent;border-left:9px solid currentColor;border-right:0;margin-left:1px}
.btn-wa{background:var(--warn-ink); color:#fff !important; border:none; border-radius:20px; padding:10px 18px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:7px; box-shadow:0 2px 0 #8A5426; text-decoration:none; min-height:44px}
.btn-wa:active{transform:translateY(1px); box-shadow:0 1px 0 #8A5426}
.btn-wa[aria-disabled="true"]{background:var(--line-2); box-shadow:0 2px 0 var(--line-strong); opacity:.75; pointer-events:none}
.deep-link-note{margin-top:9px; font-size:11.5px; color:var(--warn-ink); background:var(--warn-bg); border-radius:10px; padding:9px 11px; display:none}
.deep-link-note.show{display:block}

/* ============ ZONE 3 · COPILOT ============ */
#zCop{background:var(--priv-tint)}
.cop-head{padding:13px 15px; border-bottom:1.4px solid var(--priv-soft); display:flex; align-items:center; gap:10px; flex:none; min-height:60px}
.cop-head .lock{width:26px;height:26px;border-radius:8px;background:rgba(94,110,142,.16);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.cop-head .ct{font-family:'Lora',serif; font-size:14.5px; font-weight:600; color:var(--priv)}
.cop-head .cs{font-size:10.5px; color:var(--meta)}
.ctx-strip{margin:12px 15px 0; background:var(--paper); border:1.3px solid var(--priv-soft); border-radius:10px; padding:9px 11px; display:flex; align-items:center; gap:9px; flex:none}
.ctx-strip .ic{width:22px;height:22px;border-radius:6px;background:rgba(94,110,142,.14);display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.ctx-strip .tx{font-size:11.5px; color:var(--ink-soft); line-height:1.35}
.ctx-strip .tx b{color:var(--priv)}
.cop-notice{margin:10px 15px 0; flex:none}
/* scrollbar-gutter keeps the 8px reserved whether or not the column
   overflows. Without it, opening a notes fold adds the scrollbar, the content
   box loses 8px, and every .cmsg (max-width:92%) visibly narrows. */
.cop-body{flex:1; overflow-y:auto; scrollbar-gutter:stable; min-height:0; padding:13px 15px; display:flex; flex-direction:column; gap:11px; -webkit-overflow-scrolling:touch}
.cop-body::-webkit-scrollbar{width:8px}
.cop-body::-webkit-scrollbar-thumb{background:var(--priv-soft);border-radius:8px}
.cmsg{max-width:92%; font-size:12.5px; line-height:1.45; padding:9px 12px; border-radius:13px; word-wrap:break-word; overflow-wrap:anywhere}
.cmsg.you{align-self:flex-end; background:var(--clay-tint); border:1.3px solid var(--clay-soft); border-bottom-right-radius:4px}
.cmsg.ai{align-self:flex-start; background:var(--paper); border:1.3px solid var(--priv-soft); border-bottom-left-radius:4px}
.cmsg.ai .who{font-size:9.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--priv); display:flex; align-items:center; gap:5px; margin-bottom:5px}
.cmsg.ai .who .sp{width:10px;height:10px;background:var(--priv);border-radius:2px;transform:rotate(45deg);flex:none}
.sug{margin-top:8px}
.sug-card{background:#fff; border:1.5px solid var(--clay-soft); border-radius:10px; padding:11px 12px; box-shadow:0 1px 2px rgba(60,50,40,.06)}
/* pre-wrap because WhatsApp drafts are multi-line — the opening message is a
   greeting, a context line and a question, each on its own line. */
.sug-card .dm{font-size:13px; line-height:1.5; color:var(--ink); white-space:pre-wrap}
.sug-card .df{display:flex; justify-content:flex-end; margin-top:9px}
.btn-use{background:var(--paper); color:var(--clay-deep); border:1.6px solid var(--clay); border-radius:18px; padding:7px 16px; font-size:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .13s,color .13s; white-space:nowrap; min-height:38px}
.btn-use:hover{background:var(--clay-btn); color:#fff}
.ctx-fold{margin-top:9px; border-top:1.2px solid var(--priv-soft); padding-top:8px}
.ctx-fold summary{cursor:pointer; font-size:11px; font-weight:600; color:var(--priv); list-style:none; display:flex; align-items:center; gap:6px; user-select:none}
.ctx-fold summary::-webkit-details-marker{display:none}
.ctx-fold summary::after{content:''; width:5px; height:5px; border-right:1.6px solid var(--priv); border-bottom:1.6px solid var(--priv); transform:rotate(45deg); transition:transform .15s}
.ctx-fold[open] summary::after{transform:rotate(-135deg)}
/* The notes arrive as a markdown blob, so these style the generated tags
   rather than a fixed section markup — the model decides the headings. */
.ctx-wrap{margin-top:8px; font-size:11.5px; color:var(--ink-soft); line-height:1.45}
.ctx-wrap h2,.ctx-wrap h3,.ctx-wrap h4{font-size:9.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--priv); margin:9px 0 2px}
.ctx-wrap > :first-child{margin-top:0}
.ctx-wrap p{margin:0 0 6px}
.ctx-wrap ul,.ctx-wrap ol{margin:0 0 6px; padding-left:16px}
.ctx-wrap li{margin-bottom:2px}
.ctx-wrap ul ul,.ctx-wrap ul ol,.ctx-wrap ol ul,.ctx-wrap ol ol{margin-bottom:0; margin-top:2px}
.ctx-wrap strong{color:var(--ink)}
.ctx-wrap blockquote{margin:0 0 6px; padding-left:9px; border-left:2px solid var(--priv-soft)}
.ctx-wrap code{font-size:11px; background:var(--priv-tint); border-radius:4px; padding:1px 4px}
.ctx-wrap > :last-child{margin-bottom:0}
.cop-empty{font-size:12px; color:var(--meta); text-align:center; margin-top:22px}
.cop-foot{flex:none; padding:0 15px calc(11px + var(--sb)); display:flex; flex-direction:column; gap:10px}
.btn-suggest{background:var(--priv); color:#fff; border:none; border-radius:20px; padding:11px 16px; font-size:12.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 2px 0 var(--priv-deep); min-height:44px; width:100%}
.btn-suggest:active:not(:disabled){transform:translateY(1px); box-shadow:0 1px 0 var(--priv-deep)}
.btn-suggest:disabled{opacity:.6; cursor:not-allowed}
.btn-suggest .sp{width:12px;height:12px;background:#fff;border-radius:3px;transform:rotate(45deg);opacity:.9;flex:none}
.cop-input{background:var(--paper); border:1.4px solid var(--priv-soft); border-radius:22px; padding:5px 5px 5px 14px; display:flex; align-items:flex-end; gap:8px}
.cop-input:focus-within{border-color:var(--priv); box-shadow:0 0 0 3px rgba(94,110,142,.13)}
/* Height is driven by cop_input_controller, which measures scrollHeight — the
   textarea must not scroll or resize on its own until it hits the cap. */
.cop-input textarea{flex:1; min-width:0; border:none; outline:none; background:none; resize:none; font-size:12.5px; line-height:1.5; color:var(--ink); padding:9px 0; max-height:132px}
.cop-input textarea::placeholder{color:var(--meta)}
.cop-input button{width:36px;height:36px;border-radius:50%;background:var(--priv);border:none;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:0}
.cop-input button::after{content:'';width:0;height:0;border:5px solid transparent;border-left:8px solid #fff;border-right:0;margin-left:2px}

/* ============ MODAL ============ */
.scrim{position:fixed; inset:0; background:rgba(40,34,28,.45); z-index:80; display:none; align-items:center; justify-content:center; padding:20px}
.scrim.open{display:flex}
.modal{width:100%; max-width:440px; max-height:90dvh; background:var(--paper); border:1.6px solid var(--line-strong); border-radius:16px; box-shadow:0 24px 60px -20px rgba(40,34,28,.6); overflow:hidden; display:flex; flex-direction:column}
.modal-head{padding:15px 18px; border-bottom:1.5px solid var(--line); background:var(--paper-2); flex:none}
.modal-head h2{margin:0; font-family:'Lora',serif; font-size:17px; font-weight:600}
.modal-head p{margin:3px 0 0; font-size:12px; color:var(--ink-soft)}
.modal-body{padding:16px 18px; display:flex; flex-direction:column; gap:14px; overflow-y:auto}
.fld label{font-size:10.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--meta); display:block; margin-bottom:6px}
.fld input,.fld textarea{width:100%; border:1.5px solid var(--line-2); border-radius:10px; background:var(--paper-2); padding:10px 12px; font-size:13px; color:var(--ink); outline:none; resize:none}
.fld input:focus,.fld textarea:focus{border-color:var(--clay); background:var(--paper); box-shadow:0 0 0 3px var(--clay-tint)}
.fld .hint{font-size:11px; color:var(--meta); margin-top:6px}
.modal-foot{padding:13px 18px calc(13px + var(--sb)); border-top:1.5px solid var(--line); background:var(--paper-2); display:flex; align-items:center; gap:9px; flex-wrap:wrap; flex:none}
.modal-foot .note{font-size:11px; color:var(--meta); flex:1; min-width:120px}
.btn-ghost{background:none; border:1.4px solid var(--line-2); border-radius:18px; padding:9px 16px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; min-height:40px}
.btn-primary{background:var(--clay-btn); color:#fff; border:none; border-radius:18px; padding:10px 18px; font-size:12.5px; font-weight:600; cursor:pointer; box-shadow:0 2px 0 var(--clay-deep); min-height:40px}
.btn-primary:active{transform:translateY(1px); box-shadow:0 1px 0 var(--clay-deep)}

/* ============ FLASH TOAST ============ */
.toast{position:fixed; left:50%; bottom:calc(26px + var(--sb)); transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:12px 22px; border-radius:24px; font-size:13px; font-weight:500; z-index:120; box-shadow:0 8px 22px -8px rgba(0,0,0,.5); max-width:calc(100vw - 40px); text-align:center; animation:toast-in .25s ease}
@keyframes toast-in{from{opacity:0; transform:translateX(-50%) translateY(20px)}to{opacity:1; transform:translateX(-50%) translateY(0)}}

/* ============ LOGIN ============ */
.login-wrap{height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bone)}
.login-card{width:100%; max-width:340px; background:var(--paper); border:1.6px solid var(--line-2); border-radius:16px; padding:26px 24px; box-shadow:0 18px 44px -22px rgba(40,34,28,.5)}
.login-card .brand{justify-content:center; margin-bottom:20px}
.login-form{display:flex; flex-direction:column; gap:14px}
.login-form input{width:100%; border:1.5px solid var(--line-2); border-radius:10px; background:var(--paper-2); padding:10px 12px; font-size:13.5px; color:var(--ink); outline:none}
.login-form input:focus{border-color:var(--clay); background:var(--paper); box-shadow:0 0 0 3px var(--clay-tint)}
.login-submit{width:100%; cursor:pointer; margin-top:4px}

/* ============ SETTINGS PAGE ============ */
/* Full-bleed scroller with the column centred by padding, not max-width plus
   auto margins: html and body are overflow:hidden, so a 760px-wide scroller
   leaves the gutters beside it scrolling nothing under the wheel. */
.settings-wrap{padding:26px max(20px, (100% - 760px) / 2); height:100dvh; overflow-y:auto}
.settings-wrap h1{font-family:'Lora',serif; font-size:19px; margin:0}
.settings-wrap .sub{font-size:12.5px; color:var(--ink-soft); margin:6px 0 16px}
.settings-wrap textarea{width:100%; border:1.5px solid var(--line-2); border-radius:12px; background:var(--paper); padding:14px; font-size:13px; font-family:ui-monospace,monospace; color:var(--ink); outline:none; line-height:1.55}
.settings-wrap textarea:focus{border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-tint)}
.settings-heading{font-family:'Lora',serif; font-size:15px; margin:22px 0 0}
.settings-row{display:flex; gap:12px; flex-wrap:wrap}
.settings-row label{flex:1 1 220px; display:flex; flex-direction:column; gap:5px}
.settings-row label span{font-size:12px; color:var(--ink-soft)}
.settings-wrap input[type=text],.settings-wrap select{width:100%; border:1.5px solid var(--line-2); border-radius:12px; background:var(--paper); padding:10px 12px; font-size:13px; color:var(--ink); outline:none}
.settings-wrap input[type=text]{font-family:ui-monospace,monospace}
.settings-wrap input[type=text]:focus,.settings-wrap select:focus{border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-tint)}
.settings-actions{display:flex; justify-content:space-between; align-items:center; margin-top:14px}
.settings-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.settings-head .sub{max-width:52ch}
.settings-head .btn-ghost{flex:none; text-decoration:none; display:inline-flex; align-items:center}

/* ============ PROMPT VERSIONS ============ */
.version{border:1.5px solid var(--line); border-radius:14px; background:var(--paper); padding:14px 15px; margin-bottom:11px}
.version-current{border-color:var(--clay); background:var(--clay-tint)}
.version-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.version-name{font-family:'Lora',serif; font-size:15px; font-weight:600; margin:0}
.version-time{font-size:10.5px; color:var(--meta); flex:none}
.version-meta{font-size:12.5px; color:var(--ink-soft); margin:6px 0 0; font-family:ui-monospace,monospace}
.version-top .btn-ghost{flex:none; text-decoration:none; padding:6px 13px; min-height:34px; font-size:12px}
.version-fields{display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:5px 16px; margin:10px 0 0; font-size:12.5px}
.version-fields dt{color:var(--ink-soft)}
.version-fields dd{margin:0; color:var(--ink); font-family:ui-monospace,monospace; overflow-wrap:anywhere}
/* The +/− mark carries the meaning; the tint only reinforces it. */
.diff{border:1.5px solid var(--line-2); border-radius:12px; background:var(--paper); margin-top:10px; padding:10px 0; overflow-x:auto; font-family:ui-monospace,monospace; font-size:12.5px; line-height:1.55}
/* min-height keeps an empty line in the prompt as an empty row: with the row
   no longer pre-wrap, it has nothing to give it height. */
.diff-line{display:flex; gap:10px; padding:1px 14px; min-height:1.55em}
.diff-mark{flex:none; width:1ch; color:var(--meta)}
/* Only the prompt text preserves its whitespace; the row itself must not, or
   the indentation of the markup renders as part of the line. */
.diff-text{white-space:pre-wrap; overflow-wrap:anywhere; min-width:0}
.diff-same{color:var(--ink-soft)}
.diff-gap{color:var(--meta); font-size:11px; border-top:1.4px solid var(--line); border-bottom:1.4px solid var(--line); margin:4px 0; padding-top:3px; padding-bottom:3px}
.diff-del{background:var(--warn-bg); color:var(--warn-ink)}
.diff-add{background:rgba(63,100,70,.13); color:var(--ok)}
.diff-legend{border-radius:6px; padding:1px 6px; font-family:ui-monospace,monospace; font-size:11.5px}

/* ============ LEADS PAGE ============ */
/* Centred by padding for the same reason as .settings-wrap above. */
.leads-wrap{padding:26px max(20px, (100% - 760px) / 2) 40px; height:100dvh; overflow-y:auto}
.leads-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.leads-head h1{font-family:'Lora',serif; font-size:19px; margin:0}
.leads-head .sub{font-size:12.5px; color:var(--ink-soft); margin:6px 0 0; max-width:52ch}
.leads-head .btn-ghost{flex:none; text-decoration:none; display:inline-flex; align-items:center}
.leads-tabs{display:flex; gap:6px; margin:18px 0 14px; border-bottom:1.5px solid var(--line)}
.leads-tab{padding:8px 12px; font-size:12.5px; font-weight:500; color:var(--ink-soft); text-decoration:none; border-bottom:2.5px solid transparent; margin-bottom:-1.5px}
.leads-tab:hover{color:var(--ink)}
.leads-tab.active{color:var(--clay-deep); border-bottom-color:var(--clay)}
.leads-count{display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--clay-tint); color:var(--clay-deep); font-size:11px; font-weight:600; text-align:center}
.lead{border:1.5px solid var(--line); border-radius:14px; background:var(--paper); padding:14px 15px; margin-bottom:11px}
.lead-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.lead-name{font-family:'Lora',serif; font-size:15px; font-weight:600; margin:0}
.lead-time{font-size:10.5px; color:var(--meta); flex:none}
.lead-answers{display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:5px 16px; margin:11px 0 0; padding-top:11px; border-top:1.4px solid var(--line); font-size:12.5px}
.lead-answers dt{color:var(--ink-soft)}
.lead-answers dd{margin:0; color:var(--ink); overflow-wrap:anywhere}
.lead-answers dd.bad{color:var(--warn-ink)}
.lead-notes{white-space:pre-wrap}
.phone-cell{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.copy-phone{font:inherit; color:inherit; background:none; border:none; padding:0; margin:0; cursor:pointer; text-align:left; overflow-wrap:anywhere}
.copy-tag{font-size:10.5px; color:var(--meta); border:1.2px solid var(--line-2); border-radius:8px; padding:1px 6px; flex:none}
.phone-cell:hover .copy-tag{color:var(--ink-soft); border-color:var(--line-strong)}
.phone-cell.copied .copy-tag{color:var(--clay-deep); border-color:var(--clay); background:var(--clay-tint)}
.phone-cell.copy-failed .copy-tag{color:var(--warn-ink); border-color:var(--warn-ink)}
.lead-form{margin-top:18px; display:flex; flex-direction:column; gap:16px}
.lead-form .lead-answers{margin-top:0}
.lead-form .hint{font-size:11px; color:var(--meta); margin:6px 0 0}
.fld-static{margin:0; font-size:13px; color:var(--ink); padding:10px 12px; border:1.5px dashed var(--line-2); border-radius:10px; background:var(--paper-2)}
.lead-actions{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap}
.lead-actions form{margin:0}
.lead-actions .btn-ghost{text-decoration:none; display:inline-flex; align-items:center}
.lead-actions .btn-primary:disabled{opacity:.45; box-shadow:none; cursor:not-allowed}
.leads-link{display:flex; align-items:center; gap:7px}
.leads-link .leads-count{background:var(--clay); color:#fff}
@media (max-width:520px){
  .lead-answers{grid-template-columns:1fr; gap:2px}
  .lead-answers dd{margin-bottom:6px}
}

/* ============ MOBILE ============ */
.mobile-only{display:none}
.fab{display:none}

@media (max-width:1100px){
  #app{grid-template-columns:250px minmax(0,1fr) 348px}
}

/* --- Tablet: list becomes a drawer --- */
@media (max-width:940px){
  #app{grid-template-columns:minmax(0,1fr) 340px}
  #zList{position:fixed; top:0; bottom:0; left:0; width:290px; z-index:70; border-right:1.5px solid var(--line-strong); box-shadow:8px 0 28px -12px rgba(40,34,28,.35); transform:translateX(-102%); transition:transform .24s ease; display:flex}
  body.list-open #zList{transform:none}
  .list-scrim{position:fixed; inset:0; background:rgba(40,34,28,.4); z-index:65; opacity:0; pointer-events:none; transition:opacity .22s}
  body.list-open .list-scrim{opacity:1; pointer-events:auto}
  #zThread{border-left:none}
  #btnOpenList{display:flex}
}

/* --- Phone: single view + copilot bottom sheet --- */
@media (max-width:720px){
  #app{grid-template-columns:1fr; grid-template-rows:1fr}
  #zList{width:min(88vw,320px)}
  #zCop{position:fixed; left:0; right:0; bottom:0; top:auto; height:88dvh; z-index:75; border-left:none; border-top:1.6px solid var(--priv-soft); border-radius:20px 20px 0 0; box-shadow:0 -12px 34px -12px rgba(40,34,28,.45); transform:translateY(101%); transition:transform .26s cubic-bezier(.3,.8,.4,1); display:flex}
  body.cop-open #zCop{transform:none}
  .cop-scrim{position:fixed; inset:0; background:rgba(40,34,28,.4); z-index:72; opacity:0; pointer-events:none; transition:opacity .22s}
  body.cop-open .cop-scrim{opacity:1; pointer-events:auto}
  .sheet-grip{flex:none; padding:9px 0 3px; display:flex; justify-content:center; cursor:grab}
  .sheet-grip span{width:42px;height:5px;border-radius:3px;background:var(--line-2);display:block}
  .mobile-only{display:flex}
  #btnCloseCop{display:flex}
  .fab{position:fixed; right:16px; bottom:calc(16px + var(--sb)); z-index:60; background:var(--priv); color:#fff; border:none; border-radius:24px; padding:13px 18px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; box-shadow:0 8px 20px -6px rgba(40,34,28,.5); cursor:pointer; min-height:48px}
  .fab:active{transform:translateY(1px)}
  .fab .sp{width:12px;height:12px;background:#fff;border-radius:3px;transform:rotate(45deg);opacity:.9;flex:none}
  body.cop-open .fab{display:none}
  .composer{padding-bottom:calc(12px + var(--sb) + 62px)}
  .bubble{max-width:86%}
  .cmsg{max-width:94%}
  .thread-body{padding:14px 13px}
  .th-meta{font-size:11px}
  .modal{max-width:none}
}
@media (max-width:420px){
  .btn-new span.lbl{display:none}
  .btn-new{padding:0 12px}
  .thread-head{padding:10px 12px; gap:9px}
  .composer{padding-left:12px; padding-right:12px}
  .list-head{padding:12px 13px 11px}
  .conv{padding:12px 13px}
}
@media (min-width:721px){
  .cop-scrim,.fab{display:none !important}
}
@media (min-width:941px){
  .list-scrim{display:none !important}
}
/* iOS Safari zooms the page on focus for any control under 16px and never
   zooms back out on blur, leaving the user sideways-scrolling mid-message.
   Only the editable controls are bumped; the rest of the type stays as is.
   Selectors are listed rather than a bare `input,select,textarea` because
   every control here is styled through a class, which would out-specify it. */
@media (max-width:767px){
  .search input,
  .cop-input textarea,
  .composer-box textarea,
  .fld input,
  .fld textarea,
  .login-form input,
  .settings-wrap input[type=text],
  .settings-wrap select,
  .settings-wrap textarea{font-size:16px}
}
.copilot-app :focus-visible{outline:2.5px solid var(--clay); outline-offset:2px}
/* These textareas sit inside a rounded box that already lights up on
   :focus-within — a second, square outline around the textarea itself only
   looks broken. The wrapper ring is the focus indicator. */
.composer-box textarea:focus-visible,
.cop-input textarea:focus-visible{outline:none}