:root{
  --bg:#0f1320; --panel:#171c2e; --panel2:#1e2540; --ink:#e8ecf6; --muted:#9aa4c2;
  --accent:#2c7be5; --accent2:#6f8bff; --ok:#22c55e; --warn:#f59e0b; --line:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink)}

.topbar{display:flex;align-items:baseline;gap:16px;padding:14px 22px;
  background:linear-gradient(90deg,#141a2e,#1b2342);border-bottom:1px solid var(--line)}
.brand{font-size:20px;font-weight:800;letter-spacing:.3px}
.brand span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--muted);font-size:13px}

.layout{display:grid;grid-template-columns:minmax(340px,2fr) 3fr;gap:0;height:calc(100vh - 53px)}

/* ---- Barre d'onglets (mobile only) ---- */
.tabbar{display:none}
.tab{flex:1;background:var(--panel);color:var(--muted);border:0;border-bottom:2px solid transparent;
  padding:13px 8px;font-size:15px;font-weight:700;cursor:pointer}
.tab.active{color:var(--ink);border-bottom-color:var(--accent);background:var(--panel2)}
.tab .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-left:6px;vertical-align:middle}

@media(max-width:860px){
  .topbar{padding:11px 16px}
  .topbar .tagline{display:none}
  .tabbar{display:flex;border-bottom:1px solid var(--line)}
  .layout{display:block;height:calc(100dvh - 50px - 45px)}  /* topbar + tabbar */
  .chat{height:100%;border-right:0}
  .preview{height:100%;display:none}
  .layout.show-preview .chat{display:none}
  .layout.show-preview .preview{display:flex}
  .book{padding:22px 18px}
  .book h1{font-size:25px}
  .book h2{font-size:20px}
  .book p{font-size:16px}
}

/* ---- Chat ---- */
.chat{display:flex;flex-direction:column;border-right:1px solid var(--line);min-height:0}
.messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:90%;padding:11px 14px;border-radius:14px;line-height:1.5;font-size:14px}
.msg p{margin:0 0 6px} .msg p:last-child{margin:0}
.msg.bot{background:var(--panel);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.user{background:linear-gradient(135deg,var(--accent),var(--accent2));align-self:flex-end;border-bottom-right-radius:4px;color:#fff}
.msg .ex{color:var(--muted);font-style:italic}
.msg.status{align-self:flex-start;background:var(--panel2);border:1px dashed var(--line)}

.composer{border-top:1px solid var(--line);padding:12px;background:var(--panel)}
.composer textarea{width:100%;resize:vertical;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:10px;font-size:14px;font-family:inherit}
.composer-row{display:flex;align-items:flex-end;gap:10px;margin-top:8px;flex-wrap:wrap}
.composer-row label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
.composer-row input,.composer-row select{background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:7px 9px;font-size:13px}
.composer-row input[type=number]{width:78px}
#send{margin-left:auto;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0;
  padding:10px 16px;border-radius:10px;font-weight:700;cursor:pointer;font-size:14px}
#send:disabled{opacity:.5;cursor:not-allowed}

/* ---- Preview ---- */
.preview{display:flex;flex-direction:column;min-height:0;background:#0c1020}
.preview-head{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--panel2);color:var(--muted)}
.pill.run{background:rgba(245,158,11,.15);color:var(--warn)}
.pill.done{background:rgba(34,197,94,.15);color:var(--ok)}
.pill.err{background:rgba(239,68,68,.18);color:#fca5a5}
.progress{flex:1;height:7px;background:var(--panel2);border-radius:999px;overflow:hidden}
.bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s}
.pagecount{font-size:12px;color:var(--muted);min-width:70px;text-align:right}

/* ---- Aperçu façon « vrai livre » (accordé à la maquette PDF) ---- */
@font-face{font-family:'EB Garamond';src:url('fonts/EBGaramond.ttf');font-weight:400 800;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('fonts/EBGaramond-Italic.ttf');font-style:italic;font-weight:400 800;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay.ttf');font-weight:400 900;font-display:swap}

.book{flex:1;overflow-y:auto;padding:44px clamp(18px,7vw,90px);background:#faf7f1;color:#221f1b;margin:0;
  font-family:'EB Garamond',Georgia,serif;font-size:17.5px;line-height:1.65;text-align:justify;hyphens:auto}
.book .placeholder{color:#9aa4c2;text-align:center;margin-top:18vh;font-family:inherit}
.book h1{font-family:'Playfair Display',Georgia,serif;font-size:34px;line-height:1.15;text-align:center;
  color:#1c1a17;margin:.6em 0 .35em}
.book h1+h3{text-align:center;font-weight:400;font-style:italic;font-size:19px;color:#6b6257;
  border:none;margin:0 0 1.6em}
.book h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:25px;line-height:1.25;
  color:#1c1a17;text-align:center;margin:2.4em 0 .3em;border:none;padding:0}
.book h2::after{content:"";display:block;width:120px;margin:.5em auto 1em;border-bottom:1.5px solid #a67c2e}
.book h3{font-size:19.5px;font-weight:700;color:#3d3833;text-align:left;margin:1.5em 0 .4em}
.book p{margin:0 0 .45em}
.book p+p{text-indent:1.35em}
.book blockquote{background:#f7f1e3;border-left:3px solid #a67c2e;margin:1.1em 0;padding:.75em 1.1em;
  border-radius:8px;font-size:15.5px;text-align:left}
.book blockquote p{text-indent:0}
.book img{display:block;margin:1.1em auto .4em;max-width:88%;max-height:52vh;border-radius:10px;
  box-shadow:0 4px 18px rgba(60,45,20,.18)}
.book img+em,.book p>em:only-child{display:block;text-align:center;font-size:14px;color:#8a8378;text-indent:0}
.book ul,.book ol{line-height:1.6;text-align:left;margin:.4em 0 .8em}
.book hr{border:none;margin:1.6em 0;text-align:center}
.book hr::after{content:"\2022\00a0\00a0\2022\00a0\00a0\2022";color:#c4a468;font-size:12px;letter-spacing:.1em}
.book table{border-collapse:collapse;width:100%;margin:1em 0;font-size:15px}
.book th{font-variant:small-caps;letter-spacing:.04em;border:none;border-bottom:2px solid #a67c2e;
  padding:.4em .6em;text-align:left}
.book td{border:none;border-bottom:1px solid #ddd3c2;padding:.4em .6em;vertical-align:top}
.book a{color:#7a5a20}

.toolbar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.toolbar.hidden{display:none}
.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:9px;
  padding:8px 13px;font-size:13px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:0;color:#fff;font-weight:700}
.toolbar .sep{flex:1}
.toolbar input[type=email]{background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font-size:13px;min-width:170px}
.toolbar select{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel2);
  border:1px solid var(--line);padding:12px 18px;border-radius:10px;font-size:14px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* ---- Mobile : composer, toolbar, cibles tactiles ---- */
@media(max-width:860px){
  .composer textarea{font-size:16px}                 /* >=16px = pas de zoom iOS */
  .composer-row{gap:8px}
  .composer-row label{flex:0 0 auto}
  .composer-row input,.composer-row select{font-size:16px;padding:9px 10px}
  #send{flex:1 1 100%;margin-left:0;padding:13px;font-size:16px;order:3}
  .messages{padding:14px}
  .msg{max-width:94%;font-size:15px}
  .preview-head{padding:10px 14px}
  .toolbar{padding:12px 14px;gap:10px}
  .toolbar .btn{flex:1 1 28%;text-align:center;padding:11px 6px}
  .toolbar .sep{display:none}
  .toolbar input[type=email]{flex:1 1 100%;min-width:0;font-size:16px;padding:11px}
  .toolbar select{flex:1 1 30%;font-size:16px;padding:11px}
  .toolbar #send-mail{flex:1 1 60%;padding:12px}
  .toast{left:12px;right:12px;transform:none;text-align:center}
}

/* ---- Bibliothèque (sélecteur de livre) ---- */
/* Empilé sur 2 rangées : le dropdown (souvent des titres longs) a besoin de toute la
   largeur ; les 3 boutons d'action se partagent une rangée dédiée en dessous. */
.library{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
.library select{flex:1 1 auto;min-width:0;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:14px;text-overflow:ellipsis}
.library-actions{display:flex;gap:8px}
.lib-btn{flex:1 1 0;min-width:0;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 8px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-btn:hover{border-color:var(--accent)}

/* ---- Dropdown personnalisé (remplace visuellement le <select> pour le bouton Archiver) ---- */
.lib-dropdown{position:relative;width:100%}
.lib-dropdown-btn{width:100%;text-align:left;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:9px 10px;font-size:14px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-dropdown-btn:hover{border-color:var(--accent)}
.lib-dropdown-panel{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:340px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:4px}
.lib-dropdown-panel.hidden{display:none}
.lib-row{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:7px;cursor:pointer}
.lib-row:hover{background:var(--panel2)}
.lib-row.archived{opacity:.6}
.lib-row-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.lib-row-empty{padding:10px;color:var(--muted);font-size:13.5px}
.lib-archive-btn{flex:0 0 auto;background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);
  font-size:12px;padding:3px 7px;cursor:pointer;white-space:nowrap}
.lib-archive-btn:hover{border-color:var(--accent);color:var(--ink)}

/* ---- Bouton Vérifier + rapport ---- */
.btn.verify{background:linear-gradient(135deg,#7c3aed,#a855f7);border:0;color:#fff;font-weight:700}
.btn.verify:disabled{opacity:.55;cursor:not-allowed}
.msg.report{max-width:97%;background:var(--panel);border:1px solid var(--accent)}
.rep-title{font-weight:800;margin-bottom:8px;color:var(--accent2)}
.rep-sec{margin:7px 0;font-size:13.5px}
.rep-sec b{display:block;color:var(--ink);margin-bottom:2px}
.rep-sec span{color:var(--muted);line-height:1.45}

@media(max-width:860px){
  .library select,.lib-btn,.lib-dropdown-btn{font-size:16px}
  .toolbar .btn.verify{flex:1 1 100%}
}

/* ---- Bouton Réécrire ---- */
.btn.rewrite{background:linear-gradient(135deg,#0d9488,#14b8a6);border:0;color:#fff;font-weight:700}
.btn.rewrite:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:860px){ .toolbar .btn.rewrite{flex:1 1 100%} }
.btn.translate{background:linear-gradient(135deg,#1d4ed8,#3b82f6);border:0;color:#fff;font-weight:700}
.btn.translate:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:860px){ .toolbar .btn.translate{flex:1 1 100%} }
.btn.subtitle{background:linear-gradient(135deg,#b45309,#f59e0b);border:0;color:#fff;font-weight:700}
.btn.subtitle:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:860px){ .toolbar .btn.subtitle{flex:1 1 100%} }

/* ---- Reprise après pause quota ---- */
.hidden{display:none!important}
.pill.paused{background:rgba(245,158,11,.2);color:var(--warn)}
.resume-btn{background:linear-gradient(135deg,#f59e0b,#f97316);border:0;color:#fff;font-weight:700;white-space:nowrap;padding:7px 12px}
.resume-btn:hover{opacity:.9}

/* ---- Sélecteur de versions ---- */
.ver-select{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px;max-width:190px}
.ver-select.hidden{display:none!important}
.btn.restore-btn{background:linear-gradient(135deg,#475569,#64748b);border:0;color:#fff;font-weight:700;white-space:nowrap;padding:6px 11px;font-size:12px}

/* ---- Bouton supprimer ---- */
.btn.danger{background:linear-gradient(135deg,#dc2626,#ef4444);border:0;color:#fff;font-weight:700}
.btn.danger:hover{opacity:.9}

/* ---- Modale idées (livres à écrire) ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal-overlay.hidden{display:none!important}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(560px,100%);max-height:85vh;display:flex;flex-direction:column;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.modal-head{display:flex;align-items:center;justify-content:space-between;font-size:17px}
.modal-x{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer}
.modal-x:hover{color:var(--ink)}
.modal-sub{color:var(--muted);font-size:13px;margin:6px 0 12px}
.idea-add{display:flex;gap:8px;margin-bottom:12px}
.idea-add input{flex:1;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:14px}
.ideas-list{overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.idea-row{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.idea-text{flex:1;font-size:14px;line-height:1.35}
.idea-go{white-space:nowrap;padding:7px 11px;font-size:13px}
.idea-del{padding:7px 9px;font-size:13px}
.idea-empty{color:var(--muted);text-align:center;padding:20px;font-size:14px}
@media(max-width:860px){ .idea-add input,.idea-go{font-size:16px} .idea-text{font-size:15px} }

/* ---- Idées : titre + note de potentiel ---- */
.idea-title{font-size:14px;line-height:1.35}
.idea-note{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.3}
@media(max-width:860px){ .idea-title{font-size:15px} .idea-note{font-size:12.5px} }

/* ---- Rapport concurrence ---- */
.msg.report.comp{border-color:#f59e0b}
.msg.report.comp .rep-title{color:#fbbf24}

/* ---- Modale transcription ---- */
.modal input[type=text]{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:14px}
.modal textarea{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:13px;font-family:inherit;resize:vertical}
@media(max-width:860px){ .modal input[type=text],.modal textarea{font-size:16px} }