/* ═══════════════════════════════════════════════════════════════════════════
   VECTOR MOBILE — styles du shell et de la vue journée (M1 sous-lot 1)
   Jetons issus des maquettes Claude Design (lots 1-4) :
   sombre = fond #10131A · cartes #1C2030 · relevé #232840 · texte #F5F4EF
   clair  = fond #f2f3f7 · cartes #ffffff · relevé #eaebf2 · texte #10131A
   Lime adaptatif : #8BFF3C (sombre) → #3D9A18 (clair, texte blanc dessus).
   Jamais de glow sur du texte lime. Cibles tactiles ≥ 44 px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Jetons (clair par défaut, sombre via prefers-color-scheme, comme main.css) ── */
.m-shell{
  --m-bg:#f2f3f7; --m-card:#ffffff; --m-raised:#eaebf2;
  --m-tx:#10131A; --m-tx2:rgba(16,19,26,.62); --m-tx3:rgba(16,19,26,.42);
  --m-bd:rgba(107,114,144,.25);
  --m-lime:#8BFF3C; --m-lime-fg:#3D9A18;
  --m-btn-bg:#3D9A18; --m-btn-fg:#ffffff;
  --m-brief-bg:rgba(61,154,24,.08); --m-brief-bd:rgba(61,154,24,.30);
  --m-tabbar-bg:#ffffff;
  --m-st-todo:#888780; --m-st-inprog:#378ADD; --m-st-done:#5DCAA5; --m-st-paused:#EF9F27;
  --m-err:#C8503C;
}
@media (prefers-color-scheme:dark){
  .m-shell{
    --m-bg:#10131A; --m-card:#1C2030; --m-raised:#232840;
    --m-tx:#F5F4EF; --m-tx2:rgba(245,244,239,.65); --m-tx3:rgba(245,244,239,.40);
    --m-bd:rgba(107,114,144,.18);
    --m-lime-fg:#8BFF3C;
    --m-btn-bg:#8BFF3C; --m-btn-fg:#10131A;
    --m-brief-bg:rgba(139,255,60,.10); --m-brief-bd:rgba(139,255,60,.25);
    --m-tabbar-bg:#0C0F15;
  }
}

/* ── Habillage hors-cadre (tablette/desktop en « version mobile ») ── */
body.m-mode{margin:0;background:#e6e8ee;}
@media (prefers-color-scheme:dark){ body.m-mode{background:#0a0c10;} }

/* #root est un conteneur FLEX côté desktop (main.css) : la coquille mobile y
   devenait un item flex dimensionné à son CONTENU — plus large que l'écran dès
   qu'une ligne était longue (titres réels), centrée puis COUPÉE des deux côtés
   sur téléphone (vécu iPhone 16e, 2026-07-22). En mode mobile, #root redevient
   un bloc plein cadre et la coquille prend la largeur de l'écran. */
body.m-mode #root{display:block;height:100vh;height:100dvh;overflow:hidden;}
.m-shell{width:100%;}

/* Lina (support desktop) : sa bulle flottante chevauche la barre d'onglets —
   masquée en mode mobile ; le support mobile arrive par le menu (session M6). */
body.m-mode #lina-bubble, body.m-mode #lina-panel{display:none !important;}

/* Photo d'Arthur : le blend « screen » du desktop délave la photo sur les fonds
   clairs du shell mobile (le PNG est déjà détouré) — blend normal ici. */
.m-shell .vcpo-av{background-blend-mode:normal;}

/* ── Coquille ── */
.m-shell{
  height:100vh; height:100dvh;
  max-width:640px; margin:0 auto;          /* Phase 3 §2 : contenu centré, côtés habillés */
  display:flex; flex-direction:column;
  background:var(--m-bg); color:var(--m-tx);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  position:relative; overflow:hidden;
}

/* ── En-tête ── */
.m-header{flex:none; display:flex; align-items:center; gap:4px; padding:8px 12px 10px 8px;}
.m-icon-btn{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  background:none; border:none; color:var(--m-tx2); cursor:pointer; padding:0;
}
.m-header-id{display:flex; align-items:center; gap:11px; flex:1; min-width:0;}
.m-av-wrap{width:42px; height:42px; flex:none; position:relative;}
.m-av{width:42px; height:42px; border-radius:50%; background-color:var(--m-raised);}
.m-av-dot{
  position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  background:var(--m-lime); border:2px solid var(--m-bg); pointer-events:none;
}
.m-header-name{min-width:0;}
.m-name{
  font-family:'Red Hat Display',sans-serif; font-weight:800; font-size:17px;
  line-height:1.15; letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.m-role{font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--m-tx3); margin-top:1px;}
.m-alert-badge{
  position:absolute; top:7px; right:6px; min-width:16px; height:16px; border-radius:999px;
  background:var(--m-err); color:#fff; font-size:10px; font-weight:700;
  display:grid; place-items:center; padding:0 4px; border:2px solid var(--m-bg); box-sizing:border-box;
}

/* ── Contenu défilant ── */
.m-content{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:2px 16px 12px; display:flex; flex-direction:column; gap:18px;
}

/* ── Carte du brief matinal ── */
.m-brief-card{
  display:block; width:100%; text-align:left; font-family:inherit; cursor:pointer;
  background:var(--m-brief-bg); border:0.5px solid var(--m-brief-bd);
  border-left:2px solid var(--m-lime); border-radius:12px; padding:14px 16px; color:var(--m-tx);
}
.m-brief-off{cursor:default;}
.m-brief-head{font-family:'Red Hat Display',sans-serif; font-weight:800; font-size:15px; letter-spacing:-0.01em;}
.m-brief-excerpt{
  font-size:13px; line-height:1.5; color:var(--m-tx2); margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.m-brief-cta{display:flex; align-items:center; gap:4px; margin-top:9px; font-size:13px; font-weight:600; color:var(--m-lime-fg);}
.m-brief-gen{
  display:inline-flex; align-items:center; justify-content:center; margin-top:10px;
  min-height:44px; padding:0 18px; border:none; border-radius:10px; cursor:pointer;
  background:var(--m-btn-bg); color:var(--m-btn-fg);
  font-family:'Red Hat Display',sans-serif; font-weight:800; font-size:13.5px;
}
.m-brief-pulse{animation:m-pulse 1.2s ease-in-out infinite;}
@keyframes m-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ── Section Aujourd'hui ── */
.m-section{display:flex; flex-direction:column; gap:10px;}
.m-section-head{display:flex; align-items:center; justify-content:space-between; padding:0 2px;}
.m-section-label{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--m-tx3);}
.m-progress-label{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; color:var(--m-lime-fg);}
.m-progress{height:3px; border-radius:999px; background:rgba(107,114,144,.18); overflow:hidden;}
.m-progress-fill{height:100%; border-radius:999px; background:var(--m-lime); transition:width .22s cubic-bezier(.4,0,.2,1);}

/* ── Cartes ── */
.m-card{
  background:var(--m-card); border:0.5px solid var(--m-bd); border-radius:12px;
  overflow:hidden; color:var(--m-tx);
}
.m-confirm-card{display:flex;}
.m-card-band{width:4px; flex:none;}
.m-card-body{flex:1; padding:14px 16px 14px 14px; min-width:0;}
.m-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.m-card-titlewrap{min-width:0;}
.m-card-title{font-size:15px; font-weight:600; line-height:1.35; overflow-wrap:anywhere;}
.m-card-proj{display:flex; align-items:center; gap:6px; margin-top:4px; font-size:12px; color:var(--m-tx3);}
.m-cat-dot{width:7px; height:7px; border-radius:50%; flex:none;}
.m-card-time{
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; color:var(--m-tx3);
  white-space:nowrap; text-align:right; line-height:1.5; flex:none;
}

/* Saisie h/min */
.m-hm-row{display:flex; align-items:center; gap:8px; margin-top:13px; flex-wrap:wrap;}
.m-hm-label{font-size:12px; color:var(--m-tx2); flex:none; margin-right:2px;}
.m-hm-input{
  width:52px; height:44px; background:var(--m-raised); border:0.5px solid var(--m-bd);
  border-radius:8px; color:var(--m-tx); font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:15px; text-align:center; outline:none; -moz-appearance:textfield;
}
.m-hm-input::-webkit-outer-spin-button,.m-hm-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.m-hm-input:focus{border-color:var(--m-lime-fg);}
.m-hm-unit{font-size:12px; color:var(--m-tx3);}

/* Case finalisée */
.m-done-row{
  display:flex; align-items:center; gap:10px; margin-top:4px; min-height:44px;
  cursor:pointer; font-size:14px; color:var(--m-tx2); user-select:none;
}
.m-done-check{width:20px; height:20px; flex:none; accent-color:var(--m-lime-fg); cursor:pointer; margin:0;}

/* Boutons */
.m-card-actions{display:flex; gap:10px; margin-top:8px;}
.m-btn{
  flex:1; height:44px; border-radius:10px; border:none; cursor:pointer;
  font-family:'Red Hat Display',sans-serif; font-weight:800; font-size:14px; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition:filter .15s;
}
.m-btn:active{filter:brightness(.9);}
.m-btn-confirm{background:var(--m-btn-bg); color:var(--m-btn-fg);}
.m-btn-ghost{background:none; border:0.5px solid rgba(107,114,144,.35); color:var(--m-tx2); font-weight:700;}

/* ── À venir ── */
.m-up-card{display:flex; flex-direction:column;}
.m-up-row{display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 14px;}
.m-up-row + .m-up-row{border-top:0.5px solid var(--m-bd);}
.m-up-time{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; color:var(--m-tx3); width:54px; flex:none;}
.m-up-band{width:3px; height:26px; border-radius:999px; flex:none;}
.m-up-main{flex:1; min-width:0;}
.m-up-title{font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.m-up-proj{font-size:11.5px; color:var(--m-tx3); margin-top:1px;}
.m-up-dur{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; color:var(--m-tx3); flex:none;}

/* ── Rangée « À confirmer (hier) » ── */
.m-recap-link{
  display:flex; align-items:center; gap:10px; min-height:52px; padding:6px 14px;
  cursor:pointer; font-family:inherit; text-align:left; width:100%;
}
.m-recap-badge{
  min-width:22px; height:22px; border-radius:999px; background:rgba(239,159,39,.15);
  color:var(--m-st-paused); font-size:12px; font-weight:700;
  display:grid; place-items:center; padding:0 6px; flex:none;
}
.m-recap-link-label{flex:1; font-size:14px; font-weight:500;}

/* ── Sous-écrans (brief · recap · alertes) ── */
.m-back{
  display:flex; align-items:center; gap:6px; min-height:44px; align-self:flex-start;
  background:none; border:none; cursor:pointer; padding:0 4px 0 0;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--m-lime-fg);
}
.m-sub-title{font-family:'Red Hat Display',sans-serif; font-weight:800; font-size:20px; letter-spacing:-0.01em;}
.m-sub-note{font-size:12.5px; color:var(--m-tx3); margin-top:-10px;}
.m-brief-body{padding-bottom:8px;}
.m-brief-bubble{max-width:none; background:var(--m-card); border:0.5px solid var(--m-bd); border-radius:12px; padding:16px;}
.m-recap-list{display:flex; flex-direction:column; gap:12px;}
/* Les rangées du recap réutilisent le composant desktop (.cpo-recap-item, main.css)
   — on ne fait qu'adapter la carte au gabarit mobile. */
.m-recap-list .cpo-recap-item{background:var(--m-card); border:0.5px solid var(--m-bd); border-radius:12px; padding:14px 16px;}
.m-recap-list .cpo-recap-btn{min-height:44px;}
.m-recap-list .cpo-hm-input{height:44px; -moz-appearance:textfield;}
.m-recap-list .cpo-hm-input::-webkit-outer-spin-button,
.m-recap-list .cpo-hm-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.m-alerts-list{display:flex; flex-direction:column; gap:10px;}
.m-alert-row{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  background:var(--m-card); border:0.5px solid var(--m-bd); border-radius:12px;
}
.m-alert-dot{width:8px; height:8px; border-radius:50%; background:var(--m-st-paused); flex:none; margin-top:5px;}
.m-alert-urgent .m-alert-dot{background:var(--m-err);}
.m-alert-text{font-size:13.5px; line-height:1.45; color:var(--m-tx); overflow-wrap:anywhere;}
.m-empty{font-size:13.5px; color:var(--m-tx3); padding:14px 2px;}

/* ── Écran conversation (m-chat-mode sur la coquille) ── */
.m-shell.m-chat-mode .m-header{display:none;}
.m-shell.m-chat-mode .m-tabbar{display:none;}
.m-shell.m-chat-mode .m-content{padding:0; gap:0; overflow:hidden;}
.m-chatbar .m-composer{display:none;}
.m-shell.m-chat-mode .m-chatbar-pill{display:none;}
.m-shell.m-chat-mode .m-composer{display:flex;}

.m-chat-head{
  flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:6px 12px 8px 4px; border-bottom:0.5px solid var(--m-bd);
}
.m-chat-back{justify-self:start; padding-left:10px;}
.m-chat-id{display:flex; align-items:center; gap:9px; min-width:0;}
.m-chat-av{width:32px; height:32px; border-radius:50%; background-color:var(--m-raised); flex:none;}
.m-chat-idtext{min-width:0;}
.m-chat-name{
  font-family:'Red Hat Display',sans-serif; font-weight:800; font-size:15px; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.m-chat-status{display:flex; align-items:center; gap:4px; font-size:10px; color:var(--m-tx3);}
.m-chat-dot{width:6px; height:6px; border-radius:50%; background:var(--m-lime);}
.m-chat-new{justify-self:end; color:var(--m-lime-fg);}

/* Fil : la zone desktop (.aip-conv-zone) reçoit le gabarit mobile */
.m-conv{padding:16px 16px 12px; gap:14px;}
.m-shell .aip-msg{gap:8px;}
.m-shell .aip-msg-avatar{width:26px; height:26px; border-radius:50%; font-size:9.5px;}
.m-shell .aip-msg-bubble{
  max-width:88%; padding:10px 14px; font-size:14px; line-height:1.55;
  border-radius:16px 16px 16px 4px;
}
.m-shell .aip-msg.user .aip-msg-bubble{
  background:var(--m-brief-bg); border:0.5px solid var(--m-brief-bd);
  border-radius:16px 16px 4px 16px;
}
.m-shell .aip-msg.ai .aip-msg-bubble{background:var(--m-card); border:0.5px solid var(--m-bd);}

/* Suggestions (conversation vide) */
.m-chat-sugs{flex:none; display:flex; flex-wrap:wrap; gap:6px; padding:10px 16px 4px;}
.m-chat-sugs .aip-sug-chip{min-height:36px;}

/* Composeur (DOM statique de la coquille) */
.m-composer{
  align-items:flex-end; gap:4px;
  background:var(--m-card); border:0.5px solid var(--m-bd); border-radius:24px;
  padding:2px 4px 2px 16px;
}
.m-composer-input{
  flex:1; min-width:0; background:none; border:none; outline:none; resize:none;
  color:var(--m-tx); font-family:inherit; font-size:14px; line-height:1.45;
  padding:13px 0; max-height:180px;
}
.m-composer-input::placeholder{color:var(--m-tx3);}
.m-composer .m-icon-btn, .m-composer .m-send{align-self:flex-end; margin-bottom:2px;}
.m-send-live{background:var(--m-btn-bg); color:var(--m-btn-fg);}

/* ── Barre de saisie d'Arthur ── */
.m-chatbar{flex:none; padding:10px 16px 8px; border-top:0.5px solid var(--m-bd); background:var(--m-bg);}
.m-chatbar-pill{
  display:flex; align-items:center; gap:4px; height:48px; cursor:pointer;
  background:var(--m-card); border:0.5px solid var(--m-bd); border-radius:999px; padding:0 4px 0 18px;
}
.m-chatbar-ph{flex:1; font-size:14px; color:var(--m-tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.m-mic{color:var(--m-lime-fg);}
.m-send{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  background:var(--m-raised); border:none; border-radius:50%; color:var(--m-tx2); cursor:pointer; padding:0;
}

/* ── Barre d'onglets ── */
.m-tabbar{
  flex:none; background:var(--m-tabbar-bg); border-top:0.5px solid var(--m-bd);
  padding:6px 8px calc(4px + env(safe-area-inset-bottom, 0px));
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; align-items:center;
}
.m-tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:48px; background:none; border:none; cursor:pointer; padding:0;
  color:var(--m-tx3); font-family:inherit;
}
.m-tab-label{font-size:10px; font-weight:500;}
.m-tab-active{color:var(--m-lime-fg);}
.m-tab-active .m-tab-label{font-weight:600; color:var(--m-lime-fg);}
.m-tab-av-ring{
  width:27px; height:27px; border-radius:50%; overflow:hidden; display:block;
  box-shadow:0 0 0 2px var(--m-lime-fg); background:var(--m-raised);
}
.m-tab-av{display:block; width:27px; height:27px; border-radius:50%;}
.m-plus{
  width:46px; height:46px; border-radius:50%; background:var(--m-btn-bg); color:var(--m-btn-fg);
  display:grid; place-items:center;
}
@media (prefers-color-scheme:dark){ .m-plus{box-shadow:0 0 24px rgba(139,255,60,.18);} }

/* ── Menu hamburger (squelette) ── */
.m-menu-scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:40;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.m-menu-scrim.open{opacity:1; pointer-events:auto;}
.m-menu{
  position:absolute; top:0; bottom:0; left:0; width:min(300px,82%); z-index:41;
  background:var(--m-card); border-right:0.5px solid var(--m-bd);
  transform:translateX(-102%); transition:transform .22s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; padding:18px 0 14px;
}
.m-menu.open{transform:translateX(0);}
.m-menu-head{
  font-family:'Red Hat Display',sans-serif; font-weight:800; font-size:18px;
  padding:6px 20px 14px; color:var(--m-tx);
}
.m-menu-item{
  display:block; width:100%; text-align:left; min-height:48px; padding:0 20px;
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:14.5px; font-weight:500; color:var(--m-tx);
}
.m-menu-item:active{background:var(--m-raised);}
.m-menu-sep{height:1px; background:var(--m-bd); margin:8px 20px;}
.m-menu-foot{margin-top:auto; padding:12px 20px 0; font-size:11.5px; color:var(--m-tx3);}