/* Sambac sur le Web : ajustements du système visuel de Sambac Studio pour le navigateur. */
body.web{grid-template-rows:44px minmax(0,1fr);height:100vh;height:100dvh}
body.web #titlebar{-webkit-app-region:no-drag;padding:0 14px;gap:12px}
.tb-brand{background:none;border:0;color:inherit;cursor:pointer;padding:0;display:flex;align-items:center;gap:8px;font:inherit}
.flex{flex:1}
.w-user{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.alt{color:var(--faint);border-color:var(--line2);background:rgba(255,255,255,.03)}

#view-projects.on,#view-account.on{display:block;overflow:auto}
.w-page{padding-bottom:90px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}

/* Assistant */
.w-convs{display:none}
.w-engine{max-width:250px}
.w-access{max-width:220px}
.w-note{font:10px/1.4 var(--mono);letter-spacing:.04em;color:var(--faint);padding:2px 4px 0}
.agent-mode .w-note{color:var(--hot)}
.agent-mode .composer{border-color:rgba(255,74,46,.55);box-shadow:0 0 0 1px rgba(255,74,46,.18),0 10px 40px rgba(120,8,14,.3)}
.step.waiting .step-state{color:var(--hot);animation:gx-blink 1s infinite}
.w-check{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin:6px 0 2px}
@keyframes gx-blink{50%{opacity:.35}}

/* Projets & tâches */
.w-proj-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px;align-items:start}
.w-col .set-title{display:flex;align-items:center;gap:8px}
.w-list{display:grid;gap:8px;margin-top:6px}
.w-card{border:1px solid var(--line2);border-radius:10px;padding:12px;background:rgba(255,255,255,.02);display:grid;gap:6px}
.w-card.on{border-color:rgba(255,74,46,.55);box-shadow:0 0 18px rgba(255,42,42,.12)}
.w-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.w-card-top b{flex:1;min-width:120px}
.w-card p{margin:0;font-size:13px;color:var(--dim)}.w-next em{font-style:normal;color:var(--hot)}
.w-card-act{display:flex;gap:6px;flex-wrap:wrap}
.w-badge{font:500 8.5px var(--mono);letter-spacing:.12em;padding:3px 6px;border-radius:6px;border:1px solid var(--line2);color:var(--faint)}
.w-badge.s-active,.w-badge.cur{color:var(--hot);border-color:rgba(255,74,46,.45)}
.w-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin:6px 0}.w-add>.field:first-child{grid-column:1/-1}
.w-task{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.015)}
.w-task>div{flex:1;min-width:0;display:grid}.w-task b{font-weight:500;font-size:13.5px}.w-task span{font:10px var(--mono);color:var(--faint)}
.w-task.late span{color:var(--hot)}
.w-tick{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--dim);background:none;cursor:pointer;flex:none}
.w-tick:hover{border-color:var(--hot);background:rgba(255,74,46,.2)}
.w-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);flex:none}
.w-form{display:grid;gap:10px;min-width:min(520px,92vw)}
a.btn{text-decoration:none;display:inline-flex;align-items:center;gap:6px}

@media (max-width:1100px){.w-proj-grid{grid-template-columns:1fr}}

/* Téléphone et petite tablette : barre d'espaces en bas, conversations en tiroir */
@media (max-width:760px){
  body.web{grid-template-columns:minmax(0,1fr);grid-template-rows:46px minmax(0,1fr) 60px}
  #rail{grid-row:3;grid-column:1;flex-direction:row;justify-content:space-around;padding:4px 6px calc(4px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line)}
  .rail-btn{flex:1;max-width:120px}
  .rail-btn.on::before{left:24%;right:24%;top:-5px;bottom:auto;width:auto;height:2px}
  #views{grid-row:2;grid-column:1}
  .tb-sep,.tb-view,.w-user{display:none}
  #view-assistant.on{grid-template-columns:minmax(0,1fr)}
  .conv-side{position:absolute;z-index:6;inset:0 22% 0 0;transform:translateX(-102%);transition:transform .3s var(--ease);box-shadow:20px 0 60px rgba(0,0,0,.6)}
  .show-convs .conv-side{transform:none}
  .w-convs{display:inline-flex}
  .chat-log{padding:16px 12px 30px}
  .suggest{grid-template-columns:1fr}
  .composer-bar{flex-wrap:wrap;gap:6px}
  .composer-bar .flex{display:none}
  .w-engine{max-width:none;flex:1 1 0;min-width:0}
  .w-access{max-width:none;flex:1 1 100%;order:5}
  .composer-bar .toggle{font-size:0;gap:0;padding:0 8px}.composer-bar .toggle .ic{margin:0}
  .msg-tag{flex-wrap:wrap}
  .page{padding:18px 14px 70px}
  .bl-head{grid-template-columns:1fr!important}
}

/* ==========================================================================
   Version épurée, dans la direction artistique Sambac : mise en page minimale,
   rouge et animations conservés (orbite, liseré, bouton d'envoi).
   ========================================================================== */
body.web::before{opacity:.25}
body.web::after{display:none}
body.web .hud::after,body.web .msg.ai .msg-body::after{display:none}
body.web #titlebar{background:transparent}
.w-status{font:500 11px var(--type);color:var(--faint);display:flex;align-items:center;gap:7px}
.w-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.w-status.on{color:var(--dim)}.w-status.on::before{background:var(--red);box-shadow:0 0 10px var(--red);animation:ping 2s infinite}

/* Barre d'espaces : icônes seules, accent rouge sur l'espace actif */
body.web{grid-template-columns:60px minmax(0,1fr)}
body.web #rail{gap:4px;padding-top:14px}
body.web .rail-btn{width:42px;height:42px;border-radius:11px}
body.web .rail-btn.on::before{left:-9px;top:10px;bottom:10px}

/* Assistant : conversations repliées, fil centré, messages sans cadre */
body.web #view-assistant{overflow:hidden}
body.web #view-assistant.on{grid-template-columns:minmax(0,1fr)}
body.web .conv-side{position:absolute;z-index:6;top:0;bottom:0;left:0;width:280px;transform:translateX(-102%);transition:transform .25s var(--ease);background:rgba(10,10,12,.96);backdrop-filter:blur(14px);box-shadow:16px 0 50px rgba(0,0,0,.5)}
body.web .show-convs .conv-side{transform:none}
body.web .w-convs{display:inline-flex}
body.web .chat-head{border-bottom:0;padding:10px 18px 0}
body.web .chat-title{font:500 13px var(--type);color:var(--faint)}
body.web .chat-log{padding:20px max(20px,calc((100% - 760px)/2)) 30px}
.w-empty .orbit{width:130px;height:130px}.w-empty .orbit img{width:74px;height:74px}
.w-empty .empty-sub{font-size:14px;color:var(--faint);max-width:420px}
body.web .msg{margin-bottom:26px}
body.web .msg.user{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
body.web .msg.user .msg-body{max-width:80%;border:1px solid rgba(255,74,46,.18);background:rgba(255,42,42,.07);border-radius:16px 16px 4px 16px;padding:10px 15px;color:var(--text)}
body.web .msg.ai .msg-body{padding:0;border:0;background:none;box-shadow:none;font-size:15px;line-height:1.65}
body.web .msg.ai .msg-tag{margin-bottom:6px}
body.web .msg.ai .msg-tag .mini-act{opacity:0;transition:opacity .2s}
body.web .msg.ai:hover .msg-tag .mini-act{opacity:1}
body.web .msg.streaming .msg-body{border:0}

/* Zone de saisie : une seule ligne d'options discrètes */
body.web .composer{margin:0 max(20px,calc((100% - 760px)/2)) 16px;border-radius:18px}
body.web .composer-bar{padding:4px 8px 8px 10px}
body.web .composer .select.mini{border:0;background:transparent;color:var(--faint);font:500 12px var(--type);letter-spacing:0;padding-left:4px;cursor:pointer}
body.web .composer .select.mini:hover{color:var(--text)}
body.web .composer .toggle{border-color:transparent;font:500 12px var(--type);letter-spacing:0;padding:0 8px}
.w-note{padding:0 14px 8px}

/* Pages Projets et Compte : sections en listes */
body.web .page{max-width:880px}
body.web .page-head h1{font-size:30px}
body.web .set-section{border:0;background:none;padding:6px 0 18px;border-bottom:1px solid var(--line);border-radius:0}
.w-proj-grid{grid-template-columns:1fr!important;gap:0}
.w-card{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:12px 0}
.w-card.on{box-shadow:none;border-color:var(--line)}
.w-card.on b{color:var(--hot)}
.w-task{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:10px 2px}
.w-add{display:flex!important;flex-wrap:wrap;gap:6px}.w-add>.field:first-child{flex:1 1 100%}.w-add>.field+.field{flex:0 1 220px}

@media (max-width:760px){
  body.web{grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(0,1fr) 54px}
  body.web .rail-btn{width:52px;height:40px;max-width:none}
  body.web .rail-btn.on::before{left:30%;right:30%;top:-5px;bottom:auto;width:auto;height:2px}
  body.web .conv-side{width:82%}
  body.web .composer .toggle{font-size:0;padding:0 8px}
}

/* Fournisseurs d'IA personnels */
.byok-block{display:grid;gap:12px}
.byok-card{display:grid;gap:8px;border:1px solid var(--line);border-radius:8px;padding:12px}
.byok-card.on{border-color:rgba(255,74,46,.45);background:rgba(255,42,42,.05)}
.byok-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.byok-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.byok-form .field{flex:1;min-width:200px}
.byok-warn{color:#ffb38a}
.byok-block a:not(.btn){color:var(--hot);text-decoration:underline;text-underline-offset:2px}
.byok-code{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.byok-code span{font:500 10px var(--mono);letter-spacing:.16em;color:var(--dim)}
.byok-code b{font:600 24px var(--mono);letter-spacing:.18em;color:var(--text);user-select:all}
.byok-device{display:grid;gap:8px}.byok-device>.btn{justify-self:start}

/* Retour de paiement Stripe */
.retour-modal{width:min(520px,92vw)}
.retour-modal p{font-size:14px;line-height:1.55}
.retour-modal .modal-actions{flex-wrap:wrap}

/* Mémoire choisie */
.memo-chip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border:1px dashed var(--line2);border-radius:10px;font-size:13px}
.memo-chip .memo-link{color:var(--hot);font-size:12px}
.btn.xs{padding:3px 10px;font-size:11px}
.memory-block .seg{display:flex;gap:6px;flex-wrap:wrap}
.memory-ctx{display:grid;gap:8px;width:100%}
.memory-list{margin-top:14px;display:grid;gap:6px}
.memory-head{font:500 11px var(--mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.memory-item{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.memory-item em{font:400 11px var(--mono);color:var(--dim)}
.memory-add{display:flex;gap:8px;margin-top:6px}
.memory-add .field{flex:1}
@media (max-width:640px){.memory-item{grid-template-columns:1fr auto}.memory-item em{display:none}}
.memory-item.skill{grid-template-columns:1fr auto}
.memory-skill summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.memory-skill summary em{font:400 11px var(--mono);color:var(--dim)}
.memory-skill pre{white-space:pre-wrap;margin:8px 0 0;font-size:12.5px;color:var(--text)}
.skill-modal{width:min(640px,94vw);max-height:90vh;overflow:auto}
.skill-modal .field{width:100%;margin:4px 0 10px}
.skill-modal textarea.field{font:13px/1.5 var(--mono)}
.w-label{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}