:root{
  --night:#06110C;--ink:#0B1A14;--green:#0E7A4E;--bright:#1BA46B;--mint:#7EE2B0;--bg:#EEF6F1;--card:#FFFFFF;--line:#DCEBE2;--body:#2A3A33;--muted:#5E6F67;
  --grad:linear-gradient(135deg,#075C3A 0%,#0E7A4E 45%,#1BA46B 100%);--grad-btn:linear-gradient(135deg,#075C3A 0%,#0A6B44 50%,#0E7A4E 100%);--shadow:0 18px 40px rgba(8,80,50,.12);
  --f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--f);background:var(--bg);color:var(--body);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#0B1A14;padding:8px 14px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--bright);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(10px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 10px calc(20px + env(safe-area-inset-left));background:rgba(6,17,12,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#CFE3D8}
.bar img{display:block;width:112px;height:auto}
.bar-r{display:flex;gap:10px;align-items:center}
.ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid currentColor;color:inherit;font:600 14px var(--f);padding:8px 14px;border-radius:999px;cursor:pointer;text-decoration:none}
.ghost.sm{padding:6px 12px;font-size:13px;color:var(--green);border-color:var(--line);margin-left:auto}
.clearbtn+.ghost.sm{margin-left:0}
.pts{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;border:0;border-radius:999px;padding:8px 14px;font:800 14px var(--f);cursor:pointer}
.main{flex:1;width:100%;max-width:1220px;margin:0 auto;padding:24px 20px 48px}
.loading{text-align:center;color:var(--muted);padding:80px 0}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:960px){.grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:start}.side{position:sticky;top:84px}}
.card,.chat{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.chat{display:flex;flex-direction:column;min-height:70vh;container-type:inline-size}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.chat-head small{display:block;color:var(--muted);font-size:13px}
.sfl-badge{width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font:800 13px var(--f);letter-spacing:.06em;flex:none}
.thread{list-style:none;margin:0;padding:18px;display:flex;flex-direction:column;gap:14px;flex:1;overflow-y:auto;max-height:68vh}
.msgrow{display:flex;gap:10px;align-items:flex-start;max-width:100%}
.msgrow.me{justify-content:flex-end}
.msgrow .sfl-badge{width:30px;height:30px;border-radius:9px;font-size:10px}
.bubble{background:#F3F9F5;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;line-height:1.55;font-size:15px;max-width:min(560px,86%);overflow-wrap:anywhere}
.me .bubble{background:var(--ink);color:#fff;border-color:var(--ink);border-radius:16px 16px 4px 16px;white-space:pre-line}
.bubble ul{margin:6px 0 0 18px;padding:0}
.typing{display:inline-flex;gap:4px}.typing i{width:7px;height:7px;border-radius:50%;background:var(--bright);animation:b 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes b{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.qform{display:grid;gap:14px;width:100%;margin-top:8px}
.q{display:grid;gap:6px;font-weight:700;color:var(--ink);font-size:14px}
.q small{font-weight:500;color:var(--muted)}
.q .req{color:#C0392B}
input[type=text],input[type=tel],input[type=date],input[type=time],select,textarea{font:500 16px var(--f);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;width:100%}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--bright);box-shadow:0 0 0 4px rgba(27,164,107,.18)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}.chips input{position:absolute;opacity:0}
.chips span{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:14px}
.chips input:checked+span{background:var(--grad);color:#fff;border-color:transparent}
.drop{display:flex;align-items:center;gap:12px;border:1.5px dashed #B9D8C6;border-radius:14px;padding:12px;background:#fff;cursor:pointer;font-weight:600;color:var(--green)}
.drop input{display:none}
.thumb{width:56px;height:56px;border-radius:10px;object-fit:cover;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/14px 14px;border:1px solid var(--line);flex:none}
.person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff}
.person .fields{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:8px}
.person .fields .drop{grid-column:1/-1;padding:8px}
.person .rm{grid-column:1/-1;justify-self:end;background:none;border:0;color:#C0392B;font:600 13px var(--f);cursor:pointer}
.addp{justify-self:start;background:none;border:1px dashed var(--bright);color:var(--green);border-radius:999px;padding:8px 14px;font:700 14px var(--f);cursor:pointer}
.composer{border-top:1px solid var(--line);padding:14px 16px;display:grid;gap:10px}
.composer-r{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.composer-r small{color:var(--muted);font-size:13px;flex:1 1 180px;min-width:0}
.learn{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--muted);line-height:1.4;cursor:pointer}
.learn input{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:#0E7A4E}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:0;border-radius:999px;background:var(--grad-btn);color:#fff;font:700 15px var(--f);cursor:pointer;box-shadow:0 10px 22px rgba(14,122,78,.25)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.line{background:#fff;color:var(--green);border:2px solid var(--green);box-shadow:none}
.msg{font-size:14px;font-weight:600;min-height:1.2em;margin:0}
.msg.err{color:#C0392B}.msg.ok{color:var(--green)}
.side{display:grid;gap:20px}
.card{padding:16px}
.result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;color:var(--ink)}
.rev{font:800 12px var(--f);color:var(--green);background:#E3F4EA;border-radius:999px;padding:5px 10px;white-space:nowrap}
.stage{aspect-ratio:4/5;border-radius:14px;background:#0B1A14;display:grid;place-items:center;overflow:hidden;position:relative}
.stage img{width:100%;height:100%;object-fit:contain;display:block}
.empty{text-align:center;color:#CFE3D8;padding:24px}.empty p{font-weight:800;margin:0 0 6px;color:#fff}.empty small{color:#9DB8AA}
.pipe{list-style:none;margin:0;padding:24px;display:grid;gap:14px;color:#9DB8AA;font-weight:600}
.pipe li{display:flex;align-items:center;gap:12px}
.pipe i{width:18px;height:18px;border-radius:50%;border:2px solid #355447;flex:none}
.pipe li.on{color:#fff}.pipe li.on i{border-color:var(--mint);border-top-color:transparent;animation:spin 1s linear infinite}
.pipe li.done{color:var(--mint)}.pipe li.done i{background:var(--bright);border-color:var(--bright)}
@keyframes spin{to{transform:rotate(360deg)}}
.notes{font-size:13px;line-height:1.55;color:var(--muted);margin-top:12px;background:#F7FBF8;border:1px solid var(--line);border-radius:12px;padding:10px 12px;overflow-wrap:anywhere}
.notes b{color:var(--ink)}
.res-actions{margin-top:12px}
/* icons under a flyer (panel and chat): download, change, share, like, dislike, try again */
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}
.acts .ico{display:inline-flex;align-items:center;gap:6px;min-width:40px;height:40px;padding:0 10px;justify-content:center;border:1px solid transparent;border-radius:10px;background:none;color:var(--muted);cursor:pointer;font:700 13px var(--f)}
.acts .ico:hover{background:#F0F7F3;color:var(--ink);border-color:var(--line)}
.acts .ico[aria-pressed="true"]{color:var(--green);background:#E3F4EA}
.acts .ico[aria-pressed="true"] svg{fill:currentColor;fill-opacity:.18}
.acts .ico:disabled{opacity:.5;cursor:default}
.acts .ico[data-act="retry"]{color:var(--green);border-color:var(--line)}
/* a reference flyer split into layers */
.layers{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.layers img{width:84px;height:auto;border-radius:10px;flex:none;border:1px solid var(--line)}
.recent{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.recent li{display:flex;align-items:center;gap:12px;position:relative}
.recent button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:1px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;min-width:0}
.recent button:hover{border-color:var(--bright)}
.recent img,.recent .ph{width:44px;height:55px;border-radius:8px;object-fit:cover;background:#0B1A14;flex:none}
.recent b{display:block;color:var(--ink);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent small{color:var(--muted);font-size:12px}
.sheet{position:fixed;inset:0;z-index:50;background:rgba(6,17,12,.6);display:grid;place-items:end center;padding:0}
@media (min-width:640px){.sheet{place-items:center;padding:20px}}
.sheet-card{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:24px 20px 28px}
@media (min-width:640px){.sheet-card{border-radius:22px}}
.sheet h2{margin:0 0 4px;color:var(--ink);padding-right:36px;overflow-wrap:anywhere}.sheet h3{margin:0 0 4px;color:var(--ink);font-size:16px}
.big{font-size:22px;font-weight:800;color:var(--green);margin:6px 0}
.x{position:absolute;right:14px;top:10px;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--muted)}
.packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 8px}
.pack{border:1px solid var(--line);border-radius:14px;padding:14px;background:#F7FBF8;text-align:left;cursor:pointer;font:inherit;color:inherit}
.pack:hover{border-color:var(--bright)}
.pack b{display:block;font-size:20px;color:var(--ink)}.pack span{display:block;color:var(--muted);font-size:13px}.pack em{font-style:normal;font-weight:800;color:var(--green)}
.biz{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.biz form{display:grid;gap:10px;margin-top:10px}
@media (max-width:520px){.person .fields{grid-template-columns:1fr}.bar .ghost span{display:none}.thread{max-height:none}}
.btn.sm{padding:8px 16px;font-size:14px}
.qref{border-top:1px dashed var(--line);padding-top:14px}
.qref .drop+.drop{margin-top:8px}
.attach{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.attach input{display:none}
.refchip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:6px 8px;font-size:13px;color:var(--muted)}
.refchip img{width:40px;height:50px;object-fit:cover;border-radius:6px}
.refchip span{flex:1}
.refchip .x{position:static;background:none;border:0;font-size:20px;cursor:pointer;color:var(--muted)}
.recent .del{width:auto;flex:none;border:0;padding:6px;color:var(--muted);background:none}
.recent .del:hover{color:#B3261E}
.recent .confirm{display:flex;gap:6px;flex:none}
.recent .confirm button{width:auto;padding:6px 10px;font-size:13px}
.recent .confirm .yes{color:#fff;background:#B3261E;border-color:#B3261E}
.qbrand{margin-top:8px}
.refmsg{display:block;width:120px;max-width:180px;border-radius:10px;margin-top:8px}
.mthumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding-right:6px}
.mthumbs .mt{position:relative;width:64px;height:64px}
.mthumbs img{width:64px;height:64px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.mthumbs .mx{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:#0B1A14;color:#fff;font:700 14px/22px var(--f);cursor:pointer;padding:0}
.modes{display:inline-flex;gap:2px;margin-left:auto;margin-right:8px;padding:3px;border-radius:999px;background:#EEF6F1;border:1px solid var(--line)}
.modes button{border:0;background:none;padding:6px 12px;border-radius:999px;font:700 13px var(--f);color:#3B5247;cursor:pointer}
.modes button[aria-pressed="true"]{background:var(--green);color:#fff}
.vform select{width:100%;min-height:44px;border-radius:12px;border:1px solid var(--line);padding:0 10px;font:600 14px var(--f);background:#fff}
.vprice{font-size:14px;margin:4px 0 0}
.mthumbs .vclip{display:grid;place-items:center;width:64px;height:64px;border-radius:10px;background:#0B1A14;color:#fff;font:600 10px var(--f);text-align:center;padding:4px;word-break:break-all}
#resVid{display:block;width:100%;max-height:70vh;border-radius:14px;background:#000}
@media (max-width:520px){.modes button{padding:6px 9px;font-size:12px}}
/* narrow chat panel: the Flyer / Motion video switch takes its own full-width row so the title and subtitle keep their space */
@container (max-width:640px){.chat-head{flex-wrap:wrap;row-gap:12px}.chat-head .wsw{flex:1 1 0}.chat-head .modes{order:5;display:flex;flex:1 0 100%;margin:0}.chat-head .modes button{flex:1;padding:8px 10px;font-size:13px}}
/* workspaces */
.wsw{position:relative;min-width:0;flex:1}
.wsbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:2px 0;font:800 16px var(--f);color:var(--ink);cursor:pointer;max-width:100%}
.wsbtn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wsmenu{position:absolute;top:calc(100% + 8px);left:-52px;z-index:30;width:min(320px,calc(100vw - 80px));background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px}
.wsmenu ul{list-style:none;margin:0;padding:0;max-height:240px;overflow:auto}
.wsmenu li button,.wsact button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:10px 12px;font:600 14px var(--f);color:var(--ink);cursor:pointer;overflow-wrap:anywhere}
.wsmenu li button:hover,.wsact button:hover{background:#F3F9F5}
.wsmenu li button[aria-current]{background:#E7F5EC;color:var(--green)}
.wsact{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.wsact .danger,.linkbtn.danger{color:#C0392B}
.wsform{display:flex;gap:8px;padding:8px 4px 4px}
.wsform input{flex:1;min-width:0}
/* pictures in the composer */
.attach-list{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.att{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:6px 8px;background:#fff;max-width:100%}
.att img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none}
.att select{width:auto;max-width:200px;padding:6px 8px;font-size:14px;min-width:0}
.att .x{background:none;border:0;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;position:static;flex:none}
.linkbtn{background:none;border:0;padding:4px 6px;font:700 13px var(--f);color:var(--green);cursor:pointer;text-decoration:underline}
/* tasks */
.tsub{font-size:13px;margin:0 0 10px}
.tasks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tasks>li{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:8px}
.tasks>li.muted{border:0;padding:0}
.tasks small{display:block;color:var(--muted);font-weight:500;margin-top:4px;line-height:1.5}
.tact{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pill{font-style:normal;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:#E7F5EC;color:var(--green);margin-left:4px;white-space:nowrap}
.pill.warn{background:#FFF3D6;color:#8A5A00}.pill.off{background:#EEE;color:#666}
.tform{display:grid;gap:14px}
.q.two{grid-template-columns:1fr 1fr;gap:12px}.q.two label{display:grid;gap:6px}
.chips .soon span{opacity:.55}.chips .soon em{font-style:normal;font-size:11px;font-weight:800;margin-left:6px;color:#8A5A00}
.days span{min-width:52px;text-align:center}
.modecards{display:grid;gap:8px}
.modecards label{display:block;cursor:pointer}.modecards input{position:absolute;opacity:0}
.modecards span{display:block;border:1px solid var(--line);border-radius:14px;padding:12px;font-weight:500;color:var(--body);font-size:14px;line-height:1.5}
.modecards b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.modecards input:checked+span{border-color:var(--bright);box-shadow:0 0 0 3px rgba(27,164,107,.18);background:#F3F9F5}
#taskSheet .sheet-card,#dirSheet .sheet-card{max-height:90vh;overflow:auto}
@media (max-width:520px){.q.two{grid-template-columns:1fr}}
/* long names and words: nothing may push the columns wider than the screen */
.chat,.side,.side>.card{min-width:0}
.result-head b{min-width:0;overflow-wrap:anywhere}
.recent>li,.tasks>li{min-width:0}.recent button>span{flex:1;min-width:0}
.tasks>li>div{min-width:0;overflow-wrap:anywhere}
.pts,.ghost,.modes button,.recent .confirm button,#sendBtn,#dlBtn,.qform>.btn,.attach{white-space:nowrap}
.chips .btn{max-width:100%;text-align:center}
.person .fields{grid-template-columns:minmax(0,1fr) 172px}
@container (max-width:560px){.person .fields{grid-template-columns:minmax(0,1fr)}}
/* forms SFL posts in the chat use the whole row so fields and selects keep their labels readable */
.msgrow:has(.qform) .bubble{flex:1;max-width:100%;min-width:0}
.composer>*{min-width:0}
.drop span{min-width:0;overflow-wrap:anywhere}
@media (max-width:360px){.bar{gap:10px;padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}.bar img{width:100px}}
@media (max-width:420px){.recent .confirm{flex-direction:column}}
/* very narrow chat: forms drop the SFL badge beside them and person rows stack, so fields get the width */
@container (max-width:440px){.msgrow:has(.qform)>.sfl-badge{display:none}.person{grid-template-columns:minmax(0,1fr)}.person>.sfl-badge{width:26px;height:26px;border-radius:8px;font-size:11px}}
input[type=url]{font:500 16px var(--f);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;width:100%}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}