/* ═══════════════════════════════════════════════════════════════════
   composer-skins.css — B66 W1: Mocca's composer + messages in every app
   ═══════════════════════════════════════════════════════════════════
   Pablo (066-203): "Not sure the box should look the same as it does in Mocca.
   Let's try to be consistent with the design system and build something that has
   the same functionality but looks as part of each app". 066-129/130: Mocca's
   attachments and message condensation, everywhere. ONE component (assistant.js
   sharedComposerHtml + the tile rows), re-skinned per design system from the
   --sk-* tokens auth.css sets on html[data-app] (Liquid Glass · Letterhead ·
   Workbook in the club's colours). The assistant's own panel is not a chat
   composer and keeps its look.
   ═══════════════════════════════════════════════════════════════════ */

/* ── one row of tiles, always (066-131) — the overflow becomes a +n tile ── */
.ast-tiles{ overflow:hidden; scroll-snap-type:none; min-width:0; }
.ast-tile.is-over{ display:none; }
.ast-tile-more{ all:unset; box-sizing:border-box; flex:0 0 auto; width:88px; height:88px; border-radius:12px; display:grid; place-items:center; cursor:pointer;
  background:var(--sk-ink, var(--fg-1)); color:var(--sk-card, var(--bg-1)); font:800 20px var(--sk-font, var(--mk-font-ui)); }
.ast-tile-more[hidden]{ display:none; }
.ast-tile-more:hover{ filter:brightness(1.12); }
.ast-tile-more:focus-visible{ outline:2px solid var(--sk-acc, var(--accent)); outline-offset:2px; }
.ast-tile-person{ background-size:cover; }
/* the panel slide with every attachment of a row */
.mk-attp{ position:fixed; z-index:1250; top:0; bottom:0; inset-inline-end:0; width:min(440px,100vw); display:flex; flex-direction:column;
  background:var(--sk-pop, var(--sk-card, var(--bg-1))); color:var(--sk-ink, var(--fg-1)); border-inline-start:1px solid var(--sk-edge, var(--border));
  font-family:var(--sk-font, var(--mk-font-ui)); box-shadow:-20px 0 60px -30px rgba(0,0,0,.4); transform:translateX(104%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  -webkit-backdrop-filter:var(--sk-blur,none); backdrop-filter:var(--sk-blur,none); }
html[dir="rtl"] .mk-attp{ transform:translateX(-104%); }
.mk-attp.open{ transform:none; }
.mk-attp.is-slide{ position:absolute; inset:0; width:auto; z-index:40; border:0; box-shadow:none; }
.mk-attp-scrim{ position:fixed; inset:0; z-index:1249; background:var(--scrim, rgba(9,16,24,.35)); opacity:0; transition:opacity .2s; }
.mk-attp-scrim.open{ opacity:1; }
.mk-attp-hd{ display:flex; align-items:center; gap:8px; min-height:58px; padding:10px 14px; border-bottom:1px solid var(--sk-line, var(--border)); }
.mk-attp-hd b{ font:700 16px var(--sk-font, var(--mk-font-ui)); }
.mk-attp-x{ width:36px; height:36px; border-radius:10px; border:0; background:none; color:inherit; display:grid; place-items:center; cursor:pointer; }
.mk-attp-x:hover{ background:var(--sk-item-h, var(--bg-2)); }
.mk-attp-bd{ flex:1; min-height:0; overflow:auto; padding:14px; }
.ast-tiles.ast-tiles-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; overflow:visible; padding:0; margin:0; }
.ast-tiles-grid .ast-tile{ width:auto; flex:none; }
.ast-tiles-grid .ast-tile-sq{ width:100%; height:auto; aspect-ratio:1; }
@media (max-width:600px){ .mk-attp:not(.is-slide){ top:auto; height:86dvh; width:100%; border-radius:20px 20px 0 0; transform:translateY(104%); } .mk-attp:not(.is-slide).open{ transform:none; } }
/* a person to attach */
.mk-ppick{ position:fixed; z-index:1270; width:280px; max-height:320px; display:flex; flex-direction:column; padding:6px; border-radius:14px;
  background:var(--sk-pop, var(--sk-card, var(--bg-1))); color:var(--sk-ink, var(--fg-1)); border:1px solid var(--sk-edge, var(--border));
  box-shadow:0 18px 44px -16px rgba(0,0,0,.35); font-family:var(--sk-font, var(--mk-font-ui)); }
.mk-ppick-s{ display:flex; align-items:center; gap:8px; height:40px; padding:0 10px; border-radius:10px; border:1px solid var(--sk-line, var(--border)); background:var(--sk-item, var(--bg-input)); }
.mk-ppick-s input{ flex:1; min-width:0; border:0; background:none; outline:0; font:500 13.5px var(--sk-font, var(--mk-font-ui)); color:inherit; }
.mk-ppick-s:focus-within{ border-color:var(--sk-acc, var(--accent)); }
.mk-ppick-l{ flex:1; overflow:auto; padding-top:4px; }
.mk-ppick-l button{ display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:0 8px; border:0; border-radius:9px; background:none; color:inherit; cursor:pointer; text-align:start; font:600 13.5px var(--sk-font, var(--mk-font-ui)); }
.mk-ppick-l button:hover,.mk-ppick-l button:focus-visible{ background:var(--sk-item-h, var(--bg-2)); outline:0; }
.mk-ppick-av{ width:28px; height:28px; border-radius:50%; background:var(--sk-acc, var(--accent)) center/cover; color:#fff; display:grid; place-items:center; font:700 10.5px var(--mk-font-ui); flex:0 0 auto; }
.mk-ppick-none{ margin:10px; color:var(--sk-ink3, var(--fg-3)); font:500 13px var(--mk-font-ui); }

/* ── a body over 7 lines clamps with View more (066-130), every app ── */
.mk-clamp{ display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }
.mk-clamp.mk-open{ display:block; -webkit-line-clamp:unset; overflow:visible; }
.mk-more{ all:unset; cursor:pointer; align-self:flex-start; margin-top:4px; padding:2px 0; font:700 12.5px var(--sk-font, var(--mk-font-ui)); color:var(--sk-acc-t, var(--sk-acc, var(--accent-text))); }
.msg.me .mk-more{ align-self:flex-end; }
.mk-more:hover{ text-decoration:underline; }
.mk-more:focus-visible{ outline:2px solid var(--sk-acc, var(--accent)); outline-offset:2px; border-radius:4px; }

/* ── the composer in each design system (the assistant's own panel keeps its look) ── */
html[data-app="budget"] .ast-composer-shared, html[data-app="content"] .ast-composer-shared, html[data-app="melt"] .ast-composer-shared,
html[data-app="jockey"] .ast-composer-shared, html[data-app="buraco"] .ast-composer-shared{
  background:var(--sk-item); border:1px solid var(--sk-line); border-radius:calc(var(--sk-ir) + 8px); padding:8px 10px; color:var(--sk-ink);
  font-family:var(--sk-font); -webkit-backdrop-filter:var(--sk-blur,none); backdrop-filter:var(--sk-blur,none); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-input{
  background:transparent; border:0; box-shadow:none; color:var(--sk-ink); font-family:var(--sk-font); padding:8px 6px; }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-input:focus{ box-shadow:none; }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared:focus-within{ border-color:var(--sk-acc); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-input:empty::before{ color:var(--sk-ink3); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-attach-btn{
  border:0; background:transparent; color:var(--sk-ink2); border-radius:50%; }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-attach-btn:hover{ background:var(--sk-item-h); color:var(--sk-ink); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-send{
  background:var(--sk-acc); color:var(--sk-on-acc); border-radius:50%; }
:is(html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-send,
:is(html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-attach-btn{ border-radius:var(--sk-ir); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-fmt-btn{ color:var(--sk-ink3); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-fmt-btn:hover{ background:var(--sk-item-h); color:var(--sk-ink); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-fmt-btn.on{ background:color-mix(in srgb,var(--sk-acc) 16%,transparent); color:var(--sk-acc-t,var(--sk-acc)); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-fmt{ border-bottom:1px solid var(--sk-line); padding-bottom:4px; }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .ast-pending-chip,
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-composer-shared .cmp-quote{
  background:var(--sk-item-h); border-color:var(--sk-line); color:var(--sk-ink); border-radius:var(--sk-ir); }
/* tiles in every app's chat (composer tray and messages) */
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) :not(.ast-panel *) > .ast-tiles .ast-tile-sq,
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .mk-attp .ast-tile-sq{
  background:var(--sk-item); border-color:var(--sk-line); border-radius:var(--sk-ir); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) :not(.ast-panel *) > .ast-tiles .ast-tile-sq:hover{ border-color:var(--sk-acc); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) :not(.ast-panel *) > .ast-tiles .ast-tile-nm{ color:var(--sk-ink2); font-family:var(--sk-font); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-tile-file .mi{ color:var(--sk-acc-t,var(--sk-acc)); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) .ast-tile-more{ border-radius:var(--sk-ir); }
/* the attach menu opened from a skinned composer */
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) body:not(.ast-dock-open) .ast-model-menu{
  background:var(--sk-pop,var(--sk-card)); color:var(--sk-ink); border-color:var(--sk-edge); border-radius:calc(var(--sk-ir) + 4px); font-family:var(--sk-font);
  -webkit-backdrop-filter:var(--sk-blur,none); backdrop-filter:var(--sk-blur,none); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) body:not(.ast-dock-open) .ast-model-menu .ast-mm-item{ color:var(--sk-ink); font-family:var(--sk-font); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) body:not(.ast-dock-open) .ast-model-menu .ast-mm-item:hover{ background:var(--sk-item-h); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="melt"],html[data-app="jockey"],html[data-app="buraco"]) body:not(.ast-dock-open) .ast-model-menu .ast-mm-ic{ color:var(--sk-acc-t,var(--sk-acc)); }
/* message bubbles of Mocca's chat when it runs inside a sub-app (Mint trips, Popcorn titles) */
:is(html[data-app="budget"],html[data-app="content"],html[data-app="jockey"],html[data-app="buraco"]) .msg .mb{ background:var(--sk-item); border-color:var(--sk-line); color:var(--sk-ink); font-family:var(--sk-font); }
:is(html[data-app="budget"],html[data-app="content"],html[data-app="jockey"],html[data-app="buraco"]) .msg.me .mb{ background:var(--sk-acc); color:var(--sk-on-acc); border-color:transparent; }

/* Melt's thread: the composer fills the footer; tiles sit inside the bubble */
.mlt-comp > .ast-composer-shared{ flex:1; min-width:0; }
.mlt-tiles{ margin:-2px -4px 4px; }
.mlt-tiles .ast-tiles{ padding:4px 4px 2px; }
.mlt-b .mlt-b-t p{ margin:0; }
.mlt-b .mlt-b-t ul, .mlt-b .mlt-b-t ol{ margin:4px 0; padding-inline-start:20px; }
.mlt-b .mlt-b-t code{ font:600 12px 'JetBrains Mono',ui-monospace,Menlo,monospace; background:color-mix(in srgb,currentColor 10%,transparent); padding:1px 4px; border-radius:5px; }
.mlt-b .mlt-b-t blockquote{ margin:4px 0; padding-inline-start:10px; border-inline-start:2.5px solid currentColor; opacity:.85; }
.mlt-b .mlt-b-t a{ color:inherit; text-decoration:underline; }
/* Popcorn's title comments carry the same tiles */
.cn-cm-atts .ast-tiles{ padding:6px 0 0; margin:0; }
.mlt-b-t{ white-space:pre-wrap; overflow-wrap:anywhere; }
.mlt-tiles{ min-width:0; }
.mlt-msg-w:has(.mlt-tiles) .mlt-b{ min-width:0; max-width:100%; }
.mlt-msg.is-me .ast-tile-nm{ color:inherit !important; opacity:.85; }

/* ═══ B66 W1 — cross-app sweeps (loaded after every app's CSS) ═══════════════ */
/* 066-088 · 105 — tab labels truncate with an ellipsis, never wrap, in every app */
:is(.cna-tab, .bga-tab, .mlt-tab, .jks-tab, .bux-tab){ min-width:0; max-width:100%; }
:is(.cna-tab, .bga-tab, .mlt-tab, .jks-tab, .bux-tab) > span:not(.mi):not(.mlt-badge):not([class*="badge"]){ min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cna-nav .cna-tab{ white-space:nowrap; }
/* 066-093 · 111 · 176 — the app's logo in the Liquid Glass bars is a circle */
.cna-dot.cna-logo, .bga-dot.bga-logo, .mlt-dot{ border-radius:50% !important; }
/* 066-117 · 200 — Liquid Glass focus: no offset outline ring; the field's own border
   turns the accent and thickens to 2 px, following its radius */
:is(.mlt, .bga, .cna, .mlt-sheet, .bga-sheet) :is(input, textarea):focus-visible,
.bga .bga-notes:focus-visible{ outline:none !important; }
:is(.mlt-srch, .bga-search, .cna-find-in, .bga-pill, .bga-pk, .bga-amt):focus-within{ border-color:var(--sk-acc) !important; box-shadow:inset 0 0 0 1px var(--sk-acc) !important; }
:is(.bga-in, .bga-notes, .mlt-fld input, .bga-pct > input):is(:focus, :focus-visible){ border-color:var(--sk-acc) !important; box-shadow:inset 0 0 0 1px var(--sk-acc) !important; outline:none !important; }