.composer { flex:none; position:relative; z-index:2; margin-top:calc(-1 * var(--tuck));
            padding:var(--s3) var(--s4) var(--s4); }

.composer .box { width:min(var(--col-chat),100%); margin:0 auto; padding:var(--s2); position:relative;
                 border:var(--bd) solid var(--line2); box-shadow:var(--shadow);
                 background-color:var(--glass);
                 -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.composer .row { display:flex; gap:var(--s2); align-items:flex-end; }

.tools { display:flex; align-items:center; gap:var(--s4); padding:var(--s2) 0 0; }

.effort { display:flex; align-items:center; gap:var(--s2); width:min(330px,100%); min-width:0;
          border-left:1px solid var(--line2); padding-left:var(--s4); }
.effort .micro { flex:none; line-height:1; }

.effort output { min-width:7ch; }

.tray { display:flex; flex-wrap:wrap; gap:var(--s2); padding:0 0 var(--s2); }
.tray .t { position:relative; width:56px; height:56px; }
.tray img { display:block; width:100%; height:100%; object-fit:cover;
            border:var(--bd) solid var(--line2); }
.tray .x { position:absolute; top:-6px; right:-6px; width:18px; height:18px; padding:0;
           border:var(--bd) solid var(--line2); background:var(--bg1); color:var(--muted);
           font:12px/1 var(--mono); cursor:pointer; }
.composer.dropping .box { border-color:var(--acc); box-shadow:0 0 12px rgba(76,141,255,.35); }
#attach { display:inline-flex; align-items:center; gap:var(--s2); }
#attach .clip { font:600 var(--fs-ui) var(--mono); line-height:1; }

.effort { --e0:var(--blue); --e1:var(--acc); --e2:var(--yellow); --e3:var(--orange);
          --e4:var(--red); --e5:var(--violet); --e:var(--e0); --g:0px; --pct:0%; }
.effort output { color:var(--e); text-shadow:0 0 var(--g) var(--e);
                 transition:color .14s, text-shadow .14s; }


.effort input[type=range] { flex:1; min-width:0; appearance:none; -webkit-appearance:none;
                            height:16px; cursor:pointer;
                            background-color:transparent;
                            background-image:repeating-linear-gradient(90deg,
                              var(--line2) 0 1px,
                              transparent 1px calc(100% / var(--gaps, 4)));
                            background-repeat:no-repeat;
                            background-position:5px 50%;
                            background-size:calc(100% - 9px) 8px; }
.effort input[type=range]::-webkit-slider-runnable-track { height:2px;
  background:linear-gradient(90deg, var(--e) 0 var(--pct), var(--line2) var(--pct)); }
.effort input[type=range]::-moz-range-track { height:2px;
  background:linear-gradient(90deg, var(--e) 0 var(--pct), var(--line2) var(--pct)); }
.effort input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none;
  width:10px; height:16px; margin-top:-7px; background:var(--e); border:0; border-radius:0;
  box-shadow:0 0 var(--g) var(--e); transition:background .14s, box-shadow .14s; }
.effort input[type=range]::-moz-range-thumb { width:10px; height:16px; background:var(--e);
  border:0; border-radius:0; box-shadow:0 0 var(--g) var(--e); }
.effort input[type=range]:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }


#shell { --composer-h:50px; }
#input { flex:1; min-height:var(--composer-h); max-height:220px;
         font:var(--fs-body)/1.5 var(--ui); padding:var(--s3); }


.sendcol { flex:none; display:flex; flex-direction:column; gap:2px;
           width:44px; height:var(--composer-h); }

.sendcol .btn { flex:1; min-height:0; padding:0; display:flex; box-shadow:none;
                align-items:center; justify-content:center; }
.sendcol .btn:hover { transform:none; box-shadow:none; }   
.sendcol .btn:active:not(:disabled) { transform:none; }
.sendcol svg { width:16px; height:16px; display:block; }

.sendcol .btn:disabled { opacity:.4; }

@media (pointer:coarse) {
  .sendcol { flex-direction:row; width:92px; }
  .sendcol .btn { min-height:0; }
}
.sendcol .btn-danger:not(:disabled) { color:var(--red); border-color:rgba(var(--red-rgb),.45); }

.hintbar { width:min(var(--col-chat),100%); margin:0 auto var(--s2); height:18px;
           padding-left:var(--s3); display:flex; align-items:center;
           font:var(--fs-ui)/1 var(--mono); color:var(--faint);
           text-shadow:0 0 6px var(--bg0), 0 0 3px var(--bg0), 0 1px 1px var(--bg0); }

.hintbar .status { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
                   transition:opacity .12s; }

.hintbar .raven { flex:none; margin-right:var(--s2); transform:translateY(-3px); }

@media (prefers-reduced-motion:reduce) { .hintbar .raven { display:none; } }
.hintbar.ok .status { color:var(--acc); }
.hintbar.warn .status { color:var(--yellow); }
.hintbar.bad .status { color:var(--red); }

.composer-note { width:min(var(--col-chat),100%); margin:0 auto var(--s2); display:grid; gap:var(--s2); }
.offer-h { margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s3);
           padding-left:var(--s1); font:var(--fs-ui)/1.4 var(--ui); color:var(--muted);
           text-shadow:0 0 6px var(--bg0), 0 0 3px var(--bg0); }
.offer-h .micro { display:inline-flex; align-items:center; gap:var(--s2); color:var(--yellow); }
.offer-h .micro::before { content:""; width:8px; height:8px; flex:none; background:var(--yellow); }
.offers { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:var(--s2); }
.offer { display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"glyph nm arw" "glyph sub arw";
         align-items:center; column-gap:var(--s3); row-gap:2px; padding:var(--s3) var(--s4) var(--s3) var(--s3);
         text-align:left; color:var(--text); cursor:pointer; background-color:var(--glass);
         -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
         border:var(--bd) solid var(--line2); box-shadow:var(--shadow-press);
         transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); }

#offerCredits { --tone:var(--acc); --tone-rgb:var(--acc-rgb); }
#offerPlan:not([data-flair]) { --tone:var(--violet); --tone-rgb:var(--violet-rgb); }
.offer .glyph { grid-area:glyph; width:40px; height:40px; display:grid; place-items:center;
                color:var(--tone); background:rgba(var(--tone-rgb),.12);
                box-shadow:0 0 0 1px rgba(var(--tone-rgb),.35); font:700 20px/1 var(--mono);
                transition:box-shadow var(--t); }
.offer .glyph svg { width:20px; height:20px; }
.offer .nm { grid-area:nm; font:700 var(--fs-body)/1.2 var(--ui); }
.offer .sub { grid-area:sub; font:500 var(--fs-micro)/1.4 var(--mono); letter-spacing:.02em; color:var(--muted); }

.offer .arw { grid-area:arw; width:16px; height:16px; color:var(--tone);
             transition:transform var(--t-fast) var(--ease-out); }
.offer:hover { border-color:rgba(var(--tone-rgb),.7); transform:translate(-2px,-2px); box-shadow:var(--shadow); }
.offer:hover .glyph { box-shadow:0 0 0 1px rgba(var(--tone-rgb),.7), 0 0 14px -2px rgba(var(--tone-rgb),.6); }
.offer:hover .arw { transform:translateX(3px); }
.offer:active { transform:translate(1px,1px); box-shadow:none; }
.offer:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
@media (max-width:720px) {
  
  .composer { padding:var(--s3); }
  
  .tools { flex-wrap:wrap; }
  .effort { width:100%; border-left:0; padding-left:0; }
  #input { min-width:0; max-height:140px; }   
}