
:root{
  --ink:#0D1538; --ink-soft:#3A4060; --muted:#5B6276; --faint:#8A90A2;
  --purple:#6B2CFF; --pink:#FF4F9A; --orange:#FF8A3D; --green:#3FA45B; --blue:#4D7CFF;
  --cream:#FAF7F0;
  --md-primary:#6B2CFF;            --md-on-primary:#FFFFFF;
  --md-primary-container:#EBE4FF;  --md-on-primary-container:#2A1466;
  --md-surface:#FFFFFF;
  --md-surface-container:#F5F0E6;
  --md-surface-container-high:#EFE9DC;
  --md-outline:#E7E1D4;
  --md-outline-soft:#F0EBDF;
  --c-need:#FCE7F0; --on-need:#C42B6E; --need:#FF4F9A;
  --c-offer:#E7ECFF; --on-offer:#2B49C4; --offer:#4D7CFF;
  --c-fasc:#FFEBDA; --on-fasc:#C75A14; --fasc:#FF8A3D;
  --c-link:#E2F3E7; --on-link:#1F7A41; --link:#3FA45B;
  --r-xs:12px; --r-sm:16px; --r-md:22px; --r-lg:28px; --r-full:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.5,1);
  --shadow-card:0 1px 2px rgba(20,24,60,.05), 0 10px 28px -16px rgba(20,24,60,.18);
  --shadow-dock:0 2px 6px rgba(20,24,60,.06), 0 18px 44px -16px rgba(20,24,60,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  background:var(--cream);
  background-image:radial-gradient(135% 100% at 50% -10%, #FFFFFF 0%, var(--cream) 46%);
  -webkit-font-smoothing:antialiased;height:100dvh;overflow:hidden;display:flex;flex-direction:column;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{text-decoration:none;color:inherit}
.flower{display:inline-block;background:url("bouclepro-symbol.png") center/contain no-repeat;flex-shrink:0}
:focus-visible{outline:3px solid color-mix(in oklab, var(--purple) 55%, white);outline-offset:2px;border-radius:6px}

/* ===== APP SHELL + CHAT FRAME ===== */
.app{flex:1 1 auto;min-height:0;width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;padding:0 20px;padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.chatframe{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  background:var(--md-surface);border:1px solid var(--md-outline);
  border-radius:24px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,24,60,.05), 0 24px 56px -28px rgba(20,24,60,.4);
}
/* frame header: launch features */
.chat-tools{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--md-outline-soft);background:var(--md-surface)}
.chat-tools .ct-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);flex-shrink:0}
.chat-tools .ct-label i{font-size:15px}
.rail{display:flex;gap:9px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
/* scroll region */
.thread-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 16px 8px;background:linear-gradient(180deg,#FBF9F3,#FCFAF5);scroll-behavior:smooth;overscroll-behavior:contain}
.thread-scroll::-webkit-scrollbar{width:8px}
.thread-scroll::-webkit-scrollbar-thumb{background:var(--md-outline);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.tool{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;text-align:left;
  background:var(--md-surface-container);border:1px solid var(--md-outline);border-radius:14px;
  padding:7px 13px 7px 8px;
  transition:transform .14s,box-shadow .2s,border-color .2s,background .15s;
}
.tool:hover{background:#fff;box-shadow:0 8px 18px -12px rgba(20,24,60,.32)}
.tool:active{transform:scale(.96)}
.tool .tic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.tool .tt{display:flex;flex-direction:column;line-height:1.12}
.tool .tt b{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.tool .tt small{display:none}
.tool[data-tool="summary"] .tic{background:#EADFFF;color:var(--purple)}
.tool[data-tool="manifeste"] .tic{background:var(--c-offer);color:var(--on-offer)}
.tool[data-tool="todo"] .tic{background:var(--c-link);color:var(--on-link)}
.tool .badge-n{margin-left:2px;background:var(--md-surface-container);color:var(--ink-soft);font-size:11px;font-weight:800;padding:3px 8px;border-radius:var(--r-full)}

/* day divider */
.day{display:flex;align-items:center;gap:12px;margin:2px 2px 14px;color:var(--faint);font-size:12px;font-weight:600}
.day::before,.day::after{content:"";flex:1;height:1px;background:var(--md-outline)}

/* ===== MESSAGES ===== */
.thread{display:flex;flex-direction:column;gap:14px;padding-bottom:4px}
.msg{display:flex;gap:11px;max-width:84%}
.msg .av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#E7E2F2;margin-top:18px}
.msg .col{display:flex;flex-direction:column;gap:3px;min-width:0}
.msg .meta{display:flex;align-items:baseline;gap:8px;padding:0 4px}
.msg .meta b{font-size:13px;font-weight:700;letter-spacing:-.01em}
.msg .meta time{font-size:11px;color:var(--faint);font-weight:500}
.bubble{
  background:var(--md-surface);border:1px solid var(--md-outline);
  padding:11px 15px;border-radius:6px 18px 18px 18px;
  font-size:15px;line-height:1.45;color:var(--ink);box-shadow:0 1px 2px rgba(20,24,60,.04);text-wrap:pretty;
}
.bubble .ref{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--on-need);background:var(--c-need);padding:2px 9px;border-radius:var(--r-full);margin-bottom:6px}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .av{display:none}
.msg.me .meta{flex-direction:row-reverse}
.msg.me .bubble{background:var(--md-primary);border-color:transparent;color:#fff;border-radius:18px 6px 18px 18px;box-shadow:0 8px 18px -10px rgba(107,44,255,.6)}

/* system / IA event line */
.event{
  align-self:center;
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:fit-content;
  max-width:min(92%,640px);
  background:linear-gradient(180deg,#FBFAFF,#F4EFFF);
  border:1px solid #E7DCFF;
  color:var(--ink-soft);
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  padding:10px 14px;
  border-radius:18px;
  text-align:left;
  overflow-wrap:anywhere;
}
.event-ic{width:22px;height:22px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background:#EADFFF;color:var(--purple);margin-top:-1px}
.event-ic i,.event>i{color:var(--purple);font-size:15px;line-height:1}
.event-copy{min-width:0;display:block}
.event b{color:var(--purple);font-weight:800}
.event .link{color:var(--purple);font-weight:800;text-decoration:underline;cursor:pointer;white-space:normal}

/* ===== COMPOSER (anchored in frame) ===== */
.composer{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:10px 11px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--md-outline-soft);background:var(--md-surface)}
.composer .plus{width:40px;height:40px;border-radius:var(--r-full);background:var(--md-surface-container);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;transition:background .15s,transform .12s}
.composer .plus:hover{background:var(--md-surface-container-high)}
.composer .plus:active{transform:scale(.92)}
.composer .field{flex:1;min-width:0;background:var(--md-surface-container);border:1px solid var(--md-outline);border-radius:20px;display:flex;align-items:center;transition:border-color .15s,box-shadow .15s}
.composer .field:focus-within{border-color:color-mix(in oklab,var(--purple) 40%,white);box-shadow:0 0 0 3px color-mix(in oklab,var(--purple) 12%,transparent)}
.composer textarea{width:100%;border:none;background:none;resize:none;font-family:inherit;font-size:15px;line-height:1.4;color:var(--ink);padding:10px 14px;max-height:110px;outline:none}
.composer textarea::placeholder{color:var(--faint)}
.composer .send{width:40px;height:40px;border-radius:var(--r-full);background:var(--md-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 8px 18px -8px rgba(107,44,255,.6);transition:transform .12s,filter .15s}
.composer .send:hover{filter:brightness(1.06)}
.composer .send:active{transform:scale(.92)}

/* ===== WORKSPACE PANEL ===== */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(13,21,56,.42);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .26s var(--ease)}
.scrim.open{opacity:1;pointer-events:auto}
.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:51;width:min(480px,100%);
  background:var(--md-surface);border-left:1px solid var(--md-outline);
  display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .4s var(--ease-spring);
  box-shadow:-24px 0 60px -30px rgba(20,24,60,.45);
}
.panel.open{transform:none}
.panel-head{display:flex;align-items:center;gap:13px;padding:18px 18px 14px;border-bottom:1px solid var(--md-outline-soft)}
.panel-head .pic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.panel-head .pt{flex:1;min-width:0}
.panel-head .pt b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.panel-head .pt small{font-size:12.5px;color:var(--faint);font-weight:500}
.panel-head .x{width:38px;height:38px;border-radius:var(--r-full);background:var(--md-surface-container);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:background .15s,transform .12s}
.panel-head .x:hover{background:var(--md-surface-container-high)}
.panel-head .x:active{transform:scale(.9)}
.panel-body{flex:1;overflow-y:auto;padding:18px}
.panel-foot{padding:14px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--md-outline-soft);display:flex;gap:10px}
.pic-summary{background:#EADFFF;color:var(--purple)}
.pic-manifeste{background:var(--c-offer);color:var(--on-offer)}
.pic-todo{background:var(--c-link);color:var(--on-link)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:13px;font-size:14px;font-weight:700;transition:transform .12s,box-shadow .2s,filter .15s,background .15s}
.btn i{font-size:18px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--md-primary);color:#fff;box-shadow:0 10px 22px -10px rgba(107,44,255,.6)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--md-surface-container);color:var(--ink-soft)}
.btn-ghost:hover{background:var(--md-surface-container-high)}
.btn-block{flex:1}

/* --- Summary panel --- */
.sum-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);font-weight:600;margin-bottom:16px}
.sum-sec{margin-bottom:20px}
.sum-sec h4{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
.sum-sec h4 i{font-size:16px}
.sum-sec.s-key h4 i{color:var(--purple)} .sum-sec.s-dec h4 i{color:var(--green)} .sum-sec.s-todo h4 i{color:var(--orange)}
.sum-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sum-list li{display:flex;gap:11px;font-size:14.5px;line-height:1.45;color:var(--ink);background:var(--md-surface-container);border:1px solid var(--md-outline-soft);padding:12px 14px;border-radius:var(--r-sm)}
.sum-list li i{flex-shrink:0;margin-top:2px;font-size:16px;color:var(--faint)}
.sum-list li b{font-weight:700}
.typing{display:inline-flex;gap:4px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--purple);opacity:.4;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* --- Manifeste panel --- */
.ver-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ver-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:var(--r-full);background:var(--md-surface);border:1px solid var(--md-outline);color:var(--ink-soft);transition:background .15s,border-color .15s,color .15s}
.ver-chip:hover{background:var(--md-surface-container)}
.ver-chip[aria-current="true"]{background:var(--md-primary-container);border-color:transparent;color:var(--md-on-primary-container)}
.ver-chip small{font-weight:600;color:var(--faint)}
.ver-chip[aria-current="true"] small{color:var(--on-offer)}
.doc{border:1px solid var(--md-outline);border-radius:var(--r-md);padding:20px 20px 24px;background:#fff;min-height:300px;font-size:15px;line-height:1.6;color:var(--ink);outline:none;transition:border-color .18s,box-shadow .18s}
.doc:focus{border-color:color-mix(in oklab,var(--purple) 45%,white);box-shadow:0 0 0 4px color-mix(in oklab,var(--purple) 12%,transparent)}
.doc h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.doc h3{font-size:15px;font-weight:800;margin:20px 0 6px;color:var(--ink-soft)}
.doc p{margin:0 0 10px}
.doc ul{margin:0 0 10px;padding-left:20px}
.doc li{margin:0 0 5px}
.doc[data-readonly="true"]{background:var(--md-surface-container);border-style:dashed}
.edit-hint{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--faint);font-weight:500;margin:10px 2px 0}
.edit-hint i{font-size:15px}
.saved-flash{color:var(--green);font-weight:700}

/* --- Todo panel --- */
.todo-add{display:flex;gap:9px;margin-bottom:16px}
.todo-add input{flex:1;border:1px solid var(--md-outline);border-radius:13px;padding:12px 14px;font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.todo-add input:focus{border-color:color-mix(in oklab,var(--purple) 45%,white);box-shadow:0 0 0 4px color-mix(in oklab,var(--purple) 12%,transparent)}
.todo-add button{width:46px;flex-shrink:0;border-radius:13px;background:var(--md-primary);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(107,44,255,.6);transition:transform .12s,filter .15s}
.todo-add button:active{transform:scale(.92)}
.todo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.todo-item{display:flex;align-items:flex-start;gap:12px;background:var(--md-surface);border:1px solid var(--md-outline);border-radius:var(--r-sm);padding:13px 13px;transition:background .15s,border-color .15s}
.todo-item:hover{background:var(--md-surface-container)}
.todo-check{width:24px;height:24px;border-radius:8px;border:2px solid var(--md-outline);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;transition:background .15s,border-color .15s}
.todo-item.done .todo-check{background:var(--green);border-color:var(--green)}
.todo-text{flex:1;font-size:14.5px;line-height:1.4;color:var(--ink);outline:none;border-radius:6px;padding:1px 2px;min-width:0}
.todo-text:focus{box-shadow:0 0 0 3px color-mix(in oklab,var(--purple) 14%,transparent)}
.todo-item.done .todo-text{text-decoration:line-through;color:var(--faint)}
.todo-meta{display:flex;align-items:center;gap:6px;flex-shrink:0}
.todo-owner{width:24px;height:24px;border-radius:50%;object-fit:cover;background:#E7E2F2}
.todo-del{width:30px;height:30px;border-radius:9px;color:var(--faint);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;transition:background .15s,color .15s;opacity:0}
.todo-item:hover .todo-del{opacity:1}
.todo-del:hover{background:var(--c-need);color:var(--on-need)}
.todo-empty{text-align:center;color:var(--faint);font-size:14px;padding:30px 10px}
.todo-foot-stat{font-size:13px;color:var(--muted);font-weight:600}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  [data-anim]{animation:rise .55s var(--ease) both;animation-delay:var(--d,0s)}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media print{[data-anim]{animation:none!important;opacity:1!important;transform:none!important}}

/* responsive */
@media (max-width:600px){
  .appbar-in{padding:11px 14px}
  .app{padding:0 8px;padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .chatframe{border-radius:20px}
  .boucle-switch .bs-txt small{display:none}
  .icon-btn[data-opt]{display:none}
  .dock{max-width:none;border-radius:24px}
  .tab .lbl{font-size:10.5px}
  .msg{max-width:90%}
  .panel{width:100%;border-left:none}
}
@media (max-width:380px){
  .chat-tools .ct-label{display:none}
}

/* ============================================================
   RESPONSIVE SHELL — mobile first, desktop split view only >= 901px
   ============================================================ */
.workspace{flex:0 0 auto;width:0;height:0;overflow:visible}
.boucle-switch{min-width:0}
.boucle-switch .bs-txt{min-width:0}
.boucle-switch .bs-txt b,.boucle-switch .bs-txt small{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:900px){
  .appbar-in{max-width:760px}
  .app{max-width:760px;flex-direction:column;gap:0;padding-bottom:calc(108px + env(safe-area-inset-bottom))}
  .chatframe{min-width:0}
  .tool .tt small{display:none}
  .msg{max-width:86%}
  body.panel-open .chatframe{filter:blur(.2px)}
}

@media (max-width:600px){
  body{background-image:linear-gradient(180deg,#fff 0%,var(--cream) 38%,var(--cream) 100%)}
  .appbar-in{gap:8px;padding:9px 10px}
  .boucle-switch{gap:8px;padding:7px 10px 7px 7px;max-width:calc(100vw - 150px)}
  .boucle-switch .flower{width:24px;height:24px}
  .boucle-switch .bs-txt b{font-size:13.5px;max-width:42vw}
  .appbar-spacer{min-width:0}
  .icon-btn,.me-btn{width:38px;height:38px;font-size:19px;flex-shrink:0}
  .app{padding-left:8px;padding-right:8px;padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .chatframe{border-radius:20px}
  .chat-tools{padding:9px 10px;gap:8px}
  .tool{padding:7px 10px 7px 7px;border-radius:13px}
  .tool .tic{width:31px;height:31px;border-radius:10px;font-size:17px}
  .tool .tt b{font-size:13px}
  .thread-scroll{padding:14px 12px 8px}
  .thread{gap:12px}
  .msg{max-width:92%;gap:9px}
  .msg .av{width:32px;height:32px;margin-top:17px}
  .bubble{font-size:14.5px;padding:10px 13px}
  .event{align-self:stretch;width:auto;max-width:100%;border-radius:17px;font-size:12.8px;line-height:1.4;padding:10px 12px}
  .event-ic{width:21px;height:21px;border-radius:7px}
  .event-copy{min-width:0}
  .composer{padding:8px 9px calc(8px + env(safe-area-inset-bottom));gap:7px}
  .composer .plus,.composer .send{width:38px;height:38px}
  .composer textarea{font-size:14.5px;padding:9px 12px}
  .panel{width:100%;border-left:none;border-radius:22px 22px 0 0;top:7vh;box-shadow:0 -18px 60px -28px rgba(20,24,60,.55)}
  .panel-head{padding:15px 15px 12px}
  .panel-body{padding:15px}
  .panel-foot{padding:12px 15px calc(14px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .btn{padding:11px 14px}
  .dock-wrap{padding-left:10px;padding-right:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .dock{max-width:none;border-radius:24px;padding:8px 7px;gap:1px}
  .tab .ind{width:50px;height:31px;font-size:21px}
  .tab .lbl{font-size:10px}
  .tab-fab .ind{width:54px;height:42px;transform:translateY(-10px)}
  .tab-fab .lbl{transform:translateY(-7px)}
}

@media (max-width:430px){
  .boucle-switch{max-width:calc(100vw - 112px)}
  .boucle-switch .bs-txt b{max-width:35vw}
  .icon-btn[aria-label="Membres"]{display:none}
  .panel{top:5vh}
}

@media (max-width:360px){
  .boucle-switch .bs-txt{display:none}
  .boucle-switch{max-width:none}
  .tab .lbl{font-size:9.5px}
  .tab .ind{width:44px}
}

@media (min-width:901px){
  .appbar-in{max-width:1180px}
  .app{max-width:1180px;flex-direction:row;align-items:stretch;gap:16px;padding-bottom:120px}
  .chatframe{flex:1 1 auto;min-width:0}
  .chat-tools{padding:13px 17px;gap:13px}
  .tool{padding:8px 16px 8px 9px}
  .tool .tic{width:38px;height:38px;border-radius:12px;font-size:20px}
  .tool .tt b{font-size:14px}
  .tool .tt small{display:block;font-size:11px;color:var(--faint);font-weight:500;margin-top:1px}
  .thread-scroll{padding:24px 30px 12px}
  .msg{max-width:70%}
  .day{margin:2px 2px 18px}
  .scrim{display:none}
  .workspace{position:relative;align-self:stretch;flex:0 0 auto;width:0;height:auto;overflow:hidden;transition:width .4s var(--ease)}
  body.panel-open .workspace{width:clamp(380px,38vw,452px)}
  .panel{position:absolute;inset:0;width:100%;max-width:none;border:1px solid var(--md-outline);border-radius:24px;transform:none;opacity:0;pointer-events:none;box-shadow:0 1px 2px rgba(20,24,60,.05),0 24px 56px -28px rgba(20,24,60,.4);transition:opacity .26s var(--ease)}
  .panel.open{opacity:1;pointer-events:auto;transform:none}
}


/* ==========================================================
   v09 integration with shared PHP header/footer
   ========================================================== */
.page-boucle .app-main,
.page-apprendre .app-main{
  width:min(calc(100vw - 32px),1760px)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:0 16px 104px!important;
  display:block!important;
}
.page-boucle .loop-standalone,
.page-apprendre .loop-standalone{
  height:calc(100dvh - 142px);
  min-height:520px;
}
.page-boucle .loop-standalone>.app,
.page-apprendre .loop-standalone>.app{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(410px,30vw)!important;
  gap:16px!important;
  align-items:stretch!important;
}
.page-boucle .chatframe,
.page-apprendre .chatframe{
  height:100%!important;
  min-height:0!important;
  border-radius:26px!important;
}
.page-boucle .workspace,
.page-apprendre .workspace{
  position:relative!important;
  width:auto!important;
  height:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  display:block!important;
}
.page-boucle .workspace .scrim,
.page-apprendre .workspace .scrim{
  display:none!important;
}
.page-boucle .workspace .panel,
.page-apprendre .workspace .panel{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  border:1px solid var(--md-outline)!important;
  border-radius:26px!important;
  box-shadow:0 1px 2px rgba(20,24,60,.05),0 24px 56px -28px rgba(20,24,60,.4)!important;
  transform:translateX(110%)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:transform .34s var(--ease-spring), opacity .2s var(--ease)!important;
}
.page-boucle .workspace .panel.open,
.page-apprendre .workspace .panel.open{
  transform:none!important;
  opacity:1!important;
  pointer-events:auto!important;
}
/* shared dock stays from footer, not from the old standalone file */
.page-boucle .dock-wrap,
.page-apprendre .dock-wrap{z-index:160!important;}
.page-boucle .dock,
.page-apprendre .dock{min-width:min(520px,calc(100vw - 32px))!important;max-width:560px!important;}
/* hidden legacy loop language badge, common header toggle is now the source of truth */
.lang-badge{display:none!important;}

@media(max-width:900px){
  .page-boucle .app-main,.page-apprendre .app-main{width:100%!important;padding:0 8px 100px!important;}
  .page-boucle .loop-standalone,.page-apprendre .loop-standalone{height:calc(100dvh - 132px);min-height:0;}
  .page-boucle .loop-standalone>.app,.page-apprendre .loop-standalone>.app{display:block!important;height:100%!important;}
  .page-boucle .workspace,.page-apprendre .workspace{position:static!important;width:0!important;height:0!important;overflow:visible!important;}
  .page-boucle .workspace .scrim,.page-apprendre .workspace .scrim{display:block!important;position:fixed!important;inset:0!important;z-index:180!important;background:rgba(13,21,56,.22)!important;opacity:0!important;pointer-events:none!important;backdrop-filter:none!important;}
  .page-boucle .workspace .scrim.open,.page-apprendre .workspace .scrim.open{opacity:1!important;pointer-events:auto!important;}
  .page-boucle .workspace .panel,.page-apprendre .workspace .panel{
    position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:0!important;inset:auto 8px 0 8px!important;
    width:auto!important;height:min(78dvh,680px)!important;z-index:190!important;border-radius:26px 26px 0 0!important;
    transform:translateY(110%)!important;opacity:1!important;pointer-events:none!important;
  }
  .page-boucle .workspace .panel.open,.page-apprendre .workspace .panel.open{transform:translateY(0)!important;pointer-events:auto!important;}
}


/* ==========================================================
   v10 definitive loop integration
   Goal: keep the beautiful responsive-v2 loop design, but use the PHP header/footer.
   Desktop: no blank right zone when no tool is open; split view when a tool is open.
   ========================================================== */
.page-boucle,
.page-apprendre{
  overflow:hidden!important;
}
.page-boucle .app-main,
.page-apprendre .app-main{
  width:min(calc(100vw - 28px),1840px)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:0 0 96px!important;
  display:block!important;
}
.page-boucle .loop-standalone,
.page-apprendre .loop-standalone{
  height:calc(100dvh - 86px);
  min-height:540px;
}
.page-boucle .loop-standalone>.app,
.page-apprendre .loop-standalone>.app{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 0px!important;
  gap:0!important;
  align-items:stretch!important;
  transition:grid-template-columns .34s var(--ease), gap .24s var(--ease);
}
.page-boucle.panel-open .loop-standalone>.app,
.page-apprendre.panel-open .loop-standalone>.app{
  grid-template-columns:minmax(0,1fr) clamp(420px,31vw,520px)!important;
  gap:16px!important;
}
.page-boucle .chatframe,
.page-apprendre .chatframe{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  min-width:0!important;
  border-radius:26px!important;
}
.page-boucle .thread-scroll,
.page-apprendre .thread-scroll{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  min-height:0!important;
  flex:1 1 auto!important;
}
.page-boucle .workspace,
.page-apprendre .workspace{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  display:block!important;
}
.page-boucle .workspace .scrim,
.page-apprendre .workspace .scrim{
  display:none!important;
}
.page-boucle .workspace .panel,
.page-apprendre .workspace .panel{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  border:1px solid var(--md-outline)!important;
  border-radius:26px!important;
  box-shadow:0 1px 2px rgba(20,24,60,.05),0 24px 56px -28px rgba(20,24,60,.4)!important;
  transform:translateX(110%)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:transform .34s var(--ease-spring), opacity .2s var(--ease)!important;
}
.page-boucle .workspace .panel.open,
.page-apprendre .workspace .panel.open{
  transform:none!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.page-boucle .dock-wrap,
.page-apprendre .dock-wrap{z-index:160!important;}
.page-boucle .dock,
.page-apprendre .dock{min-width:min(500px,calc(100vw - 32px))!important;max-width:540px!important;}
.lang-badge{display:none!important;}

@media(max-width:900px){
  .page-boucle,.page-apprendre{overflow:hidden!important;}
  .page-boucle .app-main,.page-apprendre .app-main{width:100%!important;padding:0 8px 94px!important;}
  .page-boucle .loop-standalone,.page-apprendre .loop-standalone{height:calc(100dvh - 128px);min-height:0;}
  .page-boucle .loop-standalone>.app,.page-apprendre .loop-standalone>.app{display:block!important;height:100%!important;}
  .page-boucle .workspace,.page-apprendre .workspace{position:static!important;width:0!important;height:0!important;overflow:visible!important;}
  .page-boucle .workspace .scrim,.page-apprendre .workspace .scrim{display:block!important;position:fixed!important;inset:0!important;z-index:180!important;background:rgba(13,21,56,.22)!important;opacity:0!important;pointer-events:none!important;backdrop-filter:none!important;}
  .page-boucle .workspace .scrim.open,.page-apprendre .workspace .scrim.open{opacity:1!important;pointer-events:auto!important;}
  .page-boucle .workspace .panel,.page-apprendre .workspace .panel{
    position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:0!important;inset:auto 8px 0 8px!important;
    width:auto!important;height:min(78dvh,680px)!important;z-index:190!important;border-radius:26px 26px 0 0!important;
    transform:translateY(110%)!important;opacity:1!important;pointer-events:none!important;
  }
  .page-boucle .workspace .panel.open,.page-apprendre .workspace .panel.open{transform:translateY(0)!important;pointer-events:auto!important;}
}


/* ==========================================================
   v12 — Material 3 pane scaffold: persistent resizing + closable ChatLoop
   ========================================================== */
.page-boucle .app-header-in,.page-apprendre .app-header-in{transition:width .2s var(--ease)}
.page-boucle .loop-standalone>.app,
.page-apprendre .loop-standalone>.app{
  --bp-tool-pane:520px;
  grid-template-columns:minmax(360px,1fr) 0 0!important;
  gap:0!important;
}
.page-boucle.panel-open .loop-standalone>.app,
.page-apprendre.panel-open .loop-standalone>.app{
  grid-template-columns:minmax(360px,1fr) 10px minmax(380px,var(--bp-tool-pane))!important;
  gap:8px!important;
}
.page-boucle.chat-collapsed.panel-open .loop-standalone>.app,
.page-apprendre.chat-collapsed.panel-open .loop-standalone>.app{
  grid-template-columns:0 0 minmax(0,1fr)!important;
  gap:0!important;
}
.chat-collapse{width:38px;height:38px;border-radius:var(--r-full);display:grid;place-items:center;flex:0 0 auto;background:var(--md-surface-container);border:1px solid var(--md-outline);color:var(--ink-soft);font-size:20px;transition:background .15s,transform .12s,color .15s}
.chat-collapse:hover{background:#fff;color:var(--purple)}
.chat-collapse:active{transform:scale(.92)}
.pane-resizer{display:none;align-self:stretch;width:10px;border-radius:99px;background:transparent;cursor:col-resize;position:relative;z-index:5;margin:18px 0}
.pane-resizer::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);border-radius:99px;background:var(--md-outline);transition:background .15s,width .15s}
.pane-resizer:hover::before,.pane-resizer.is-dragging::before{background:var(--purple);width:4px}
.page-boucle.panel-open .pane-resizer,.page-apprendre.panel-open .pane-resizer{display:block}
.page-boucle.chat-collapsed .pane-resizer,.page-apprendre.chat-collapsed .pane-resizer{display:none!important}
.chat-restore{display:none;position:fixed;left:50%;top:92px;transform:translateX(-50%);z-index:175;align-items:center;gap:8px;background:var(--md-surface);border:1px solid var(--md-outline);border-radius:999px;padding:10px 16px;color:var(--purple);font-weight:850;box-shadow:0 18px 42px -26px rgba(20,24,60,.42)}
.chat-restore i{font-size:20px}.chat-restore:hover{background:#fff}
.page-boucle.chat-collapsed .chatframe,.page-apprendre.chat-collapsed .chatframe{opacity:0;pointer-events:none;overflow:hidden!important}
.page-boucle.chat-collapsed .chat-restore,.page-apprendre.chat-collapsed .chat-restore{display:flex}
.page-boucle.chat-collapsed .workspace,.page-apprendre.chat-collapsed .workspace{grid-column:3!important}
.page-boucle.chat-collapsed .workspace .panel,.page-apprendre.chat-collapsed .workspace .panel{border-radius:26px!important}
.summary-task-list li{align-items:flex-start}.summary-task{display:flex;gap:11px;align-items:flex-start;width:100%;cursor:pointer}.summary-task input{width:20px;height:20px;margin-top:2px;accent-color:var(--purple);flex:0 0 auto}.summary-task span{line-height:1.45}.summary-warn{background:#FFF3E7;border:1px solid #FFD0A4;color:#8A4212;border-radius:14px;padding:10px 12px;font-size:13px;font-weight:750;margin:0 0 12px}.ai-validated{align-self:center;display:flex;gap:12px;max-width:min(92%,680px);background:linear-gradient(180deg,#FBFAFF,#F2ECFF);border:1px solid #E3D7FF;border-radius:18px;padding:13px 15px;color:var(--ink-soft);box-shadow:0 12px 26px -22px rgba(107,44,255,.42)}.ai-validated .aa-ic{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#E7DBFF;color:var(--purple);flex:0 0 auto}.ai-validated b{color:var(--purple)}.ai-validated ul{margin:8px 0 0;padding-left:18px}.version-author{margin:-4px 0 14px;display:flex;align-items:flex-start;gap:8px;background:var(--md-surface-container);border:1px solid var(--md-outline-soft);border-radius:14px;padding:10px 12px;color:var(--ink-soft);font-size:13px;line-height:1.4}.version-author i{color:var(--purple);font-size:17px;flex:0 0 auto}.version-author b{color:var(--ink)}
@media(max-width:900px){.page-boucle .loop-standalone>.app,.page-apprendre .loop-standalone>.app{display:block!important}.pane-resizer,.chat-collapse{display:none!important}.chat-restore{top:72px}.page-boucle.chat-collapsed .chatframe,.page-apprendre.chat-collapsed .chatframe{display:none!important}.page-boucle.chat-collapsed .workspace,.page-apprendre.chat-collapsed .workspace{position:static!important;width:100%!important;height:100%!important;overflow:visible!important}.page-boucle.chat-collapsed .workspace .panel.open,.page-apprendre.chat-collapsed .workspace .panel.open{left:8px!important;right:8px!important;top:82px!important;bottom:86px!important;height:auto!important;border-radius:26px!important}}

/* ==========================================================
   v13 — UX panes: “Agrandir l’outil” instead of “masquer”
   ========================================================== */
.chat-collapse{display:none!important}
.page-boucle.panel-open:not(.chat-collapsed) .chat-collapse,
.page-apprendre.panel-open:not(.chat-collapsed) .chat-collapse{display:grid!important}
.chat-collapse i{font-size:20px}
.chat-restore{display:none!important}
.page-boucle.chat-collapsed .chat-restore,
.page-apprendre.chat-collapsed .chat-restore{display:none!important}

/* v20 — mobile loop detail overrides loaded after app.css */
@media(max-width:760px){
  body.mobile-loop-detail .app-header{display:none!important}
  body.mobile-loop-detail .dock-wrap{display:none!important}
  body.mobile-loop-detail .app-main{padding:0!important;width:100%!important;max-width:100%!important;height:100dvh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  body.mobile-loop-detail .mobile-detail-appbar{height:58px!important;flex:0 0 58px!important;display:flex!important;align-items:center!important;gap:10px!important;padding:8px 12px!important;background:color-mix(in oklab,var(--md-surface) 97%,transparent)!important;border-bottom:1px solid var(--md-outline)!important;z-index:260!important}
  body.mobile-loop-detail .loop-standalone{height:calc(100dvh - 58px)!important;min-height:0!important;flex:1!important;overflow:hidden!important;padding:0!important}
  body.mobile-loop-detail .loop-standalone>.app{height:100%!important;display:block!important;padding:0!important;margin:0!important;max-width:none!important;width:100%!important}
  body.mobile-loop-detail .chatframe{height:100%!important;border-radius:0!important;border:0!important;box-shadow:none!important;display:flex!important;flex-direction:column!important}
  body.mobile-loop-detail .thread-scroll{flex:1 1 auto!important;min-height:0!important;padding-bottom:10px!important;overflow-y:auto!important}
  body.mobile-loop-detail .composer{flex:0 0 auto!important;position:sticky!important;bottom:0!important;padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;z-index:40!important}
  body.mobile-loop-detail .workspace .panel.open{top:58px!important;bottom:0!important;border-radius:22px 22px 0 0!important}
}

/* v22 — smartphone-only loop detail safety: no nav bar, fixed chat composer */
@media(max-width:760px){
  body.mobile-loop-detail .dock-wrap,
  body.mobile-loop-detail #dock-wrap,
  body.mobile-loop-detail .quick-actions{display:none!important;visibility:hidden!important;pointer-events:none!important;}
  body.mobile-loop-detail .chatframe{padding-bottom:calc(72px + env(safe-area-inset-bottom))!important;}
  body.mobile-loop-detail .thread-scroll{padding-bottom:96px!important;}
  body.mobile-loop-detail .composer{position:fixed!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;z-index:330!important;}
}

/* v35 — Fake IA reply in loop composer */
.msg.fake-ai-msg{
  align-self:flex-start;
  max-width:min(86%,720px);
  gap:10px;
}
.fake-ai-avatar{
  width:36px;
  height:36px;
  border-radius:14px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  margin-top:18px;
  background:linear-gradient(135deg,#EADFFF,#F7E9FF);
  color:var(--purple);
  box-shadow:0 10px 22px -16px rgba(107,44,255,.58);
}
.fake-ai-msg .bubble{
  background:linear-gradient(180deg,#FBFAFF,#F5EFFF);
  border-color:#E3D6FF;
  color:var(--ink);
  box-shadow:0 14px 34px -24px rgba(107,44,255,.40);
}
.fake-ai-msg .bubble b{color:var(--purple);font-weight:900}
.fake-ai-msg .meta b{color:var(--purple)}
@media(max-width:720px){
  .msg.fake-ai-msg{max-width:92%}
  .fake-ai-avatar{width:32px;height:32px;border-radius:12px;margin-top:16px}
}


/* ==========================================================
   v37 — symmetric pane focus controls
   Default: ChatLoop + active tool. The same expand icon toggles focus.
   Tool focus hides ChatLoop. ChatLoop focus hides the tool. No X close icon.
   ========================================================== */
.panel-head .x.pane-focus-toggle,
.panel-head .pane-focus-toggle{
  width:38px;height:38px;border-radius:var(--r-full);
  background:var(--md-surface-container);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
  transition:background .15s,transform .12s,color .15s,box-shadow .15s;
}
.panel-head .x.pane-focus-toggle:hover,
.panel-head .pane-focus-toggle:hover{background:#fff;color:var(--purple);box-shadow:0 8px 22px -16px rgba(20,24,60,.35)}
.panel-head .x.pane-focus-toggle:active,
.panel-head .pane-focus-toggle:active{transform:scale(.92)}
.panel-head .x.pane-focus-toggle i,
.chat-collapse i{font-size:20px}

@media (min-width:901px){
  .page-boucle.panel-open .chat-collapse,
  .page-apprendre.panel-open .chat-collapse{display:grid!important}

  .page-boucle.tool-collapsed.panel-open .loop-standalone>.app,
  .page-apprendre.tool-collapsed.panel-open .loop-standalone>.app{
    grid-template-columns:minmax(0,1fr) 0 0!important;
    gap:0!important;
  }
  .page-boucle.tool-collapsed .pane-resizer,
  .page-apprendre.tool-collapsed .pane-resizer{display:none!important}
  .page-boucle.tool-collapsed .workspace,
  .page-apprendre.tool-collapsed .workspace{
    opacity:0!important;pointer-events:none!important;overflow:hidden!important;
  }
  .page-boucle.tool-collapsed .workspace .panel,
  .page-apprendre.tool-collapsed .workspace .panel{
    opacity:0!important;pointer-events:none!important;
  }
}

@media(max-width:900px){
  .panel-head .x.pane-focus-toggle{display:none!important}
}

/* ==========================================================
   v38 — compact manifest versions + premium task assignment
   ========================================================== */
.ver-bar{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:2px 2px 8px!important;
  margin-bottom:10px!important;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
.ver-bar::-webkit-scrollbar{height:6px}
.ver-bar::-webkit-scrollbar-thumb{background:var(--md-outline);border-radius:99px}
.ver-chip{
  flex:0 0 auto!important;
  min-width:72px;
  justify-content:space-between;
  scroll-snap-align:start;
}
.ver-chip small{margin-left:10px;white-space:nowrap}

.todo-item-assignable{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:flex-start;
  gap:12px;
}
.todo-main{min-width:0;display:flex;flex-direction:column;gap:10px;flex:1}
.todo-main .todo-text{width:100%}
.todo-assign{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  background:#F4EEFF;
  color:var(--purple);
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
  transition:background .15s,transform .12s,box-shadow .15s;
}
.todo-assign:hover{background:#EEE4FF;box-shadow:0 8px 18px -15px rgba(107,44,255,.5)}
.todo-assign:active{transform:scale(.96)}
.todo-assignment{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 11px;
  border:1px solid #E7DCFF;
  background:linear-gradient(180deg,#FCFAFF,#F6F0FF);
  border-radius:16px;
  color:var(--ink-soft);
  font-size:12px;
  box-shadow:0 12px 24px -22px rgba(107,44,255,.42);
}
.assign-left,.assign-right{display:flex;align-items:center;gap:8px;min-width:0}
.assign-left span,.assign-right span{display:flex;flex-direction:column;gap:1px;color:var(--faint);font-weight:750;line-height:1.05;white-space:nowrap}
.assign-left b{display:block;color:var(--ink);font-size:12.5px;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.assign-arrow{color:var(--purple);font-size:17px;opacity:.72}
.todo-person-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1px var(--md-outline);background:#E7E2F2;flex:0 0 auto}
.assignee-stack{display:flex;align-items:center;min-width:0}.assignee-stack .assignee{margin-left:-8px}.assignee-stack .assignee:first-child{margin-left:0}
.todo-assignment small{font-size:11px;color:var(--faint);font-weight:800;white-space:nowrap}
.assign-picker{
  display:none;
  border:1px solid var(--md-outline-soft);
  background:#fff;
  border-radius:18px;
  padding:12px;
  box-shadow:0 18px 42px -30px rgba(20,24,60,.38);
}
.todo-item.is-assigning .assign-picker{display:block}
.assign-picker p{margin:0 0 10px;font-size:12px;font-weight:900;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.assign-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.assign-option{
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:8px;border-radius:14px;background:var(--md-surface-container);
  border:1px solid transparent;cursor:pointer;
}
.assign-option:hover{border-color:#DCCEFF;background:#FBFAFF}
.assign-option input{accent-color:var(--purple);width:16px;height:16px;flex:0 0 auto}
.assign-option img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.assign-option span{display:flex;flex-direction:column;min-width:0;line-height:1.05}.assign-option b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.assign-option small{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assign-save{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border-radius:14px;background:var(--purple);color:#fff;font-size:13px;font-weight:900;box-shadow:0 12px 24px -14px rgba(107,44,255,.62)}

@media(max-width:760px){
  .ver-bar{padding-bottom:9px!important;margin-bottom:8px!important}
  .ver-chip{min-width:68px;padding:7px 10px!important;font-size:12px!important}
  .todo-item-assignable{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .todo-item-assignable .todo-meta{grid-column:2;display:flex;justify-content:flex-start;gap:8px;width:100%}
  .todo-assign span{display:inline}
  .todo-assignment{grid-template-columns:auto 1fr;gap:8px;padding:10px}
  .todo-assignment .assign-arrow{display:none}
  .todo-assignment small{grid-column:1 / -1}
  .assign-left,.assign-right{min-width:0}.assign-right{justify-content:space-between}
  .assign-options{grid-template-columns:1fr}
  body.mobile-loop-detail .workspace .panel.open{bottom:calc(78px + env(safe-area-inset-bottom))!important;height:auto!important;max-height:calc(100dvh - 146px)!important}
  .panel-foot{background:var(--md-surface);z-index:5;box-shadow:0 -10px 24px -26px rgba(20,24,60,.32)}
  #panel-summary .panel-foot{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  #panel-summary .panel-foot .btn{width:100%;min-height:46px;font-size:13.5px;padding-inline:12px}
  #panel-summary .panel-body{padding-bottom:16px!important}
}

/* === v39 compact manifesto versions + responsive summary/actions === */
.ver-bar{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  padding:0 2px 4px!important;
  margin-bottom:10px!important;
}
.ver-bar::-webkit-scrollbar{display:none!important}
.ver-chip{
  flex:0 0 auto!important;
  min-width:0!important;
  height:28px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  line-height:1!important;
  gap:0!important;
}
.ver-chip small{display:none!important}
@media(max-width:760px){
  .ver-chip{height:26px!important;padding:0 9px!important;font-size:11.5px!important}
  .version-author{font-size:12px!important;padding:9px 10px!important;margin-bottom:10px!important}
  #panel-summary .panel-foot{position:sticky!important;bottom:0!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding-bottom:calc(12px + env(safe-area-inset-bottom))!important}
  #panel-summary .panel-foot .btn{width:100%!important;min-height:48px!important;justify-content:center!important}
}

/* === v40 — cleaner assigned To-do cards === */
.todo-item-assignable .todo-meta:empty{display:none!important}
.todo-item-assignable .todo-meta{align-self:flex-start}
.todo-item-assignable:has(.todo-assignment) .todo-main{gap:8px}
.todo-item-assignable:has(.todo-assignment) .todo-meta .todo-del{opacity:.35}
.todo-assignment{max-width:min(100%,430px);grid-template-columns:auto auto minmax(0,1fr) auto!important;}
.assign-right{min-width:0;justify-content:flex-start}.assign-right span{flex:0 0 auto}.assignee-stack{margin-left:2px}
@media(max-width:760px){
  .todo-assignment{max-width:100%;grid-template-columns:auto 1fr!important;}
  .assign-left{grid-column:1 / -1}.assign-right{grid-column:1 / -1;background:rgba(255,255,255,.55);border-radius:12px;padding:7px 8px}.assignee-stack{margin-left:auto}
}


/* ============================================================
   v50 — mobile tool panels: explicit close button on all loops
   ============================================================ */
.mobile-tool-close{display:none!important}
@media(max-width:900px){
  .panel-head .mobile-tool-close{
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    border-radius:999px!important;
    background:var(--md-surface-container)!important;
    color:var(--ink-soft)!important;
    font-size:20px!important;
    box-shadow:0 1px 2px rgba(20,24,60,.05)!important;
  }
  .panel-head .mobile-tool-close:active{transform:scale(.94)}
  .panel-head .mobile-tool-close i{font-size:20px!important}
  body.mobile-loop-detail .workspace .panel.open{z-index:340!important}
}
