/* Module de réponse unifié (mode servi uniquement : classes .qcu-* posées par unified-composer.js).
   Réutilise le panneau (.tks-compose) et le rail (.tks-reply-rail) du détail ticket ; ce fichier ne fait
   que les rendre PLEINE HAUTEUR (comme l'Inbox) et les placer sur les 4 écrans. Aucune couleur nouvelle :
   valeurs reprises de tickets-studio.css / inbox-flows.css. Chargé APRÈS tickets-studio.css. */

/* Panneau ouvert : pleine hauteur visible, défilement interne. */
.tks-compose.qcu-panel{position:sticky;top:0;align-self:start;height:var(--qcu-h,calc(100dvh - 120px));display:flex;flex-direction:column;overflow:auto;padding-bottom:0}
.tks-compose.qcu-panel>.qcu-mount,.tks-compose.qcu-panel>#tks-composer,.tks-compose.qcu-panel>#in-rich-mount{flex:1 0 auto}
/* Aide IA et dictée du composer visibles (masquées par tickets-studio.css dans le composer d'origine).
   Dictée en cours (live/dictation.live.js) : valeurs de la dictée du workspace (workspace-studio.css). */
.tks-compose.qcu-panel .qec-ai{display:inline-flex!important}
.tks-compose.qcu-panel .qec-mic{display:inline-flex!important}
.tks-compose.qcu-panel .qec-mic.is-dictating{background:color-mix(in srgb,#d92d20 12%,var(--base));border-color:#d92d20;color:#d92d20}
.tks-compose.qcu-panel .qec-mic.is-dictating svg{color:#d92d20}
.tks-compose.qcu-panel .ql-toolbar[hidden]{display:none!important}

/* Barre repliée pleine hauteur (rail du détail ticket). */
@media(min-width:769px){
 .qcu-rail .tks-reply-reopen{height:var(--qcu-h,calc(100dvh - 120px))}
 .tks-detail-layout>.qcu-rail{align-self:stretch}
}

/* Inbox : le panneau et le rail occupent la colonne de réponse existante. */
.in-page>.in-composer-panel.qcu-host-inbox{overflow:hidden}
.in-page>.in-composer-panel.qcu-host-inbox.collapsed{width:44px!important}
.in-composer-panel>.qcu-panel{position:static;height:100%;border-left:0}
.in-composer-panel>.qcu-rail{height:100%;border-left:0}
.in-composer-panel>.qcu-rail .tks-reply-reopen{height:100%}
/* Toute la barre est le bouton : focus clavier visible comme dans le détail ticket (.tks-main). */
.in-composer-panel>.qcu-rail .tks-reply-reopen:focus-visible{outline:2px solid #315fca;outline-offset:-3px}
.in-composer-panel>.qcu-panel .in-composer-status{padding:0 16px}

/* Fiches contact / entreprise : le bandeau réserve sa largeur dans le contenu. */
.qcu-host{position:relative;padding-right:44px}
.qcu-host.qcu-with-composer{padding-right:var(--qcu-width,380px)}
.qcu-host>.qcu-rail{position:absolute;top:0;right:0;bottom:0;width:44px}
.qcu-host>.qcu-drawer{position:absolute;top:0;right:0;bottom:0;width:var(--qcu-width,380px);z-index:20;background:var(--base,#fff);border-left:1px solid var(--line,#e5e5e5)}
.qcu-drawer>.qcu-panel{height:var(--qcu-h,calc(100dvh - 120px))}
.qcu-resize{position:absolute;inset:0 auto 0 -5px;width:10px;z-index:22;cursor:col-resize;touch-action:none}
.qcu-resize::after{content:'';position:absolute;top:calc(50% - 18px);left:4px;width:3px;height:36px;background:var(--line,#e5e5e5);border-radius:3px;transition:background .15s}
.qcu-resize:hover::after,.qcu-resize:focus-visible::after{background:var(--ink,#0a0a0a)}
.qcu-resize:focus-visible{outline:2px solid var(--ink,#0a0a0a);outline-offset:0}
.qcu-recipient{display:flex;align-items:center;gap:7px;padding:8px 15px;border-bottom:1px solid #f0f2f5;font-size:12px;color:var(--muted,#747983)}
.qcu-recipient select{flex:1;min-width:0;font-size:12px}
@media(max-width:768px){
 .qcu-host,.qcu-host.qcu-with-composer{padding-right:0}
 .qcu-resize{display:none}
 .qcu-host>.qcu-drawer{position:fixed;inset:0;width:100%;z-index:1000;box-shadow:none}
 .qcu-drawer>.qcu-panel{position:static;height:100dvh}
}

/* Outils du bas : traduction de la conversation, Qloa Predict, état. */
.qcu-tools{display:flex;flex-direction:column;gap:6px;padding:6px 10px;border-top:1px solid #f0f2f5}
.qcu-thread-tr,.qcu-predict,.qcu-predict-actions,.qcu-draft-lang{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.qcu-tools .btn,.qcu-draft-lang .btn{font-size:12px}
.qcu-lang{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted,#747983)}
.qcu-lang select{font-size:12px;min-height:30px}
.qcu-predict[hidden],.qcu-tools [hidden]{display:none!important}
.qcu-tools .qcu-status{padding:0 5px;margin:0}
.qcu-tools .qcu-status:empty{display:none}
.qcu-draft-lang{padding:7px 10px;border-bottom:1px solid #f0f2f5;background:#fafbfc}
.qcu-draft-lang small{width:100%}

/* Traduction affichée SOUS l'original (qui reste visible). */
.qcu-translation{margin-top:8px;padding:8px 10px;border-left:2px solid #d3dff6;background:#edf2fc;border-radius:5px;font-size:13px;line-height:1.6}
.qcu-translation summary{font-size:12px;color:var(--muted,#747983);cursor:pointer}
.qcu-translation p{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0}
.qcu-translation[hidden]{display:none}

.dark .qcu-tools,.dark .qcu-recipient,.dark .qcu-draft-lang{border-color:#323842}
.dark .qcu-draft-lang{background:#1e2127}
.dark .qcu-translation{background:#29364c;border-color:#323842;color:#e4e8ef}
.dark .qcu-host>.qcu-drawer{background:#17191d}
@media(max-width:768px){.qcu-tools .btn,.qcu-draft-lang .btn,.qcu-lang select{min-height:44px}}

/* Plein écran de la zone de réponse : le conteneur (sticky/positionné, z-index bas) crée un contexte
   d'empilement qui gardait l'éditeur « fixed » SOUS la barre latérale (z 30). On élève le conteneur
   uniquement pendant le plein écran (constaté sur LDB, détail ticket, 2026-09-23). */
.tks-compose:has(.qec-fullscreen),
.qcu-panel:has(.qec-fullscreen),
.qcu-drawer:has(.qec-fullscreen),
.in-composer-panel:has(.qec-fullscreen){z-index:100001!important}
.in-page .in-rich-form .qec.qec-fullscreen{z-index:100001}

/* Plein écran de la zone de réponse (retours user 2026-09-24) :
   voile léger sur toute la page, fenêtre arrondie avec ombre, titre décollé du bord,
   barre de mise en forme ouverte d'office. `html body` : les règles des écrans
   (`.tks-compose .qec{box-shadow:none!important}`, barre Quill masquée) sont aussi en !important. */
html body .qec.qec-fullscreen{
  box-shadow:0 0 0 100vmax rgba(15,23,42,.38),0 24px 70px rgba(0,0,0,.35)!important;
  border:1px solid var(--line,#e5e5e5)!important;border-radius:14px!important;
}
html body .qec.qec-fullscreen .qec-fullscreen-heading{padding:0 12px 8px 20px!important;box-sizing:border-box}
html body .qec.qec-fullscreen .qec-quill-wrap .ql-toolbar.ql-snow{display:block!important}
html body .qec.qec-fullscreen .qec-expand svg{display:block}

/* Canaux de rédaction : onglets Chrome validés, actions et éditeurs natifs. */
.tks-compose-heading.qcu-channel-heading{display:flex;align-items:flex-end;gap:6px;padding:8px 8px 0;min-height:49px;background:var(--surface);border-bottom:1px solid var(--line)}
.qcu-channel-heading>[role=tablist]{display:flex;align-items:flex-end;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;margin-bottom:-1px}
.qcu-channel-heading>[role=tablist]>.btn{position:relative;flex:0 0 auto;display:flex;gap:6px;height:40px;min-height:40px;padding:0 12px;border:1px solid transparent;border-bottom-color:var(--line);border-radius:10px 10px 0 0;background:transparent;color:var(--muted);font-size:12px;white-space:nowrap}
.qcu-channel-heading>[role=tablist]>.btn:hover{background:var(--elevated);color:var(--ink)}
.qcu-channel-heading>[role=tablist]>.btn[aria-selected=true]{background:var(--base);border-color:var(--line);border-bottom-color:var(--base);color:var(--ink)}
.qcu-channel-heading>[role=tablist]>.btn>svg{width:15px;height:15px}
.qcu-channel-heading>[role=tablist]>.btn:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.qcu-channel-heading>.icon-btn{align-self:center;flex-shrink:0;margin-bottom:7px}
@media(max-width:768px){.qcu-channel-heading>[role=tablist]>.btn{height:44px;min-height:44px}.qcu-channel-heading>.icon-btn{min-width:44px;min-height:44px}}