/* ---------- COMPOSER (fixed, above nav) ---------- */
  /* bottom:var(--kb) : le clavier mobile masque le bas du viewport de mise en
     page, où cette barre est ancrée. --kb (voir js/app.js) vaut la hauteur
     cachée, ce qui la remonte juste au-dessus du clavier. 0 sans clavier. */
  .bottom-fixed{position:fixed; bottom:var(--kb, 0px); left:50%; transform:translateX(-50%); width:100%; max-width:430px; z-index:30; display:flex; flex-direction:column;}
  .composer-bar{background:var(--surface); border-top:1px solid var(--border); padding:10px 14px; display:none;}
  .composer-bar.show{display:block;}
  .add-form{display:flex; align-items:center; gap:5px; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:5px 5px 5px 14px; position:relative;}
  .add-form input[type=text]{flex:1 1 auto; min-width:60px; border:none; background:none; padding:6px 2px; font-size:13.5px;}
  .add-form input[type=text]:focus{outline:none;}
  .tool-btn{position:relative; flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--border-soft); background:var(--surface); color:var(--ink-soft); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0;}
  .tool-btn:hover{border-color:var(--ink-soft); color:var(--ink);}
  .tool-btn.set{background:var(--action); color:#fff; border-color:var(--action);}
  .tool-btn svg{width:14px; height:14px;}
  .tool-btn-badge{position:absolute; top:-1px; right:-1px; width:9px; height:9px; border-radius:50%; background:var(--accent-fill); border:1.5px solid var(--surface);}
  .time-pop{display:none;}
  .tp-label{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft);}

  /* centered date/time dialog */
  .dt-overlay{position:fixed; inset:0; background:rgba(20,18,15,.42); z-index:58; opacity:0; pointer-events:none; transition:opacity .18s ease;}
  .dt-overlay.open{opacity:1; pointer-events:auto;}
  .dt-dialog{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-46%) scale(.96); width:calc(100% - 56px); max-width:340px;
    background:var(--surface); border-radius:20px; padding:24px 22px 20px; z-index:59; opacity:0; pointer-events:none;
    box-shadow:0 24px 60px -20px rgba(0,0,0,.4); transition:opacity .18s ease, transform .18s ease;
    max-height:calc(100vh - 64px); overflow-y:auto; box-sizing:border-box;
  }
  .dt-field select{width:100%; border:1px solid var(--border); background:var(--bg); border-radius:11px; padding:11px 13px; font-size:14px; font-family:'Inter',sans-serif; color:var(--ink); box-sizing:border-box;}
  .dt-field select:focus{outline:none; border-color:var(--ink-soft);}
  .dt-field textarea{width:100%; border:1px solid var(--border); background:var(--bg); border-radius:11px; padding:11px 13px; font-size:13.5px; font-family:'Inter',sans-serif; color:var(--ink); box-sizing:border-box; resize:vertical;}
  .dt-field textarea:focus{outline:none; border-color:var(--ink-soft);}
  .assignee-chip-row{display:flex; flex-wrap:wrap; gap:6px;}
  .assignee-chip{border:1px solid var(--border-soft); background:var(--bg); border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--ink-soft); font-family:'Inter',sans-serif;}
  .assignee-chip:hover{border-color:var(--ink-soft); color:var(--ink);}
  .assignee-chip.active{background:var(--action); color:#fff; border-color:var(--action);}
  .task-important-btn{width:100%; box-sizing:border-box; border:none; border-radius:14px; padding:14px; margin-bottom:18px; background:var(--action); color:#fff; font-size:14px; font-weight:700; font-family:'Inter',sans-serif; transition:background .15s;}
  .task-important-btn:hover{opacity:.9;}
  .task-important-btn.active{background:#E5342A;}
  .dt-dialog.open{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);}
  .dt-dialog h3{font-size:17px; font-weight:600; margin:0 0 18px; font-family:'Fraunces',serif; text-align:center;}
  .dt-field{margin-bottom:16px;}
  .dt-field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:7px;}
  .dt-field input{width:100%; border:1px solid var(--border); background:var(--bg); border-radius:11px; padding:11px 13px; font-size:14.5px; font-family:'IBM Plex Mono',monospace; color:var(--ink); color-scheme:inherit; box-sizing:border-box;}
  .dt-field input:focus{outline:none; border-color:var(--ink-soft);}
  .dt-checkbox-label{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.4; color:var(--ink); cursor:pointer;}
  .dt-checkbox-label input{width:17px; height:17px; flex-shrink:0; margin-top:1px; accent-color:var(--ink);}
  .dt-field input::-webkit-calendar-picker-indicator{opacity:.55; cursor:pointer;}
  .dt-actions{display:flex; gap:8px; margin-top:4px;}
  .dt-cancel{flex:1; background:none; border:1px solid var(--border-soft); border-radius:999px; padding:11px; font-size:13px; font-weight:600; color:var(--ink);}
  .dt-delete{color:#D6362C; border-color:#D6362C; align-items:center; justify-content:center;}
  .dt-delete:hover{background:#F3DAD7;}
  .dt-confirm{flex:1; background:var(--action); color:#fff; border:none; border-radius:999px; padding:11px; font-size:13px; font-weight:600;}
  .dt-confirm:hover{opacity:.88;}
  .send-btn{flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:none; background:var(--send); color:#fff; display:flex; align-items:center; justify-content:center; padding:0;}
  .send-btn:hover{opacity:.88;}
  .send-btn svg{width:13px; height:13px;}


  /* Choix du « quand » : deux raccourcis au-dessus du sélecteur de date.
     « En tête » = aucune date (le défaut d'une nouvelle tâche), « Aujourd'hui »
     la met au jour courant. Un autre jour se prend dans le sélecteur, et
     n'allume alors ni l'un ni l'autre. Même langage que les pastilles
     d'assignation, pour qu'on les lise comme un choix et non comme un bouton. */
  .dt-when-row{display:flex; gap:6px; margin-bottom:8px;}
  .dt-when-btn{flex:1; border:1px solid var(--border-soft); background:var(--bg); border-radius:999px; padding:8px 12px; font-size:12.5px; font-weight:600; color:var(--ink-soft); font-family:'Inter',sans-serif;}
  .dt-when-btn:hover{border-color:var(--ink-soft); color:var(--ink);}
  .dt-when-btn.active{background:var(--action); color:#fff; border-color:var(--action);}

  /* Le compteur d'articles joints à la tâche en cours d'écriture. Un point ne
     suffirait pas : ce qui compte, c'est combien d'articles partiront avec elle. */
  .tool-btn-count{
    position:absolute; top:-4px; right:-4px; min-width:14px; height:14px; padding:0 3px;
    border-radius:999px; background:var(--accent-fill); color:#fff;
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700; line-height:14px;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--surface);
  }
  .tool-btn.set .tool-btn-count{border-color:var(--ink);}

/* Advanced task editing occupies the application, with its own scroll area. */
#taskOptDialog, #taskOptDialog.open {
  top: var(--vvtop, 0px); left: 50%; transform: translateX(-50%);
  width: min(100%, 430px); max-width: none; height: var(--vvh, 100dvh);
  max-height: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden;
}
#taskOptDialog .task-options-heading { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
#taskOptDialog h3 { margin: 0; flex: 1; text-align: left; }
#taskOptDialog .task-options-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; }
#taskOptDialog .dt-actions { flex-shrink: 0; margin: 0; padding: 16px 22px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
#taskOptDialog .dt-when-row { margin-top: 10px; }
@media (min-width: 1024px) {
  #taskOptDialog, #taskOptDialog.open { width: var(--workspace-width); }
  #taskOptDialog .task-options-body, #taskOptDialog .dt-actions { padding-inline: max(28px, calc((var(--workspace-width) - 780px) / 2)); }
}