/* Yev Marketing — neutral, quiet surfaces; one ink colour for actions; colour only for status. */
:root{
  --bg:#F7F7F5;--surface:#FFFFFF;--ink:#18181B;--ink-2:#3F3F46;--muted:#71717A;--faint:#A1A1AA;
  --line:#E7E7E4;--soft:#F0F0EE;--run:#2563EB;--review:#D97706;--done:#16A34A;--danger:#DC2626;
  --radius:14px;--font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
.ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
#app{height:100dvh;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto;background:var(--bg);position:relative}

/* top bar */
.top{display:flex;align-items:center;gap:10px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:var(--bg)}
.top .room{flex:1;font-size:17px;font-weight:700;letter-spacing:-.01em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run-chip{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--run);background:#EEF3FE;padding:5px 10px;border-radius:999px}
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-size:12.5px;font-weight:700;flex:none}
.av.sm{width:26px;height:26px;font-size:11px}
.av.bot{border-radius:9px;background:var(--ink)}
main{overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:0;min-width:0}
.screen{display:none;flex-direction:column;flex:1;min-height:0}
.screen.on{display:flex}
.pad{padding:6px 16px 28px;overflow-y:auto;flex:1}
h2{font-size:24px;letter-spacing:-.02em;margin:4px 0 14px}
.sub{color:var(--muted);font-size:13px;margin:0 0 12px}
.muted{color:var(--muted);font-size:13px}
.empty-note{font-size:13.5px;color:var(--muted);padding:24px 4px;text-align:center}
.spin{display:inline-block;width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

/* status */
.st{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;white-space:nowrap}
.st i{width:7px;height:7px;border-radius:50%;background:currentColor}
.st.running{color:var(--run)}.st.running i{animation:pulse 1.2s ease-in-out infinite}
.st.review{color:var(--review)}
.st.done{color:var(--done)}
@keyframes pulse{50%{opacity:.3}}

/* strip of unfinished tasks above the chat */
.tstrip{flex:none;display:flex;gap:8px;overflow-x:auto;padding:2px 16px 10px;scrollbar-width:none;border-bottom:1px solid var(--line)}
.tstrip::-webkit-scrollbar{display:none}
.chipcard{flex:none;display:flex;align-items:center;gap:9px;width:220px;padding:6px 10px 6px 6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-align:left;color:var(--ink)}
.chipcard .tthumb{width:30px;height:40px;border-radius:6px}
.chipcard .nm{gap:2px}
.chipcard .nm b{font-size:13px;-webkit-line-clamp:1}
.chipcard .st{font-size:11.5px}
.held{background:var(--soft)!important}

/* room feed */
.feed{flex:1;overflow-y:auto;padding:4px 16px 20px}
.msg,.say{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background .15s;border-radius:12px}
.msg.held,.say.held{background:var(--soft)}
.msg{display:flex;gap:10px;margin:14px 0}
.msg .body,.say .body{min-width:0;flex:1}
.who{font-size:13px;font-weight:650;display:flex;align-items:baseline;gap:6px}
.who small{font-weight:400;color:var(--faint);font-size:12px}
.txt{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:1px}
.quote{display:block;max-width:100%;text-align:left;border-left:2px solid var(--line);padding:2px 8px;margin:3px 0 5px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quote.task{border-left-color:var(--run);color:var(--ink-2);font-weight:500}
.tquote{display:flex;align-items:center;gap:9px;max-width:100%;text-align:left;margin:4px 0 6px;padding:2px 0 2px 9px;border-left:3px solid var(--review);color:var(--ink)}
.tquote.running{border-left-color:var(--run)}.tquote.done{border-left-color:var(--done)}
.tquote img,.tquote .ph{width:27px;height:36px;border-radius:5px;object-fit:cover;flex:none;background:var(--soft)}
.tquote .nm{gap:1px}
.tquote .nm b{font-size:13.5px;font-weight:600;-webkit-line-clamp:1}
.tquote .nm small{gap:6px}
.tquote .st{font-size:11.5px}
.fwd{font-size:12px;color:var(--muted);margin:1px 0 2px}
.pic{display:block;max-width:min(260px,100%);max-height:260px;border-radius:12px;margin:6px 0;cursor:zoom-in}
.sysline{text-align:center;font-size:12.5px;color:var(--muted);margin:12px 0}
.tcard,.trow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px 10px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-top:8px;color:var(--ink)}
.tcard .ico,.trow .ico{color:var(--faint)}
.tthumb{width:44px;height:58px;border-radius:8px;object-fit:cover;flex:none;background:var(--soft)}
.ph{display:grid;place-items:center;color:var(--faint)}
.nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nm b{font-size:14.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nm small{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint)}
.ask{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-top:6px}
.ask-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:3px}
.ask .t{font-size:14.5px}
.ask-row{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.ask-ok{color:var(--done);font-weight:600}.ask-no{color:var(--danger);font-weight:600}

/* markdown */
.md{font-size:15px;overflow-wrap:anywhere}
.md p{margin:3px 0}.md h4{margin:10px 0 3px;font-size:15px}
.md ul,.md ol{margin:4px 0;padding-left:20px}
.md li{margin:2px 0}
.md code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--soft);padding:1px 5px;border-radius:5px}

/* composer */
.qbar,.pimg{display:none;align-items:center;gap:8px;padding:8px 16px 0;font-size:12.5px;color:var(--muted)}
.qbar.on,.pimg.on{display:flex}
.qbar span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pimg img{width:44px;height:44px;object-fit:cover;border-radius:8px}.pimg .nm{flex:1;min-width:0}
.pimg .nm b{display:block;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.pimg .fico{width:44px;height:44px;border-radius:8px;background:var(--soft);display:grid;place-items:center;color:var(--muted)}
.composer{flex:none;display:flex;gap:8px;align-items:flex-end;padding:8px 12px 10px}
.composer textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:20px;padding:9px 14px;max-height:120px;min-height:40px;background:var(--surface);font-size:15px;min-width:0;line-height:1.4}
.composer textarea:focus{outline:none;border-color:var(--faint)}
.send,.plus,.yev{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.send{background:var(--ink);color:#fff}
.send:disabled{opacity:.4}
.plus{color:var(--muted);margin-right:-6px}
.yev{color:var(--muted);transition:background .15s,color .15s}
.yev.on{background:var(--ink);color:#fff}
.yev:disabled{opacity:.3}
.viewer-note{padding:14px;text-align:center;font-size:13px;color:var(--muted)}

/* nav */
nav{display:flex;border-top:1px solid var(--line);background:var(--surface);padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;padding:7px 0 8px;font-size:11px;font-weight:500;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:2px}
nav button.on{color:var(--ink)}
nav button.on .ico{stroke-width:2}

/* task sheet */
.sess{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:36px;bottom:0;z-index:16;border-radius:20px 20px 0 0;overflow:hidden;box-shadow:0 -12px 40px rgba(0,0,0,.14);transform:translateY(102%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;background:var(--bg)}
.sess.on{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sess-dim{position:absolute;inset:0;background:rgba(10,10,12,.28);z-index:15;opacity:0;pointer-events:none;transition:opacity .3s}
.sess-dim.on{opacity:1;pointer-events:auto}
.sv-h{flex:none;background:var(--bg);padding:10px 16px 10px 8px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.sv-top{display:flex;gap:6px;align-items:center}
.back{width:34px;height:34px;display:grid;place-items:center;flex:none;color:var(--ink)}
.sv-title{flex:1;min-width:0;font-size:16px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-row{display:flex;align-items:center;gap:10px;padding-left:8px}
.seg{display:flex;background:var(--soft);border-radius:10px;padding:3px;flex:1;max-width:280px}
.seg button{flex:1;font-size:13px;font-weight:600;padding:6px 0;border-radius:8px;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sv-act{margin-left:auto;display:flex}
.sv-pane{display:flex;flex-direction:column;flex:1;min-height:0}
.sv-live{flex:none;margin:10px 12px 0;background:#18181B;color:#E4E4E7;padding:10px 12px;border-radius:12px;cursor:pointer}
.scr-h{display:flex;gap:8px;align-items:center;font-size:12px;color:#A1A1AA;font-weight:600}
.scr-h .grow{flex:1}
.scr-h button{color:#FCA5A5;font-weight:600;font-size:12px}
.sv-live .spin{color:#93C5FD}
.scr-l{font-size:12.5px;line-height:1.45;color:#71717A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.scr-l.now{color:#FAFAFA;font-size:13.5px}
.steps-all{flex:none;max-height:34dvh;overflow-y:auto;margin:6px 12px 0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 12px}
.steps-all div{font-size:12.5px;color:var(--ink-2);padding:4px 0;border-bottom:1px solid var(--soft)}
.steps-all div:last-child{border-bottom:0}
.steps-all small{color:var(--faint);margin-right:6px}
.sv-body{flex:1;overflow-y:auto;padding:6px 16px 18px}
.sv-empty{font-size:13px;color:var(--muted);text-align:center;padding:28px 16px}
.say{display:flex;gap:10px;margin:14px 0 4px}
.say .txt,.say .t{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:1px}
.say .ack{font-size:11.5px;margin-top:3px;color:var(--faint)}
.say .ack.read{color:var(--run)}
.sv-foot{flex:none;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}

/* posts: gallery row in chat and grid in documents */
.gal{display:flex;gap:8px;overflow-x:auto;padding:6px 0 4px 36px;scroll-padding-left:36px;scrollbar-width:none;scroll-snap-type:x proximity}
.gal::-webkit-scrollbar{display:none}
.gal .pc{width:96px;scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;padding-top:12px}
.pc{display:flex;flex-direction:column;gap:6px;text-align:left;flex:none}
.pc-img{position:relative;display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--soft)}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block}
.pc-img .ph{position:absolute;inset:0}
.pc-tag{position:absolute;left:6px;bottom:6px;font-size:10.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:2px 7px;border-radius:999px}
.pc-l{font-size:13px;font-weight:600;padding-left:2px}
.gal .pc-l{font-size:12px}

/* documents and settings: grouped lists */
.sec{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:22px 4px 8px}
.group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.group>*{border-radius:0;border:0;margin:0;border-bottom:1px solid var(--soft)}
.group>*:last-child{border-bottom:0}
.frow,.srow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;background:var(--surface);color:var(--ink)}
.frow>.ico,.srow>.ico{color:var(--faint)}
.frow .nm b,.srow .nm b{font-size:14.5px;font-weight:500;-webkit-line-clamp:1}
.srow.danger,.srow.danger .ico{color:var(--danger)}
.srow.accent{color:var(--run)}.srow.accent>.ico:first-child{color:var(--run)}
.srow.sel .ico{color:var(--ink)}
.ok-txt{font-size:13px;color:var(--done)}.warn-txt{font-size:13px;color:var(--review)}
.fold{margin-top:22px}
.fold summary{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 4px 8px;cursor:pointer;list-style:none}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:' ›'}
.fold[open] summary::after{content:' ⌄'}
.pv{background:var(--soft);border-radius:12px;padding:12px;font-size:13.5px;margin:4px 0 10px;max-height:56dvh;overflow:auto}
.pv img{width:100%;border-radius:8px;display:block}
.pv video{width:100%;max-height:50dvh;border-radius:8px;display:block;background:#000}
.pv pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,Menlo,monospace;font-size:12px}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;color:var(--muted)}
.spec-h{margin-bottom:8px}.spec-h small{color:var(--muted)}
.spec-wait{color:var(--review);margin-bottom:8px;font-size:12.5px}
.ln small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.ln .lt{white-space:pre-wrap;overflow-wrap:anywhere;margin:2px 0 10px}

/* buttons and fields */
.btns{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 2px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;background:var(--soft);color:var(--ink);text-decoration:none}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:9px}
.btn.pri{background:var(--ink);color:#fff}
.btn.danger{color:var(--danger)}
.field{display:block;margin:6px 0 12px}
.field span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--surface);font-size:15px}
.field input:focus{outline:none;border-color:var(--faint)}
.linkbox{word-break:break-all;background:var(--soft);border-radius:10px;padding:12px;font-size:13px;margin:8px 0;user-select:all}

/* sheet, lightbox, viewer, toast */
.veil{position:fixed;inset:0;background:rgba(10,10,12,.32);display:none;z-index:20}
.veil.on{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:760px;margin:0 auto;background:var(--bg);border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));z-index:21;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);max-height:88dvh;overflow-y:auto}
.sheet.on{transform:none}
.sheet h3{margin:0 0 12px;font-size:18px;letter-spacing:-.01em}
.sheet .group{margin-bottom:12px}
.mm-prev{font-size:13px;color:var(--muted);padding:0 2px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm{background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);overflow:hidden}
.mm button{display:flex;gap:12px;align-items:center;width:100%;padding:14px 14px;font-size:15px;text-align:left;border-bottom:1px solid var(--soft)}
.mm button:last-child{border-bottom:0}.mm button.danger{color:var(--danger)}
.lb{position:fixed;inset:0;z-index:40;background:rgba(9,9,11,.94);display:none;align-items:center;justify-content:center;padding:16px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:10px}
.vw{position:fixed;inset:0;z-index:30;background:#09090B;color:#FAFAFA;display:none;flex-direction:column}
.vw.on{display:flex}
.vw-top{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
.vw-x{width:36px;height:36px;display:grid;place-items:center;color:#FAFAFA;flex:none}
.vw-t{flex:1;min-width:0}
.vw-t b{font-size:15px}
.vw-sub{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:#A1A1AA}
.vw-sub span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw-warn{color:#FBBF24!important;white-space:normal!important}
.vw-n{font-size:13px;color:#A1A1AA;font-variant-numeric:tabular-nums}
.vw-track{flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vw-track::-webkit-scrollbar{display:none}
.vw-f{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;padding:0 12px}
.vw-f img,.vw-f video{max-width:100%;max-height:100%;border-radius:10px;display:block}
.vw-empty{flex:1;display:grid;place-items:center;color:#A1A1AA;font-size:14px}
.vw-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.vw-cap{font-size:14px;color:#E4E4E7;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.vw-cap.open{display:block;max-height:30dvh;overflow-y:auto}
.vw-btns{display:flex;gap:8px;margin-top:10px}
.vw-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;background:#27272A;color:#FAFAFA;font-size:14px;font-weight:600}
.vw-btn.pri{background:#FAFAFA;color:#09090B}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:13.5px;padding:10px 16px;border-radius:12px;opacity:0;transition:.25s;z-index:50;max-width:90vw;text-align:center;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}
.gate{padding:48px 24px;max-width:400px;margin:auto}
.gate h2{font-size:24px;margin:0 0 6px}
.loginform{margin:18px 0 8px}
.btn.wide{width:100%;justify-content:center;padding:13px 16px;font-size:15px;margin-top:4px}
.err{color:var(--danger);font-size:13.5px;margin:10px 0 0}
.gate .hint{margin-top:22px;line-height:1.5}

@media (min-width:1000px){
  #app{max-width:1180px;grid-template-columns:210px minmax(0,1fr);grid-template-rows:auto 1fr}
  .top{grid-column:1/-1;border-bottom:1px solid var(--line)}
  nav{grid-row:2;grid-column:1;flex-direction:column;border-top:0;border-right:1px solid var(--line);padding:10px 8px;justify-content:flex-start;background:var(--bg)}
  nav button{flex:none;flex-direction:row;gap:10px;font-size:14px;padding:10px 12px;border-radius:10px;justify-content:flex-start}
  nav button.on{background:var(--soft)}
  main{grid-row:2;grid-column:2}
  .sess{left:210px;top:56px;border-radius:16px 0 0 0}
  .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .gal .pc{width:120px}
}

/* typing box extras: suggestions, format bar */
.compose-wrap{position:relative}
.suggest{display:none;position:absolute;left:10px;right:10px;bottom:100%;margin-bottom:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.12);overflow:hidden;z-index:5;max-height:260px;overflow-y:auto}
.suggest.on{display:block}
.suggest button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;text-align:left;color:var(--ink)}
.suggest button.on{background:var(--soft)}
.suggest .nm b{font-size:14px;font-weight:600}
.suggest .ico{color:var(--muted)}
.sug-av{display:inline-grid}
.fmtbar{display:none;gap:4px;padding:6px 14px 0}
.fmtbar.on{display:flex}
.fmtbar button{min-width:36px;height:32px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--ink)}
.fmtbar .f-b{font-weight:800}.fmtbar .f-i{font-style:italic;font-family:Georgia,serif}.fmtbar .f-u{text-decoration:underline}.fmtbar .f-s{text-decoration:line-through}
.txt u,.md u{text-underline-offset:2px}
.mention{color:var(--run);font-weight:600}

/* threads under a room message */
.thread{margin:-6px 0 10px 40px;border-left:2px solid var(--line);padding-left:10px}
.msg.reply{margin:8px 0;gap:8px}
.msg.reply .txt{font-size:14.5px}
.msg.me-tag>.body{background:rgba(37,99,235,.06);border-radius:10px;padding:2px 8px 4px;margin-left:-8px}
.reply-link{font-size:12.5px;color:var(--faint);font-weight:600;padding:3px 0 0}
.more-replies{font-size:13px;color:var(--run);font-weight:600;padding:4px 0}

/* attachments */
.pic.vid{background:#000;cursor:default;max-height:320px}
.filechip{display:flex;align-items:center;gap:10px;max-width:300px;margin:6px 0;padding:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.filechip .ico{color:var(--muted);flex:none}
.filechip .nm{min-width:0}
.filechip .nm b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* menu that grows out of the pressed spot */
.pop-veil{position:fixed;inset:0;z-index:30}
.pop{position:fixed;z-index:31;min-width:210px;max-width:280px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.18);overflow:hidden;transform:scale(.85);opacity:0;transition:transform .16s cubic-bezier(.2,.8,.2,1),opacity .12s}
.pop.on{transform:none;opacity:1}
.pop-prev{font-size:12.5px;color:var(--muted);padding:9px 14px;border-bottom:1px solid var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop button{display:flex;align-items:center;gap:11px;width:100%;padding:12px 14px;font-size:14.5px;text-align:left;color:var(--ink);border-bottom:1px solid var(--soft)}
.pop button:last-child{border-bottom:0}
.pop button.danger{color:var(--danger)}
.pop button:active{background:var(--soft)}

/* profile pictures, model chip */
.av.pic-av{background:var(--soft);overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av-edit{position:relative;display:inline-grid}
.av-edit i{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;border:2px solid var(--surface)}
.brain-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}

/* several attachments: chips above the box, a grid of pictures in a message, Drive links */
.pimg{overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.fchip{display:flex;align-items:center;gap:8px;flex:none;width:220px;padding:6px 6px 6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.fchip img,.fchip .fico{width:38px;height:38px;flex:none}
.fchip small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fchip.busy small{color:var(--ink)}
.fchip button{width:26px;height:26px;flex:none;color:var(--muted)}
.atts{display:flex;flex-direction:column;align-items:flex-start}
.pics{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:min(260px,100%);margin:6px 0}
.pics .pic{margin:0;width:100%;height:124px;max-width:none;max-height:none;object-fit:cover;border-radius:10px}
.pics.n3 .pic:first-child{grid-column:span 2;height:150px}
.filechip.drive .nm{flex:1}
.filechip.drive small{display:block;font-size:11.5px;color:var(--muted)}
.filechip.drive > svg:last-child{color:var(--muted);flex:none}
.sug-ico{width:28px;height:28px;display:grid;place-items:center;color:var(--muted);flex:none}
.sug-ico.on{color:var(--ink)}
.filechip.drive .nm b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.seg button{white-space:nowrap}