* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f8f9fb; color: #1a202c; font-size: 18px; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
.hidden { display: none !important; }
.screen { min-height: 100vh; padding-bottom: 2rem; padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* LOGIN */
.login-wrap { max-width: 380px; margin: 0 auto; padding: 3rem 1.5rem 2rem; text-align: center; }
.logo { font-size: 4rem; line-height: 1; }
/* v12 : favicon en grand sur la page de login */
.logo .login-favicon { width: 80px; height: 80px; border-radius: 14px; object-fit: contain; background: white; padding: 6px; box-shadow: 0 4px 14px rgba(30, 64, 175, 0.15); }
.login-wrap h1 { font-size: 1.8rem; font-weight: 700; color: #1e40af; margin-top: 0.5rem; }
.login-wrap .sub { color: #6b7280; margin: 0.3rem 0 2rem; }
.login-form { text-align: left; }
.login-form label { display: block; font-weight: 600; margin: 1rem 0 0.3rem; color: #374151; }
.login-form input { width: 100%; padding: 0.9rem; font-size: 1.05rem; border: 2px solid #e5e7eb; border-radius: 12px; background: white; }
.login-form input:focus { outline: none; border-color: #3b82f6; }
.login-form button { width: 100%; padding: 1rem; margin-top: 1.5rem; font-size: 1.1rem; font-weight: 600; background: #1e40af; color: white; border: none; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.4rem; }
.login-form button:active { background: #1e3a8a; }
.login-form button:disabled { background: #6366f1; opacity: 0.95; cursor: wait; }
.login-form button.btn-loading { background: #4f46e5; }
/* v43 2026-06-07 : feedback "pressé" au tap (passage clair → foncé +
   léger enfoncement) — confirme à l'utilisateur que le bouton réagit. */
.login-form button { transition: background 0.12s ease, transform 0.08s ease; }
.login-form button:active,
.login-form button.btn-pressed { background: #312e81; transform: scale(0.97); }
/* v38 2026-06-07 : flash vert succès avant la bascule vers Tikita */
.login-form button.btn-success { background: #16a34a !important; cursor: default; animation: btn-success-pop 0.3s ease; }
@keyframes btn-success-pop { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* v32 2026-06-07 : spinner animé visible (anneau qui tourne) */
.btn-spinner { display: inline-block; width: 1.15rem; height: 1.15rem; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: white; border-radius: 50%; animation: btn-spin 0.7s linear infinite; vertical-align: middle; flex: none; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.error { color: #dc2626; margin-top: 0.8rem; text-align: center; font-weight: 500; }

/* v42 2026-06-07 : overlay plein écran login.
   Activé au pointerdown sur "Se connecter" — feedback immédiat même sur
   iPhone PWA standalone où le bouton seul peut sembler ne pas réagir. */
.login-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: login-overlay-fade-in 0.15s ease-out;
}
.login-overlay.hidden { display: none; }
@keyframes login-overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.login-overlay-card {
  background: white;
  border-radius: 18px;
  padding: 2rem 2.4rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  min-width: 220px; max-width: 80vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.login-overlay-spinner {
  width: 56px; height: 56px;
  border: 5px solid #e0e7ff;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
.login-overlay-text {
  font-size: 1.05rem; font-weight: 600; color: #1e293b;
  text-align: center; min-height: 1.4em;
}
.login-overlay-progress {
  width: 200px; height: 4px;
  background: #e2e8f0; border-radius: 2px;
  overflow: hidden;
}
.login-overlay-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #4f46e5, #6366f1);
  border-radius: 2px;
  transition: width 0.4s ease-out;
}
.login-overlay.is-success .login-overlay-spinner {
  border-color: #d1fae5;
  border-top-color: #16a34a;
  animation: none;
  background: #16a34a;
  position: relative;
}
.login-overlay.is-success .login-overlay-spinner::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 2rem; font-weight: 700;
}
.login-overlay.is-success .login-overlay-text { color: #16a34a; }
.login-overlay.is-error .login-overlay-spinner {
  border-color: #fee2e2;
  border-top-color: #dc2626;
  animation: none;
}
.login-overlay.is-error .login-overlay-text { color: #dc2626; }

/* TOPBAR */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem 0.4rem; gap: 1rem; }
.topbar h1 { font-size: 1.4rem; font-weight: 700; color: #1e40af; }
.topbar .sub { color: #6b7280; font-size: 0.85rem; margin-top: 0.1rem; }
.btn-logout, .btn-back { background: none; border: none; color: #1e40af; font-size: 1rem; font-weight: 600; cursor: pointer; padding: 0.5rem 0.8rem; }

/* BANNIÈRE */
.preview-banner { background: #fef3c7; border-left: 5px solid #f59e0b; padding: 0.8rem 1.1rem; margin: 0.5rem 1rem; border-radius: 8px; font-size: 0.88rem; }
.preview-banner strong { color: #92400e; }

/* CARDS */
.section-title { padding: 1rem 1.5rem 0.4rem; font-size: 0.85rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; padding: 0.3rem 1rem; }
.card { background: white; border-radius: 16px; padding: 1.1rem 0.5rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); min-height: 110px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; transition: transform 0.1s; }
.card:active { transform: scale(0.97); }
.card.disabled { opacity: 0.5; cursor: not-allowed; }
.card .icon { font-size: 2.2rem; margin-bottom: 0.35rem; }
.card .label { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.card .sub { font-size: 0.72rem; color: #6b7280; margin-top: 0.2rem; font-weight: 400; }
.card.blue     { border-top: 5px solid #3b82f6; }
.card.green    { border-top: 5px solid #16a34a; }
.card.orange   { border-top: 5px solid #ea580c; }
.card.gray     { border-top: 5px solid #6b7280; }
.card.brown    { border-top: 5px solid #b45309; }
.card.violet   { border-top: 5px solid #9333ea; }
.card.teal     { border-top: 5px solid #0d9488; }
.card.indigo   { border-top: 5px solid #4f46e5; }
.card.darkgreen{ border-top: 5px solid #166534; }
.card.pink     { border-top: 5px solid #6d28d9; }
.card.skyblue  { border-top: 5px solid #0ea5e9; }
.card.amber    { border-top: 5px solid #d97706; }

.foot { text-align: center; padding: 1.5rem 1rem 2rem; color: #888; font-size: 0.78rem; }

/* LISTE CLIENTS */
.search-wrap { padding: 0.6rem 1rem; }
.search-wrap input { width: 100%; padding: 0.8rem 1rem; font-size: 1rem; border: 2px solid #e5e7eb; border-radius: 12px; background: white; }
.search-wrap input:focus { outline: none; border-color: #3b82f6; }
.list { padding: 0.4rem 1rem 2rem; }
.list .item { background: white; padding: 1rem; margin-bottom: 0.6rem; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); cursor: pointer; }
.list .item:active { background: #f3f4f6; }
.list .item .name { font-weight: 600; font-size: 1.05rem; }
.list .item .meta { color: #6b7280; font-size: 0.85rem; margin-top: 0.25rem; }
.list .loading, .list .empty { text-align: center; padding: 2rem; color: #6b7280; }

/* SOCREDO */
.balance-card { margin: 1rem; padding: 1.5rem; background: linear-gradient(135deg, #166534, #15803d); color: white; border-radius: 18px; text-align: center; box-shadow: 0 4px 14px rgba(22,101,52,0.25); }
.balance-label { font-size: 0.85rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.05em; }
.balance-amount { font-size: 2.4rem; font-weight: 800; margin: 0.4rem 0; line-height: 1.1; }
.balance-meta { font-size: 0.85rem; opacity: 0.9; }
.list .item.op { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.list .item .op-label { flex: 1; min-width: 0; }
.list .item .op-date { color: #6b7280; font-size: 0.8rem; }
.list .item .op-amount { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.list .item .op-amount.pos { color: #16a34a; }
.list .item .op-amount.neg { color: #dc2626; }

/* Fix SOCREDO : éviter l'enchevêtrement */
.list .item.op { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem; }
.list .item.op .op-label { min-width: 0; overflow: hidden; }
.list .item.op .op-label-text { font-size: 0.95rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .item.op .op-amount { white-space: nowrap; text-align: right; }

/* DETAIL */
.detail-body { padding: 1rem 1.2rem 2rem; }
.detail-card { background: white; border-radius: 14px; padding: 1.2rem; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.detail-card h2 { font-size: 1.1rem; color: #1e40af; margin-bottom: 0.8rem; font-weight: 700; }
.detail-row { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; }
.detail-row:last-child { border-bottom: none; }
.detail-row .label { color: #6b7280; font-size: 0.9rem; }
.detail-row .value { font-weight: 600; text-align: right; }
.detail-row .value.big { font-size: 1.2rem; color: #1e40af; }
.detail-row .value.pos { color: #16a34a; }
.detail-row .value.neg { color: #dc2626; }
.detail-lines { margin-top: 0.5rem; }
.detail-lines .line { padding: 0.7rem 0; border-bottom: 1px solid #f3f4f6; }
.detail-lines .line:last-child { border-bottom: none; }
.detail-lines .line .desc { font-weight: 500; font-size: 0.95rem; line-height: 1.3; }
.detail-lines .line .qty-price { color: #6b7280; font-size: 0.85rem; margin-top: 0.2rem; }
.status-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.status-draft   { background: #f3f4f6; color: #6b7280; }
.status-valid   { background: #dbeafe; color: #1e40af; }
.status-signed  { background: #dcfce7; color: #166534; }
.status-paid    { background: #dcfce7; color: #166534; }
.status-unpaid  { background: #fef3c7; color: #92400e; }
.status-other   { background: #f3f4f6; color: #4b5563; }

/* Bouton PDF */
.btn-pdf { width: 100%; padding: 0.9rem; font-size: 1.05rem; font-weight: 600; background: #dc2626; color: white; border: none; border-radius: 12px; cursor: pointer; -webkit-appearance: none; }
.btn-pdf:active { background: #b91c1c; }
.btn-pdf:disabled { background: #9ca3af; }

/* PDF VIEWER */
.pdf-viewer-screen { display: flex; flex-direction: column; height: 100vh; padding-bottom: 0; }
.topbar-pdf { background: #1e40af; color: white; padding: 0.7rem 1rem; }
.topbar-pdf h1 { color: white; font-size: 1.1rem; }
.topbar-pdf .btn-back, .topbar-pdf .btn-link { color: white; }
.btn-link { text-decoration: none; font-weight: 600; padding: 0.5rem 0.8rem; }
.pdf-viewer-body { flex: 1; background: #2d3748; overflow: hidden; }
.pdf-viewer-body iframe { width: 100%; height: 100%; border: 0; background: white; }

/* PDF.js viewer */
.pdf-viewer-body { background: #4a5568; overflow-y: auto; overflow-x: hidden; padding: 0.5rem; -webkit-overflow-scrolling: touch; }
.pdf-page-canvas { display: block; margin: 0 auto 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.3); background: white; max-width: 100%; height: auto; }
.pdf-loading { color: white; text-align: center; padding: 3rem 1rem; font-size: 1rem; }
.pdf-error { color: #fecaca; text-align: center; padding: 2rem 1rem; }

/* PIN screens */
.link-btn { background: none; color: #6b7280; border: none; margin-top: 1.2rem; font-size: 0.9rem; text-decoration: underline; cursor: pointer; width: 100%; padding: 0.5rem; }
#pin-input, #pin-set-1, #pin-set-2 { font-size: 1.5rem; text-align: center; letter-spacing: 0.5rem; -webkit-text-security: disc; }

/* Offline banner */
.offline-banner { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; background: #dc2626; color: white; padding: 0.6rem 1rem; text-align: center; font-size: 0.9rem; font-weight: 600; z-index: 9999; }
.offline-banner.hidden { display: none; }
body.offline { padding-top: 2.5rem; }

/* Bandeau "Installer cette app" iPhone Safari */
.install-banner { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top); background: #1e40af; color: white; padding: 0.7rem 1rem; z-index: 9998; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.install-banner.hidden { display: none; }
.install-banner .ib-content { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.install-banner .ib-icon { font-size: 1.3rem; flex-shrink: 0; }
.install-banner .ib-text { flex: 1; line-height: 1.3; }
.install-banner .ib-text strong { font-weight: 700; }
.install-banner .ib-close { background: rgba(255,255,255,0.2); color: white; border: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: 1.2rem; cursor: pointer; flex-shrink: 0; padding: 0; line-height: 1; }
body.has-install-banner { padding-top: 3.5rem !important; }

/* Accordéon mois (Devis / Factures) */
.month-block { margin-bottom: 0.6rem; }
.month-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; background: #eef2ff; border-radius: 10px; cursor: pointer; user-select: none; font-weight: 600; }
.month-header:active { background: #e0e7ff; }
.month-chevron { color: #4f46e5; font-size: 1.1rem; width: 1.2rem; text-align: center; }
.month-label { flex: 1; color: #1e40af; }
.month-count { color: #6b7280; font-size: 0.85rem; font-weight: 500; }
.month-items { padding: 0.4rem 0 0.4rem 0.5rem; }
.month-items.hidden { display: none; }
.list .item .meta strong { color: #1e40af; }

/* TIKITA Chat */
/* v19 2026-06-06 : sur iOS Safari, ni 100vh ni 100dvh ne suivent le clavier —
   on utilise visualViewport.height stocké dans --vvh, mis à jour en JS au
   resize/scroll du visualViewport. Topbar reste en haut, composer reste collé
   juste au-dessus du clavier. */
/* v24 2026-06-07 RESTORE v167 : composer flottant + hero centré rétablis */
/* v39 2026-06-07 : height = 100dvh (iOS 16+ rétrécit auto au clavier) avec
   fallback --vvh (visualViewport.height mis à jour en JS pour iOS < 16). */
#screen-capucine-libre { display: flex; flex-direction: column; height: var(--vvh, 100dvh); padding: 0; overflow: hidden; }
@supports not (height: 100dvh) {
  #screen-capucine-libre { height: var(--vvh, 100vh); }
}
.capucine-topbar { background: #6d28d9; flex: none; padding-top: calc(env(safe-area-inset-top, 0) + 0.6rem); padding-bottom: 0.6rem; padding-left: 0.8rem; padding-right: 0.8rem; z-index: 200; }
.capucine-topbar h1, .capucine-topbar .btn-back, .capucine-topbar .btn-link { color: white; }
#capucine-focus-bar { flex: none; }
.cap-plus-modal { padding-top: env(safe-area-inset-top, 0); }

/* === État "welcome" v24 : hero centré verticalement (restauré de v167) === */
.cap-welcome-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; height: 100%; padding: 1rem; min-height: 40vh; }
.cap-welcome-hero img { width: 112px; height: 112px; border-radius: 22px; background: white; padding: 6px; box-shadow: 0 6px 18px rgba(30,64,175,0.15); object-fit: contain; }
.cap-welcome-hero-title { font-size: 1.55rem; font-weight: 700; color: #1e40af; text-align: center; margin: 0; letter-spacing: 0.02em; }
#capucine-messages.cap-msgs-empty { display: flex; align-items: center; justify-content: center; }
#screen-capucine { display: flex; flex-direction: column; height: 100vh; padding-bottom: 0; }
.capucine-messages { flex: 1; overflow-y: auto; padding: 1rem; background: #fafafa; -webkit-overflow-scrolling: touch; }
.cap-welcome { text-align: center; padding: 2rem 1rem; color: #4b5563; }
.cap-welcome-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.cap-welcome p { margin: 0.4rem 0; }
.cap-welcome p.muted { color: #6b7280; font-size: 0.9rem; }
.cap-examples { display: flex; flex-direction: column; gap: 0.6rem; max-width: 320px; margin: 1.5rem auto 0; }
.cap-example { background: white; border: 1px solid #e5e7eb; border-radius: 999px; padding: 0.7rem 1rem; font-size: 0.9rem; text-align: left; cursor: pointer; color: #1f2937; }
.cap-example:active { background: #f3f4f6; }
.cap-msg { display: flex; gap: 0.6rem; margin-bottom: 0.8rem; align-items: flex-end; }
.cap-msg.user { justify-content: flex-end; }
.cap-msg.assistant .cap-avatar { background: #6d28d9; color: white; }
.cap-msg.user .cap-avatar { background: #1e40af; color: white; order: 2; }
.cap-avatar { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.cap-bubble { background: white; padding: 0.7rem 1rem; border-radius: 18px; max-width: 78%; box-shadow: 0 1px 3px rgba(0,0,0,0.08); font-size: 0.95rem; line-height: 1.4; white-space: pre-wrap; }
.cap-msg.user .cap-bubble { background: #1e40af; color: white; }
.cap-meta { font-size: 0.7rem; color: #9ca3af; margin-top: 0.3rem; }
.cap-citations { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cap-citation { background: #fef3c7; color: #92400e; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.cap-thinking { display: flex; gap: 0.6rem; align-items: center; padding: 0.5rem 1rem; color: #6b7280; font-style: italic; }
.cap-thinking-dots { display: inline-block; }
.cap-thinking-dots span { animation: capDot 1.4s infinite both; }
.cap-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.cap-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes capDot { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
.capucine-input { display: flex; gap: 0.5rem; padding: 0.6rem; background: white; border-top: 1px solid #e5e7eb; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); }
.capucine-input textarea { flex: 1; resize: none; border: 1px solid #e5e7eb; border-radius: 18px; padding: 0.6rem 1rem; font-size: 0.95rem; font-family: inherit; min-height: 2.4rem; max-height: 6rem; }
.capucine-input textarea:focus { outline: none; border-color: #6d28d9; }
.capucine-input #btn-capucine-send { background: #6d28d9; color: white; border: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.3rem; cursor: pointer; }
.capucine-input #btn-capucine-send:disabled { background: #9ca3af; }

/* Bouton micro TIKITA */
#btn-capucine-mic { background: #f3f4f6; color: #4b5563; border: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.2rem; cursor: pointer; transition: background 0.2s; }
#btn-capucine-mic:active { background: #e5e7eb; }
#btn-capucine-mic.recording { background: #dc2626; color: white; animation: capMicPulse 1.2s infinite; }
@keyframes capMicPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.08); } }

/* Bandeau "Mise à jour disponible" */
.update-banner { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top); background: #16a34a; color: white; padding: 0.7rem 1rem; z-index: 9998; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.update-banner.hidden { display: none; }
.update-banner .ub-content { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.update-banner .ub-icon { font-size: 1.3rem; flex-shrink: 0; }
.update-banner .ub-text { flex: 1; font-weight: 600; }
.update-banner .ub-btn { background: white; color: #16a34a; border: none; padding: 0.4rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; cursor: pointer; flex-shrink: 0; }
.update-banner .ub-btn:active { background: #f3f4f6; }
.update-banner .ub-close { background: rgba(255,255,255,0.2); color: white; border: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: 1.2rem; cursor: pointer; flex-shrink: 0; padding: 0; line-height: 1; }
body.has-update-banner { padding-top: 3.5rem !important; }

/* Bouton actualiser topbar */
.topbar-buttons { display: flex; align-items: center; gap: 0.3rem; }
.btn-refresh { background: none; border: none; color: #1e40af; font-size: 1.5rem; font-weight: 600; cursor: pointer; padding: 0.3rem 0.6rem; line-height: 1; transition: transform 0.4s; }
.btn-refresh:active { transform: rotate(360deg); }
.btn-refresh.spinning { animation: spinRefresh 0.8s linear infinite; }
@keyframes spinRefresh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Accueil 3 grosses cartes */
.big-cards { display: grid; grid-template-columns: 1fr; gap: 1.2rem; padding: 1.5rem 1.2rem; max-width: 480px; margin: 0 auto; }
.big-card { background: white; border-radius: 22px; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.15s; min-height: 140px; display: flex; flex-direction: column; justify-content: center; }
.big-card:active { transform: scale(0.97); }
.big-card .bc-icon { font-size: 3.2rem; margin-bottom: 0.5rem; }
.big-card .bc-title { font-size: 1.4rem; font-weight: 800; color: #1e40af; letter-spacing: 0.02em; }
.big-card .bc-sub { font-size: 0.95rem; color: #6b7280; margin-top: 0.3rem; font-weight: 500; }
.big-card.pink { border-top: 6px solid #6d28d9; }
.big-card.pink .bc-title { color: #6d28d9; }
.big-card.blue { border-top: 6px solid #1e40af; }
.big-card.blue .bc-title { color: #1e40af; }
.big-card.skyblue { border-top: 6px solid #0ea5e9; }
.big-card.skyblue .bc-title { color: #0ea5e9; }

/* Tikita — grille de thèmes */
.cap-themes-intro { text-align: center; padding: 1.5rem 1.2rem 0.8rem; color: #4b5563; }
.cap-themes-intro p { margin: 0; line-height: 1.5; }
.cap-themes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; padding: 1rem 1rem 2rem; max-width: 520px; margin: 0 auto; }
.cap-theme { background: white; border-radius: 18px; padding: 1.3rem 0.6rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; min-height: 120px; display: flex; flex-direction: column; justify-content: center; border-top: 5px solid #6d28d9; }
.cap-theme:active { transform: scale(0.96); }
.cap-theme .ct-icon { font-size: 2.4rem; margin-bottom: 0.45rem; }
.cap-theme .ct-label { font-weight: 600; font-size: 0.95rem; line-height: 1.2; color: #1f2937; }

/* Financier — gros chiffres */
.fin-card { background: linear-gradient(135deg, #166534, #15803d); color: white; border-radius: 18px; padding: 1.5rem; margin: 1rem; text-align: center; box-shadow: 0 4px 14px rgba(22,101,52,0.25); }
.fin-card.caisse { background: linear-gradient(135deg, #b45309, #d97706); box-shadow: 0 4px 14px rgba(180,83,9,0.25); }
.fin-label { font-size: 0.85rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.05em; }
.fin-amount { font-size: 2.4rem; font-weight: 800; margin: 0.4rem 0; line-height: 1.1; }
.fin-meta { font-size: 0.85rem; opacity: 0.9; }

/* 4 cartes en 2x2 */
.big-cards.big-cards-4 { grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.2rem 1rem; max-width: 540px; }
.big-cards.big-cards-4 .big-card { padding: 1.4rem 0.6rem; min-height: 130px; }
.big-cards.big-cards-4 .big-card .bc-icon { font-size: 2.6rem; }
.big-cards.big-cards-4 .big-card .bc-title { font-size: 1.15rem; }
.big-cards.big-cards-4 .big-card .bc-sub { font-size: 0.85rem; }
.big-card.amber { border-top: 6px solid #d97706; }
.big-card.amber .bc-title { color: #d97706; }

/* Pointage UI */
.pointage-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; gap: 1rem; }
.pointage-row label { color: #4b5563; font-size: 0.95rem; min-width: 110px; }
.pointage-input { padding: 0.6rem 0.8rem; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 1rem; font-family: inherit; flex: 1; min-width: 0; background: white; }
.pointage-input:focus { outline: none; border-color: #6d28d9; }
input[type=date].pointage-input, input[type=time].pointage-input { width: 100%; }
.pointage-total { font-weight: 700; color: #16a34a; padding: 0.5rem 0 0; font-size: 1rem; text-align: right; }
.chauf-card { border-left: 5px solid #6d28d9; }
.pointage-status { margin-top: 0.8rem; text-align: center; font-weight: 600; }
.pointage-status.ok { color: #16a34a; }
.pointage-status.err { color: #dc2626; }

/* Galerie photos */
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; padding: 0.5rem 1rem 2rem; }
.photo-tile { aspect-ratio: 1; background: #f3f4f6; border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .photo-date { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); color: white; font-size: 0.7rem; padding: 0.2rem 0.4rem; text-align: center; }

/* Tâches */
.task-item { background: white; padding: 0.9rem 1rem; margin-bottom: 0.5rem; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 0.7rem; }
.task-item.done .task-desc { text-decoration: line-through; color: #9ca3af; }
.task-check { width: 1.6rem; height: 1.6rem; border: 2px solid #d97706; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.task-item.done .task-check { background: #16a34a; border-color: #16a34a; color: white; }
.task-desc { flex: 1; }
.task-source { font-size: 0.75rem; color: #9ca3af; margin-top: 0.2rem; }
.task-delete { background: none; border: none; color: #dc2626; font-size: 1.2rem; cursor: pointer; padding: 0.3rem; }

/* Sécurité : inputs login toujours tactiles */
input, textarea, select, button { -webkit-tap-highlight-color: rgba(0,0,0,0.1); -webkit-user-select: text; user-select: text; pointer-events: auto !important; }
.login-form input, .login-form button { position: relative; z-index: 1; }
.screen { position: relative; z-index: 1; }

/* Banners ne doivent jamais couvrir le bas de l'écran (où sont les boutons) */
.install-banner, .update-banner { max-height: 4.5rem; overflow: hidden; }

/* === Tikita — écran d'entrée 2 cartes === */
.cap-entry { padding: 1.5rem 1.2rem; max-width: 480px; margin: 0 auto; }
.cap-entry-hello { text-align: center; color: #4b5563; margin-bottom: 1.5rem; font-size: 1.05rem; }
.cap-entry-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.cap-entry-card { background: white; border-radius: 18px; padding: 1.6rem 1.2rem; text-align: center; box-shadow: 0 3px 12px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.15s; min-height: 130px; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; }
.cap-entry-card:active { transform: scale(0.97); }
.cap-entry-themes { border-top: 6px solid #6d28d9; }
.cap-entry-libre { border-top: 6px solid #c4b5fd; }
.cec-icon { font-size: 2.6rem; }
.cec-title { font-size: 1.25rem; font-weight: 800; color: #6d28d9; }
.cec-sub { font-size: 0.9rem; color: #6b7280; }

/* === Tikita — liste des 9 thèmes (1 case par ligne) === */
.cap-themes-list { padding: 1rem 1rem 2rem; max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.6rem; }
.cap-theme-row { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; background: white; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.cap-theme-row:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.ctr-icon { font-size: 1.8rem; width: 2.4rem; text-align: center; }
.ctr-label { flex: 1; font-size: 1.05rem; font-weight: 600; color: #1f2937; }
.ctr-chev { color: #9ca3af; font-size: 1.3rem; font-weight: 700; }

/* === Tikita — bandeau focus + chips === */
.cap-focus-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; background: #ede9fe; color: #4c1d95; border-bottom: 1px solid #ddd6fe; font-size: 0.92rem; }
.cap-focus-bar.hidden { display: none; }
.cfb-label { font-weight: 700; }
.cfb-name { flex: 1; font-weight: 600; }
.cfb-close { background: none; border: none; color: #4c1d95; font-size: 1.2rem; cursor: pointer; padding: 0.2rem 0.5rem; }
.cap-focus-chips { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.cap-focus-chip { background: #ede9fe; color: #4c1d95; border: 1px solid #c4b5fd; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: left; }
.cap-focus-chip:active { background: #ddd6fe; }

/* === Tikita — modale sélection focus === */
.cap-focus-search { padding: 1rem 1rem 0.5rem; }
.cap-focus-search input { width: 100%; padding: 0.7rem 1rem; border: 1px solid #d1d5db; border-radius: 10px; font-size: 1rem; }
.cap-focus-list { padding: 0.5rem 1rem 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cap-focus-item { background: white; border-radius: 12px; padding: 0.9rem 1rem; box-shadow: 0 2px 6px rgba(0,0,0,0.05); cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; }
.cap-focus-item:active { transform: scale(0.98); background: #ede9fe; }
.cfi-title { font-weight: 700; color: #1f2937; }
.cfi-sub { font-size: 0.85rem; color: #6b7280; }

/* === Tikita — barre input V2 (textarea pleine largeur + ligne boutons) === */
/* v31 2026-06-07 : composer DANS LE FLUX (flex none), ancré en bas du screen
   flex column. Pas de position fixed, pas de --kb-h. Plus simple, plus stable.
   Modules pointage/devis/facture en order: 3 → toujours visibles au-dessus. */
.cap-input-v2 { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 1rem 0.8rem; background: white; border-top: 1px solid #e5e7eb; box-shadow: 0 -3px 14px rgba(0,0,0,0.07); padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0)); flex: none; order: 10; }
#screen-capucine-libre #capucine-messages { flex: 1; overflow-y: auto; padding-bottom: 0; order: 5; }
/* v25 2026-06-07 : composer pointage juste sous Focus bar (en haut, pas en bas
   sous le composer flottant). Flex order pour le placer avant les messages. */
#screen-capucine-libre #cap-composer-pointage:not(.hidden) { flex: none; background: white; padding: 0.8rem 1rem; border-bottom: 1px solid #e5e7eb; max-height: calc(100vh - 16rem); overflow-y: auto; order: 3; }
/* v29 2026-06-07 : wizard devis juste sous Focus bar (déplacé hors du composer fixe) */
#screen-capucine-libre #cap-devis-wizard:not(.hidden) { flex: none; max-height: calc(100vh - 16rem); overflow-y: auto; order: 3; }
.cap-input-v2 textarea { width: 100%; box-sizing: border-box; padding: 0.8rem 1rem; border: 1px solid #d1d5db; border-radius: 12px; font-size: 1rem; resize: none; min-height: 2.6rem; max-height: 10rem; font-family: inherit; line-height: 1.4; }
.cap-input-v2 textarea:focus { outline: none; border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,0.15); }
/* v48 2026-06-07 : style du div contenteditable comme un textarea + placeholder
   via :empty:before. Masque la barre d'accessoires clavier iOS Safari PWA. */
.cap-input-v2 #capucine-input-text[contenteditable] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 1rem;
  min-height: 2.6rem;
  max-height: 10rem;
  overflow-y: auto;
  font-family: inherit;
  line-height: 1.4;
  background: white;
  outline: none;
  -webkit-user-modify: read-write-plaintext-only;
  user-modify: read-write-plaintext-only;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.cap-input-v2 #capucine-input-text[contenteditable]:focus {
  border-color: #6d28d9;
  box-shadow: 0 0 0 3px rgba(109,40,217,0.15);
}
.cap-input-v2 #capucine-input-text[contenteditable]:empty:before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}
.cap-input-row { display: flex; align-items: center; gap: 0.6rem; }
.cap-input-row .cap-input-spacer { flex: 1; }
/* Style commun aux 3 boutons cercles de la barre composer (corbeille, trombone, etc.)
   — gris discret d'origine, NE PAS toucher : 🗑️ et 📎 doivent rester gris.
   Le bouton + Focus (#btn-capucine-plus) a son propre override ci-dessous. */
.cap-btn-plus { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #e5e7eb; color: #374151; border: none; font-size: 1.4rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cap-btn-plus:active { background: #d1d5db; }

/* Override SPÉCIFIQUE au bouton + (entrée focus) — v9 2026-06-06 :
   vert moins transparent (emerald-400) avec + en gris moyen. */
#btn-capucine-plus { width: 2.6rem; height: 2.6rem; background: #34d399; color: #4b5563; border: 1.5px solid #059669; font-size: 1.4rem; box-shadow: 0 2px 7px rgba(5, 150, 105, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; line-height: 1; }
#btn-capucine-plus:hover { background: #10b981; box-shadow: 0 4px 14px rgba(5, 150, 105, 0.5); }
#btn-capucine-plus:active { background: #059669; color: white; transform: scale(0.94); box-shadow: 0 2px 6px rgba(4, 120, 87, 0.5); }
.cap-btn-mic { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #f3f4f6; color: #374151; border: none; font-size: 1.1rem; cursor: pointer; }
.cap-btn-mic.recording { background: #dc2626; color: white; animation: pulse 1.2s ease-in-out infinite; }
.cap-btn-send { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #6d28d9; color: white; border: none; font-size: 1.1rem; cursor: pointer; }
.cap-btn-send:active { background: #5b21b6; }
.cap-btn-send:disabled { opacity: 0.5; }

/* === Tikita — bottom sheet (70% hauteur) === */
.cap-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9990; opacity: 0; transition: opacity 0.2s; }
.cap-sheet-backdrop:not(.hidden) { opacity: 1; }
.cap-sheet { position: fixed; bottom: 0; left: 0; right: 0; height: 70vh; background: white; border-radius: 22px 22px 0 0; box-shadow: 0 -6px 22px rgba(0,0,0,0.18); z-index: 9991; transform: translateY(100%); transition: transform 0.25s ease-out; overflow: hidden; display: flex; flex-direction: column; }
.cap-sheet:not(.hidden) { transform: translateY(0); }
.cap-sheet-handle { width: 40px; height: 4px; background: #d1d5db; border-radius: 2px; margin: 0.7rem auto 0.3rem; flex-shrink: 0; }
.cap-sheet-content { overflow-y: auto; padding: 1rem 1.2rem 2rem; -webkit-overflow-scrolling: touch; }
.cap-sheet-content .cap-focus-chips { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.cap-sheet-content .cap-examples { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.cap-sheet-content .cap-example { background: #f3f4f6; color: #1f2937; border: 1px solid #e5e7eb; padding: 0.7rem 1rem; border-radius: 10px; font-size: 0.95rem; cursor: pointer; text-align: left; }
.cap-sheet-content .cap-example:active { background: #e5e7eb; }

/* === Pointage — wizard 3 étapes === */
.pointage-step.hidden { display: none; }

.pointage-salaries { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.pointage-salarie-btn { display: flex; align-items: center; gap: 0.8rem; padding: 1rem; background: white; border: 1.5px solid #e5e7eb; border-radius: 12px; font-size: 1.05rem; font-weight: 600; color: #1f2937; cursor: pointer; transition: all 0.15s; }
.pointage-salarie-btn:active { transform: scale(0.98); background: #f9fafb; }
.pointage-salarie-btn.selected { border-color: #6d28d9; background: #ede9fe; color: #4c1d95; }
.psb-icon { font-size: 1.6rem; }

.pointage-plage { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.8rem; margin: 0.8rem 0; transition: border-color 0.15s, background 0.15s; }
.pointage-plage.validated { border-color: #16a34a; background: #f0fdf4; }
.pp-label { font-weight: 600; font-size: 0.9rem; color: #374151; margin-bottom: 0.5rem; }
.pp-row { display: flex; align-items: center; gap: 0.5rem; }
.pp-row .pointage-input { flex: 1; max-width: 130px; }
.pp-sep { color: #9ca3af; font-weight: 600; }
.pp-valid { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #e5e7eb; color: #6b7280; border: none; font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: all 0.15s; margin-left: 0.3rem; }
.pp-valid:active { transform: scale(0.94); }
.pointage-plage.validated .pp-valid { background: #16a34a; color: white; }
.pp-total { margin-top: 0.4rem; font-size: 0.85rem; color: #6b7280; }
.pp-total .pp-h { font-weight: 600; color: #1f2937; }
.pointage-plage.validated .pp-total .pp-h { color: #16a34a; }

.pointage-grand-total { margin-top: 1rem; padding: 0.8rem 1rem; background: #1e40af; color: white; border-radius: 10px; font-weight: 700; font-size: 1.05rem; text-align: center; }

/* === Tikita sheet — section titles + boutons thèmes 1 par ligne === */
.cap-sheet-section-title { font-size: 0.9rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.5rem; }
.cap-sheet-themes { display: flex; flex-direction: column; gap: 0.4rem; }
.cap-sheet-theme { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; background: white; border: 1px solid #e5e7eb; border-radius: 12px; font-size: 1rem; color: #1f2937; cursor: pointer; text-align: left; width: 100%; }
.cap-sheet-theme:active { background: #f9fafb; transform: scale(0.99); }
.cap-sheet-theme .cst-icon { font-size: 1.3rem; width: 1.9rem; text-align: center; }
.cap-sheet-theme .cst-label { flex: 1; font-weight: 600; }
.cap-sheet-theme .cst-chev { color: #9ca3af; font-weight: 700; }

/* === Tikita — écran Options plein page === */
.cap-options-body { padding: 1rem 1rem 2rem; max-width: 600px; margin: 0 auto; }
.cap-options-body .cap-focus-chips { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.cap-options-body .cap-focus-chip { background: #ede9fe; color: #4c1d95; border: 1px solid #c4b5fd; padding: 0.8rem 1rem; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; }
.cap-options-body .cap-focus-chip:active { background: #ddd6fe; }

/* === Bouton thème spécifique (apparaît à côté de + quand focus thème actif) === */
.cap-btn-theme { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #6d28d9; color: white; border: none; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cap-btn-theme.hidden { display: none; }
.cap-btn-theme:active { background: #5b21b6; }

/* === Bouton "Nouvelle conversation" mis en avant === */
.btn-new-conv { background: white; color: #6d28d9; border: 1.5px solid white; border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.btn-new-conv:active { background: #ede9fe; }
.btn-new-conv .bnc-icon { font-size: 1.1rem; font-weight: 700; }
.btn-new-conv .bnc-label { font-size: 0.85rem; }

/* === Hamburger === */
.btn-hamburger { background: transparent; border: none; padding: 0.5rem; width: 2.4rem; height: 2.4rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer; }
.btn-hamburger .bh-line { display: block; width: 22px; height: 2.5px; background: white; border-radius: 2px; }
.btn-hamburger:active { opacity: 0.7; }

/* === Drawer latéral Claude.ai-like === */
.cap-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9990; opacity: 0; transition: opacity 0.2s; }
.cap-drawer-backdrop:not(.hidden) { opacity: 1; }
.cap-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 86vw; max-width: 340px; background: white; box-shadow: 4px 0 22px rgba(0,0,0,0.18); z-index: 9991; transform: translateX(-100%); transition: transform 0.25s ease-out; display: flex; flex-direction: column; overflow: hidden; }
.cap-drawer:not(.hidden) { transform: translateX(0); }
.cap-drawer-header { display: flex; align-items: center; gap: 0.6rem; padding: 1.1rem 1rem 0.9rem; background: #6d28d9; color: white; padding-top: calc(env(safe-area-inset-top, 0) + 1rem); }
.cdh-avatar { font-size: 1.8rem; }
.cdh-name { flex: 1; font-weight: 800; font-size: 1.1rem; letter-spacing: 0.04em; }
.cap-drawer-close { background: transparent; border: none; color: white; font-size: 1.2rem; padding: 0.3rem 0.5rem; cursor: pointer; }
.cap-drawer-new { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0.9rem 0.7rem; padding: 0.85rem 1rem; background: #6d28d9; color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(109,40,217,0.25); }
.cap-drawer-new:active { background: #5b21b6; }
.cdn-icon { font-size: 1.2rem; }
.cap-drawer-section-title { padding: 0.6rem 1.1rem 0.3rem; font-size: 0.75rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; }
.cap-drawer-recents { flex: 1; overflow-y: auto; padding: 0 0.7rem 1rem; -webkit-overflow-scrolling: touch; }
.cap-drawer-recent { display: block; width: 100%; text-align: left; background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.7rem 0.85rem; margin-bottom: 0.4rem; cursor: pointer; }
.cap-drawer-recent:active { background: #ede9fe; }
.cdr-title { font-weight: 600; color: #1f2937; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdr-meta { font-size: 0.78rem; color: #6b7280; margin-top: 0.15rem; }
.cap-drawer-footer { border-top: 1px solid #e5e7eb; padding: 0.7rem 1rem; padding-bottom: calc(env(safe-area-inset-bottom, 0) + 0.7rem); }
.cap-drawer-quit { width: 100%; background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.7rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.cap-drawer-quit:active { background: #e5e7eb; }

/* === Drawer — sections accordéon === */
.cap-drawer-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
/* v77 2026-06-07 : footer drawer avec bouton Déconnexion */
.cap-drawer-footer { flex: none; padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom, 0)); border-top: 1px solid #e5e7eb; background: white; }
.cap-drawer-logout { width: 100%; padding: 0.7rem 0.9rem; background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 10px; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.cap-drawer-logout:active { background: #fecaca; }
.cap-drawer-section-head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; padding: 0.85rem 1rem 0.7rem; font-size: 0.78rem; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; border-top: 1px solid #f3f4f6; }
.cap-drawer-section-head:first-of-type { border-top: none; }
.cap-drawer-section-head:active { background: #f9fafb; }
.cdsh-label { flex: 1; text-align: left; }
.cdsh-chev { font-size: 1.2rem; color: #9ca3af; transition: transform 0.2s; transform: rotate(90deg); font-weight: 700; }
.cap-drawer-section-head[aria-expanded="false"] .cdsh-chev { transform: rotate(0deg); }
.cap-drawer-section-body { padding: 0 0.7rem 0.6rem; transition: max-height 0.25s ease-out, opacity 0.15s; overflow: hidden; }
.cap-drawer-section-body.collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.cap-drawer-item { width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem; background: white; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 0.95rem; color: #1f2937; cursor: pointer; margin-bottom: 0.35rem; text-align: left; }
.cap-drawer-item:active { background: #ede9fe; transform: scale(0.99); }
.cdi-icon { font-size: 1.2rem; width: 1.7rem; text-align: center; }
.cdi-label { flex: 1; font-weight: 600; }

/* === Composant message interactif pointage (dans le chat) === */
.cap-msg.assistant.interactive .cap-bubble { background: white; border: 1px solid #ddd6fe; box-shadow: 0 1px 4px rgba(109,40,217,0.08); }
.cap-interactive-pointage { display: flex; flex-direction: column; gap: 0.6rem; }
.cap-ip-title { font-weight: 700; color: #4c1d95; font-size: 0.95rem; }
.cap-ip-subtitle { font-size: 0.82rem; color: #6b7280; margin-top: -0.4rem; }
.cap-ip-block { margin-top: 0.3rem; }
.cap-ip-block-title { font-size: 0.78rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.cap-ip-sal-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cap-ip-sal { flex: 1; min-width: 30%; padding: 0.55rem 0.5rem; background: #f3f4f6; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 0.85rem; font-weight: 600; color: #374151; cursor: pointer; text-align: center; }
.cap-ip-sal.selected { background: #ede9fe; border-color: #6d28d9; color: #4c1d95; }
.cap-ip-date input { width: 100%; padding: 0.5rem 0.7rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.92rem; }
.cap-ip-plage { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.55rem; margin-bottom: 0.4rem; }
.cap-ip-plage.validated { background: #f0fdf4; border-color: #16a34a; }
.cap-ip-plage-label { font-size: 0.78rem; font-weight: 600; color: #6b7280; margin-bottom: 0.3rem; }
.cap-ip-plage-row { display: flex; align-items: center; gap: 0.3rem; }
.cap-ip-plage-row input[type=time] { flex: 1; min-width: 80px; padding: 0.4rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; }
.cap-ip-sep { color: #9ca3af; font-weight: 700; padding: 0 0.1rem; }
.cap-ip-valid { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #e5e7eb; color: #6b7280; border: none; font-size: 1rem; font-weight: 700; cursor: pointer; }
.cap-ip-plage.validated .cap-ip-valid { background: #16a34a; color: white; }
.cap-ip-total { text-align: center; padding: 0.4rem; background: #6d28d9; color: white; border-radius: 8px; font-weight: 700; font-size: 0.9rem; margin-top: 0.3rem; }
.cap-ip-commentaire textarea { width: 100%; box-sizing: border-box; padding: 0.5rem 0.7rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.85rem; resize: none; font-family: inherit; }
.cap-ip-submit { width: 100%; padding: 0.7rem; background: #16a34a; color: white; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 700; cursor: pointer; margin-top: 0.4rem; }
.cap-ip-submit:active { background: #15803d; }
.cap-ip-submit:disabled { opacity: 0.5; }
.cap-ip-done { padding: 0.7rem; background: #f0fdf4; border: 1px solid #16a34a; border-radius: 8px; color: #15803d; font-size: 0.9rem; font-weight: 600; text-align: center; }

/* v73 2026-06-07 : wizard pointage en 3 étapes progressives */
.cap-ip-3steps .cap-ip-step { display: none; }
.cap-ip-3steps .cap-ip-step.active { display: block; }
.cap-ip-step-bar { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.55rem; background: #ede9fe; border-radius: 8px; }
.cap-ip-back { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: white; border: 1px solid #c4b5fd; color: #4c1d95; font-size: 1rem; cursor: pointer; flex: none; }
.cap-ip-back.hidden { visibility: hidden; }
.cap-ip-step-indicator { flex: 1; font-size: 0.85rem; font-weight: 600; color: #4c1d95; }
.cap-ip-step-indicator b { color: #6d28d9; font-weight: 800; }
.cap-ip-sal-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.cap-ip-sal-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.8rem; background: white; border: 1.5px solid #ddd6fe; border-radius: 12px; font-size: 0.95rem; font-weight: 600; color: #1e293b; cursor: pointer; text-align: left; }
.cap-ip-sal-card .ipsc-icon { font-size: 1.4rem; flex: none; }
.cap-ip-sal-card.selected { background: #ede9fe; border-color: #6d28d9; color: #4c1d95; }
.cap-ip-sal-card:active { transform: scale(0.98); }
.cap-ip-date-quick { display: flex; gap: 0.4rem; margin-top: 0.45rem; }
.cap-ip-date-btn { flex: 1; padding: 0.5rem 0.4rem; background: white; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: #475569; cursor: pointer; }
.cap-ip-date-btn.selected { background: #ede9fe; border-color: #6d28d9; color: #4c1d95; }
.cap-ip-step-next { width: 100%; padding: 0.7rem; background: #6d28d9; color: white; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 700; cursor: pointer; margin-top: 0.6rem; }
.cap-ip-step-next:active { background: #4c1d95; }
.cap-ip-pauses { display: flex; flex-direction: column; gap: 0.4rem; }
.cap-ip-add-pause { width: 100%; padding: 0.55rem; background: #ecfdf5; border: 1.5px dashed #16a34a; border-radius: 10px; font-size: 0.88rem; font-weight: 600; color: #15803d; cursor: pointer; margin-top: 0.35rem; }
.cap-ip-add-pause:active { background: #d1fae5; }
.cap-ip-del-pause { width: 2rem; height: 2rem; border-radius: 50%; background: #fee2e2; color: #dc2626; border: none; font-size: 0.9rem; cursor: pointer; flex: none; margin-left: 0.2rem; }
.cap-ip-del-pause:active { background: #fecaca; }

/* === Sélecteur salarié style sheet (pour focus salarié via +) === */
.cap-sal-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 22px 22px 0 0; box-shadow: 0 -6px 22px rgba(0,0,0,0.18); z-index: 9992; transform: translateY(100%); transition: transform 0.25s ease-out; padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0) + 1rem); max-height: 60vh; overflow-y: auto; }
.cap-sal-sheet:not(.hidden) { transform: translateY(0); }
.cap-sal-sheet-title { font-weight: 700; color: #4c1d95; margin-bottom: 0.6rem; }

/* === Chat Tikita — refonte typo/largeur (Claude.ai-like) === */
.capucine-messages { padding: 0.8rem 1rem 1rem; }
.cap-msg { display: block; margin-bottom: 1rem; }
.cap-msg .cap-avatar { display: none !important; }  /* avatars retirés */
.cap-msg.assistant > div, .cap-msg.assistant > div > .cap-bubble { display: block; }

/* Bulles user à droite, 85% max */
.cap-msg.user { display: flex; justify-content: flex-end; }
.cap-msg.user .cap-bubble { max-width: 85%; background: #ede9fe; color: #1f2937; border-radius: 16px 16px 4px 16px; padding: 0.7rem 0.95rem; font-size: 16px; line-height: 1.55; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; word-wrap: break-word; }

/* Bulles Tikita pleine largeur, fond transparent (style Claude) */
.cap-msg.assistant > div { width: 100%; }
.cap-msg.assistant .cap-bubble { background: transparent; padding: 0.3rem 0.1rem; color: #1f2937; font-size: 16px; line-height: 1.62; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; max-width: 100%; }

/* Cas spécial : bulle interactive (formulaire pointage) garde fond + padding */
.cap-msg.assistant.interactive .cap-bubble { background: white; border: 1px solid #ddd6fe; border-radius: 14px; padding: 0.85rem; box-shadow: 0 1px 4px rgba(109,40,217,0.08); }

/* Citations + meta légers */
.cap-msg.assistant .cap-citations { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cap-msg.assistant .cap-citation { background: #ede9fe; color: #4c1d95; font-size: 0.72rem; padding: 0.18rem 0.55rem; border-radius: 999px; font-weight: 600; }
.cap-msg.assistant .cap-meta { margin-top: 0.3rem; font-size: 0.7rem; color: #9ca3af; }

/* Welcome aligné gauche pleine largeur */
.cap-welcome { padding: 1rem 0.4rem; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.55; }
.cap-welcome .cap-welcome-icon { display: none; }  /* avatar dans welcome retiré aussi */
.cap-welcome p { margin: 0.3rem 0; }

/* === Drawer recents — ligne avec menu ⋮ === */
.cap-drawer-recent-row { display: flex; align-items: stretch; gap: 0.3rem; margin-bottom: 0.4rem; }
.cap-drawer-recent-row .cap-drawer-recent { flex: 1; margin-bottom: 0; }
.cap-drawer-recent-menu { background: transparent; border: 1px solid transparent; border-radius: 8px; color: #6b7280; font-size: 1.1rem; font-weight: 700; padding: 0 0.5rem; cursor: pointer; }
.cap-drawer-recent-menu:active { background: #f3f4f6; }

/* === Menu contextuel conversation === */
.cap-conv-menu { background: white; border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,0.18); min-width: 200px; z-index: 10000; padding: 0.3rem; border: 1px solid #e5e7eb; }
.ccm-item { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 0.7rem 0.85rem; font-size: 0.92rem; cursor: pointer; border-radius: 8px; color: #1f2937; }
.ccm-item:active { background: #f3f4f6; }
.ccm-item.danger { color: #dc2626; }
.ccm-item.danger:active { background: #fee2e2; }

/* === Popup bouton + === */
.cap-plus-menu { background: white; border-radius: 14px; box-shadow: 0 -6px 22px rgba(0,0,0,0.18); min-width: 240px; max-width: 95vw; z-index: 10000; padding: 0.3rem; border: 1px solid #e5e7eb; }
.cpm-item { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 0.85rem 0.95rem; font-size: 0.95rem; cursor: pointer; border-radius: 10px; color: #1f2937; font-weight: 600; }
.cpm-item:active { background: #f3f4f6; }
.cpm-item.danger { color: #dc2626; }
.cpm-item.danger:active { background: #fee2e2; }

/* === Modales custom (confirm/prompt) === */
.cap-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 11000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cap-modal { background: white; border-radius: 16px; width: 100%; max-width: 380px; padding: 1.2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.cap-modal-title { font-weight: 800; font-size: 1.05rem; color: #1f2937; margin-bottom: 0.5rem; }
.cap-modal-body { font-size: 0.95rem; color: #374151; line-height: 1.45; margin-bottom: 0.8rem; }
.cap-modal-input { width: 100%; box-sizing: border-box; padding: 0.65rem 0.85rem; border: 1px solid #d1d5db; border-radius: 10px; font-size: 1rem; margin-bottom: 0.8rem; }
.cap-modal-input:focus { outline: none; border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,0.15); }
.cap-modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.cap-modal-cancel { background: #f3f4f6; color: #374151; border: none; border-radius: 10px; padding: 0.65rem 1.1rem; font-weight: 600; cursor: pointer; }
.cap-modal-ok { background: #6d28d9; color: white; border: none; border-radius: 10px; padding: 0.65rem 1.2rem; font-weight: 700; cursor: pointer; }
.cap-modal-ok.danger { background: #dc2626; }
.cap-modal-ok:active { background: #5b21b6; }
.cap-modal-ok.danger:active { background: #b91c1c; }

/* === Pièces jointes dans le chat === */
.cap-bubble-attach { padding: 0.4rem !important; max-width: 85% !important; }
.cap-attach-img { max-width: 100%; max-height: 240px; border-radius: 10px; display: block; }
.cap-attach-pdf { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; background: #f9fafb; border-radius: 10px; }
.cap-attach-pdf-icon { font-size: 1.6rem; }
.cap-attach-pdf-link { color: #4c1d95; font-weight: 600; text-decoration: none; word-break: break-all; }
.cap-attach-pdf-link:active { text-decoration: underline; }

/* === Composer pointage (au-dessus de la barre input) === */
.cap-composer { background: #faf5ff; border-top: 1px solid #ddd6fe; border-bottom: 1px solid #ddd6fe; padding: 0.7rem 0.9rem; }
.cap-composer.hidden { display: none; }
.cap-comp-title { font-weight: 700; color: #4c1d95; font-size: 0.95rem; margin-bottom: 0.5rem; }
.cap-comp-block { margin-bottom: 0.6rem; }
.cap-comp-block-title { font-size: 0.72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.4rem; }
.cap-comp-lock { font-size: 0.85rem; color: #6d28d9; }
.cap-comp-lock.hidden { display: none; }
.cap-comp-sal-row { display: flex; gap: 0.35rem; }
.cap-comp-sal { flex: 1; padding: 0.45rem 0.3rem; background: white; border: 1.5px solid #ddd6fe; border-radius: 8px; font-size: 0.82rem; font-weight: 600; color: #4c1d95; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.cap-comp-sal span { font-size: 1.1rem; }
.cap-comp-sal.selected { background: #6d28d9; color: white; border-color: #6d28d9; }
.cap-comp-sal.disabled { opacity: 0.4; pointer-events: none; }
.cap-comp-input, .cap-comp-plage input { padding: 0.45rem 0.55rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.88rem; background: white; }
.cap-comp-input { width: 100%; box-sizing: border-box; }
.cap-comp-plage { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
.cap-comp-plage .cpp-label { font-size: 0.78rem; color: #6b7280; min-width: 4.5rem; font-weight: 600; }
.cap-comp-plage input[type=time] { flex: 1; min-width: 90px; }
.cpp-sep { color: #9ca3af; font-weight: 700; }
.cap-comp-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.4rem; }
.cap-comp-total { background: #6d28d9; color: white; padding: 0.35rem 0.7rem; border-radius: 8px; font-weight: 700; font-size: 0.82rem; }
.cap-comp-cancel { background: transparent; border: 1px solid #d1d5db; color: #6b7280; padding: 0.35rem 0.75rem; border-radius: 8px; font-size: 0.82rem; cursor: pointer; }
/* v36 2026-06-07 : bouton Valider — vert foncé + texte blanc */
.cap-comp-validate { background: #166534; color: white; border: 1px solid #166534; padding: 0.4rem 1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 700; cursor: pointer; margin-left: 0.4rem; transition: background 0.12s ease; }
.cap-comp-validate:hover { background: #14532d; }
.cap-comp-validate:active { background: #052e16; transform: scale(0.97); }
.cap-comp-validate:disabled { background: #9ca3af; border-color: #9ca3af; color: white; cursor: not-allowed; opacity: 0.65; }

/* === Hamburger header (topbar, à gauche) — v11 : 3 traits blancs === */
.btn-topbar-hamburger { background: transparent; border: none; cursor: pointer; padding: 0.4rem 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 2.6rem; height: 2.6rem; }
.btn-topbar-hamburger:active { opacity: 0.6; }
.btn-topbar-hamburger .bh-line { display: block; width: 24px; height: 3px; background: white; border-radius: 2px; margin: 2px 0; }

/* Nom de la fonctionnalité centré dans le bandeau (TIKITA, COMPTABILITE, NOTIFICATIONS, MATRIX) */
.capucine-topbar .topbar-feature-name { flex: 1; text-align: center; color: white; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; margin: 0; }

/* === Drawer Apps gauche (TAHAUKU BNB) — v12 : respect safe-area iPhone === */
.cap-apps-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9990; opacity: 0; transition: opacity 0.2s; }
.cap-apps-drawer-backdrop:not(.hidden) { opacity: 1; }
.cap-apps-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 86vw; max-width: 340px; background: white; box-shadow: 4px 0 22px rgba(0,0,0,0.18); z-index: 9991; transform: translateX(-100%); transition: transform 0.25s ease-out; display: flex; flex-direction: column; overflow: hidden; padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
.cap-apps-drawer:not(.hidden) { transform: translateX(0); }
.cap-apps-drawer-header { background: #6d28d9; color: white; padding: 1rem 1rem 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cap-apps-drawer-header .cap-apps-drawer-title { margin: 0; font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 0.55rem; letter-spacing: 0.04em; }
.cap-apps-drawer-favicon { width: 26px; height: 26px; border-radius: 6px; background: white; padding: 2px; object-fit: contain; }
.cap-apps-drawer-close { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.4); color: white; width: 2rem; height: 2rem; border-radius: 50%; font-size: 1rem; cursor: pointer; }
.cap-apps-drawer-list { flex: 1; overflow-y: auto; }
/* v80 2026-06-07 : footer drawer Apps avec bouton Déconnexion sous Tikita/Matrix */
/* v81 2026-06-07 : footer plus généreux + bouton Déconnexion bien visible */
.cap-apps-drawer-footer { flex: none; padding: 1rem 1rem calc(1.1rem + env(safe-area-inset-bottom, 0)); border-top: 1px solid #e5e7eb; background: white; }
.cap-apps-drawer-logout { width: 100%; padding: 1rem 1.1rem; background: #fee2e2; color: #b91c1c; border: 1.5px solid #fca5a5; border-radius: 14px; font-size: 1.05rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.2rem; box-shadow: 0 2px 6px rgba(220,38,38,0.12); letter-spacing: 0.01em; }
.cap-apps-drawer-logout:hover { background: #fecaca; }
.cap-apps-drawer-logout:active { background: #fca5a5; transform: scale(0.985); }
.cap-apps-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1rem; background: white; border: none; border-bottom: 1px solid #f1f5f9; width: 100%; text-align: left; cursor: pointer; font-size: 0.95rem; color: #0f172a; }
.cap-apps-item:disabled, .cap-apps-item.disabled { cursor: not-allowed; opacity: 0.55; }
.cap-apps-item-icon { font-size: 1.5rem; }
.cap-apps-item-label { font-weight: 700; }
.cap-apps-item-sub { font-size: 0.78rem; color: #64748b; margin-top: 0.1rem; }
.cap-apps-item-lock { margin-left: auto; color: #94a3b8; font-size: 0.78rem; }

/* v53 2026-06-07 : drawer apps refondu en accordéon */
.cap-apps-item-wrap { border-bottom: 1px solid #f1f5f9; background: white; }
.cap-apps-item-wrap .cap-apps-item { border-bottom: none; width: 100%; gap: 0.8rem; }
.cap-apps-item.inactive { opacity: 0.7; }
.cap-apps-item-label { font-weight: 700; flex: 1; }
.cap-apps-item-chevron { color: #94a3b8; font-size: 1.05rem; margin-left: 0.4rem; transition: transform 0.18s ease; }
.cap-apps-item-wrap.expanded .cap-apps-item { background: #f8fafc; }
.cap-apps-item-content { background: #fafbfc; border-top: 1px solid #f1f5f9; max-height: 50vh; overflow-y: auto; }
.cap-apps-item-content.hidden { display: none; }
.cap-apps-item-empty { padding: 0.9rem 1rem; color: #64748b; font-size: 0.88rem; font-style: italic; margin: 0; }
.cap-apps-conv-list { display: flex; flex-direction: column; }
.cap-apps-conv-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 1rem 0.7rem 2.4rem; background: white; border: none; border-bottom: 1px solid #f1f5f9; width: 100%; text-align: left; cursor: pointer; font-size: 0.9rem; color: #0f172a; }
.cap-apps-conv-row:active, .cap-apps-conv-row:hover { background: #eef2ff; }
.cap-apps-conv-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-apps-conv-date { color: #64748b; font-size: 0.76rem; flex: none; }

/* v54 2026-06-07 : style liste fichiers GED Dolibarr dans l'accordéon Documents */
.cap-apps-doc-list { display: flex; flex-direction: column; }
.cap-apps-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.65rem 1rem 0.65rem 2.4rem; background: white; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; color: #0f172a; }
.cap-apps-doc-row:active { background: #eef2ff; }
.cap-apps-doc-main { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; overflow: hidden; }
.cap-apps-doc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-apps-doc-folder { font-size: 0.72rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-apps-doc-date { color: #64748b; font-size: 0.74rem; flex: none; }

/* v55 2026-06-07 : screen Documents — iframe Nextcloud Files pleine page,
   header NC masqué via top négatif sur l'iframe (~50px). */
#screen-documents { display: flex; flex-direction: column; height: 100dvh; height: var(--vvh, 100dvh); padding: 0; overflow: hidden; background: white; }
@supports not (height: 100dvh) { #screen-documents { height: var(--vvh, 100vh); } }

/* v60 2026-06-07 : explorateur Documents custom */
.documents-explorer { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f8fafc; }
.documents-breadcrumb { display: flex; align-items: center; gap: 0.35rem; padding: 0.7rem 1rem; background: white; border-bottom: 1px solid #e2e8f0; overflow-x: auto; white-space: nowrap; flex: none; }
.documents-bc-crumb { background: none; border: none; color: #4f46e5; font-weight: 600; font-size: 0.9rem; padding: 0.2rem 0.4rem; cursor: pointer; border-radius: 6px; }
.documents-bc-crumb:hover { background: #eef2ff; }
.documents-bc-crumb.current { color: #1e293b; cursor: default; }
.documents-bc-sep { color: #94a3b8; }

.documents-list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 80px 0; background: white; }
/* v66 2026-06-07 : ligne unique compacte (pas de meta taille/date) */
.documents-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.9rem; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background 0.1s; }
.documents-row:hover { background: #f8fafc; }
.documents-row:active { background: #eef2ff; }
/* v68 2026-06-07 : icônes types retirées + middle-ellipsis (15 derniers chars visibles) */
.documents-row-folder { font-size: 1.05rem; flex: none; margin-right: 0.15rem; }
.documents-row-name { flex: 1; min-width: 0; display: flex; align-items: center; font-weight: 500; color: #0f172a; font-size: 0.92rem; overflow: hidden; }
.documents-row-name .row-name-start { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.documents-row-name .row-name-end { flex: none; white-space: nowrap; }
.documents-row-actions { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.documents-row-action { background: none; border: 1px solid #e2e8f0; border-radius: 50%; width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.78rem; color: #4f46e5; }
.documents-row-action:active { background: #eef2ff; }
.documents-row-action.documents-action-dl { color: #166534; border-color: #d1fae5; }
.documents-row-action.documents-action-move { color: #b45309; border-color: #fde68a; }

.documents-empty { padding: 2rem 1rem; text-align: center; color: #64748b; font-style: italic; }
.documents-loading { padding: 1.4rem 1rem; text-align: center; color: #64748b; }

.documents-upload-btn { position: absolute; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0)); width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #16a34a; color: white; border: none; font-size: 1.8rem; font-weight: 700; box-shadow: 0 4px 16px rgba(22,163,74,0.45); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.documents-upload-btn:active { transform: scale(0.95); background: #14532d; }
.documents-upload-btn.uploading { background: #6366f1; animation: btn-spin 0.7s linear infinite; }

.documents-toast { position: fixed; bottom: 5.5rem; left: 50%; transform: translateX(-50%); background: #0f172a; color: white; padding: 0.7rem 1.1rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 9999; }
.documents-toast.hidden { display: none; }

/* Modale Déplacer */
.documents-move-modal { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: flex-end; justify-content: center; }
.documents-move-modal.hidden { display: none; }
.documents-move-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.documents-move-card { position: relative; background: white; width: 100%; max-width: 480px; max-height: 70vh; border-top-left-radius: 16px; border-top-right-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -8px 32px rgba(0,0,0,0.25); animation: documents-modal-up 0.18s ease-out; }
@keyframes documents-modal-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.documents-move-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; border-bottom: 1px solid #e2e8f0; }
.documents-move-header h3 { margin: 0; font-size: 1rem; font-weight: 700; color: #0f172a; }
.documents-move-close { background: rgba(0,0,0,0.04); border: none; border-radius: 50%; width: 2rem; height: 2rem; font-size: 0.95rem; cursor: pointer; color: #64748b; }
.documents-move-list { list-style: none; margin: 0; padding: 0.4rem 0; flex: 1; overflow-y: auto; }
.documents-move-list li { padding: 0.75rem 1.1rem; border-bottom: 1px solid #f1f5f9; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: #0f172a; }
.documents-move-list li:hover, .documents-move-list li:active { background: #f1f5f9; }
.documents-move-list li.disabled { opacity: 0.45; cursor: not-allowed; }

/* v65 2026-06-07 : overlay Consulter (recherche docs avec suggestions live) */
.consult-overlay { position: fixed; inset: 0; z-index: 9999; background: white; display: flex; flex-direction: column; }
.consult-overlay.hidden { display: none; }
.consult-header { display: flex; align-items: center; gap: 0.6rem; padding: calc(env(safe-area-inset-top, 0) + 0.7rem) 0.9rem 0.7rem; background: #6d28d9; flex: none; }
.consult-close { background: rgba(255,255,255,0.2); border: none; color: white; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1rem; cursor: pointer; flex: none; }
.consult-close:active { background: rgba(255,255,255,0.35); }
.consult-search { flex: 1; border: none; padding: 0.7rem 0.9rem; background: white; border-radius: 999px; font-size: 1rem; outline: none; }
.consult-suggestions { flex: 1; overflow-y: auto; padding: 0.4rem 0; background: #f8fafc; }
.consult-hint { padding: 1.4rem 1.1rem; text-align: center; color: #64748b; font-size: 0.92rem; font-style: italic; margin: 0; }
/* v66 2026-06-07 : ligne unique compacte (pas de meta chemin/source) */
.consult-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.9rem; background: white; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.consult-row:hover { background: #f8fafc; }
.consult-row:active { background: #eef2ff; }
/* v68 2026-06-07 : icônes types retirées + middle-ellipsis (15 derniers chars visibles) */
.consult-row-name { flex: 1; min-width: 0; display: flex; align-items: center; font-weight: 500; color: #0f172a; font-size: 0.92rem; overflow: hidden; }
.consult-row-name .row-name-start { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consult-row-name .row-name-end { flex: none; white-space: nowrap; }
.consult-row-action { background: none; border: 1px solid #e2e8f0; border-radius: 50%; width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.78rem; color: #4f46e5; flex: none; margin-left: 0.18rem; }
.consult-row-action:active { background: #eef2ff; }
.consult-row-action.consult-action-dl { color: #166534; border-color: #d1fae5; }

/* v65 : composer visible aussi en mode accueil chips-grid (le user peut taper direct) */
body.chips-grid.show-input #screen-capucine-libre .cap-input-v2 {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 900;
  padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0));
}
/* Chips accueil : padding bas augmenté pour laisser la place au composer fixed */
body.chips-grid #screen-capucine-libre #cap-quick-chips { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0)) !important; }

/* === Modal pleine page du + (90vh sous le header) — v11 === */
/* === Chips de focus rapide au-dessus du composer — v13 2026-06-06 === */
/* v35 2026-06-07 : chips toujours visibles. 2 modes :
   - body.chips-grid : mode accueil, grille 2x2 agrandie centrale
   - défaut : barre horizontale en bas
   v37 : padding-bottom augmenté + safe-area pour remonter la barre */
#screen-capucine-libre #cap-quick-chips { display: flex; gap: 0.5rem; padding: 0.7rem 0.6rem calc(1.5rem + env(safe-area-inset-bottom, 0)); overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; background: #f8fafc; flex: none; order: 8; justify-content: center; }
/* v37 : masquer la chip du focus actif (en mode barre uniquement) */
body:not(.chips-grid) #cap-quick-chips .cap-chip.active { display: none; }
.cap-chip { background: white; border: 1.5px solid #c4b5fd; color: #4c1d95; padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.12s ease, border-color 0.12s ease; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.cap-chip.active { background: #4c1d95; color: white; border-color: #4c1d95; }
/* Composer caché par défaut, révélé via body.show-input */
#screen-capucine-libre .cap-input-v2 { display: none; }
/* v44 2026-06-07 : en mode Autres, composer en position:fixed bas du
   viewport. `margin-top: auto` (v43) ne marchait pas car le screen ne
   garantit pas que les messages prennent toute la place. position:fixed
   est déterministe : il est COLLÉ au bas quel que soit le contenu au-dessus. */
body.show-input #screen-capucine-libre .cap-input-v2 {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0));
}

/* v40 2026-06-07 : en mode Autres (body.show-input), la barre chips bas est
   masquée — les 3 modules Pointage/Chiffrage/Facturation sont accessibles
   depuis le drawer gauche (section Modules). Seul le composer reste visible. */
body.show-input #screen-capucine-libre #cap-quick-chips { display: none; }
/* v70 2026-06-07 : sur l'accueil (chips-grid), dès que l'utilisateur focus le
   textarea pour taper, les chips disparaissent pour laisser la place au composer
   qui remonte au-dessus du clavier. */
body.input-focused #screen-capucine-libre #cap-quick-chips { display: none !important; }
/* Et aussi masquer le hero pour ne pas avoir de scroll bizarre */
body.input-focused.chips-grid #screen-capucine-libre .cap-welcome-hero { display: none !important; }
/* v72 2026-06-07 : quand un focus module est actif (pointage / devis / facture),
   masquer les chips du bas. L'utilisateur travaille dans le wizard, pas besoin
   de l'inciter à changer de module. */
body.focus-module-active #screen-capucine-libre #cap-quick-chips { display: none !important; }
/* v76 2026-06-07 : classe sticky "in-conv" — dès qu'on entre en mode conversation
   (1er envoi OU chargement d'une conv depuis Récents), chips + hero masqués
   jusqu'au refresh ↻. */
body.in-conv #screen-capucine-libre #cap-quick-chips { display: none !important; }
body.in-conv #screen-capucine-libre .cap-welcome-hero { display: none !important; }

/* v50 2026-06-07 : au focus du textarea, le composer fixed remonte au-dessus
   du clavier iPhone ET de la barre d'accessoires iOS (~45-50px) qui s'affiche
   par-dessus en PWA Safari pure. Offset constant de 50px ajouté au-dessus de
   env(keyboard-inset-height) ou du fallback 290px. */
body.show-input.input-focused #screen-capucine-libre .cap-input-v2 {
  bottom: calc(env(keyboard-inset-height, 290px) + 50px);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
}

/* v40 — modules dans le drawer (section Modules) */
.cap-drawer-module {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: white;
  border: 1.5px solid #c4b5fd;
  color: #4c1d95;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0.35rem 0;
  text-align: left;
  font-family: inherit;
}
.cap-drawer-module:hover { background: #ede9fe; border-color: #8b5cf6; }
.cap-drawer-module:active { background: #ddd6fe; transform: scale(0.98); }

/* === Mode accueil chips-grid : grille 2x2 agrandie centrale === */
body.chips-grid #screen-capucine-libre #cap-quick-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; padding: 1rem 1.5rem 2.5rem; background: transparent; border-top: none; border-bottom: none; overflow-x: visible; flex-wrap: wrap; }
body.chips-grid .cap-chip { padding: 1.4rem 0.5rem; font-size: 1.05rem; border-radius: 16px; border-width: 2px; min-height: 4.5rem; white-space: normal; }
/* Hero remonté un peu sur l'accueil */
body.chips-grid .cap-welcome-hero { padding: 1.5rem 1rem 0.5rem; gap: 0.5rem; min-height: 0; }
body.chips-grid .cap-welcome-hero img { width: 96px; height: 96px; }
body.chips-grid #screen-capucine-libre #capucine-messages { flex: 0 1 auto; padding: 0; }
/* v47b 2026-06-07 : en mode Autres, hero "Kaoha {user}" remonté en haut.
   Application LARGE (sans dépendance à cap-msgs-empty) + !important pour
   garantir que ni un sélecteur plus spécifique ni un cache PWA partiel
   ne maintiennent le hero centré verticalement. */
/* v47b : hero en haut UNIQUEMENT en mode accueil vide (cap-msgs-empty) */
body.show-input #screen-capucine-libre #capucine-messages.cap-msgs-empty {
  flex: 0 1 auto !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}
/* v52 2026-06-07 : conv en cours (pas cap-msgs-empty) — messages prend toute
   la hauteur ET réserve un padding-bottom = hauteur composer fixed (~110px)
   pour que la fin du message Tikita ne soit pas masquée derrière le composer.
   Sinon le scroll ne pouvait jamais révéler les dernières lignes. */
body.show-input #screen-capucine-libre #capucine-messages:not(.cap-msgs-empty) {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0)) !important;
}
body.show-input .cap-welcome-hero {
  padding: 1.5rem 1rem 0.5rem !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
}
body.show-input .cap-welcome-hero img { width: 96px !important; height: 96px !important; }
.cap-chip:hover { background: #ede9fe; border-color: #8b5cf6; }
.cap-chip:active { background: #ddd6fe; transform: scale(0.96); }

.cap-plus-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 9996; }
/* v16 2026-06-06 : bottom sheet style Claude LLM, par défaut 40vh */
/* v43 2026-06-07 : hauteur par défaut 65vh (au lieu de 40vh) — la modale
   contient maintenant Pointage/Chiffrage/Facturation entre Récents et
   Supprimer, plus de place nécessaire pour éviter de scroller. */
.cap-plus-modal { position: fixed; bottom: 0; left: 0; right: 0; height: 65vh; max-height: 95vh; min-height: 25vh; background: white; z-index: 9997; display: flex; flex-direction: column; box-shadow: 0 -4px 22px rgba(0,0,0,0.18); border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden; transition: height 0.18s ease-out; }
/* Croix de fermeture flottante (en remplacement du header titre) */
.cpm-close-float { position: absolute; top: 0.4rem; right: 0.6rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(0,0,0,0.04); border: none; color: #64748b; font-size: 1.2rem; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; }
.cpm-close-float:active { background: rgba(0,0,0,0.1); }

/* Aperçu pièces jointes au-dessus du textarea (v16) */
.cap-attach-previews { display: flex; gap: 0.45rem; padding: 0.4rem 0.6rem 0.3rem; flex-wrap: wrap; }
.cap-attach-previews.hidden { display: none; }
.cap-attach-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cap-attach-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cap-attach-thumb-icon { font-size: 1.8rem; }
.cap-attach-thumb-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #0f172a; color: white; border: 2px solid white; font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.cap-attach-thumb-loading { font-size: 0.65rem; color: #64748b; }
/* Thumbnail d'image dans un message user */
.cap-msg-attachments { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.cap-msg-attachment { width: 120px; max-width: 60vw; border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; background: white; }
.cap-msg-attachment img { width: 100%; height: 90px; object-fit: cover; display: block; }
.cap-msg-attachment-name { font-size: 0.7rem; padding: 0.25rem 0.4rem; color: #475569; }
.cap-plus-modal.dragging { transition: none; }
.cpm-drag-handle { width: 100%; padding: 0.4rem 0 0.3rem; display: flex; justify-content: center; cursor: grab; touch-action: none; background: white; flex: none; }
.cpm-drag-handle::before { content: ''; display: block; width: 42px; height: 5px; border-radius: 999px; background: #cbd5e1; }
.cpm-drag-handle:active { cursor: grabbing; }

/* 3 cadres horizontaux pour les actions Photo/Galerie/Fichier (style Claude LLM) */
.cpm-attach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 0.9rem 1rem 0.6rem; }
.cpm-attach-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 1rem 0.5rem; cursor: pointer; font-size: 0.78rem; font-weight: 600; color: #0f172a; text-align: center; transition: background 0.12s ease, border-color 0.12s ease; }
.cpm-attach-card:hover { background: #f1f5f9; border-color: #cbd5e1; }
.cpm-attach-card:active { background: #e2e8f0; }
.cpm-attach-card-icon { font-size: 1.6rem; line-height: 1; }
.cpm-attach-card-label { line-height: 1.2; }
.cpm-panel { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.cpm-panel-header { display: flex; align-items: center; padding: 0.8rem 1rem; border-bottom: 1px solid #e2e8f0; background: #f8fafc; gap: 0.5rem; min-height: 3.4rem; }
.cpm-back { background: transparent; border: none; cursor: pointer; color: #6d28d9; font-size: 1.1rem; font-weight: 700; padding: 0.2rem 0.4rem; display: flex; align-items: center; gap: 0.3rem; }
.cpm-title { flex: 1; text-align: center; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.cpm-close { background: transparent; border: none; cursor: pointer; color: #64748b; font-size: 1.3rem; padding: 0.2rem 0.5rem; }
.cpm-list { flex: 1; overflow-y: auto; }
.cpm-row { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.2rem; background: white; border: none; border-bottom: 1px solid #f1f5f9; width: 100%; text-align: left; cursor: pointer; font-size: 1rem; color: #0f172a; }
.cpm-row:hover { background: #f8fafc; }
.cpm-row-icon { font-size: 1.4rem; }
.cpm-row-label { flex: 1; font-weight: 600; }
.cpm-row-chevron { color: #94a3b8; font-size: 1.1rem; }
.cpm-row.danger { color: #dc2626; }
.cpm-row.danger .cpm-row-label { color: #dc2626; font-weight: 700; }

/* Hamburger inline dans la cap-input-row — petit, gris, comme un cap-btn-plus */
.cap-input-row .btn-hamburger-row { padding: 0; gap: 0; flex-direction: column; }
.cap-input-row .btn-hamburger-row .bh-line { display: block; width: 18px; height: 2px; background: #374151; border-radius: 1px; margin: 2px 0; flex: none; }
/* Bouton refresh (nouvelle conv vierge) — ajout 2026-06-06 v6 */
/* Bouton refresh dans le bandeau violet — v7 2026-06-06 :
   cercle blanc semi-transparent qui ressort sur le violet #6d28d9 du header.
   Cohérent avec la couleur du bouton Accueil (blanc) mais visuellement
   identifie comme bouton circulaire d'action. */
.btn-tikita-refresh { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.5); cursor: pointer; color: white; font-size: 1.2rem; padding: 0; line-height: 1; margin-right: 0.4rem; display: flex; align-items: center; justify-content: center; font-weight: 700; transition: background 0.15s ease, transform 0.2s ease; }
.btn-tikita-refresh:hover { background: rgba(255,255,255,0.3); }
.btn-tikita-refresh:active { background: rgba(255,255,255,0.45); transform: rotate(180deg); }

/* === Bouton "Nouvelle conversation" version compacte === */
.cap-drawer-new-small { display: flex; align-items: center; gap: 0.5rem; margin: 0.7rem 0.9rem 0.5rem; padding: 0.55rem 0.85rem; background: #6d28d9; color: white; border: none; border-radius: 10px; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.cap-drawer-new-small:active { background: #5b21b6; }
.cap-drawer-new-small .cdn-icon { font-size: 1rem; }

/* === Composer plage : select compact (remplace input type=time) === */
.cap-comp-plage select { flex: 1; min-width: 90px; padding: 0.45rem 0.55rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.88rem; background: white; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236d28d9' d='M6 8L0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 0.5rem center; padding-right: 1.6rem; }

/* === Drawer — typo Claude.ai-like (plus petit, plus aéré) === */
.cap-drawer { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.cap-drawer-section-head { font-size: 0.68rem; padding: 0.6rem 0.9rem 0.4rem; }
.cap-drawer-item { font-size: 0.85rem; padding: 0.55rem 0.7rem; margin-bottom: 0.25rem; }
.cap-drawer-item .cdi-icon { font-size: 1rem; width: 1.5rem; }
.cap-drawer-recent { padding: 0.55rem 0.7rem; }
.cdr-title { font-size: 0.85rem; }
.cdr-meta { font-size: 0.72rem; }
.cap-drawer-recent-menu { font-size: 1rem; padding: 0 0.35rem; }
.cap-drawer-new-small { font-size: 0.82rem; padding: 0.5rem 0.7rem; margin: 0.5rem 0.7rem 0.4rem; }
.cap-drawer-header { padding: 0.85rem 0.9rem 0.75rem; padding-top: calc(env(safe-area-inset-top, 0) + 0.85rem); }
.cdh-name { font-size: 0.95rem; }

/* === Bouton Aperçu dans bulles Tikita === */
.cap-apercu-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: #6d28d9; color: white; border: none; border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; margin: 0.2rem 0.15rem; font-family: inherit; }
.cap-apercu-btn:active { background: #5b21b6; }

/* === Modale Aperçu 70% in-app === */
.cap-preview-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 11500; display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: fadeIn 0.18s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.cap-preview-modal { background: white; border-radius: 18px 18px 0 0; width: 100%; height: 90vh; max-width: 760px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -10px 30px rgba(0,0,0,0.3); animation: slideUp 0.22s ease-out; transition: height 0.22s ease-out; }
.cap-preview-modal.fullscreen { height: 100vh; border-radius: 0; }
/* v66 2026-07-08 : fenêtre back-office /admin embarquée (liaison directe TIKITA) */
.cap-preview-modal.admin { max-width: 1100px; height: 100vh; border-radius: 0; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cap-preview-modal-head { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; padding: 0.5rem 0.7rem; background: #6d28d9; }
.cap-preview-open-external, .cap-preview-close { background: rgba(255,255,255,0.18); color: white; border: none; border-radius: 8px; width: 2.1rem; height: 2.1rem; font-size: 1rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cap-preview-open-external:active, .cap-preview-close:active { background: rgba(255,255,255,0.3); }
.cap-preview-iframe { width: 100%; flex: 1; border: none; background: white; }

/* === Icône loupe inline (remplace bouton "Aperçu") === */
.cap-apercu-loupe { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; border-radius: 50%; padding: 0; font-size: 0.85rem; cursor: pointer; vertical-align: middle; margin: 0 0.15rem; }
.cap-apercu-loupe:active { background: #ddd6fe; }
/* v58 2026-06-07 : bouton "Télécharger" inline dans une réponse Tikita */
.cap-doc-dl { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; background: #166534; color: #fff; border: none; border-radius: 999px; font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: none; vertical-align: middle; margin: 0 0.15rem; }
.cap-doc-dl:hover { background: #14532d; }
.cap-doc-dl:active { background: #052e16; transform: scale(0.97); }
.cal-icon { line-height: 1; }

/* === Modale aperçu : titre + viewer PDF.js === */
.cap-preview-modal-head { background: #6d28d9; padding: 0.5rem 0.8rem; }
.cap-preview-title { flex: 1; color: white; font-weight: 700; font-size: 0.95rem; }
.cap-preview-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #f3f4f6; padding: 0.6rem; }
.cap-preview-pdf-scroll { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.cap-preview-pdf-canvas { box-shadow: 0 2px 8px rgba(0,0,0,0.15); background: white; max-width: 100%; }
.cap-preview-loading { padding: 2rem; text-align: center; color: #6b7280; }
.cap-preview-error { padding: 1rem; color: #dc2626; text-align: center; }
.cap-preview-html-iframe { width: 100%; height: 100%; min-height: 60vh; border: none; background: white; }
.cap-preview-other { padding: 2rem; text-align: center; }
.cap-preview-fullscreen { background: rgba(255,255,255,0.18); color: white; border: none; border-radius: 6px; width: 1.9rem; height: 1.9rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.cap-preview-fullscreen:active { background: rgba(255,255,255,0.3); }
/* Le bouton fermer existant */

.cap-preview-dl { background: rgba(255,255,255,0.18); color: white; text-decoration: none; border-radius: 6px; width: 1.9rem; height: 1.9rem; font-size: 0.9rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cap-preview-dl:active { background: rgba(255,255,255,0.3); }

/* === Loupe avec libellé inline (extension) === */
.cap-apercu-loupe { width: auto; height: 1.85rem; padding: 0 0.65rem 0 0.4rem; gap: 0.3rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; }
.cap-apercu-loupe .cal-label { font-size: 0.82rem; font-weight: 600; line-height: 1; }
.cap-apercu-loupe .cal-icon { font-size: 0.9rem; }

/* === Widget "Continuer dans le focus ?" === */
.cap-focus-continue {
  margin: 12px 16px 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #f3e8ff 0%, #ede9fe 100%);
  border: 1px solid #c4b5fd;
  border-radius: 12px;
  font-size: 14px;
  color: #4c1d95;
  animation: cfc-fadein 0.25s ease-out;
}
@keyframes cfc-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cap-focus-continue .cfc-q {
  font-weight: 600;
  margin-bottom: 8px;
}
.cap-focus-continue .cfc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cap-focus-continue .cfc-btn {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #a78bfa;
  background: white;
  color: #4c1d95;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.cap-focus-continue .cfc-btn:active { background: #ede9fe; }
.cap-focus-continue .cfc-btn.cfc-yes {
  background: #7c3aed;
  color: white;
  border-color: #7c3aed;
}
.cap-focus-continue .cfc-btn.cfc-yes:active { background: #6d28d9; }

/* === Widget escalade ALEX (V2) === */
.cap-alex-widget {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 14px;
  font-size: 14px;
  color: #1e3a8a;
  animation: caw-fadein 0.3s ease-out;
}
@keyframes caw-fadein {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cap-alex-widget .caw-icon { font-size: 22px; flex: 0 0 auto; }
.cap-alex-widget .caw-body { flex: 1 1 auto; min-width: 0; }
.cap-alex-widget .caw-title { font-weight: 600; margin-bottom: 4px; }
.cap-alex-widget .caw-sub { color: #475569; font-size: 12px; }
.cap-alex-widget .caw-text { margin-top: 6px; line-height: 1.5; color: #1e293b; }
.cap-alex-widget .caw-meta { margin-top: 6px; font-size: 11px; color: #64748b; }
.cap-alex-widget .caw-spinner {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 2px solid #93c5fd; border-top-color: #1e3a8a;
  border-radius: 50%; animation: caw-spin 0.9s linear infinite;
}
@keyframes caw-spin { to { transform: rotate(360deg); } }
.cap-alex-widget.done {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #6ee7b7; color: #064e3b;
}
.cap-alex-widget.error {
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fca5a5; color: #7f1d1d;
}

/* v78 2026-06-07 : Matrix Chat (mission longue autonome) */
/* v87 2026-06-07 : DÉCOUPLAGE de --vvh — sur iOS Safari standalone, --vvh
   oscille à chaque caractère tapé (le clavier prédictif déclenche des resize),
   provoquant un flash de relayout. Utiliser 100dvh natif, qui ne bouge PAS
   au cours de la frappe. Le suivi du clavier passe par body.chat-input-focused
   + position:fixed sur la barre, pas par recalcul de la hauteur du screen. */
#screen-chat { display: flex; flex-direction: column; height: 100dvh; padding: 0; overflow: hidden; background: #f1f5f9; }
@supports not (height: 100dvh) { #screen-chat { height: 100vh; } }
.chat-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-status { padding: 0.4rem 1rem; background: white; color: #64748b; font-size: 0.82rem; text-align: center; border-bottom: 1px solid #e2e8f0; flex: none; }
.chat-status:empty { display: none; }
/* v84 2026-06-07 : bandeau "Connecté en tant que ..." */
.chat-me-label { padding: 0.35rem 0.9rem; background: #ede9fe; color: #4c1d95; font-size: 0.78rem; font-weight: 600; text-align: center; border-bottom: 1px solid #ddd6fe; flex: none; }
.chat-me-label:empty { display: none; }
.chat-messages { flex: 1; overflow-y: auto; padding: 0.7rem 0.7rem 1rem; display: flex; flex-direction: column; gap: 0.45rem; -webkit-overflow-scrolling: touch; }
.chat-msg { display: flex; flex-direction: column; max-width: 78%; gap: 0.15rem; }
.chat-msg.me { align-self: flex-end; align-items: flex-end; }
.chat-msg.other { align-self: flex-start; align-items: flex-start; }
/* v85 2026-06-07 : sender visible pour TOUS les messages (me + other) */
.chat-sender { font-size: 0.72rem; font-weight: 700; padding: 0 0.35rem; }
.chat-msg.me .chat-sender { color: #6d28d9; text-align: right; }
.chat-msg.other .chat-sender { color: #4c1d95; text-align: left; }
.chat-bubble { padding: 0.55rem 0.8rem; border-radius: 16px; font-size: 0.95rem; line-height: 1.35; word-wrap: break-word; white-space: pre-wrap; }
.chat-msg.me .chat-bubble { background: #6d28d9; color: white; border-bottom-right-radius: 4px; }
.chat-msg.other .chat-bubble { background: white; color: #0f172a; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
.chat-time { font-size: 0.7rem; color: #94a3b8; padding: 0 0.4rem; }
.chat-input-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom, 0)); background: white; border-top: 1px solid #e2e8f0; flex: none; }
.chat-input { flex: 1; padding: 0.7rem 1rem; border: 1px solid #d1d5db; border-radius: 999px; font-size: 1rem; font-family: inherit; outline: none; }
.chat-input:focus { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,0.15); }
.chat-send { width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #6d28d9; color: white; border: none; font-size: 1.1rem; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; }
.chat-send:active { background: #4c1d95; transform: scale(0.96); }

/* v87/v88 2026-06-07 : composer flottant au-dessus du clavier iOS PWA standalone
   et de sa barre d'accessoires (chevrons Précédent/Suivant + OK, ~44-50px).
   Le pattern Tikita masque la barre d'accessoires via tabindex=-1, mais on
   garde une marge de sécurité dans le fallback (340px = clavier 290 + barre 50).
   Sur iOS 17.4+, env(keyboard-inset-height) couvre clavier seul ; on ajoute
   une marge interne 44px pour la barre d'accessoires si elle reste visible. */
body.chat-input-focused .chat-input-row {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(env(keyboard-inset-height, 290px) + 44px);
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}
body.chat-input-focused #chat-messages {
  padding-bottom: calc(env(keyboard-inset-height, 290px) + 44px + 72px);
}

/* ============================ v86 2026-06-07 ============================ */
/* Bandeau room ouverte (sous le topbar MATRIX) */
.chat-room-bar { padding: 0.35rem 0.9rem; background: #f1f5f9; color: #334155; font-size: 0.82rem; display: flex; gap: 0.4rem; align-items: center; border-bottom: 1px solid #e2e8f0; flex: none; }
.chat-room-bar-label { color: #64748b; }
.chat-room-bar-name { font-weight: 700; color: #1e293b; }

/* v92 2026-06-07 : barre de recherche permanente (sous topbar en vue conv) */
.chat-search-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; flex: none; }
.chat-search-input { flex: 1; padding: 0.5rem 0.9rem; border: 1px solid #cbd5e1; border-radius: 999px; font-size: 0.92rem; outline: none; background: white; }
.chat-search-input:focus { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,0.15); }
.chat-search-close { background: transparent; border: none; font-size: 1rem; color: #64748b; cursor: pointer; padding: 0.4rem 0.6rem; }
.chat-search-close:active { color: #1e293b; }
.chat-msg.search-hidden { display: none !important; }
.chat-msg.search-hit .chat-bubble { box-shadow: 0 0 0 2px #6d28d9; }

/* Drawer "+" Matrix (slide depuis la DROITE — opposé de cap-apps-drawer qui vient de gauche) */
.matrix-plus-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 86vw; max-width: 340px; background: white; box-shadow: -4px 0 22px rgba(0,0,0,0.18); z-index: 9991; transform: translateX(100%); transition: transform 0.25s ease-out; display: flex; flex-direction: column; overflow: hidden; padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
.matrix-plus-drawer:not(.hidden) { transform: translateX(0); }

/* Sheets bottom-up "Mes conversations" et "Nouvelle conversation" */
.matrix-rooms-sheet, .matrix-new-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; background: white; box-shadow: 0 -8px 32px rgba(0,0,0,0.22); z-index: 9991; border-radius: 18px 18px 0 0; transform: translateY(100%); transition: transform 0.25s ease-out; display: flex; flex-direction: column; overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0); }
.matrix-rooms-sheet:not(.hidden), .matrix-new-sheet:not(.hidden) { transform: translateY(0); }
.matrix-rooms-sheet .cap-apps-drawer-header, .matrix-new-sheet .cap-apps-drawer-header { border-radius: 18px 18px 0 0; }

/* v89/v91 2026-06-07 : items "Discussions" style WhatsApp (sans avatar)
   v91 : padding vertical agrandi + line-height augmenté pour bien voir les 2 lignes */
.matrix-room-item { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1.15rem 1rem; background: white; border: none; border-bottom: 1px solid #f1f5f9; width: 100%; text-align: left; cursor: pointer; font-size: 0.95rem; color: #0f172a; min-height: 78px; }
.matrix-room-item:active { background: #f1f5f9; }
.matrix-room-item.active { background: #ede9fe; }
.matrix-room-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.matrix-room-item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.matrix-room-item-name { font-weight: 600; color: #1e293b; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.matrix-room-item-date { font-size: 0.75rem; color: #64748b; flex: none; white-space: nowrap; }
.matrix-room-item.unread .matrix-room-item-date { color: #6d28d9; font-weight: 700; }
.matrix-room-item-last { font-size: 0.88rem; color: #64748b; line-height: 1.4; min-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.matrix-room-item.unread .matrix-room-item-last { color: #1e293b; font-weight: 600; }
.matrix-room-item-last-author { font-weight: 600; color: #475569; }
.matrix-room-item-last-empty { font-style: italic; color: #94a3b8; }

/* v89 : menu contextuel "Supprimer le message" (légère animation) */
.chat-msg.me .chat-bubble { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chat-msg.redacted .chat-bubble { font-style: italic; opacity: 0.65; background: #e5e7eb !important; color: #6b7280 !important; }

/* v90/v101 2026-06-08 : écran d'accueil Matrix = 3 cartes contacts */
.chat-discussions-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-discussions-list { flex: 1; overflow-y: auto; background: white; -webkit-overflow-scrolling: touch; }

/* v101 — Grille 3 cartes contacts */
.chat-contacts-grid { flex: 1; display: flex; flex-direction: column; gap: 0.9rem; padding: 1rem; background: #f1f5f9; overflow-y: auto; }
.chat-contact-card { background: white; border-radius: 18px; padding: 1.1rem 1rem; box-shadow: 0 2px 8px rgba(15,23,42,0.06); display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.chat-contact-card-name { font-size: 1.4rem; font-weight: 800; color: #1e293b; letter-spacing: 0.05em; }
.chat-contact-card-actions { display: flex; gap: 1.5rem; }
.chat-contact-action { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: none; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.chat-contact-action.chat { background: #2563eb; color: white; }
.chat-contact-action.chat:active { background: #1d4ed8; transform: scale(0.95); }
.chat-contact-action.call { background: #d1fae5; color: #047857; }
.chat-contact-action.call:active { background: #6ee7b7; transform: scale(0.95); }

/* v101 — Écran "Liste conversations avec X" */
.chat-conv-list-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: white; }
.chat-conv-list-toolbar { display: flex; gap: 0.4rem; padding: 0.6rem 0.7rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; align-items: center; flex: none; }
.chat-conv-list-toolbar .chat-search-input { flex: 1; padding: 0.45rem 0.85rem; font-size: 0.9rem; }
.chat-conv-list-tag-btn { background: white; border: 1px solid #cbd5e1; padding: 0.45rem 0.7rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: #475569; cursor: pointer; white-space: nowrap; }
.chat-conv-list-tag-btn.active { background: #6d28d9; color: white; border-color: #6d28d9; }
.chat-conv-list-new { background: #6d28d9; color: white; border: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.3rem; font-weight: 700; cursor: pointer; flex: none; box-shadow: 0 2px 5px rgba(109,40,217,0.3); }
.chat-conv-list-new:active { background: #4c1d95; transform: scale(0.95); }
.chat-conv-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 1rem; background: white; border: none; border-bottom: 1px solid #f1f5f9; width: 100%; text-align: left; cursor: pointer; font-size: 0.95rem; color: #0f172a; }
.chat-conv-item:active { background: #f1f5f9; }
.chat-conv-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.chat-conv-item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.chat-conv-item-title { font-weight: 600; color: #1e293b; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.chat-conv-item-date { font-size: 0.72rem; color: #64748b; flex: none; white-space: nowrap; }
.chat-conv-item-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.chat-conv-item-tag { background: #ede9fe; color: #4c1d95; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.chat-conv-item-last { font-size: 0.82rem; color: #64748b; line-height: 1.3; min-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* v101 — Modal nouvelle conversation + édition conv */
.matrix-newconv-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: white; padding: 1.3rem; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); z-index: 9995; width: 90vw; max-width: 360px; max-height: 90vh; overflow-y: auto; }

/* v101 — Dropdown picker tags */
.matrix-tag-picker { position: absolute; background: white; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); z-index: 9994; padding: 0.4rem; min-width: 180px; max-height: 250px; overflow-y: auto; }
.matrix-tag-picker-item { display: block; width: 100%; padding: 0.5rem 0.8rem; background: white; border: none; text-align: left; border-radius: 6px; font-size: 0.88rem; color: #1e293b; cursor: pointer; }
.matrix-tag-picker-item:hover, .matrix-tag-picker-item.active { background: #ede9fe; color: #4c1d95; font-weight: 600; }

/* v95 2026-06-08 : panneau diagnostic Matrix (état micro / notifs / push) */
.chat-diagnostic { background: #fef3c7; border-bottom: 1px solid #fde68a; padding: 0.6rem 0.9rem; font-size: 0.78rem; color: #78350f; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.chat-diagnostic:empty { display: none; }
.chat-diag-badge { padding: 0.18rem 0.5rem; border-radius: 6px; font-weight: 600; font-size: 0.72rem; background: white; border: 1px solid #fcd34d; }
.chat-diag-badge.ok { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.chat-diag-badge.ko { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.chat-diag-btn { background: #6d28d9; color: white; border: none; padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.chat-diag-btn:active { background: #4c1d95; }

/* v101/v103 : 3 vues + boutons contextuels selon view */
/* Bouton 📞 caché en mode list (remplacé par 🕐 historique) ; bouton 🕐 visible uniquement en list */
#screen-chat[data-view="list"] #btn-chat-call-direct { display: none; }
#screen-chat[data-view="list"] #btn-chat-history { display: flex !important; align-items: center; justify-content: center; }
#screen-chat[data-view="convlist"] #btn-chat-call-direct,
#screen-chat[data-view="convlist"] #btn-chat-history { display: none; }
#screen-chat[data-view="conv"] #btn-chat-history { display: none; }

#screen-chat[data-view="list"] #chat-conv-view,
#screen-chat[data-view="list"] #chat-conv-list-view { display: none; }
#screen-chat[data-view="list"] #chat-back-to-list,
#screen-chat[data-view="list"] #btn-chat-conv-menu { display: none; }

#screen-chat[data-view="convlist"] #chat-discussions-view,
#screen-chat[data-view="convlist"] #chat-conv-view { display: none; }
#screen-chat[data-view="convlist"] #btn-chat-apps,
#screen-chat[data-view="convlist"] #btn-chat-conv-menu { display: none; }
#screen-chat[data-view="convlist"] #chat-back-to-list { display: flex; align-items: center; justify-content: center; }
#screen-chat[data-view="convlist"] #chat-conv-list-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

#screen-chat[data-view="conv"] #chat-discussions-view,
#screen-chat[data-view="conv"] #chat-conv-list-view { display: none; }
#screen-chat[data-view="conv"] #btn-chat-apps { display: none; }
#screen-chat[data-view="conv"] #chat-back-to-list { display: flex; align-items: center; justify-content: center; }
#screen-chat[data-view="conv"] #btn-chat-conv-menu { display: flex; align-items: center; justify-content: center; }

/* Nouvelle conversation : participants */
.matrix-new-participants { display: flex; flex-direction: column; gap: 0.4rem; }
.matrix-new-participant { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.85rem; border: 1.5px solid #e2e8f0; border-radius: 12px; background: white; cursor: pointer; font-size: 0.95rem; color: #1e293b; }
.matrix-new-participant.selected { border-color: #6d28d9; background: #ede9fe; }
.matrix-new-participant input { accent-color: #6d28d9; }

/* Overlay appel audio */
.matrix-call-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.92); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top,0) 1rem env(safe-area-inset-bottom,0); }
.matrix-call-card { background: white; border-radius: 22px; padding: 2.5rem 1.5rem 2rem; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.matrix-call-state { font-size: 0.85rem; color: #6d28d9; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.matrix-call-peer { font-size: 1.4rem; font-weight: 700; color: #0f172a; margin: 0.6rem 0 0.3rem; }
.matrix-call-timer { font-size: 1rem; color: #64748b; font-variant-numeric: tabular-nums; margin-bottom: 1.6rem; }
.matrix-call-actions { display: flex; justify-content: center; gap: 1.5rem; }
.matrix-call-btn { width: 4rem; height: 4rem; border-radius: 50%; border: none; font-size: 1.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.matrix-call-accept { background: #16a34a; color: white; }
.matrix-call-accept:active { background: #15803d; transform: scale(0.95); }
.matrix-call-hangup { background: #dc2626; color: white; }
.matrix-call-hangup:active { background: #b91c1c; transform: scale(0.95); }
.matrix-call-overlay.outgoing #matrix-call-accept { display: none; }
.matrix-call-overlay.incoming #matrix-call-timer { display: none; }
.matrix-call-overlay.connected #matrix-call-accept { display: none; }

/* v105/v107 2026-06-08 : accueil refondu — fond violet + safe-area iOS (notch) */
#screen-home { background: #1f2937 !important; min-height: 100dvh; padding: 0; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
#screen-home .topbar { background: transparent; color: white; border-bottom: none; padding: 1rem 1rem 0.6rem; }
#screen-home .topbar h1 { color: white; font-weight: 800; letter-spacing: 0.04em; }
#screen-home .topbar p.sub { color: #ddd6fe; }
#screen-home .btn-refresh, #screen-home .btn-logout { background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.3); }
#screen-home .btn-refresh:active, #screen-home .btn-logout:active { background: rgba(255,255,255,0.25); }
.home-3cards { flex: 1; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.2rem 1.1rem; align-items: stretch; justify-content: center; }
.home-card { background: rgba(255,255,255,0.10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,0.4); border-radius: 22px; padding: 1.7rem 1.2rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; cursor: pointer; transition: transform 0.12s, background 0.12s; min-height: 7rem; box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.home-card:active { transform: scale(0.97); background: rgba(255,255,255,0.18); }
.home-card-icon { font-size: 2.4rem; line-height: 1; }
.home-card-title { color: white; font-weight: 800; font-size: 1.25rem; letter-spacing: 0.08em; text-align: center; }
.home-card-call { background: linear-gradient(135deg, rgba(16,185,129,0.85), rgba(5,150,105,0.85)); border-color: rgba(255,255,255,0.6); }
.home-card-call:active { background: linear-gradient(135deg, rgba(16,185,129,0.95), rgba(5,150,105,0.95)); }
.home-foot { color: #c4b5fd; text-align: center; padding: 0.8rem; font-size: 0.78rem; }

/* v108 2026-06-08 : bouton logo "Accueil" remplace hamburger dans Matrix + Tikita topbar */
.btn-topbar-home { background: transparent; border: none; cursor: pointer; padding: 0.2rem 0.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-width: 3.4rem; height: 2.8rem; }
.btn-topbar-home:active { opacity: 0.65; }
.btn-topbar-home img { width: 1.7rem; height: 1.7rem; object-fit: contain; display: block; }
.btn-topbar-home-label { color: white; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; }

/* v109 : SVG pelle hydraulique → couleur blanche via filter (non pixellisé) */
.btn-topbar-home img { filter: brightness(0) invert(1); width: 2rem; height: 2rem; }

/* v110 : logo SVG combiné pelle+ACCUEIL (couleurs natives jaune/noir/blanc, pas de filter) */
.btn-topbar-home img.btn-topbar-home-svg { filter: none !important; width: 3.2rem; height: 4rem; }
.btn-topbar-home { min-width: 3.6rem; height: 4.2rem; }

/* v111 : logo PNG icon-512 direct (couleurs natives) + ACCUEIL blanc dessous */
.btn-topbar-home img { filter: none !important; width: 2.2rem; height: 2.2rem; object-fit: contain; }
.btn-topbar-home { min-width: 3.4rem; height: 3.4rem; padding: 0.15rem 0.35rem; }

/* v112 : pelle hydraulique transparente + agrandie */
.btn-topbar-home img { filter: none !important; width: 3rem !important; height: 3rem !important; object-fit: contain; }
.btn-topbar-home { min-width: 3.6rem !important; height: 4rem !important; padding: 0.15rem 0.3rem !important; }
.btn-topbar-home-label { font-size: 0.58rem !important; }

/* v113 : pelle hydraulique encore plus grande */
.btn-topbar-home img { width: 4.2rem !important; height: 4.2rem !important; }
.btn-topbar-home { min-width: 4.6rem !important; height: 5.2rem !important; padding: 0.1rem 0.3rem !important; }
.btn-topbar-home-label { font-size: 0.62rem !important; margin-top: 0.1rem; }

/* v114 : bouton trombone + rendu image/file dans le chat + badge non-lu */
.chat-attach { width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #ede9fe; color: #6d28d9; border: none; font-size: 1.2rem; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; }
.chat-attach:active { background: #c4b5fd; transform: scale(0.95); }
.chat-msg .chat-bubble img.chat-img { max-width: 100%; max-height: 320px; border-radius: 12px; display: block; }
.chat-msg .chat-bubble a.chat-file { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); border-radius: 12px; color: inherit; text-decoration: none; font-size: 0.88rem; }
.chat-msg.other .chat-bubble a.chat-file { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }
.chat-file-icon { font-size: 1.5rem; }
.chat-file-info { display: flex; flex-direction: column; }
.chat-file-name { font-weight: 600; }
.chat-file-size { font-size: 0.75rem; opacity: 0.7; }

/* Badge messages non lus sur cartes contacts */
.chat-contact-card-badge { position: absolute; top: 0.6rem; right: 0.8rem; background: #dc2626; color: white; min-width: 1.5rem; height: 1.5rem; border-radius: 999px; padding: 0 0.4rem; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.chat-contact-card { position: relative; }

/* v115 : bouton logo SEUL (sans texte Accueil), bandeau moins large */
.btn-topbar-home { height: 3rem !important; min-width: 3.5rem !important; padding: 0.2rem !important; }
.btn-topbar-home img { width: 2.6rem !important; height: 2.6rem !important; }
.btn-topbar-home-label { display: none !important; }

/* v116 : label trombone cliquable comme un bouton + téléphone vert vif */
label.chat-attach { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
/* Téléphone en haut à droite conversation : vert vif au lieu de l'emoji standard */
#btn-chat-call-direct { background: #16a34a; color: white; border: 2px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.25); width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.1rem !important; display: flex; align-items: center; justify-content: center; padding: 0; }
#btn-chat-call-direct:active { background: #15803d; transform: scale(0.95); }

/* v117 2026-06-08 : rendu uniforme fichier + carousel multi-pièces + modal aperçu */
.chat-file-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; min-width: 240px; max-width: 100%; }
.chat-msg.other .chat-file-row { background: white; border-color: #cbd5e1; }
.chat-file-icon { font-size: 1.4rem; flex: none; }
.chat-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.chat-file-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-file-size { font-size: 0.7rem; opacity: 0.7; }
.chat-file-btn { background: rgba(255,255,255,0.18); color: inherit; border: 1px solid rgba(255,255,255,0.25); width: 2.1rem; height: 2.1rem; border-radius: 50%; font-size: 0.95rem; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; }
.chat-msg.other .chat-file-btn { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.chat-file-btn:active { transform: scale(0.92); }

/* Carousel scrollable pour fichiers consécutifs */
.chat-files-carousel { display: flex; align-items: center; gap: 0.3rem; max-width: 100%; margin: 0.3rem 0; }
.chat-files-carousel.me { align-self: flex-end; }
.chat-files-carousel-inner { display: flex; gap: 0.4rem; overflow-x: auto; scroll-snap-type: x mandatory; max-width: 78vw; padding: 0.2rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chat-files-carousel-inner::-webkit-scrollbar { display: none; }
.chat-files-carousel-inner .chat-msg { scroll-snap-align: start; flex: none; max-width: 75%; }
.chat-files-chevron { background: rgba(255,255,255,0.85); border: 1px solid #cbd5e1; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: 1.1rem; cursor: pointer; color: #475569; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 0; line-height: 1; }
.chat-files-chevron:active { transform: scale(0.92); }

/* Modal aperçu plein écran */
#chat-file-preview-content img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
#chat-file-preview-content embed { width: 100%; height: 100%; min-height: 70vh; background: white; border-radius: 8px; }

/* v118 2026-06-08 : rendu pièces jointes style WhatsApp + suppression carousel buggé */
/* Désactive tout carousel précédemment créé */
.chat-files-carousel, .chat-files-chevron { display: none !important; }
.chat-msg.in-carousel { display: block !important; }

/* Images : vignette directe dans la bulle (WhatsApp style) */
.chat-img-thumb { max-width: 100%; max-height: 280px; width: auto; height: auto; border-radius: 12px; display: block; cursor: pointer; background: rgba(255,255,255,0.08); min-width: 120px; min-height: 80px; }
.chat-msg.me .chat-bubble { padding: 0.3rem; }
.chat-msg.other .chat-bubble { padding: 0.3rem; }
.chat-msg.me .chat-bubble:has(.chat-img-thumb), .chat-msg.other .chat-bubble:has(.chat-img-thumb) { background: transparent !important; border: none !important; padding: 0; }

/* Fichiers : ligne compacte WhatsApp */
.chat-file-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.7rem; background: rgba(255,255,255,0.12); border-radius: 10px; min-width: 200px; max-width: 280px; cursor: pointer; }
.chat-msg.other .chat-file-row { background: #f8fafc; }
.chat-file-icon { font-size: 1.6rem; flex: none; opacity: 0.85; }
.chat-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.chat-file-name { font-weight: 600; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-file-size { font-size: 0.68rem; opacity: 0.65; }
.chat-file-download { background: transparent; border: none; font-size: 1.1rem; cursor: pointer; padding: 0.3rem; opacity: 0.7; color: inherit; flex: none; }
.chat-file-download:active { opacity: 1; transform: scale(0.92); }
.chat-file-row:active { background: rgba(255,255,255,0.18); }
.chat-msg.other .chat-file-row:active { background: #e2e8f0; }

/* v118 : en mode CONV, remplace le téléphone par le logo pelle = retour accueil */
#screen-chat[data-view="conv"] #btn-chat-call-direct { display: none !important; }
#screen-chat[data-view="conv"] #btn-chat-home-right { display: flex !important; }

/* v118 : en mode CONVLIST, le téléphone vert est visible */
#screen-chat[data-view="convlist"] #btn-chat-call-direct { display: flex !important; }
#screen-chat[data-view="convlist"] #btn-chat-home-right { display: none !important; }

/* En mode LIST, ni l'un ni l'autre */
#screen-chat[data-view="list"] #btn-chat-home-right { display: none !important; }

/* Bouton pelle à droite (retour accueil) */
#btn-chat-home-right { background: transparent; border: none; cursor: pointer; padding: 0.2rem; width: 3.2rem; height: 3rem; align-items: center; justify-content: center; }
#btn-chat-home-right img { width: 2.6rem; height: 2.6rem; object-fit: contain; }

/* v119 2026-06-08 : miniatures pièces jointes UNIFORMES (carrées) + aperçu 70% */
/* Masque tout l'ancien rendu (vignettes images grosses, file-row, chevrons) */
.chat-img-thumb, .chat-file-row, .chat-files-carousel, .chat-files-chevron, .chat-file-download { display: none !important; }

/* Nouveau rendu uniforme : carré 110x110 avec icône/miniature + nom dessous */
.chat-attachment { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.5rem; background: rgba(255,255,255,0.12); border-radius: 12px; cursor: pointer; width: 110px; max-width: 100%; }
.chat-msg.other .chat-attachment { background: white; border: 1px solid #e2e8f0; }
.chat-attachment:active { transform: scale(0.96); }
.chat-attachment-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; background: rgba(0,0,0,0.15); display: block; }
.chat-attachment-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: rgba(255,255,255,0.18); border-radius: 8px; }
.chat-msg.other .chat-attachment-icon { background: #f1f5f9; }
.chat-attachment-name { font-size: 0.7rem; font-weight: 600; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }

/* Bulle compacte autour de l'attachment */
.chat-msg .chat-bubble:has(.chat-attachment) { padding: 0.3rem !important; background: transparent !important; border: none !important; }

/* Modal aperçu : contenu à 70% de la zone (laisse l'air autour) */
#chat-file-preview-content img { max-width: 70%; max-height: 70%; object-fit: contain; border-radius: 8px; }
#chat-file-preview-content embed { width: 70%; height: 70%; min-height: 60vh; background: white; border-radius: 8px; }

/* v121 2026-06-08 : aperçu réutilise modal Tikita à 80vh max */
.cap-preview-modal { height: 80vh !important; max-height: 80vh !important; }
/* Cache ancien modal chat-file-preview qui ne sert plus */
#chat-file-preview-modal { display: none !important; }


/* v131 pointage wizard */
.pointage-progress { display:flex; justify-content:space-around; gap:0.4rem; padding:0.6rem; background:#f8fafc; border-radius:0.5rem; margin-bottom:0.8rem; font-size:0.78rem; }
.pp-item { color:#64748b; }
.pp-item.done { color:#16a34a; font-weight:600; }
.pp-item.current { color:#2563eb; font-weight:700; }
.pp-status { font-size:1rem; }
.pointage-chantier-toggle { display:flex; gap:0.7rem; }
.pc-btn { flex:1; padding:1rem; border:2px solid #cbd5e1; background:#fff; border-radius:0.6rem; cursor:pointer; font-size:0.95rem; font-weight:600; color:#0f172a; }
.pc-btn.selected { border-color:#2563eb; background:#dbeafe; color:#1d4ed8; }
.pc-sub { font-weight:400; font-size:0.78rem; opacity:0.75; }
#pointage-recap-table { background:#fff; border:1px solid #e2e8f0; border-radius:0.4rem; overflow:hidden; font-size:0.85rem; }
#pointage-recap-table table { width:100%; border-collapse:collapse; }
#pointage-recap-table th { background:#f1f5f9; color:#0f172a; font-weight:700; padding:0.4rem; text-align:left; border-bottom:1px solid #e2e8f0; }
#pointage-recap-table td { padding:0.4rem; border-bottom:1px solid #f1f5f9; font-family: -apple-system, monospace; }
#pointage-recap-table tr.total td { font-weight:700; background:#fef3c7; }


/* v131 sprint2 JALON B : badge nature du jour */
.pointage-nature-badge { display:inline-block; margin-top:0.5rem; padding:0.3rem 0.8rem; border-radius:0.4rem; font-size:0.82rem; font-weight:600; }
.pointage-nature-badge.nat-j { background:#f1f5f9; color:#64748b; }
.pointage-nature-badge.nat-dimanche { background:#fef3c7; color:#92400e; }
.pointage-nature-badge.nat-ferie { background:#fee2e2; color:#b91c1c; }


/* v131 sprint3 JALON I : correction pointage */
.correction-batch-row { background:#fff; border:1px solid #e2e8f0; border-radius:0.4rem; padding:0.7rem; margin-bottom:0.5rem; }
.btn-correction-pick { background:#0ea5e9; color:#fff; border:none; padding:0.4rem 0.8rem; border-radius:0.3rem; margin-top:0.5rem; cursor:pointer; font-size:0.85rem; font-weight:600; }
.btn-correction-pick:hover { background:#0284c7; }


/* v131 post-revue D : boutons en conge + modal */
.cap-sal-wrap { display:flex; flex-direction:column; gap:0.3rem; }
.cap-sal-conge { background:transparent; color:#0ea5e9; border:1px dashed #0ea5e9; border-radius:0.4rem; padding:0.3rem; font-size:0.8rem; cursor:pointer; }
.cap-sal-conge:hover { background:#e0f2fe; }
.conge-modal { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9000; display:flex; align-items:center; justify-content:center; padding:1rem; }
.conge-modal.hidden { display:none; }
.conge-modal-box { background:#fff; border-radius:0.6rem; width:100%; max-width:24rem; padding:1.2rem; }
.conge-modal-title { font-weight:700; font-size:1.1rem; color:#0f172a; margin-bottom:0.5rem; }
.conge-modal-salarie { color:#475569; font-size:0.9rem; margin-bottom:0.8rem; }
.conge-modal-type { display:flex; flex-direction:column; gap:0.4rem; }
.conge-type-btn { padding:0.7rem; border:2px solid #cbd5e1; background:#fff; border-radius:0.4rem; cursor:pointer; font-weight:600; color:#0f172a; }
.conge-type-btn.selected { border-color:#2563eb; background:#dbeafe; color:#1d4ed8; }
.conge-modal-dates { margin-top:0.8rem; display:flex; flex-direction:column; gap:0.5rem; }
.conge-modal-dates label { font-size:0.85rem; color:#475569; }
.conge-modal-dates input { width:100%; padding:0.5rem; border:1px solid #cbd5e1; border-radius:0.35rem; font-size:1rem; }
.conge-modal-validate { padding:0.7rem; background:#16a34a; color:#fff; border:none; border-radius:0.4rem; font-weight:700; cursor:pointer; }
.conge-modal-cancel { margin-top:0.6rem; width:100%; padding:0.5rem; background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; border-radius:0.35rem; cursor:pointer; }
.conge-modal-dates.hidden { display:none !important; }


/* v131 post-revue 14 : home cards colors distinctes (accueil Tahauku-app) */
.home-card-ia { background: linear-gradient(135deg, rgba(124,58,237,0.85), rgba(91,33,182,0.85)); border-color: rgba(255,255,255,0.6); }
.home-card-ia:active { background: linear-gradient(135deg, rgba(124,58,237,0.95), rgba(91,33,182,0.95)); }
.home-card-chat { background: linear-gradient(135deg, rgba(37,99,235,0.85), rgba(29,78,216,0.85)); border-color: rgba(255,255,255,0.6); }
.home-card-chat:active { background: linear-gradient(135deg, rgba(37,99,235,0.95), rgba(29,78,216,0.95)); }
.home-card-rh { background: linear-gradient(135deg, rgba(13,148,136,0.85), rgba(15,118,110,0.85)); border-color: rgba(255,255,255,0.6); }
.home-card-rh:active { background: linear-gradient(135deg, rgba(13,148,136,0.95), rgba(15,118,110,0.95)); }


/* v131 post-revue 15 chat composer v2 — style TIKITA */
.chat-input-row-v2 { flex-direction: column; align-items: stretch; gap: 0.4rem; padding: 0.5rem 0.7rem calc(0.5rem + env(safe-area-inset-bottom, 0)); }
.chat-input-full { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid #d1d5db; border-radius: 12px; font-size: 1rem; outline: none; background: white; }
.chat-input-full:focus { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,0.15); }
.chat-input-actions { display: flex; align-items: center; gap: 0.5rem; }
.chat-plus { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #6d28d9; color: white; border: none; font-size: 1.4rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.chat-plus:active { background: #4c1d95; transform: scale(0.95); }
.chat-send-v2 { margin-left: auto; }
.chat-send-v2.hidden { display: none !important; }
#chat-ged-drawer.hidden, #chat-plus-sheet.hidden, #chat-plus-backdrop.hidden, #chat-ged-backdrop.hidden, #chat-hamburger-backdrop.hidden, #chat-hamburger-sheet.hidden, #chat-archives-backdrop.hidden, #chat-archives-sheet.hidden { display: none !important; }
.ged-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem; border-radius: 0.4rem; cursor: pointer; border: 1px solid transparent; }
.ged-item:hover { background: #f8fafc; border-color: #e2e8f0; }
.ged-item-thumb { width: 3rem; height: 3rem; border-radius: 0.4rem; object-fit: cover; flex: none; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.ged-item-body { flex: 1; min-width: 0; }
.ged-item-name { font-size: 0.88rem; color: #0f172a; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ged-item-meta { font-size: 0.78rem; color: #64748b; }


/* v131 post-revue 16 : focus pointage masque composer */
body.focus-pointage #screen-capucine-libre .cap-input-v2 { display: none !important; }




/* v131 post-revue 27 : badge rouge nombre messages non lus sur carte MATRIX */
.home-card-badge { position: absolute; top: 0.6rem; right: 0.8rem; background: #dc2626; color: white; min-width: 1.5rem; height: 1.5rem; border-radius: 999px; padding: 0 0.4rem; font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.25); border: 2px solid white; line-height: 1; }


/* v131 post-revue 30 : login above keyboard iOS PWA */
#screen-login { display: flex; flex-direction: column; justify-content: flex-start; padding-top: env(safe-area-inset-top, 0); min-height: 100dvh; }
#screen-login .login-wrap { padding-bottom: max(2rem, env(keyboard-inset-height, 0px)); transition: padding-bottom 0.2s; }
body.login-input-focused #screen-login { justify-content: flex-start !important; }
body.login-input-focused #screen-login .login-wrap { padding-top: 1rem; }


/* v131 post-revue 31 : topbar MATRIX cohérente avec la carte MATRIX (bleu gradient) */
#screen-chat .capucine-topbar { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; }


/* v131 post-revue 35 : badge nombre messages non lus sur boutons chat des contacts MATRIX */
.chat-contact-action.chat { position: relative; overflow: visible; }
/* v131 post-revue 36 : pastille cohérente avec .home-card-badge (gros cercle qui survole) */
.chat-contact-badge { position: absolute; top: -0.5rem; right: -0.5rem; background: #dc2626; color: white; min-width: 1.5rem; height: 1.5rem; border-radius: 999px; padding: 0 0.4rem; font-size: 0.78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.25); border: 2px solid white; line-height: 1; }
/* v131 post-revue 36 : pastille sur chaque ligne de conversation (liste convs d'un contact) */
.chat-conv-item { position: relative; }
.chat-conv-item-badge { position: absolute; top: 0.7rem; right: 0.8rem; background: #dc2626; color: white; min-width: 1.4rem; height: 1.4rem; border-radius: 999px; padding: 0 0.35rem; font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); border: 2px solid white; line-height: 1; }