/* Conversation uses the available width; secondary tools live in a drawer. */
#s-chat .chat-main > .chat, #s-chat .chat-main > .card { max-width: none; }
#s-chat .chat-main-head { align-items: center; }
#s-chat .chat-model-card .provider-picker-inline-providers { display: none; }
#s-chat .chat-model-card .provider-model-picker { display: grid; grid-template-columns: minmax(210px,.8fr) minmax(0,1.8fr); align-items: start; gap: 16px; }
#s-chat .chat-model-card .provider-picker-current { padding: 0; border: 0; background: transparent; }
#s-chat .chat-model-card .provider-picker-summary { display:none; }
#s-chat .chat-model-card .provider-picker-io { display: none; }
#s-chat .chat-model-card .provider-picker-rate-disclosure { margin-top: 0; }
#s-chat .chat-model-card .provider-picker-current-prices { padding-top: 2px; }
#s-chat .chat-model-card .provider-picker-price-row { gap: 12px; }
#s-chat .chat-model-card { padding: 9px 11px !important; }
#s-chat .chat-model-card > label { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
#s-chat .chat-model-card .provider-model-picker { margin:0; }
#s-chat .chat-model-card .provider-picker-trigger { min-height:56px;padding:8px 11px; }
#s-chat .chat-model-card .provider-picker-current-prices { grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px; }
.chat-history-panel .chat-history-list { min-width:0;overflow-x:hidden; }
.chat-history-panel .history-row { align-items:flex-start;min-width:0;max-width:100%;box-sizing:border-box; }
.chat-history-panel .history-row-main { width:0;min-width:0;flex:1 1 0;overflow:hidden; }
.chat-history-panel .history-row-main strong { display:-webkit-box;max-height:2.7em;overflow:hidden;white-space:normal;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.35; }
.chat-history-panel .history-row-main small { margin-top:5px; }
.chat-composer { position:relative;padding:7px 9px !important; }
.chat-composer textarea { display:block;box-sizing:border-box;width:100%;min-height:42px;max-height:180px;border:0;background:transparent;padding:8px 10px;line-height:1.55;resize:none;overflow-y:auto; }
.chat-composer textarea:focus { outline:0;box-shadow:none; }
.chat-composer .chat-attach-bar { margin:0 10px; }
.chat-composer .chat-attach-bar .hint { margin:2px 0 5px;font-size:11px;line-height:1.4; }
/* Au repos, le composeur ne montre que l'essentiel : l'aide sur les pieces jointes apparait au glisser. */
.chat-composer .chat-attach-hint { display:none; }
.chat-composer.chat-dragover .chat-attach-hint { display:block; }
.chat-save-bar { position:relative;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;font-size:11px;color:var(--muted); }
.chat-save-bar .chat-save-head { display:flex;align-items:center;justify-content:center;gap:7px;min-width:0; }
.chat-save-bar[data-empty="true"] .chat-save-head { display:none; }
.chat-save-more { position:relative;flex:0 0 auto; }
.chat-save-bar #chatSaveMsg:empty { display:none; }
.chat-save-bar #chatSaveMsg:not(:empty) { position:absolute;left:0;right:0;bottom:calc(100% + 10px);z-index:5;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow);line-height:1.4; }
.chat-save-bar strong { max-width:190px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.chat-save-action { border:0;background:none;color:var(--brand-text,var(--brand));font:inherit;cursor:pointer;padding:5px 2px;text-decoration:underline;white-space:nowrap; }
.chat-save-action[disabled] { display:none; }
.chat-save-more > summary { display:grid;place-items:center;width:44px;height:44px;box-sizing:border-box;border-radius:50%;cursor:pointer;color:var(--muted);list-style:none; }
.chat-save-more > summary::-webkit-details-marker { display:none; }
.chat-save-more > summary:hover { background:var(--brand-soft);color:var(--brand-text,var(--brand)); }
.chat-save-more > summary:focus-visible { outline:3px solid var(--brand);outline-offset:2px; }
.chat-save-more > summary svg { width:18px;height:18px; }
.chat-save-popover { position:absolute;right:0;bottom:calc(100% + 9px);z-index:12;width:min(320px,calc(100vw - 36px));box-sizing:border-box;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--panel);box-shadow:var(--shadow); }
.chat-save-popover small { display:block;margin:0 0 10px;line-height:1.5; }
.chat-save-popover .chat-save-title label { display:block;margin-bottom:5px; }
.chat-compose-toolbar { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:2px;padding-top:5px;border-top:1px solid var(--line); }
.chat-compose-tools { display:flex;align-items:center;gap:8px; }
.chat-compose-icon,.chat-compose-send { display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--text);cursor:pointer;touch-action:manipulation; }
.chat-compose-icon:hover { border-color:var(--brand);background:var(--brand-soft); }
.chat-compose-send { border-color:var(--brand);background:var(--brand);color:var(--brand-ink); }
.chat-compose-send:hover { filter:brightness(1.06); }
.chat-compose-icon:focus-visible,.chat-compose-send:focus-visible { outline:3px solid var(--brand);outline-offset:3px; }
.chat-compose-icon svg,.chat-compose-send svg { width:20px;height:20px; }
.chat-compose-icon:disabled,.chat-compose-send:disabled { opacity:.5;cursor:not-allowed; }
.visually-hidden { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
.chat-options-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 12px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.chat-options-trigger:hover { background: var(--brand-soft); border-color: var(--brand); }
.chat-options-trigger svg { width: 18px; height: 18px; stroke: currentColor; }
.chat-options-trigger:focus-visible, .chat-options-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.chat-options-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); font-size: 12px; }
#chatOptionsDialog { position: fixed; inset: 12px 12px 12px auto; margin: 0; width: min(390px, calc(100vw - 24px)); height: calc(100dvh - 24px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); box-shadow: 0 20px 70px #0003; overflow: hidden; }
#chatOptionsDialog[open] { display: flex; flex-direction: column; }
#chatOptionsDialog::backdrop { background: #10171455; }
.chat-options-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px; border-bottom: 1px solid var(--line); }
.chat-options-head > div { flex: 1; min-width: 0; }
.chat-options-head h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
.chat-options-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.chat-options-close { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 24px; cursor: pointer; }
.chat-options-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 18px; }
.chat-options-body .card { max-width: none; margin: 0 0 16px; padding: 14px; box-shadow: none; }
.chat-options-body .chat-mode-grid, .chat-options-body .chat-mode-grid:has(.chat-mode[data-chat-mode="mesh3d"]:not([hidden])) { grid-template-columns: minmax(0,1fr); }
.chat-options-body .chat-mode { padding: 12px; min-width: 0; }
.chat-options-body .chat-mode:not(:has(input[data-chat-family]:checked)) .provider-model-picker { display: none; }
.chat-options-body .provider-picker-inline-providers, .chat-options-body .provider-picker-summary { display: none; }
.chat-options-body .provider-picker-current { padding: 10px; }
.chat-options-body .provider-picker-rate-disclosure { margin-top: 0; }
.chat-options-body .provider-picker-current-prices { padding-top: 0; }
.chat-options-body .chat-mode-copy strong { font-size: 14px; }
.chat-options-body .chat-mode-copy small { font-size: 12px; }
.chat-options-body .chat-generation-head { gap: 10px; flex-wrap: wrap; }
.chat-options-body .chat-generation-head strong { font-size: 14px; }
.chat-options-body .chat-generation-head small, .chat-options-body .chat-generation-help { font-size: 12px; line-height: 1.6; }
.chat-options-body .pc-chat-copy { min-width: 0; }
.chat-options-body .pc-chat-copy small { font-size: 12px; line-height: 1.5; }
@media (max-width: 700px) {
  #s-chat .chat-model-card .provider-model-picker { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #chatOptionsDialog { inset: auto 0 0; width: 100%; height: auto; max-height: 85dvh; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .chat-options-head { padding: 18px 16px 14px; }
  .chat-options-body { padding: 16px; }
  .chat-options-close, .chat-options-trigger { min-height: 44px; }
  .chat-options-close { width: 44px; }
  #s-chat .chat-main-head { flex-wrap: wrap; }
  #s-chat .chat-main-title { flex: 1 1 100px; }
  #s-chat .chat-main-title strong { font-size: 15px; }
  #s-chat .chat-usage { flex-basis: 100%; }
  #s-chat .chat-model-card .provider-picker-current-prices { grid-template-columns:1fr; }
  .chat-compose-toolbar { grid-template-columns:auto 1fr auto; }
  .chat-save-bar strong { max-width:96px; }
  .chat-save-action { display:none; }
  .chat-save-popover { position:fixed;left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));width:auto; }
}
.chat-response-budget { display: grid; gap: 12px; }
.chat-budget-presets { display: grid; gap: 8px; }
.chat-budget-presets button { display: grid; gap: 4px; text-align: start; padding: 12px 14px; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.chat-budget-presets button small { font-size: 12px; color: var(--muted); }
.chat-budget-presets button[aria-pressed=true] { border-color: var(--accent); color: var(--accent); background: var(--bg); }
.chat-response-budget .hint { margin: 0; line-height: 1.55; }
.chat-response-budget[data-assessment=low] #chatTokenHint { border-inline-start: 3px solid var(--accent); padding-inline-start: 10px; }
@media (prefers-reduced-motion: no-preference) {
  #chatOptionsDialog[open] { animation: chat-drawer-in 160ms ease-out; }
  @keyframes chat-drawer-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
  @media (max-width: 700px) { #chatOptionsDialog[open] { animation-name: chat-sheet-in; } @keyframes chat-sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } }
}
/* La note d'explication ne tient la colonne que tant qu'il n'y a rien a lister : la regle s'apprend une fois. */
#recentChatHint:has(+ #historyList .history-row) { display:none; }

/* Deux cartes distinctes, comme les panneaux des ateliers. Les commandes restent
   dans la conversation et le tiroir Options ; aucune troisième colonne. */
#s-chat .chat-workspace {
  gap: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#s-chat .chat-history-panel,
#s-chat .chat-main {
  border: 1px solid var(--line);
  border-radius: var(--radius, 18px);
  background: var(--panel);
  box-shadow: var(--shadow);
}
#s-chat .chat-history-panel { overflow-x: hidden; }
#s-chat .chat-main { min-width: 0; }
#s-chat #chatLog:has(> .empty:only-child){display:flex;flex-direction:column}
#s-chat #chatLog>.empty:only-child{flex:1 1 auto;align-self:stretch;margin:0;min-height:0}
#s-chat #toggleChatHistory { display: inline-flex; justify-content: center; width: 44px; min-height: 44px; padding: 0; flex: 0 0 auto; }
#s-chat .chat-main-head #newChat { width: auto; min-height: 44px; margin: 0; padding: 8px 12px; flex: 0 0 auto; }
#s-chat .chat-main-head #newChat svg { width: 16px; height: 16px; }
@media (min-width: 1051px) {
  #s-chat .chat-workspace.history-collapsed { grid-template-columns: minmax(0,1fr); }
  #s-chat .chat-workspace.history-collapsed .chat-history-panel { display: none; }
}
/* Discussion longue sur grand ecran : seul le fil defile.
   L'ecran prend la hauteur visible de `main`, l'espace de travail remplit ce qui
   reste, et l'en-tete, le selecteur de modele et le composeur ne bougent plus.
   `min-height: 0` annule le plancher de studio-design.css (640 px, 600 px en
   petite fenetre) qui faisait deborder la page au lieu du fil. Le plancher passe
   sur l'espace de travail, pas sur le fil : le fil peut se reduire, et sur une
   fenetre tres basse c'est la page qui defile un peu. Un plancher pose sur le
   fil rognait le composeur, puisque .chat-main coupe ce qui depasse.
   Sous 900 px, rien ne change. */
@media (min-width: 900px) {
  #s-chat.chat-screen:not([hidden]) { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  #s-chat > .subtabs { flex: 0 0 auto; }
  #s-chat .chat-workspace { flex: 1 1 0; min-height: 360px; }
  #s-chat .chat-main { overflow: hidden; }
  #s-chat .chat-main > .chat { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #s-chat .chat-main > .card { flex: 0 0 auto; }
}

@media (max-width: 1050px) {
  #s-chat .chat-workspace { gap: 0; }
  #s-chat .chat-history-panel { visibility: hidden; }
  #s-chat .chat-workspace:is(.history-open, .is-history-open) .chat-history-panel { visibility: visible; }
}

/* Compact conversation controls: essential actions stay visible, details open on demand. */
#s-chat .chat-main-head{gap:8px;margin-bottom:10px;flex-wrap:nowrap}
#s-chat .chat-main-title{flex:1 1 auto;min-width:0}
#s-chat .chat-main-title>span{display:none}
#s-chat .chat-main-title strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.4}
#s-chat .chat-main-head #newChat{min-height:44px;padding:8px 12px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:10px;font-size:13px;white-space:nowrap}
#s-chat .chat-main-head #newChat:hover{background:var(--brand-soft);border-color:var(--brand)}
#s-chat .chat-main-head .chat-options-trigger{min-height:44px;background:transparent}
#s-chat .chat-main-head .chat-usage{display:none}
#s-chat .chat-model-card{display:grid;grid-template-columns:minmax(180px,340px) max-content minmax(0,1fr);align-items:center;gap:8px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;padding:0 0 10px!important;margin-bottom:12px!important}
#s-chat .chat-model-card .provider-model-picker{display:contents}
#s-chat .chat-model-card .provider-picker-trigger{grid-column:1;order:1;min-height:44px;padding:6px 8px;border-radius:10px;background:transparent;border-color:transparent;gap:9px}
#s-chat .chat-model-card .provider-picker-trigger:hover{border-color:var(--line);background:var(--brand-soft)}
#s-chat .chat-model-card .provider-picker-trigger>.provider-picker-logo{width:26px;height:26px;flex-basis:26px;border-radius:7px}
#s-chat .chat-model-card .provider-picker-trigger>.provider-picker-logo img{inset:3px;width:20px;height:20px}
#s-chat .chat-model-card .provider-picker-copy strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal;font-size:13px}
#s-chat .chat-model-card .provider-picker-copy small{display:none}
#s-chat .chat-model-card .ca-reasoning{grid-column:2;order:2}
#s-chat .chat-model-card .provider-picker-current{grid-column:3;order:3;justify-self:end;min-width:0;padding:0}
#s-chat .chat-model-card .provider-picker-rate-disclosure{margin:0;border:0}
#s-chat .chat-model-card .provider-picker-rate-toggle{min-height:44px;padding:8px 24px 8px 10px;border-radius:10px;font-size:12px;font-weight:500;white-space:nowrap}
#s-chat .chat-model-card .provider-picker-rate-toggle:hover{background:var(--brand-soft)}
.chat-secondary-dialog{position:fixed;inset:auto;margin:0;width:286px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:12px;box-sizing:border-box;border:1px solid var(--line);border-radius:16px;background:var(--surface,var(--panel));color:var(--ink);box-shadow:0 16px 50px #0004;overflow:auto;font:14px/1.5 var(--font-ui,system-ui)}
html[data-ui] body .chat-secondary-dialog::backdrop{background:transparent;backdrop-filter:none}
.chat-secondary-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline-start:8px;margin-bottom:6px}
.chat-secondary-head>strong{font-size:13px;font-weight:600}
.chat-secondary-head>button{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:10px;background:transparent;color:var(--muted);font:24px/1 system-ui;cursor:pointer}
.chat-secondary-actions{display:grid;gap:4px}
.chat-secondary-dialog .chat-secondary-action{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;height:auto;min-height:48px;max-width:100%;margin:0;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:14px/1.4 var(--font-ui,system-ui);text-align:start;overflow:hidden;white-space:normal;word-break:break-word;cursor:pointer}
.chat-secondary-dialog .chat-secondary-action>svg{width:18px;height:18px;flex:none;color:var(--muted)}
html[data-ui] body .chat-secondary-dialog .chat-secondary-action.icon-action{width:100%!important;padding:10px 12px!important;min-width:0;height:auto;justify-content:flex-start}
.chat-secondary-label{flex:1;min-width:0}
.chat-secondary-dialog button:hover{background:var(--brand-soft)}
.chat-secondary-dialog button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.chat-pricing-dialog{width:360px}
.chat-pricing-dialog .provider-picker-current-prices{grid-template-columns:1fr;gap:14px;padding:6px 8px 10px}
.chat-pricing-dialog .provider-picker-price-row{gap:12px}
.chat-pricing-dialog .provider-picker-rate-note{font-size:12px;line-height:1.5;color:var(--muted)}
@media(max-width:600px){
  #s-chat .chat-main-head{gap:5px}
  #s-chat .chat-main-title strong{font-size:13px}
  #s-chat .chat-main-head #newChat,#s-chat .chat-main-head #chatOptionsButton,#s-chat .chat-main-head #chatMoreButton{position:relative;width:44px;min-width:44px;padding:0;gap:0}
  #s-chat .chat-main-head #newChat .chat-new-label,#chatOptionsButton>span[data-ui-text],#chatMoreButton>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  #chatOptionsCount{position:absolute;top:-4px;inset-inline-end:-4px;font-size:10px;min-width:16px;height:16px;padding:0 3px;border:1px solid var(--line)}
  #s-chat .chat-model-card{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}
  #s-chat .chat-model-card .provider-picker-trigger{grid-column:1/-1;max-width:100%;order:1}
  #s-chat .chat-model-card .ca-reasoning{grid-column:1;order:2}
  #s-chat .chat-model-card .provider-picker-current{grid-column:2;order:3}
  .chat-secondary-dialog{inset:auto 12px 12px;width:calc(100vw - 24px);max-height:80svh;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  html[data-ui] body .chat-secondary-dialog::backdrop{background:#0004}
}