/* Assistant Gandalf — approved layout, revision 3 (plans-chanv, 2026-09-08). Geometry lives here; message, Studio and voice rendering remain in ai-chat.css. */ #ai-chat-view.ai-redesign { --ai-paper:var(--gs-panel, var(--g-panel, #fff)); --ai-ink:var(--gs-ink, var(--g-ink, #282828)); --ai-soft:var(--gs-panel-2, #F1EADA); --ai-line:var(--gs-line, #e4ddcf); --ai-muted:var(--gs-ink-dim, #655f55); --ai-history-width:226px; color:var(--ai-ink); background:var(--ai-paper); isolation:isolate; } #ai-chat-view.ai-redesign .ai-chat-main { display:grid; grid-template-columns:minmax(0,1fr) 288px; grid-template-rows:auto minmax(0,1fr); margin-left:0; min-width:0; width:auto; flex:1; height:100%; background:var(--ai-paper); } #ai-chat-view.ai-redesign .ai-chat-header { grid-column:1/-1; min-height:68px; padding:10px 18px; gap:8px; flex-wrap:nowrap; overflow:visible; background:var(--ai-paper); color:var(--ai-ink); border-bottom:1px solid var(--ai-line); } #ai-chat-view.ai-redesign .ai-thread-heading { flex:1; min-width:0; } #ai-chat-view.ai-redesign .ai-thread-heading h2 { margin:0; font:600 14px/1.4 Inter,sans-serif; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #ai-chat-view.ai-redesign button,#ai-chat-view.ai-redesign select { font-family:inherit; } #ai-chat-view.ai-redesign :is(.ai-history-trigger,.ai-new-trigger,.ai-workspace-trigger,.ai-more-trigger,.ai-agent-trigger,.ai-panel-heading button) { background:transparent; color:var(--ai-ink); border:1px solid transparent; border-radius:8px; min-height:36px; cursor:pointer; padding:7px 9px; font-size:12px; } #ai-chat-view.ai-redesign .ai-agent-trigger { padding:0; min-height:26px; color:var(--ai-muted); max-width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } #ai-chat-view.ai-redesign .ai-workspace-trigger { border-color:var(--ai-line); white-space:nowrap; } #ai-chat-view.ai-redesign .ai-conversation-area { grid-column:1; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; } #ai-chat-view.ai-redesign .ai-chat-messages { flex:1; min-height:0; padding:28px clamp(16px,3vw,48px); overflow:auto; } #ai-chat-view.ai-redesign .ai-chat-input { flex:none; margin:0; padding:10px clamp(16px,3vw,48px) 18px; border:0; background:var(--ai-paper); width:auto; } #ai-chat-view.ai-redesign .ai-composer-surface { border:1px solid var(--gs-line-strong,#DDCBA4); border-radius:14px; padding:10px; width:100%; max-width:none; box-sizing:border-box; margin:auto; background:var(--ai-paper); } /* La hauteur close reste à 60px ; le PLAFOND est la seule valeur à régler ici — ai-composer-autosize.js le lit (getComputedStyle) au lieu de le redéclarer. Ticket OLJcOxc8ipy3HW3E5fJO : 150px = ~2,5x la boîte close, on relisait son propre message à l'ascenseur. 300px = ~5x, la marge de ChatGPT. Le repli 45dvh protège les fenêtres courtes (portable, écran partagé), où un plafond fixe mangerait la conversation ; la 1re ligne sert aux navigateurs sans dvh. */ #ai-chat-view.ai-redesign .ai-chat-textarea { width:100%; border:0; border-radius:6px; box-shadow:none; margin:0; padding:8px; background:transparent; color:var(--ai-ink); font-size:15px; min-height:60px; max-height:300px; } #ai-chat-view.ai-redesign .ai-chat-textarea { max-height:min(300px,45dvh); } #ai-chat-view.ai-redesign .ai-input-row { display:flex; align-items:center; gap:6px; width:100%; } #ai-chat-view.ai-redesign .ai-composer-select { min-width:0; max-width:130px; padding:8px; font-size:12px; color:var(--ai-ink); background:var(--ai-soft); border:0; border-radius:8px; min-height:38px; } #ai-chat-view.ai-redesign .ai-attach-btn { width:38px; height:38px; flex:none; border:0; border-radius:8px; color:var(--ai-ink); background:transparent; } #ai-chat-view.ai-redesign .ai-attach-btn svg { width:19px; height:19px; } #ai-chat-view.ai-redesign .ai-chat-send { margin-left:auto; flex:none; width:40px; height:40px; background:var(--ai-ink); color:var(--ai-paper); } #ai-chat-view.ai-redesign .ai-image-panel { margin:0 18px; flex:none; width:auto; max-height:180px; overflow:auto; background:var(--ai-soft); } #ai-chat-view.ai-redesign .ai-workspace-panel { position:relative; inset:auto; grid-column:2; grid-row:2; width:auto; margin:18px 16px 18px 0; align-self:start; max-height:calc(100% - 36px); overflow:auto; padding:16px; background:var(--ai-paper); border:1px solid var(--ai-line); border-radius:12px; box-shadow:none; } #ai-chat-view.ai-redesign .ai-workspace-head { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:5px; padding:0 0 10px; } #ai-chat-view.ai-redesign .ai-workspace-head span { font-size:15px; color:var(--ai-ink); } #ai-chat-view.ai-redesign .ai-workspace-head button { min-width:32px; min-height:32px; border:0; background:transparent; color:var(--ai-muted); cursor:pointer; } #ai-chat-view.ai-redesign .ai-workspace-action { padding:13px 0; color:var(--ai-ink); border-color:var(--ai-line); } #ai-chat-view.ai-redesign .ai-workspace-action b { font-size:12px; } #ai-chat-view.ai-redesign .ai-workspace-action small { font-size:11px; color:var(--ai-muted); } #ai-chat-view.ai-redesign .ai-thread-files { border-top:1px solid var(--ai-line); margin-top:18px; padding-top:18px; } #ai-chat-view.ai-redesign .ai-thread-files h3 { font:600 12px/1.5 Inter,sans-serif; margin:0 0 8px; } #ai-chat-view.ai-redesign .ai-thread-file { display:flex; align-items:center; gap:5px; } #ai-chat-view.ai-redesign .ai-thread-file button { background:transparent; color:var(--ai-ink); border:0; cursor:pointer; padding:8px 3px; min-height:38px; } #ai-chat-view.ai-redesign .ai-thread-file-name { flex:1; text-align:left; font-size:12px; min-width:0; overflow-wrap:anywhere; } #ai-chat-view.ai-redesign .ai-workspace-add { width:100%; background:transparent; color:var(--ai-ink); border:1px solid var(--ai-line); border-radius:8px; min-height:40px; margin-top:12px; cursor:pointer; font-size:12px; } #ai-chat-view.ai-redesign.workspace-collapsed .ai-chat-main { grid-template-columns:minmax(0,1fr); } #ai-chat-view.ai-redesign.workspace-collapsed .ai-workspace-panel { display:none; } #ai-chat-view.ai-redesign .ai-sidebar { position:relative; inset:auto; width:var(--ai-history-width); flex:0 0 var(--ai-history-width); height:100%; background:var(--gs-search-bg,var(--ai-soft)); color:var(--ai-ink); border-right:1px solid var(--ai-line); z-index:3; transition:none; } #ai-chat-view.ai-redesign.sidebar-collapsed .ai-sidebar { display:none; } #ai-chat-view.ai-redesign .ai-sidebar-toggle { display:none!important; } #ai-chat-view.ai-redesign .ai-sidebar-header { padding:16px 12px 12px; border:0; gap:12px; } #ai-chat-view.ai-redesign .ai-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; } #ai-chat-view.ai-redesign .ai-panel-heading h2 { font:600 16px/1.3 Outfit,Inter,sans-serif; margin:0; } #ai-chat-view.ai-redesign .ai-sidebar-back { display:none; } #ai-chat-view.ai-redesign .ai-sidebar-new { background:var(--ai-ink); color:var(--ai-paper); padding:11px 10px; border-radius:8px; font-size:12px; } #ai-chat-view.ai-redesign .ai-sidebar-search { padding:0 12px 10px; } #ai-chat-view.ai-redesign .ai-sidebar-search input { background:var(--ai-paper); color:var(--ai-ink); border:1px solid var(--ai-line); font-size:12px; border-radius:8px; padding:10px; } #ai-chat-view.ai-redesign .ai-sidebar-search input::placeholder { color:var(--ai-muted); } #ai-chat-view.ai-redesign .ai-history-group { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--ai-muted); padding:15px 10px 6px; } #ai-chat-view.ai-redesign .ai-convo-item { background:transparent; color:var(--ai-ink); border:1px solid transparent; margin:3px 0; border-radius:8px; padding:10px; } #ai-chat-view.ai-redesign .ai-convo-item.active { background:var(--ai-soft); border-color:var(--gs-line-strong,#DDCBA4); } #ai-chat-view.ai-redesign .ai-convo-title { color:var(--ai-ink); font-size:12px; } #ai-chat-view.ai-redesign :is(.ai-convo-date,.ai-convo-snippet) { color:var(--ai-muted); font-size:11px; } #ai-chat-view.ai-redesign .ai-convo-actions { opacity:1; flex-wrap:wrap; } #ai-chat-view.ai-redesign .ai-convo-actions button { color:var(--ai-muted); } #ai-chat-view.ai-redesign .ai-convo-bottom { flex-wrap:wrap; } #ai-chat-view.ai-redesign .ai-history-empty { padding:16px; color:var(--ai-muted); font-size:13px; } #ai-chat-view.ai-redesign .ai-chat-welcome { align-items:flex-start; justify-content:flex-start; max-width:740px; margin:28px auto; padding:0; gap:12px; text-align:left; min-height:0; } #ai-chat-view.ai-redesign .ai-welcome-gandalf img { width:54px; height:60px; margin:0; } #ai-chat-view.ai-redesign .ai-chat-welcome h3 { font:600 clamp(26px,3vw,34px)/1.2 Outfit,Inter,sans-serif; margin:0; } #ai-chat-view.ai-redesign .ai-chat-welcome p { font-size:14px; line-height:1.65; text-align:left; margin:0; color:var(--ai-muted); } #ai-chat-view.ai-redesign .ai-mode-pills { display:none; } #ai-chat-view.ai-redesign .ai-expert-toggle { margin:8px 0; } #ai-chat-view.ai-redesign .ai-suggestions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0 0; width:100%; max-width:none; } #ai-chat-view.ai-redesign .ai-suggestion { text-align:left; padding:16px; font-size:13px; color:var(--ai-ink); background:var(--ai-paper); border:1px solid var(--ai-line); border-radius:10px; } #ai-chat-view.ai-redesign .ai-msg { max-width:760px; width:auto; font-size:15px; line-height:1.7; } #ai-chat-view.ai-redesign .ai-msg-assistant { align-self:stretch; width:100%; max-width:none; box-sizing:border-box; margin-inline:0; } /* Les tableaux utilisent toute la colonne, même pendant le streaming. Le texte courant garde des lignes lisibles, sans imposer sa largeur aux données. */ #ai-chat-view.ai-redesign .ai-msg-assistant > div > :is(p,ul,ol,blockquote) { max-width:90ch; } #ai-chat-view.ai-redesign .ai-table-wrap { max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; } #ai-chat-view.ai-redesign .ai-table { font-size:15px; line-height:1.6; } #ai-chat-view.ai-redesign .ai-table th { font-size:12px; } #ai-chat-view.ai-redesign .ai-msg-user { max-width:min(85%,680px); } #ai-chat-view.ai-redesign .ai-msg-actions { flex-wrap:wrap; opacity:1; } #ai-chat-view.ai-redesign :is(button,select,textarea,input,[tabindex]):focus-visible { outline:2px solid var(--gs-accent,#A8863F); outline-offset:2px; } #ai-chat-view.ai-redesign .ai-layout-dialog { color:var(--ai-ink); background:var(--ai-paper); width:min(440px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow:auto; padding:20px; border:1px solid var(--ai-line); border-radius:14px; } #ai-chat-view.ai-redesign .ai-layout-dialog::backdrop { background:rgba(25,22,18,.35); } #ai-chat-view.ai-redesign .ai-layout-dialog > :is(button,select,.ai-model-admin) { display:flex; width:100%; margin-top:12px; min-height:44px; padding:10px; border:1px solid var(--ai-line); border-radius:8px; color:var(--ai-ink); background:var(--ai-paper); font-size:13px; } #ai-chat-view.ai-redesign .ai-layout-dialog > .hidden { display:none; } #ai-chat-view.ai-redesign .ai-layout-dialog label { display:block; margin-top:18px; } #ai-chat-view.ai-redesign .ai-layout-dialog .ai-model-select { width:100%; min-width:0; } #ai-chat-view.ai-redesign .ai-history-trigger { display:none; } #ai-chat-view.ai-redesign.sidebar-collapsed .ai-history-trigger { display:block; } @media(max-width:1439px) { #ai-chat-view.ai-redesign .ai-sidebar { position:absolute; inset:0 auto 0 0; width:min(310px,calc(100% - 32px)); height:100%; box-shadow:10px 0 30px #0002; z-index:6; } #ai-chat-view.ai-redesign .ai-history-trigger { display:block; } #ai-chat-view.ai-redesign .ai-sidebar-overlay.open { display:block; position:absolute; inset:0; width:auto; height:auto; z-index:5; background:rgba(25,22,18,.3); opacity:1; pointer-events:auto; backdrop-filter:none; } } @media(max-width:1199px) { #ai-chat-view.ai-redesign .ai-chat-main { grid-template-columns:minmax(0,1fr); } #ai-chat-view.ai-redesign .ai-workspace-panel { display:none; } #ai-chat-view.ai-redesign.workspace-drawer-open .ai-workspace-panel { display:block; position:absolute; grid-area:auto; inset:0 0 0 auto; margin:0; width:min(350px,calc(100% - 24px)); height:100%; max-height:100%; border-radius:0; z-index:6; } } /* Popup geometry supersedes the former fixed sidebar rules. */ body.ai-popup-mode #ai-chat-view.ai-redesign .ai-chat-main { margin-left:0!important; } body.ai-popup-mode #ai-chat-view.ai-redesign .ai-sidebar { position:relative!important; inset:auto!important; width:var(--ai-history-width)!important; } @media(max-width:1439px) { body.ai-popup-mode #ai-chat-view.ai-redesign .ai-sidebar { position:absolute!important; inset:0 auto 0 0!important; width:min(310px,calc(100% - 32px))!important; } body.ai-popup-mode #ai-chat-view.ai-redesign .ai-sidebar-overlay.open { display:block!important; } } @media(max-width:860px) { #ai-chat-view.ai-redesign .ai-chat-header { padding:6px 8px; min-height:68px; gap:4px; } #ai-chat-view.ai-redesign .ai-thread-heading h2 { font-size:13px; } #ai-chat-view.ai-redesign :is(.ai-history-trigger,.ai-new-trigger,.ai-more-trigger) { min-width:36px; min-height:44px; padding:6px; } #ai-chat-view.ai-redesign .ai-workspace-trigger { min-height:44px; font-size:11px; padding:6px; white-space:normal; max-width:94px; } #ai-chat-view.ai-redesign .ai-members-btn { max-width:56px; min-height:44px; margin:0; padding:4px; } #ai-chat-view.ai-redesign .ai-chat-messages { padding:20px 14px; } #ai-chat-view.ai-redesign .ai-chat-input { padding:8px 10px; } /* Mobile : plafond plus bas et surtout en dvh — clavier virtuel ouvert, la hauteur dynamique fond, et une boîte de 300px couvrirait l'écran. */ #ai-chat-view.ai-redesign .ai-chat-textarea { font-size:16px; padding:6px 3px; min-height:58px; max-height:210px; } #ai-chat-view.ai-redesign .ai-chat-textarea { max-height:min(210px,38dvh); } #ai-chat-view.ai-redesign .ai-composer-surface { padding:8px; } #ai-chat-view.ai-redesign .ai-input-row { gap:2px; } #ai-chat-view.ai-redesign :is(.ai-attach-btn,.ai-chat-send) { width:44px; height:44px; } #ai-chat-view.ai-redesign .ai-composer-select { min-height:44px; max-width:100px; padding:6px 3px; font-size:12px; flex:0 1 auto; } #ai-chat-view.ai-redesign .ai-chat-welcome { margin:12px auto; } #ai-chat-view.ai-redesign .ai-msg-actions button { min-height:44px; min-width:36px; font-size:12px; } #ai-chat-view.ai-redesign :is(.ai-convo-actions button,.ai-workspace-action,.ai-thread-file button,.ai-workspace-add) { min-height:44px; } #ai-chat-view.ai-redesign .ai-sidebar-search input { font-size:16px; } #ai-chat-view.ai-redesign .ai-convo-title { font-size:14px; } #ai-chat-view.ai-redesign .ai-workspace-action b { font-size:14px; } #ai-chat-view.ai-redesign .ai-workspace-action small { font-size:12px; } } @media(max-width:360px) { #ai-chat-view.ai-redesign .ai-suggestions { grid-template-columns:1fr; } #ai-chat-view.ai-redesign .ai-composer-select { max-width:85px; font-size:11px; } } #ai-chat-view.ai-redesign .ai-wake-banner { flex:none; margin:8px 16px; padding:12px; color:var(--ai-ink); background:var(--ai-soft); border:1px solid var(--ai-line); opacity:1; } #ai-chat-view.ai-redesign .ai-wake-stop { min-height:44px; margin:6px 0; padding:8px 14px; border:1px solid var(--ai-line); border-radius:8px; background:var(--ai-paper); color:var(--ai-ink); cursor:pointer; } #ai-chat-view.ai-redesign .ai-wake-feedback { flex:none; margin:8px 16px; padding:12px; font-size:13px; background:var(--ai-soft); color:var(--ai-ink); border:1px solid var(--ai-line); border-radius:8px; } /* Full-window overlays belong to the assistant's available area. A viewport- fixed overlay can start behind the shell header because this view creates its own stacking context. Native dialogs already use the browser top layer. */ #ai-chat-view.ai-redesign > :is(.ai-synthesis-modal,.modal-overlay) { position:absolute; inset:0; width:100%; height:100%; max-height:100%; } #ai-chat-view.ai-redesign > :is(.ai-synthesis-modal,.modal-overlay) > :is(.ai-synthesis-content,.modal-content) { min-height:0; max-height:100%; overflow-y:auto; }