/* Screens added in v2: sign-in, library, brand, admin. Reuses app.css tokens. */
:root{
  --ink:#1C1A17; --ink-2:#272320; --bone:#F2EDE4; --plaster:#E4DACB;
  --line:#3A352F; --sage:#7B8E74; --brass:#B08D57; --muted:#A89E8F;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
body{background:var(--ink); color:var(--bone); font-family:'Inter',system-ui,sans-serif;}
[hidden]{display:none !important;}

/* sign in */
.screen-signin{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));}
.signin-card{width:100%; max-width:360px; text-align:center; display:flex; flex-direction:column; gap:12px;}
.signin-logo{width:72px; height:72px; border-radius:18px; align-self:center; box-shadow:0 10px 30px -12px rgba(0,0,0,.6);}
.signin-title{font-family:'Fraunces',serif; font-weight:900; font-size:34px; margin:8px 0 0; letter-spacing:-.5px;}
.signin-sub{color:var(--muted); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px;}
.signin-input{background:var(--ink-2); border:1px solid var(--line); color:var(--bone); border-radius:12px; padding:14px; font-size:16px; outline:none;}
.signin-input:focus{border-color:var(--sage);}
.signin-btn{background:var(--sage); color:#10130f; border:none; border-radius:12px; padding:14px; font-weight:700; font-size:15px; cursor:pointer;}
.signin-btn:active{transform:scale(.99);} .signin-btn:disabled{opacity:.6;}
.signin-msg{min-height:18px; font-size:13px; color:var(--muted);}

/* library */
.screen-library{min-height:100dvh; padding:calc(var(--safe-t) + 14px) 16px calc(90px + var(--safe-b)); max-width:560px; margin:0 auto;}
.lib-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.lib-top .mark{font-family:'Fraunces',serif; font-weight:900; font-size:24px;}
.lib-account{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--ink-2); color:var(--bone); font-weight:700; cursor:pointer;}
.lib-new{width:100%; background:var(--sage); color:#10130f; border:none; border-radius:12px; padding:14px; font-weight:700; font-size:15px; cursor:pointer; margin-bottom:18px;}
/* Home "Today" strip */
.home-strip{margin-bottom:14px; display:flex; flex-direction:column; gap:9px;}
.home-strip:empty{display:none;}
.home-pills{display:flex; gap:8px;}
.home-pill{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; background:var(--ink-2); border:1px solid var(--line); color:var(--bone); border-radius:11px; padding:11px 8px; font-size:13px; font-weight:600; cursor:pointer;}
.home-pill:active{transform:scale(.97); border-color:var(--sage);}
.home-pill .hp-ico{font-size:14px;}
.home-card{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:linear-gradient(140deg,var(--ink-2),var(--ink)); border:1px solid var(--line); border-radius:13px; padding:11px 13px; cursor:pointer;}
.home-card:active{border-color:var(--sage);}
.home-card-body{flex:1; display:flex; flex-direction:column; min-width:0;}
.home-card-l{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.home-card-name{color:var(--bone); font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.home-card-go{color:var(--muted); font-size:22px; flex:0 0 auto;}
.home-activity{margin:0; font-size:12px; color:var(--muted);}
.lib-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.lib-tile{padding:0; border:1px solid var(--line); background:var(--ink-2); border-radius:14px; overflow:hidden; cursor:pointer; text-align:left;}
.lib-thumb{aspect-ratio:4/5; background:var(--plaster) center/cover no-repeat;}
.lib-meta{padding:9px 11px; display:flex; flex-direction:column; gap:2px;}
.lib-name{color:var(--bone); font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lib-fmt{color:var(--muted); font-size:11px; text-transform:capitalize;}
.lib-empty{color:var(--muted); text-align:center; margin-top:34px; font-size:14px; border:1px dashed var(--line); border-radius:18px; padding:28px 22px; background:rgba(123,142,116,.04);}
.lib-empty-icon{width:54px; height:54px; margin:0 auto 12px; border-radius:16px; background:linear-gradient(140deg,var(--sage),#5A6E80); color:#10130f; font-size:26px; display:flex; align-items:center; justify-content:center;}
.lib-empty h3{font-family:'Fraunces',serif; color:var(--bone); font-size:19px; margin:0 0 8px;}
.lib-empty p{margin:0; line-height:1.6;}
.lib-error{color:var(--brass); font-size:13px;}
.lib-tabs{position:fixed; bottom:0; left:0; right:0; max-width:560px; margin:0 auto; display:flex; gap:6px; padding:8px 12px calc(8px + var(--safe-b)); background:rgba(28,26,23,.92); backdrop-filter:blur(12px); border-top:1px solid var(--line);}
.lib-tabs button{flex:1 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; background:transparent; border:none; color:var(--muted); font-weight:600; font-size:10px; padding:6px 9px; border-radius:11px; cursor:pointer; transition:color .15s, background .15s;}
.lib-tabs button svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.lib-tabs button.on{color:var(--sage);}
.lib-tabs button.on svg{stroke:var(--sage);}
.lib-tabs button:active{transform:scale(.92);}
.lib-tabs button .on, .lib-tabs button span{letter-spacing:.01em;}

/* sub screens — bottom padding clears the persistent tab bar */
.screen-brand,.screen-admin,.screen-clients,.screen-studio,.screen-leads,.screen-workspace{min-height:100dvh; padding:calc(var(--safe-t) + 10px) 16px calc(86px + var(--safe-b)); max-width:560px; margin:0 auto; overflow-x:clip;}
.screen-library{overflow-x:clip;}
/* Keep the sub-screen header (with Back) reachable while the body scrolls. */
.sub-top{position:sticky; top:calc(var(--safe-t)); background:var(--ink); z-index:5; padding:6px 0; margin-bottom:10px;}
.sub-top{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.sub-top h2{font-family:'Fraunces',serif; font-weight:600; font-size:22px; margin:0;}
.back{background:transparent; border:none; color:var(--sage); font-size:16px; cursor:pointer; padding:6px;}
.scaffold-note{color:var(--muted); font-size:13px; line-height:1.5; border:1px dashed var(--line); border-radius:12px; padding:16px; background:rgba(123,142,116,.05);}
.muted-note{color:var(--muted); font-size:13px; line-height:1.5; margin:0 0 14px;}
.muted{color:var(--muted);}

/* ---- Editor top bar (Phase 3: back / title / saved) ---- */
.ed-back{background:transparent; border:none; color:var(--sage); font-size:14px; font-weight:600; cursor:pointer; padding:6px 4px 6px 0; flex:0 0 auto;}
.ed-title{flex:1 1 auto; min-width:0; background:transparent; border:none; color:var(--bone); font-family:'Fraunces',serif; font-weight:600; font-size:16px; padding:6px 8px; border-radius:8px; outline:none;}
.ed-title:focus{background:var(--ink-2);}
.ed-saved{flex:0 1 auto; color:var(--muted); font-size:11px; max-width:120px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ed-saved.err{color:#e07a5f;}

/* ---- Library tile menu + action sheet ---- */
.lib-tile{position:relative;}
.lib-menu{position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:8px; border:none; background:rgba(28,26,23,.66); color:var(--bone); font-size:16px; line-height:1; cursor:pointer; backdrop-filter:blur(4px);}
.sheet-ov{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5); display:flex; align-items:flex-end; justify-content:center; animation:fade .15s ease;}
.sheet{width:100%; max-width:420px; margin:10px; background:var(--ink-2); border:1px solid var(--line); border-radius:18px; padding:8px; display:flex; flex-direction:column; gap:4px;}
.sheet-title{font-family:'Fraunces',serif; font-size:16px; padding:10px 12px 6px; color:var(--bone);}
.sheet button{appearance:none; border:none; background:var(--ink); color:var(--bone); font-size:15px; font-weight:600; padding:14px; border-radius:11px; cursor:pointer; text-align:left;}
.sheet button.danger{color:#e07a5f;}
.sheet button.go{background:var(--sage); color:#10130f; text-align:center;}
.sheet button.cancel{background:transparent; color:var(--muted); text-align:center;}
@keyframes fade{from{opacity:0;} to{opacity:1;}}

/* ---- Shared buttons for brand/admin ---- */
.btn-save{width:100%; background:var(--sage); color:#10130f; border:none; border-radius:12px; padding:14px; font-weight:700; font-size:15px; cursor:pointer; margin-top:4px;}
.btn-save:active{transform:scale(.99);}
.btn-mini{appearance:none; border:1px solid var(--line); background:var(--ink); color:var(--bone); font-weight:600; font-size:13px; padding:8px 14px; border-radius:9px; cursor:pointer;}
.btn-mini.danger{color:#e07a5f; border-color:#5a3a32;}

/* ---- Brand kit form ---- */
.sub-body .field{margin-bottom:16px;}
.sub-body .field > label{display:block; font-size:12px; color:var(--muted); margin-bottom:7px; font-weight:500;}
.bk-hex{align-self:center; color:var(--muted); font-size:13px; letter-spacing:.04em;}
.bk-logo-preview{margin-top:10px; height:64px; border-radius:10px; background:var(--plaster) center/contain no-repeat; border:1px solid var(--line);}

/* ---- Admin panel ---- */
.admin-invite{border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:20px; background:var(--ink-2);}
.admin-invite h3,.admin-h{font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin:0 0 10px;}
.admin-h{margin:0 0 12px;}
.admin-role{width:auto; flex:0 0 auto;}
.admin-list{display:flex; flex-direction:column; gap:10px;}
.admin-card{border:1px solid var(--line); border-radius:13px; padding:13px; background:var(--ink-2);}
.admin-card.is-suspended{opacity:.62;}
.admin-top{display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:9px;}
.admin-email{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.admin-stats{display:flex; align-items:center; gap:14px; color:var(--muted); font-size:12.5px; margin-bottom:11px;}
.admin-limit{display:flex; align-items:center; gap:6px; margin-left:auto;}
.admin-limit input{width:64px; background:var(--ink); color:var(--bone); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:13px;}
.admin-actions{display:flex; gap:8px;}
.admin-usage{display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:12.5px; border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:16px; background:var(--ink-2);}
.admin-usage b{color:var(--bone); font-weight:700;}

/* ---- AI image generation (Photo tab) ---- */
.imggen{border-top:1px solid var(--line); padding-top:16px; margin-top:4px;}
.imggen-ref{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; margin:8px 0 10px; font-weight:500;}
.imggen-ref input{width:16px; height:16px; accent-color:var(--sage);}

/* ---- Assistant ---- */
.asst-fab{position:fixed; right:16px; bottom:calc(74px + var(--safe-b)); z-index:55; width:54px; height:54px; border-radius:50%; border:none; cursor:pointer; background:var(--brass); color:#1b140a; font-size:24px; box-shadow:0 10px 26px -8px rgba(0,0,0,.6);}
.asst-fab:active{transform:scale(.95);}
.asst-panel{position:fixed; z-index:60; right:0; bottom:0; left:0; margin:0 auto; max-width:440px; height:min(76vh, 640px);
  display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line); border-radius:20px 20px 0 0;
  box-shadow:0 -16px 40px -16px rgba(0,0,0,.7); animation:slideup .2s ease;}
@keyframes slideup{from{transform:translateY(20px); opacity:0;} to{transform:none; opacity:1;}}
.asst-top{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line);}
.asst-title{font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:var(--bone);}
.asst-close{background:transparent; border:none; color:var(--muted); font-size:16px; cursor:pointer; padding:6px;}
.asst-log{flex:1; overflow-y:auto; padding:14px 14px 6px; display:flex; flex-direction:column; gap:9px;}
.asst-msg{max-width:84%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.45; white-space:pre-wrap; word-wrap:break-word;}
.asst-msg.user{align-self:flex-end; background:var(--sage); color:#10130f; border-bottom-right-radius:5px;}
.asst-msg.assistant{align-self:flex-start; background:var(--ink); color:var(--bone); border:1px solid var(--line); border-bottom-left-radius:5px;}
.asst-msg.thinking{color:var(--muted); letter-spacing:.2em;}
.asst-action{align-self:flex-start; background:rgba(176,141,87,.14); color:var(--brass); border:1px solid var(--brass); border-radius:11px; padding:9px 13px; font-size:13px; font-weight:700; cursor:pointer;}
.asst-action:disabled{opacity:.5;}
.asst-input{display:flex; gap:8px; padding:10px 12px calc(10px + var(--safe-b)); border-top:1px solid var(--line);}
.asst-input textarea{flex:1; resize:none; max-height:120px; min-height:42px; background:var(--ink); color:var(--bone); border:1px solid var(--line); border-radius:12px; padding:11px 12px; font-size:15px; font-family:'Inter';}
.asst-input textarea:focus{border-color:var(--sage); outline:none;}
.asst-send{flex:0 0 auto; background:var(--sage); color:#10130f; border:none; border-radius:12px; padding:0 16px; font-weight:700; font-size:14px; cursor:pointer;}
.asst-auto{margin-left:auto; margin-right:4px; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; user-select:none;}
.asst-auto input{width:15px; height:15px; accent-color:var(--brass);}
.asst-note{align-self:center; color:var(--sage); font-size:12px; font-weight:600; padding:2px 0;}

/* Google sign-in + divider */
.google-btn{display:flex; align-items:center; justify-content:center; gap:10px; background:var(--bone); color:#1f1d1a; border:none; border-radius:12px; padding:13px; font-weight:700; font-size:15px; cursor:pointer;}
.google-btn:active{transform:scale(.99);}
.signin-or{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin:2px 0;}
.signin-or::before,.signin-or::after{content:""; flex:1; height:1px; background:var(--line);}

/* ---- Camera capture ---- */
.upload-cam{margin-top:10px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--line); border-radius:13px; padding:13px; color:var(--bone); font-size:14px; font-weight:600; cursor:pointer; background:var(--ink);}
.upload-cam:active{border-color:var(--sage);}
.upload-cam svg{width:19px; height:19px; opacity:.85;}

/* ---- Admin: config + spend + chart + alerts ---- */
.admin-alert{background:rgba(176,141,87,.16); border:1px solid var(--brass); color:#e7c79a; border-radius:12px; padding:11px 13px; font-size:13px; margin-bottom:16px;}
.admin-alert b{color:#fff;}
.admin-card h3{font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin:0 0 12px;}
.admin-card h4.chart-h{font-family:'Inter'; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:16px 0 8px;}
.admin-cfg .field{margin-bottom:13px;}
.admin-cfg .input{font-size:14px;}
.spend-top{display:flex; align-items:baseline; gap:4px;}
.spend-amt{font-family:'Fraunces',serif; font-weight:700; font-size:26px; color:var(--bone);}
.spend-bar{height:9px; border-radius:6px; background:var(--ink); border:1px solid var(--line); margin-top:8px; overflow:hidden;}
.spend-fill{height:100%; background:var(--sage); border-radius:6px; transition:width .3s;}
.spend-fill.hot{background:var(--brass);}
.usage-chart{display:block; height:90px; margin-top:4px;}
.chart-legend{display:flex; gap:14px; margin-top:8px; color:var(--muted); font-size:12px;}
.chart-legend i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px;}
.admin-cfg, .admin-card{margin-bottom:18px;}

/* ---- Before → After redesign ---- */
.screen-redesign{min-height:100dvh; padding:calc(var(--safe-t) + 10px) 16px 40px; max-width:560px; margin:0 auto;}
.lib-secondary{width:100%; background:var(--ink-2); color:var(--bone); border:1px solid var(--brass); border-radius:12px; padding:13px; font-weight:700; font-size:14px; cursor:pointer; margin-bottom:18px;}
.lib-secondary:active{transform:scale(.99);}
.rd-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px;}
.rd-slot{display:flex; flex-direction:column; gap:6px;}
.rd-tag{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.rd-img{aspect-ratio:4/5; border-radius:12px; border:1px solid var(--line); background:var(--ink-2) center/cover no-repeat; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.rd-img.has{border-color:var(--sage);}
.rd-placeholder{color:var(--muted); font-size:12px; text-align:center; padding:10px;}
.rd-presets{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.rd-presets button{appearance:none; border:1px solid var(--line); background:var(--ink); color:var(--bone); border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;}
.rd-presets button.on{border-color:var(--sage); background:rgba(123,142,116,.12); color:var(--sage);}
.rd-actions{display:flex; gap:10px; align-items:center; margin-top:14px;}
.rd-actions .btn-save{flex:1;}
.rd-actions .btn-mini{text-decoration:none; display:inline-flex; align-items:center;}
.prompt-tools{display:flex; gap:8px; align-items:center; margin-top:10px;}
.prompt-tools select{flex:1;}

/* ---- Editor presence ---- */
.ed-presence{flex:0 0 auto; color:var(--sage); font-size:11px; font-weight:600;}

/* ---- CRM: clients ---- */
.client-list{display:flex; flex-direction:column; gap:9px; margin-top:14px;}
.client-card{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid var(--line); background:var(--ink-2); border-radius:13px; padding:13px 14px; cursor:pointer;}
.client-name{font-weight:600; color:var(--bone); font-size:15px;}
.client-co{color:var(--muted); font-size:13px;}
.client-card .badge{margin-left:auto; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 9px; border-radius:999px;}
.badge.st-lead{background:rgba(90,110,128,.2); color:#9db4c6;}
.badge.st-active{background:rgba(123,142,116,.2); color:var(--sage);}
.badge.st-done{background:rgba(176,141,87,.2); color:var(--brass);}
.badge.st-archived{background:rgba(168,158,143,.18); color:var(--muted);}

/* ---- Studio: cowork ---- */
.studio-tabs{display:flex; gap:6px; background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:14px;}
.studio-tabs button{flex:1; appearance:none; border:none; background:transparent; color:var(--muted); font-weight:600; font-size:13px; padding:9px 6px; border-radius:9px; cursor:pointer;}
.studio-tabs button.on{background:var(--sage); color:#10130f;}
.studio-view{display:flex; flex-direction:column;}
.team-log{display:flex; flex-direction:column; gap:8px; max-height:58dvh; overflow-y:auto; padding:4px 2px;}
/* Team chat bubbles share the assistant/client-agent bubble shape for consistency. */
.team-msg{max-width:84%; align-self:flex-start; background:var(--ink); border:1px solid var(--line); border-radius:14px; border-bottom-left-radius:5px; padding:10px 13px; font-size:14px; line-height:1.45; white-space:pre-wrap; word-wrap:break-word;}
.team-msg.mine{align-self:flex-end; background:var(--sage); color:#10130f; border:none; border-radius:14px; border-bottom-right-radius:5px;}
.team-msg.asst{background:rgba(176,141,87,.12); border-color:var(--brass); border-bottom-left-radius:5px;}
.team-who{display:block; font-size:11px; font-weight:700; opacity:.7; margin-bottom:2px;}
.feed{display:flex; flex-direction:column; gap:8px;}
.feed-item{display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); background:var(--ink-2); border-radius:11px; padding:11px 13px; font-size:13.5px; color:var(--bone);}
.feed-av{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#10130f; background:var(--sage);}
.feed-av.feed-img{background:#B08D57;} .feed-av.feed-lead{background:#5A6E80;} .feed-av.feed-client{background:#8A7CA8;} .feed-av.feed-flow{background:#7fb069;} .feed-av.feed-asst{background:linear-gradient(140deg,var(--sage),#5A6E80);} .feed-av.feed-share{background:#C08552;}
.feed-body{flex:1; min-width:0; display:flex; flex-direction:column;}
.feed-txt{line-height:1.45;}
.feed-when{display:block; color:var(--muted); font-size:11px; margin-top:3px;}
.mem-list{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.mem-row{display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--ink-2); border-radius:11px; padding:10px 12px; font-size:14px;}
.mem-row span{flex:1;}
.mem-del{background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:4px;}

/* ---- Photo source row (take / choose / library) ---- */
.src-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.src-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:13px; padding:14px 8px; color:var(--bone); font-size:12.5px; font-weight:600; cursor:pointer; background:var(--ink); text-align:center;}
.src-btn:active{border-color:var(--sage);}
.src-btn svg{width:20px; height:20px; opacity:.85;}

/* ---- Internal photo-library picker ---- */
.picker-sheet{max-height:78vh;}
.picker-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; overflow-y:auto; padding:8px; max-height:60dvh;}
.picker-tile{position:relative; aspect-ratio:1; border:1px solid var(--line); border-radius:12px; background-size:cover; background-position:center; cursor:pointer; padding:0; overflow:hidden;}
.picker-tile:active{border-color:var(--sage);}
.picker-tag{position:absolute; left:5px; bottom:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:rgba(28,26,23,.72); color:var(--bone); padding:2px 6px; border-radius:6px; backdrop-filter:blur(3px);}

/* ---- Biometric lock screen ---- */
.lock-ov{position:fixed; inset:0; z-index:200; background:var(--ink); display:flex; align-items:center; justify-content:center; padding:24px;}
.lock-card{text-align:center; max-width:320px; display:flex; flex-direction:column; align-items:center; gap:10px;}
.lock-face{font-size:46px; filter:grayscale(.2);}
.lock-card h2{font-family:'Fraunces',serif; font-size:23px; color:var(--bone); margin:0;}
.lock-sub{color:var(--muted); font-size:14px; margin:0 0 8px;}
.lock-btn{width:100%; background:var(--sage); color:#10130f; border:none; border-radius:12px; padding:15px; font-weight:700; font-size:15px; cursor:pointer;}
.lock-alt{background:transparent; border:none; color:var(--muted); font-size:13px; cursor:pointer; padding:8px; margin-top:2px;}
.lock-msg{color:#e07a5f; font-size:13px; min-height:16px; margin:0;}

/* ---- Scrollable bottom nav (more tabs) ---- */
.lib-tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.lib-tabs::-webkit-scrollbar{display:none;}
.lib-tabs button{flex:0 0 auto; white-space:nowrap;}

/* ---- Leads ---- */
.lead-top-actions{display:flex; gap:8px; align-items:center;}
.lead-top-actions .btn-save{flex:1;}
.batch-research{width:100%; margin-top:10px; background:rgba(176,141,87,.14); color:var(--brass); border:1px solid var(--brass); border-radius:11px; padding:11px; font-weight:700; font-size:13.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;}
.batch-research:disabled{opacity:.7;}
.lead-list{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.lead-card{display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:1px solid var(--line); background:var(--ink-2); border-radius:13px; padding:12px 13px; cursor:pointer;}
.lead-card:active{border-color:var(--sage);}
.lead-score{flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:var(--ink); color:var(--sage); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; border:1px solid transparent;}
.lead-score.strong{color:#7fb069; border-color:rgba(127,176,105,.4);}
.lead-score.mod{color:var(--brass); border-color:rgba(176,141,87,.4);}
.lead-score.weak{color:#e07a5f; border-color:rgba(224,122,95,.35);}
.lead-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.lead-name{color:var(--bone); font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lead-co{color:var(--muted); font-size:12.5px;}
.badge{flex:0 0 auto; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:7px; background:var(--ink); color:var(--muted);}
.badge.st-new,.badge.st-lead{color:#9bb0c4;}
.badge.st-researching,.badge.st-contacted,.badge.st-proposal{color:#B08D57;}
.badge.st-qualified,.badge.st-active{color:#7B8E74;}
.badge.st-won,.badge.st-done{color:#7fb069;}
.badge.st-lost{color:#e07a5f;}
.lead-cta-row{display:flex; gap:8px; align-items:center; margin-top:14px;}
.lead-cta-row .ai-btn{flex:1; margin-top:0;}
.lead-cta-row .asst-model{flex:0 0 42%;}
.lead-actions2{display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap;}
.research-box{margin-top:14px; border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--ink-2);}
.fit-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.fit-badge{display:flex; align-items:center; gap:9px; padding:8px 13px; border-radius:12px; border:1px solid;}
.fit-badge .fit-num{font-family:'Fraunces',serif; font-weight:900; font-size:22px; line-height:1;}
.fit-badge .fit-lbl{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.fit-badge.strong{background:rgba(127,176,105,.12); border-color:#7fb069; color:#7fb069;}
.fit-badge.mod{background:rgba(176,141,87,.12); border-color:var(--brass); color:var(--brass);}
.fit-badge.weak{background:rgba(224,122,95,.12); border-color:#e07a5f; color:#e07a5f;}
.fit-warn{flex:1; min-width:160px; font-size:12px; color:#e9b48c; background:rgba(224,122,95,.08); border:1px solid #5a3a32; border-radius:10px; padding:8px 11px; line-height:1.4;}
.r-summary{color:var(--bone); font-size:14px; line-height:1.5; margin:0 0 6px;}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{font-size:12px; background:var(--ink); color:var(--bone); border:1px solid var(--line); border-radius:20px; padding:5px 11px;}
.chip.removable{display:inline-flex; align-items:center; gap:6px;}
.chip.removable button{background:none; border:none; color:var(--muted); cursor:pointer; font-size:12px; padding:0;}
.outreach{display:flex; gap:10px; align-items:flex-start; background:var(--ink); border-radius:10px; padding:10px 12px;}
.outreach p{margin:0; flex:1; color:var(--bone); font-size:13.5px; line-height:1.5;}
.plan-meta{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--bone);}
.plan-meta b{color:var(--sage); font-weight:600;}
.post-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px;}
.post-card{border:1px solid var(--line); border-radius:11px; padding:10px; background:var(--ink); display:flex; flex-direction:column; gap:5px;}
.post-top{font-size:11px; color:var(--muted);}
.post-head{font-family:'Fraunces',serif; color:var(--bone); font-size:14px;}
.post-angle{font-size:12px; color:var(--muted); flex:1;}

/* ---- Automations / tasks ---- */
.task-new{display:flex; flex-direction:column; gap:9px; margin-top:8px; border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--ink-2);}
.task-new textarea{min-height:54px;}
.task-list{display:flex; flex-direction:column; gap:9px; margin-top:12px;}
.task-card{border:1px solid var(--line); border-radius:13px; padding:12px 13px; background:var(--ink-2);}
.task-card.paused{opacity:.62;}
.task-card.done{opacity:.5;}
.task-top{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.task-name{color:var(--bone); font-weight:600; font-size:14.5px;}
.task-meta{color:var(--muted); font-size:12px; margin-top:3px;}
.task-result{margin-top:8px; font-size:12.5px; color:var(--bone); background:var(--ink); border-radius:9px; padding:8px 10px; line-height:1.45;}
.task-result.err{color:#e07a5f;}
.task-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}

/* ---- Assistant workspace ---- */
.ws-hero{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.ws-mark{flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:linear-gradient(140deg,var(--sage),#5A6E80); color:#10130f; font-size:21px; display:flex; align-items:center; justify-content:center;}
.ws-hero h3{margin:0; font-family:'Fraunces',serif; color:var(--bone); font-size:18px;}
.ws-hero .ws-chat{flex:0 0 auto; margin-left:auto; width:auto; padding:10px 16px;}
.ws-items{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.ws-item{display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:11px; padding:10px 12px; background:var(--ink-2);}
.ws-item.done{opacity:.55;}
.ws-item.done .ws-title{text-decoration:line-through;}
.ws-check{flex:0 0 auto; background:none; border:none; color:var(--sage); font-size:18px; cursor:pointer; line-height:1; padding:0;}
.ws-item-body{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0;}
.ws-kind{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.ws-title{color:var(--bone); font-size:14px;}
.ws-content{color:var(--muted); font-size:12.5px;}

/* ---- Admin: chips, checkbox, model spend ---- */
.chip-edit{margin:4px 0 10px;}
.chip-edit > label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px;}
.chip-row{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px;}
.chip-add{display:flex; gap:7px;}
.chip-add .input{flex:1;}
.admin-check{display:flex; align-items:center; gap:9px; color:var(--bone); font-size:13.5px; margin:6px 0 12px; cursor:pointer;}
.admin-check input{width:17px; height:17px; accent-color:var(--sage);}
.model-spend{display:flex; flex-direction:column; gap:6px;}
.ms-row{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; border:1px solid var(--line); border-radius:9px; padding:7px 10px; background:var(--ink);}
.ms-name{color:var(--bone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ms-meta{color:var(--muted); flex:0 0 auto;}

/* ---- Client detail: head, portfolio, agent ---- */
.client-head{margin:10px 0 6px;}
.client-head h3{margin:0; font-family:'Fraunces',serif; color:var(--bone); font-size:20px;}
.cl-log{display:flex; flex-direction:column; gap:8px; max-height:46dvh; overflow-y:auto; border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--ink-2); margin:10px 0;}
.portfolio .pf-cover{border-radius:16px; padding:22px 18px; background:linear-gradient(150deg,var(--ink-2),var(--ink)); border:1px solid var(--line); text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px; margin-bottom:6px;}
.pf-title{font-family:'Fraunces',serif; color:var(--bone); font-size:23px;}
.pf-tag{color:var(--muted); font-size:13.5px; font-style:italic;}

/* ---- Co-design board (realtime) ---- */
.board-bar{display:flex; align-items:center; gap:8px; margin:4px 0 8px; flex-wrap:wrap;}
.board-hint{color:var(--muted); font-size:11px; margin-left:auto;}
.board-presence{display:inline-flex; align-items:center; gap:4px;}
.pres-dot{width:8px; height:8px; border-radius:50%; background:var(--sage); display:inline-block;}
.pres-n{color:var(--muted); font-size:11px; margin-left:2px;}
.board-surface{position:relative; width:100%; height:min(64vh,480px); border:1px solid var(--line); border-radius:16px; background:
  radial-gradient(circle at 18px 18px, rgba(255,255,255,.04) 1.5px, transparent 1.5px) 0 0/26px 26px, var(--ink-2);
  overflow:hidden; touch-action:pan-y;}
.board-empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;}
.board-card{position:absolute; transform:translate(-50%,-50%); cursor:grab; user-select:none; touch-action:none;}
.board-card.grabbing{cursor:grabbing; z-index:5; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));}
.board-card.note{width:128px; min-height:96px; border-radius:10px; padding:11px 12px 24px; color:#1a1712; font-size:13px; font-weight:600; box-shadow:0 3px 8px rgba(0,0,0,.32); line-height:1.35;}
.board-card.note .bc-text{display:block; word-break:break-word; white-space:pre-wrap;}
.board-card.note .bc-empty{opacity:.5; font-style:italic; font-weight:500;}
/* Expanded board cards: ad / before-after / lead / client */
.board-card.ad{width:132px;}
.board-card.ad .bc-img{height:104px;}
.bc-label{display:block; font-size:11px; font-weight:600; color:var(--bone); margin-top:4px; padding:0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 3px rgba(0,0,0,.6);}
.board-card.beforeafter{width:208px;}
.bc-ba{display:flex; gap:3px; border-radius:10px; overflow:hidden; box-shadow:0 3px 8px rgba(0,0,0,.32); border:1px solid var(--line);}
.bc-ba-half{position:relative; flex:1; height:118px; background-size:cover; background-position:center; background-color:var(--ink);}
.bc-ba-half span{position:absolute; left:4px; bottom:4px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; background:rgba(28,26,23,.72); color:var(--bone); padding:2px 6px; border-radius:5px;}
.board-card.lead,.board-card.client{display:flex; align-items:center; gap:9px; width:172px; padding:10px 11px; border-radius:11px; background:var(--ink-2); border:1px solid var(--line); box-shadow:0 3px 8px rgba(0,0,0,.3);}
.bc-score{flex:0 0 auto; width:28px; height:28px; border-radius:7px; background:var(--sage); color:#10130f; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;}
.bc-ico{flex:0 0 auto; width:28px; height:28px; border-radius:7px; background:var(--brass); color:#1b140a; display:flex; align-items:center; justify-content:center; font-size:14px;}
.bc-entity{display:flex; flex-direction:column; min-width:0;}
.bc-entity .bc-name{font-size:13px; font-weight:600; color:var(--bone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bc-entity .bc-sub{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pick-list{display:flex; flex-direction:column; gap:4px; max-height:54vh; overflow-y:auto;}
.pick-list button{text-align:left;}
.board-card.image{width:130px; height:130px;}
.bc-img{width:100%; height:100%; border-radius:10px; background-size:cover; background-position:center; border:1px solid var(--line); box-shadow:0 3px 8px rgba(0,0,0,.32);}
.bc-del{position:absolute; top:3px; right:3px; width:20px; height:20px; border:none; border-radius:6px; background:rgba(0,0,0,.32); color:#fff; font-size:11px; cursor:pointer; line-height:1; opacity:0; transition:opacity .12s;}
.bc-use{position:absolute; left:3px; bottom:3px; border:none; border-radius:7px; background:rgba(123,142,116,.92); color:#10130f; font-size:10.5px; font-weight:800; padding:3px 7px; cursor:pointer; line-height:1; opacity:0; transition:opacity .12s;}
.board-card:hover .bc-del,.board-card.grabbing .bc-del,.board-card:hover .bc-use{opacity:1;}
@media (hover:none){ .bc-del,.bc-use{opacity:.92;} }
.bc-edit{width:100%; height:72px; border:none; background:rgba(255,255,255,.4); border-radius:6px; padding:6px; font-size:16px; font-weight:600; color:#1a1712; resize:none;}

/* ---- Polish: toasts, screen transitions, focus ---- */
.toast{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translate(-50%,16px); z-index:120; background:var(--ink-2); color:var(--bone); border:1px solid var(--line); border-radius:12px; padding:11px 18px; font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; max-width:88vw; text-align:center;}
.toast.show{opacity:1; transform:translate(-50%,0);}
.toast.err{border-color:#5a3a32; color:#f0a892;}
.toast.ok{border-color:#3c4a37;}
[id^="screen"]:not([hidden]){animation:scrIn .2s ease;}
@keyframes scrIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.input:focus,textarea:focus,select:focus{outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(123,142,116,.18);}
.btn-mini:focus-visible,.btn-save:focus-visible,.lib-tile:focus-visible{outline:2px solid var(--sage); outline-offset:2px;}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--sage); outline-offset:2px;}
/* Library skeleton shimmer */
.lib-skel{aspect-ratio:4/5; border-radius:14px; background:linear-gradient(100deg,var(--ink-2) 30%,rgba(255,255,255,.05) 50%,var(--ink-2) 70%); background-size:200% 100%; animation:shim 1.2s infinite;}
@keyframes shim{from{background-position:200% 0;} to{background-position:-200% 0;}}
.spinner{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Threaded assistant chat chrome ---- */
.asst-icon{appearance:none; border:none; background:transparent; color:var(--muted); font-size:18px; cursor:pointer; padding:4px 8px; border-radius:8px; line-height:1;}
.asst-icon:active{color:var(--bone);}
.asst-top .asst-title{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.asst-sub{display:flex; align-items:center; gap:10px; padding:6px 12px; border-bottom:1px solid var(--line);}
.asst-model{flex:1; min-width:0; background:var(--ink); color:var(--bone); border:1px solid var(--line); border-radius:9px; padding:7px 9px; font-size:12px;}
.asst-threads{position:absolute; top:46px; left:0; right:0; bottom:0; background:var(--ink-2); z-index:6; overflow-y:auto; border-top:1px solid var(--line);}
.thread-new{width:100%; text-align:left; background:var(--ink); color:var(--sage); border:none; border-bottom:1px solid var(--line); padding:13px 14px; font-weight:600; font-size:14px; cursor:pointer; position:sticky; top:0;}
.thread-row{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer;}
.thread-row.on{background:var(--ink);}
.thread-title{flex:1; color:var(--bone); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.thread-del{background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; padding:4px;}

/* ---- Shared threaded chat (chat.js): popup + full-screen workspace ---- */
.asst-top-min{justify-content:space-between; padding:8px 12px;}
.asst-hint{font-size:11px; color:var(--muted);}
.asst-chat-root{flex:1; display:flex; flex-direction:column; min-height:0; position:relative;}
.ws-chat-full{display:flex; flex-direction:column; min-height:0; position:relative; height:min(70vh,640px); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--ink);}
.chat-head{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line);}
.chat-title{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Fraunces',serif; color:var(--bone); font-size:15px;}
.chat-sub{display:flex; align-items:center; gap:10px; padding:6px 12px; border-bottom:1px solid var(--line);}
.chat-sub .asst-model{flex:1; min-width:0;}
.chat-threads{position:absolute; top:0; left:0; right:0; bottom:0; background:var(--ink-2); z-index:6; overflow-y:auto;}
.chat-log{min-height:0;}
.chat-suggest{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px;}
.chat-chip{background:rgba(123,142,116,.1); color:var(--sage); border:1px solid var(--sage); border-radius:16px; padding:8px 13px; font-size:12.5px; font-weight:600; cursor:pointer; text-align:left;}
.chat-chip:active{transform:scale(.97);}
/* SVG icons inside chat controls */
.ico{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; display:block;}
.asst-icon{display:flex; align-items:center; justify-content:center;}
.asst-send .ico{width:20px; height:20px; fill:currentColor; stroke:none;}
.asst-send:has(.ico){display:flex; align-items:center; justify-content:center; width:46px; flex:0 0 auto; padding:0;}
.asst-fab svg{width:26px; height:26px; fill:#1b140a; stroke:none;}
.asst-fab{display:flex; align-items:center; justify-content:center;}
.asst-close{display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; color:var(--muted); padding:4px;}
.asst-close svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
/* Bottom-sheet grip handle on the popup */
.asst-top-min{flex-direction:column; gap:6px; padding-top:8px; position:relative;}
.asst-grip-bar{width:38px; height:4px; border-radius:3px; background:var(--line);}
.asst-top-min .asst-hint{text-align:center; padding:0 36px;}
.asst-top-min .asst-close{position:absolute; top:8px; right:10px;}

/* Editor: embedded workflow runner */
.ed-flows{flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line); background:var(--ink-2); color:var(--bone); border-radius:9px; cursor:pointer;}
.ed-flows svg{width:18px; height:18px;}
.ed-flows:active{transform:scale(.94); border-color:var(--sage);}
.wfr-list{display:flex; flex-direction:column; gap:6px; padding:4px;}
.wfr-row{display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--ink); border-radius:11px; padding:9px 11px;}
.wfr-name{flex:1; color:var(--bone); font-weight:600; font-size:14px;}
.wfr-result{border:1px solid var(--line); background:var(--ink); border-radius:11px; padding:10px 12px; margin:6px 4px;}
.wfr-result-top{font-weight:700; font-size:12.5px; color:var(--sage); margin-bottom:5px;}
.wfr-result-out{font-size:13px; color:var(--bone); line-height:1.5; white-space:pre-wrap; word-break:break-word; max-height:220px; overflow-y:auto;}
.wfr-actions{display:flex; gap:8px; margin-top:9px;}
.team-ask-row{display:flex; gap:8px; align-items:center; margin:10px 0 8px;}
.team-ask-row .asst-action{align-self:auto; margin:0;}
.team-ask-row .asst-model{flex:1; min-width:0;}
.src-list{margin:6px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px;}
.src-list a{color:var(--sage); font-size:12px; word-break:break-all;}

/* ---- Automations toggle + workflow editor ---- */
.auto-toggle{display:flex; gap:6px; margin:6px 0 10px;}
.auto-toggle button{flex:1; background:var(--ink); color:var(--muted); border:1px solid var(--line); border-radius:10px; padding:9px; font-size:13px; font-weight:600; cursor:pointer;}
.auto-toggle button.on{background:var(--ink-2); color:var(--bone); border-color:var(--sage);}
.wf-head{display:flex; flex-direction:column;}
.wf-list{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.wf-card{border:1px solid var(--line); border-radius:13px; padding:12px 13px; background:var(--ink-2);}
.wf-card-top{display:flex; justify-content:space-between; align-items:center;}
.wf-name{color:var(--bone); font-weight:600; font-size:15px;}
.wf-steps-preview{display:flex; flex-wrap:wrap; gap:5px; margin:8px 0;}
.wf-pill{font-size:11px; background:var(--ink); color:var(--muted); border:1px solid var(--line); border-radius:7px; padding:3px 8px;}
.wf-steps{display:flex; flex-direction:column; gap:9px;}
.wf-step{border:1px solid var(--line); border-radius:12px; background:var(--ink-2); overflow:hidden;}
.wf-step-top{display:flex; align-items:center; gap:9px; padding:9px 11px; background:var(--ink); border-bottom:1px solid var(--line);}
.wf-step-n{width:22px; height:22px; flex:0 0 auto; border-radius:6px; background:var(--sage); color:#10130f; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;}
.wf-step-label{flex:1; color:var(--bone); font-weight:600; font-size:13.5px;}
.wf-step-tools{display:flex; gap:3px;}
.wf-tool{width:26px; height:26px; border:none; background:transparent; color:var(--muted); border-radius:7px; cursor:pointer; font-size:13px;}
.wf-tool:disabled{opacity:.3;}
.wf-tool.danger{color:#e07a5f;}
.wf-step-body{padding:11px; display:flex; flex-direction:column; gap:9px;}
.wf-f{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted);}
.wf-f textarea,.wf-f .input,.wf-f select{width:100%;}
.wf-add{display:flex; gap:8px; margin:12px 0; align-items:center;}
.wf-add select{flex:1;}

/* ---- Markdown in chat bubbles ---- */
.md p{margin:0 0 6px;} .md p:last-child{margin-bottom:0;}
.md h3,.md h4{margin:6px 0 4px; font-family:'Fraunces',serif; font-size:14px; color:inherit;}
.md ul,.md ol{margin:4px 0 6px; padding-left:18px;} .md li{margin:2px 0;}
.md code{background:rgba(255,255,255,.1); border-radius:4px; padding:1px 5px; font-size:.9em; font-family:ui-monospace,Menlo,monospace;}
.md pre{background:rgba(0,0,0,.28); border-radius:8px; padding:9px 11px; overflow-x:auto; margin:6px 0;}
.md pre code{background:none; padding:0;}
.md a{color:var(--sage); text-decoration:underline;}
.md strong{font-weight:700;}
.team-msg .md{display:block;}

/* ---- Live cursors on the co-design board ---- */
.board-cursor{position:absolute; transform:translate(-2px,-2px); z-index:8; pointer-events:none; transition:left .08s linear, top .08s linear; display:flex; align-items:center; gap:4px;}
.board-cursor .bc-dot{width:12px; height:12px; border-radius:50% 50% 50% 2px; box-shadow:0 1px 3px rgba(0,0,0,.4);}
.board-cursor .bc-name{font-size:10px; font-weight:700; color:#fff; background:rgba(0,0,0,.5); padding:1px 6px; border-radius:7px; white-space:nowrap;}

/* ========================================================================
   iOS & touch ease-of-life
   ======================================================================== */
/* Prevent Safari's auto-zoom when focusing a text field (needs >=16px). */
input, textarea, select, .input, .signin-input, .asst-input textarea, .asst-model, .admin-role { font-size:16px; }
/* Snappy taps: no 300ms delay, no grey flash, no long-press callout on controls. */
* { -webkit-tap-highlight-color: transparent; }
button, a, .lib-tile, .lead-card, .client-card, .board-card, label.src-btn, .upload-cam, input[type="checkbox"] { touch-action: manipulation; -webkit-touch-callout: none; }
/* Momentum scrolling + stop the whole page rubber-banding on overscroll. */
html, body { overscroll-behavior: none; }
.lib-grid, .asst-log, .chat-log, .cl-log, .team-log, .picker-grid, .pick-list, .feed, .sub-body, .lead-list, .client-list, .task-list, .wf-list, .ws-items, .mem-list, .chat-threads, .asst-threads { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Comfortable minimum tap targets on phones. */
@media (hover: none) and (pointer: coarse) {
  .lib-tabs button { min-height: 44px; }
  .btn-mini { min-height: 36px; }
  .sheet button { min-height: 48px; }
}
/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* "Add to Home Screen" hint (iOS Safari only — no install prompt API there). */
.a2hs{position:fixed; left:12px; right:12px; bottom:calc(12px + var(--safe-b)); z-index:130; background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:10px; box-shadow:0 10px 30px rgba(0,0,0,.5); animation:scrIn .25s ease;}
.a2hs p{margin:0; flex:1; font-size:12.5px; color:var(--bone); line-height:1.4;}
.a2hs .a2hs-share{color:var(--sage); font-weight:700;}
.a2hs button{flex:0 0 auto; background:var(--ink); border:1px solid var(--line); color:var(--muted); border-radius:9px; padding:7px 11px; font-size:12px; cursor:pointer;}

/* Leads: list/board view toggle */
.view-toggle{display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; flex:0 0 auto;}
.view-toggle .vt{appearance:none; border:none; background:var(--ink); color:var(--muted); font-size:15px; line-height:1; padding:8px 11px; cursor:pointer;}
.view-toggle .vt.on{background:var(--ink-2); color:var(--sage);}

/* Leads: pipeline kanban board */
.kanban{display:flex; gap:10px; overflow-x:auto; padding:4px 0 10px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;}
.kcol{flex:0 0 78%; max-width:300px; scroll-snap-align:start; display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:9px;}
.kcol-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.kcount{font-size:12px; color:var(--muted); font-weight:700;}
.kcol-body{display:flex; flex-direction:column; gap:8px; min-height:42px; border-radius:10px; transition:background .12s;}
.kcol-body.over{background:rgba(123,142,116,.14); outline:1px dashed var(--sage);}
.kcard{background:var(--ink); border:1px solid var(--line); border-radius:11px; padding:9px 10px; cursor:grab;}
.kcard.dragging{opacity:.5;}
.kcard-open{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:none; color:var(--bone); cursor:pointer; padding:0;}
.kmove{margin-top:8px; width:100%; background:var(--ink-2); color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:5px 7px; font-size:12px; text-transform:capitalize;}
@media(min-width:760px){ .kcol{flex:0 0 220px;} }

/* Deep-research report */
.rpt-title{font-family:'Fraunces',serif; color:var(--bone); font-size:18px; margin:0 0 10px;}
.rpt-section{margin-top:4px;}
.rpt-body{color:var(--bone); font-size:13.5px; line-height:1.5; margin:0 0 6px; white-space:pre-wrap;}

/* Co-design board — drill-down detail popup */
.board-card.ad,.board-card.image,.board-card.beforeafter{cursor:pointer;}
.bd-detail-ov{position:fixed; inset:0; z-index:1200; background:rgba(8,10,7,.78); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:18px;}
.bd-detail{position:relative; width:min(520px,100%); max-height:90dvh; overflow:auto; background:var(--ink); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.5);}
.bd-detail-x{position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,.5); color:#fff; font-size:15px; cursor:pointer;}
.bd-detail-media{width:100%; aspect-ratio:4/5; background:#0c0e0a; border-radius:18px 18px 0 0; overflow:hidden;}
.bd-detail-img{width:100%; height:100%; background-size:contain; background-repeat:no-repeat; background-position:center;}
.bd-detail-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px calc(14px + env(safe-area-inset-bottom));}
.bd-detail-title{font-size:14px; color:var(--bone); font-weight:600;}
.bd-detail-foot .ai-btn{width:auto; flex:0 0 auto; margin:0; padding:9px 16px;}

/* Before / after compare slider */
.bd-compare{position:relative; width:100%; aspect-ratio:4/5; border-radius:18px 18px 0 0; overflow:hidden; touch-action:none; background:#0c0e0a; cursor:ew-resize; user-select:none;}
.bd-compare-after,.bd-compare-before{position:absolute; inset:0; background-size:cover; background-position:center;}
.bd-compare-before{clip-path:inset(0 50% 0 0);}
.bd-compare-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.25); pointer-events:none;}
.bd-compare-grip{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:32px; height:32px; border-radius:50%; background:#fff; color:#10130f; display:flex; align-items:center; justify-content:center; font-size:14px; box-shadow:0 2px 8px rgba(0,0,0,.4);}
.bd-compare-tag{position:absolute; bottom:10px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; color:#fff; background:rgba(0,0,0,.55);}
.bd-tag-b{left:10px;} .bd-tag-a{right:10px;}

/* Workflow builder — variables, dynamic inputs, conditions */
.wf-vars-hint{margin:0 0 10px;}
.wf-vars-hint code{background:var(--ink-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:11.5px; color:var(--brass);}
.wf-adv{margin-top:9px; border-top:1px dashed var(--line); padding-top:8px;}
.wf-adv summary{cursor:pointer; font-size:12.5px; color:var(--brass); list-style:none;}
.wf-adv summary::-webkit-details-marker{display:none;}
.wf-cond{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px;}
.wf-cond-lbl{font-size:12.5px; color:var(--bone); opacity:.75;}
.wf-cond input{flex:1 1 90px; min-width:78px;}
.wf-cond select{flex:0 0 auto;}
.wfi-form{display:flex; flex-direction:column; gap:10px; padding:6px 2px 12px;}

/* Editor — on-canvas direct manipulation (Phase 4) */
#preview{touch-action:none;}
.canvas-edit{position:fixed; z-index:1300; min-height:42px; padding:6px 9px; border:2px solid #7B8E74; border-radius:9px; background:rgba(18,20,16,.96); color:#fff; font:600 18px 'Fraunces',serif; line-height:1.15; resize:none; box-shadow:0 10px 34px rgba(0,0,0,.55); outline:none;}
.canvas-toolbar{position:fixed; z-index:1305; display:flex; gap:4px; padding:5px; background:rgba(18,20,16,.97); border:1px solid var(--line); border-radius:11px; box-shadow:0 8px 26px rgba(0,0,0,.5);}
.canvas-toolbar button{min-width:34px; height:34px; border:none; border-radius:8px; background:var(--ink-2); color:var(--bone); font:600 13px Inter,sans-serif; cursor:pointer; padding:0;}
.canvas-toolbar button.on{background:#7B8E74; color:#10130f;}
.canvas-toolbar .ct-color{width:34px; height:34px; border-radius:8px; overflow:hidden; position:relative; background:var(--ink-2); display:inline-flex;}
.canvas-toolbar .ct-color input{position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); border:none; padding:0; background:transparent; cursor:pointer;}
.canvas-toolbar button.danger{color:#e07a5f;}
.add-els{display:flex; gap:8px;}
.add-els button{flex:1; padding:10px 6px; border:1px solid rgba(123,142,116,.45); border-radius:9px; background:var(--ink-2); color:var(--bone); font:600 13px Inter,sans-serif; cursor:pointer;}
.add-els button:active{background:#7B8E74; color:#10130f;}
.ed-icon{background:none; border:none; color:var(--bone); font-size:19px; line-height:1; cursor:pointer; padding:4px 5px; opacity:.92;}
.ed-icon:disabled{opacity:.3; cursor:default;}
@media (hover:none){
  .canvas-toolbar button,.canvas-toolbar .ct-color{min-width:40px; height:40px;}
  .ed-icon{font-size:21px; padding:6px 8px;}
}