/* =====================================================================
   Icônes SVG et finitions de l’interface (chargé après app.css)
   ===================================================================== */
:root{--chev-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --chev-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;display:inline-block}
.ib{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--mut);flex:none}
.ib:hover:not(:disabled){background:var(--surf2);color:var(--tx)}
.ib:disabled{opacity:.35;cursor:default}
button{transition:background-color .15s,border-color .15s,color .15s,opacity .15s}
@keyframes spin2{to{transform:rotate(360deg)}}
.spin{animation:spin2 .8s linear infinite}

/* Barre latérale */
#side{gap:8px}
#new{padding:9px 12px;border-radius:11px;gap:9px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
#new .i{width:17px;height:17px}
#qw{position:relative;display:flex;align-items:center;margin:2px 0 0}
#qw>.i{position:absolute;left:11px;width:16px;height:16px;color:var(--mut);pointer-events:none}
#q{padding:8px 52px 8px 35px;border-radius:10px}
#q::-webkit-search-cancel-button{display:none}
#qw kbd{position:absolute;right:8px;font:500 10.5px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--mut);border:1px solid var(--line);border-radius:5px;padding:1px 5px;pointer-events:none;background:var(--side)}
#q:focus~kbd,#q:not(:placeholder-shown)~kbd{display:none}
.grp{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;padding:14px 10px 5px}
.grp .i{width:13px;height:13px}
.it{padding:0 2px 0 10px;min-height:36px;gap:2px}
.it .t{font-size:13.8px}
.it .ib{width:28px;height:28px;opacity:0;padding:0}
.it .ib .i{width:15px;height:15px}
.it:hover .ib,.it .ib:focus-visible{opacity:1}
.it .x:hover{color:var(--err)!important}
#sfoot{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--line);padding-top:8px}
.sb{display:flex;align-items:center;gap:11px;padding:8px 10px;font-size:13.8px}
.sb .i{width:17px;height:17px}

/* En-tête */
header{gap:6px}
#burger,#sbt,#newh{padding:0;width:34px;height:34px;place-items:center;border-radius:9px;font-size:inherit;line-height:1}
#sbt{display:inline-grid}
body.nosb #newh{display:inline-grid}
#stat{gap:8px;padding:5px 8px}
#dot.ok{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
#dot.ko{box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 22%,transparent)}
#dot.auth{box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 25%,transparent)}
.selw::after{content:'';width:14px;height:14px;right:7px;background:var(--mut);-webkit-mask:var(--chev-down) center/contain no-repeat;mask:var(--chev-down) center/contain no-repeat}
.hb{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9px;font-size:12.8px}
.hb .i{width:16px;height:16px}
#vm.on,#cvbtn.on,#deep.on{background:color-mix(in srgb,var(--ac) 12%,transparent)}
@media(max-width:1180px) and (min-width:801px){.hb .lb{display:none}.hb{padding:0;width:34px;justify-content:center}}

/* Messages */
.acts{gap:0;margin-top:4px}
.acts .ib,.uacts .ib{width:30px;height:30px;padding:0;border-radius:8px}
.acts .ib .i,.uacts .ib .i{width:16px;height:16px}
.acts .ib.on{color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent)}
.acts .nav{gap:0;margin:0 2px}
.acts .nav .ib{width:26px}
.acts button.code-action{display:inline-flex;align-items:center;gap:6px;margin-left:6px;height:28px;border-radius:8px}
.acts button.code-action .i{width:14px;height:14px}
.uacts{gap:0}
.bub{border-radius:18px 18px 6px 18px}
.bub .fl{display:flex;align-items:center;gap:6px;margin-top:4px}
.bub .fl .i{width:14px;height:14px}
.err{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--err) 8%,transparent)}
.err>.i{width:18px;height:18px;margin-top:2px}
details.think>summary{display:flex;align-items:center;gap:7px;list-style:none}
details.think>summary::-webkit-details-marker{display:none}
details.think>summary::before{content:'';width:12px;height:12px;flex:none;background:currentColor;opacity:.7;transition:transform .15s;-webkit-mask:var(--chev-right) center/contain no-repeat;mask:var(--chev-right) center/contain no-repeat}
details.think[open]>summary::before{transform:rotate(90deg)}
details.think summary .i{width:14px;height:14px}
.i.star{color:var(--warn);width:13px;height:13px;stroke:none}
.deep i .i{width:12px;height:12px;stroke-width:3}
.deep-use{display:inline-flex;align-items:center;gap:6px}
.deep-use .i{width:14px;height:14px}
.ch button,.cf button{display:inline-flex;align-items:center;gap:5px}
.ch button .i,.cf button .i{width:14px;height:14px}

/* Accueil */
#who button{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 6px}
#who .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surf2);color:var(--mut)}
#who button.on .av{background:var(--ac);color:var(--onac)}
#who button .i{width:14px;height:14px}
#who button.add{padding:5px 14px}
#chips button{display:inline-flex;align-items:center;gap:7px}
#chips #suggbtn{width:34px;height:34px;padding:0;justify-content:center}
#chips .i{width:15px;height:15px}

/* Zone de saisie */
#box{box-shadow:0 2px 12px rgba(0,0,0,.08);transition:border-color .15s,box-shadow .15s}
#box:focus-within{box-shadow:0 2px 16px color-mix(in srgb,var(--ac) 16%,transparent)}
.ic .i{width:20px;height:20px}
#mic .i-pause{display:none}
#mic.vp .i-mic{display:none}
#mic.vp .i-pause{display:inline-block}
#go .i{width:18px;height:18px;stroke-width:2.4}
#down{place-items:center;color:var(--mut)}
#down.on{display:grid}
#down:hover{color:var(--tx)}
.att{gap:7px}
.att>.i{width:15px;height:15px;color:var(--mut)}
.att button{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;padding:0}
.att button:hover{background:var(--surf2);color:var(--tx)}
.att button .i{width:13px;height:13px}

/* Notification et bandeau */
#toast{align-items:flex-start;gap:10px;padding:11px 15px 11px 13px;border-radius:12px;line-height:1.45}
#toast.on{display:flex;animation:rise .2s ease-out}
#toast .i{width:18px;height:18px;margin-top:1px;color:var(--ac)}
#toast.ok .i{color:var(--ok)}
#toast.err .i{color:var(--err)}
#toast.warn .i{color:var(--warn)}
#banner{display:flex;gap:10px;align-items:flex-start}
#banner>.i{color:var(--warn);margin-top:2px}
#banner .bx{margin-left:auto;float:none}

/* Canvas */
#cvh>.i{color:var(--mut)}
#cvh>button{display:inline-flex;align-items:center;gap:6px}
#cvh>button .i{width:16px;height:16px}
#cv-x{width:34px;height:34px;padding:0;justify-content:center}

/* Menu mobile */
#pop .i{width:21px;height:21px;color:var(--mut)}
#pop button.on .i{color:var(--ac)}

/* Réglages */
#dn button{display:flex;align-items:center;gap:10px}
#dn button .i{width:17px;height:17px}
#dn button.on .i{color:var(--ac)}
#c-saved{display:inline-flex;align-items:center;gap:5px}
#c-saved .i{width:15px;height:15px}
#c-close{width:34px;height:34px;padding:0}
.row2 button,.keyrow button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.row2 button .i,.keyrow button .i{width:16px;height:16px}
#c-ping{display:flex;gap:9px;align-items:flex-start}
#c-ping:empty{display:none}
#c-ping .i{width:17px;height:17px;margin-top:2px}
.chk .i{width:15px;height:15px;color:var(--mut)}
#dc small .i{width:14px;height:14px;vertical-align:-2px}
.mrow button{display:inline-grid;place-items:center;min-width:30px;height:28px}
.mrow button .i{width:15px;height:15px}
.trow button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px}
.trow button .i{width:15px;height:15px}
.trow button.danger{color:var(--err)}

@media(max-width:800px){
  #cv-copy .lb{display:none}
  .ib{width:40px;height:40px}
  .it .ib{width:36px;height:36px;opacity:1}
  .acts .ib,.uacts .ib{width:36px;height:36px}
  #burger,#newh{width:40px;height:40px}
  #sbt{display:none}
}