/* Structure et dimensions dérivées des layers de messagerie TrackerVue. */
:root[data-theme="dark"] { --tkrvue-layer-bg:#111827;--tkrvue-layer-surface-bg:#1e293b;--tkrvue-layer-section-bg:#1e293b;--tkrvue-header-bg:#1e293b; }
:root[data-theme="dark"] .messaging-app .secondary-action,
:root[data-theme="dark"] .messaging-app .install-onboarding-icon { color:color-mix(in srgb,var(--tkrvue-accent) 45%,white); }
html, body.messaging-app { margin:0; min-height:100%; background:var(--tkrvue-layer-bg); color:var(--tkrvue-text);font-family:var(--tkrvue-font-family);font-size:var(--tkrvue-font-size-effective);line-height:1.35; }
html, body.messaging-app { height:100%;min-height:0;overflow:hidden; }
.messaging-app #app { width:100%;height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden; }
.messaging-app #app > :not(.layout):not(.welcome) { flex-shrink:0; }
.messaging-app [hidden] { display:none !important; }
.messaging-app header.top { background:var(--tkrvue-header-bg);color:var(--tkrvue-header-text); border-bottom:1px solid var(--tkrvue-border); display:flex; gap:10px; align-items:center; min-height:58px;box-sizing:border-box;padding:8px 16px; flex-wrap:wrap;box-shadow:0 1px 3px rgba(15,23,42,.08); }
.messaging-app .messaging-brand { display:flex;align-items:center;gap:12px;min-width:0; }
.messaging-app .messaging-brand-logo { width:52px;height:52px;display:grid;place-items:center;flex:0 0 52px;background:#f6faff;border:1px solid color-mix(in srgb,var(--tkrvue-accent) 20%,transparent);border-radius:12px;box-sizing:border-box; }
.messaging-app header.top .messaging-brand-logo img { display:block;width:48px;height:48px;max-width:none;max-height:none;object-fit:contain;object-position:center; }
.messaging-app .messaging-brand h1 { font-weight:600;line-height:1.2; }
.messaging-app h1 { font-size:var(--tkrvue-font-size-title);margin:0; }
.messaging-app .tools { margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.messaging-app header.top .tools > button,.messaging-app header.top .topbar-icon-button { align-self:center;min-height:38px; }
.messaging-app header.top .topbar-icon-button { width:38px;height:38px;color:var(--tkrvue-accent);border-color:color-mix(in srgb,var(--tkrvue-accent) 48%,var(--tkrvue-border)); }
.messaging-app .topbar-action { display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-inline:12px; }
/* Même rôle et couleurs que #logoutButton du template TrackerVue Web. */
.messaging-app header.top #leave { color:#dc2626;border-color:rgba(220,38,38,.55); }
.messaging-app header.top #leave:hover { background:#fee2e2;color:#b91c1c;border-color:#ef4444; }
:root[data-theme="dark"] .messaging-app header.top #leave { color:#f87171;border-color:rgba(248,113,113,.6); }
:root[data-theme="dark"] .messaging-app header.top #leave:hover { background:rgba(127,29,29,.72);color:#fecaca;border-color:#f87171; }
.messaging-app .messaging-preferences { position:fixed;width:340px;min-width:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;padding:14px;background:var(--tkrvue-layer-surface-bg);color:var(--tkrvue-text); }
.messaging-app .messaging-preferences .preferences-panel-header { padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--tkrvue-border); }
.messaging-app .messaging-preferences .preferences-theme-row { margin:0;padding:0;border:0; }
.messaging-app .messaging-preferences legend { padding:4px 0 8px;font-weight:600; }
.messaging-app .messaging-preferences .preferences-theme-row label { flex-direction:row;min-height:38px;padding:4px 8px; }
.messaging-app .messaging-preferences .preferences-theme-row label:hover,.messaging-app .messaging-preferences .preferences-theme-row label:has(input:checked) { background:color-mix(in srgb,var(--tkrvue-accent) 15%,var(--tkrvue-layer-surface-bg));color:var(--tkrvue-text); }
.messaging-app .messaging-preferences input[type=radio] { width:16px;height:16px;min-height:0;accent-color:var(--tkrvue-accent); }
.messaging-app .messaging-font-size { margin:18px 0 0;display:grid;grid-template-columns:1fr auto;gap:10px; }
.messaging-app .messaging-font-size > span { font-weight:600; }
.messaging-app .messaging-font-size output { color:var(--tkrvue-muted);font-variant-numeric:tabular-nums; }
.messaging-app .messaging-font-size input { grid-column:1 / -1;width:100%;padding:0;accent-color:var(--tkrvue-accent); }
.messaging-app .messaging-language { display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--tkrvue-border); }
.messaging-app .messaging-language > span { font-weight:600; }
.messaging-app .messaging-startup { display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--tkrvue-border); }
.messaging-app .messaging-startup h3 { margin:0;font-size:1em; }
.messaging-app .messaging-startup label.check { display:flex;align-items:center;gap:8px; }
.messaging-app .messaging-startup input { width:16px;min-height:16px;accent-color:var(--tkrvue-accent); }
.messaging-app .messaging-language small { line-height:1.35;white-space:normal; }
.messaging-app .messaging-language #language { display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:6px 10px;border:1px solid var(--tkrvue-border);border-radius:6px;background:var(--tkrvue-input-bg);color:var(--tkrvue-input-text); }
.messaging-app #language-current { flex:1;text-align:left; }
.messaging-app .language-caret { display:grid;place-items:center;transform:rotate(-90deg); }
.messaging-app .language-caret svg { width:14px;height:14px; }
.messaging-app .messaging-language .preferences-language-options { position:static;margin-top:6px;max-height:216px;overflow:auto; }
.messaging-app .messaging-language .preferences-language-option { min-height:38px;justify-content:flex-start;font:inherit;text-align:left; }
.messaging-app .messaging-language .preferences-language-option:is(:hover,.active,:focus-visible) { background:color-mix(in srgb,var(--tkrvue-accent) 15%,var(--tkrvue-input-bg));color:var(--tkrvue-input-text); }
.messaging-app .preferences-feedback { display:block;padding:9px 10px;border:1px solid var(--tkrvue-status-info-border);border-radius:6px;background:var(--tkrvue-status-info-bg);color:var(--tkrvue-status-info-text); }
.messaging-app .preferences-feedback[data-state="success"] { border-color:var(--tkrvue-status-success-border);background:var(--tkrvue-status-success-bg);color:var(--tkrvue-status-success-text); }
.messaging-app .preferences-feedback[data-state="warning"] { border-color:var(--tkrvue-status-warning-border);background:var(--tkrvue-status-warning-bg);color:var(--tkrvue-status-warning-text); }
.messaging-app .preferences-feedback[data-state="error"],.messaging-app #confirmation-error { padding:9px 10px;border:1px solid var(--tkrvue-status-error-border);border-radius:6px;background:var(--tkrvue-status-error-bg);color:var(--tkrvue-status-error-text); }
.messaging-app .native-client-update { display:flex;flex-direction:column;margin:4px 0 8px;padding-bottom:12px;border-bottom:1px solid var(--tkrvue-border); }
.messaging-app .native-client-update :is(button,a).primary-action { width:100%;justify-content:center;white-space:normal; }
.messaging-app .native-client-update button.primary-action { background:var(--tkrvue-accent);color:var(--tkrvue-accent-contrast,#fff);border:1px solid var(--tkrvue-accent);border-radius:6px; }
.messaging-app .native-client-update a.primary-action,.messaging-app .client-update-actions a.primary-action { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:8px 12px;box-sizing:border-box;border:1px solid var(--tkrvue-accent);border-radius:6px;background:var(--tkrvue-accent);color:var(--tkrvue-accent-contrast,#fff);font:inherit;text-decoration:none; }
.messaging-app .client-update-notice { display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 16px;padding:16px;border:1px solid var(--tkrvue-status-info-border);border-radius:10px;background:var(--tkrvue-status-info-bg);color:var(--tkrvue-status-info-text); }
.messaging-app .client-update-notice p { margin:5px 0 0; }
.messaging-app .client-update-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0; }
@media(max-width:760px){.messaging-app .client-update-notice { flex-direction:column;align-items:stretch;margin:10px 12px; }.messaging-app .client-update-actions { flex-shrink:1; }.messaging-app .client-update-actions>* { flex:1;justify-content:center; }}
.messaging-app .messaging-confirmation { width:460px;max-width:calc(100vw - 32px);padding:0;border:1px solid var(--tkrvue-border);border-radius:12px;background:var(--tkrvue-layer-surface-bg);color:var(--tkrvue-text);box-shadow:0 20px 60px rgba(15,23,42,.3);font:inherit; }
.messaging-app .messaging-confirmation::backdrop { background:rgba(15,23,42,.42); }
.messaging-app .confirmation-header { display:flex;gap:12px;align-items:center;padding:18px;border-bottom:1px solid var(--tkrvue-border);background:color-mix(in srgb,var(--tkrvue-accent) 8%,var(--tkrvue-layer-surface-bg)); }
.messaging-app .confirmation-header h2 { flex:1; }
.messaging-app .confirmation-header .tkrvue-close-button { align-self:center; }
.messaging-app .confirmation-icon { display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--tkrvue-accent) 12%,var(--tkrvue-layer-surface-bg));color:var(--tkrvue-accent); }
.messaging-app .confirmation-body { padding:6px 20px 12px;line-height:1.5; }
.messaging-app .confirmation-warning { padding:10px;border-radius:7px;background:var(--tkrvue-status-warning-bg);color:var(--tkrvue-status-warning-text);border:1px solid var(--tkrvue-status-warning-border); }
.messaging-app .confirmation-actions { display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--tkrvue-border); }
.messaging-app .confirmation-actions button { min-height:38px;width:auto;flex:0 0 auto;padding:8px 12px;white-space:nowrap; }
.messaging-app .confirmation-actions .danger-action { color:var(--tkrvue-status-error-text);border-color:var(--tkrvue-status-error-border);background:var(--tkrvue-status-error-bg); }
:root[data-theme="dark"] .messaging-app :is(.messaging-confirmation,.messaging-preferences) .tkrvue-close-button { color:var(--tkrvue-status-error-text);border-color:var(--tkrvue-status-error-border); }
@media(max-width:600px) { .messaging-app header.top { padding:10px 12px;gap:10px; }.messaging-app .messaging-brand { gap:8px; }.messaging-app .messaging-brand h1 { max-width:150px; }.messaging-app header.top button.topbar-action { width:38px;padding:0; }.messaging-app .topbar-action > span { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }.messaging-app .tools { gap:6px; } }
.messaging-app .notice { padding:10px 20px; background:var(--tkrvue-status-warning-bg); color:var(--tkrvue-status-warning-text);border-bottom:1px solid var(--tkrvue-status-warning-border); }
.messaging-app .install-onboarding { margin:12px 20px 0;overflow:hidden;border-left:4px solid var(--tkrvue-accent); }
.messaging-app .install-onboarding > summary { padding:14px;display:flex;gap:14px;align-items:center;cursor:pointer;list-style:none;background:color-mix(in srgb,var(--tkrvue-topbar-panel-bg) 46%,var(--tkrvue-layer-surface-bg)); }
.messaging-app .install-onboarding > summary::-webkit-details-marker { display:none; }
.messaging-app .install-onboarding-icon { width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--tkrvue-accent);background:color-mix(in srgb,var(--tkrvue-accent) 12%,var(--tkrvue-layer-surface-bg)); }
.messaging-app .install-onboarding-icon svg { width:23px;height:23px; }
.messaging-app .install-onboarding-copy { min-width:0;display:flex;flex-direction:column;gap:3px; }
.messaging-app .install-onboarding-copy strong { font-size:1.05em; }
.messaging-app .install-onboarding-copy small { color:var(--tkrvue-muted); }
.messaging-app .install-onboarding-chevron { margin-left:auto;display:grid;place-items:center;transform:rotate(-90deg);transition:transform .18s ease;color:var(--tkrvue-muted); }
.messaging-app .install-onboarding[open] .install-onboarding-chevron { transform:rotate(90deg); }
.messaging-app .install-onboarding-body { padding:14px;border-top:1px solid var(--tkrvue-border); }
.messaging-app .install-options { display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:12px; }
.messaging-app .install-option { padding:14px;border:1px solid var(--tkrvue-border);border-radius:8px;display:flex;flex-direction:column;gap:11px;background:var(--tkrvue-layer-section-bg); }
.messaging-app .install-option.is-recommended { border-color:color-mix(in srgb,var(--tkrvue-accent) 62%,var(--tkrvue-border));box-shadow:inset 3px 0 0 var(--tkrvue-accent); }
.messaging-app .install-option.is-unavailable { opacity:.72; }
.messaging-app .install-option-heading { display:flex;gap:10px;align-items:center; }
.messaging-app .install-option-heading h3 { margin:0 0 2px;font-size:1em; }
.messaging-app .install-option-heading small { color:var(--tkrvue-muted); }
.messaging-app .install-option-icon { width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--tkrvue-accent);background:color-mix(in srgb,var(--tkrvue-accent) 10%,var(--tkrvue-layer-surface-bg));flex:0 0 auto; }
.messaging-app .install-option p { margin:0;color:var(--tkrvue-muted); }
.messaging-app .install-option .install-warning { padding:9px 10px;border:1px solid var(--tkrvue-status-warning-border);border-radius:7px;background:var(--tkrvue-status-warning-bg);color:var(--tkrvue-status-warning-text); }
.messaging-app .install-option .install-help { padding:9px 10px;border-radius:7px;background:color-mix(in srgb,var(--tkrvue-accent) 7%,var(--tkrvue-layer-surface-bg));color:var(--tkrvue-text); }
.messaging-app .install-option :is(button,.install-download) { margin-top:auto;align-self:flex-start; }
.messaging-app .install-download { display:inline-flex;align-items:center;gap:7px;text-decoration:none; }
.messaging-app .install-onboarding-actions { margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap; }
.messaging-app .layout { flex:1;min-height:0;display:grid;grid-template-columns:230px 320px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;padding:14px;overflow:hidden;box-sizing:border-box;background:var(--tkrvue-layer-bg); }
.messaging-app .panel { border:1px solid var(--tkrvue-border); border-radius:7px; background:var(--tkrvue-layer-surface-bg);color:var(--tkrvue-layer-text);min-width:0;box-shadow:0 1px 2px rgba(15,23,42,.06); }
.messaging-app .layout > .panel { min-height:0;overflow:hidden; }
.messaging-app .filters { padding:12px;display:flex;flex-direction:column;gap:14px; }
.messaging-app .layout > .filters { overflow:auto;overscroll-behavior:contain; }
.messaging-app .filters > * { flex-shrink:0; }
.messaging-app .conversations { display:flex;flex-direction:column; }
.messaging-app .panel-head { flex-shrink:0; }
.messaging-app label { display:flex;flex-direction:column;gap:6px; }
.messaging-app .filters label { white-space:normal;overflow-wrap:anywhere; }
.messaging-app .filters input,.messaging-app .filters select { width:100%;box-sizing:border-box; }
.messaging-app label.check { flex-direction:row;align-items:center; }
.messaging-app label.check input { width:auto; }
.messaging-app input,.messaging-app select,.messaging-app textarea { font:inherit; min-height:34px;box-sizing:border-box;padding:6px 8px;border:1px solid var(--tkrvue-border);border-radius:5px;color:var(--tkrvue-input-text);background:var(--tkrvue-input-bg);min-width:0; }
.messaging-app .panel-head { min-height:49px;box-sizing:border-box;padding:9px 11px;border-bottom:1px solid var(--tkrvue-border);display:flex;align-items:center;justify-content:space-between;gap:8px;background:color-mix(in srgb,var(--tkrvue-topbar-panel-bg) 48%,var(--tkrvue-layer-surface-bg));border-radius:7px 7px 0 0; }
.messaging-app h2 { font-size:1.05em;margin:0; }
.messaging-app .rows { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain; }
.messaging-app .conversation { display:flex;flex-direction:column;gap:5px;text-align:left;width:100%;padding:11px 12px;border:0;border-bottom:1px solid var(--tkrvue-border);font:inherit;background:transparent;color:inherit;cursor:pointer; }
.messaging-app .conversation:hover,.messaging-app .conversation[aria-pressed=true] { background:var(--tkrvue-selection-bg); color:var(--tkrvue-selection-text); }
.messaging-app small,.messaging-app .muted { color:var(--tkrvue-muted); }
.messaging-app .badge { border-radius:999px;background:var(--tkrvue-accent);color:white;padding:2px 8px;font-size:.85em; }
.messaging-app .channel-badge { display:inline-block;border:1px solid var(--tkrvue-border);border-radius:5px;padding:2px 6px; }
.messaging-app .thread { display:flex;flex-direction:column; }
.messaging-app .stream { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;overflow-anchor:none;padding:12px;display:flex;flex-direction:column;gap:9px;background:var(--tkrvue-layer-section-bg); }
.messaging-app .stream > * { flex-shrink:0; }
.messaging-app .bubble { max-width:min(82%,620px);border:1px solid var(--tkrvue-border);border-radius:9px;padding:9px 11px;white-space:pre-wrap;overflow-wrap:anywhere;background:color-mix(in srgb,var(--tkrvue-accent) 6%,var(--tkrvue-layer-surface-bg));box-shadow:0 1px 2px rgba(15,23,42,.05); }
.messaging-app .bubble.outgoing { align-self:flex-end;background:color-mix(in srgb,var(--tkrvue-accent) 16%,var(--tkrvue-layer-surface-bg)); }
.messaging-app .bubble small { display:block;margin-bottom:5px; }
.messaging-app .compose { flex-shrink:0;max-height:45%;box-sizing:border-box;overflow:auto;display:flex;gap:8px;align-items:end;padding:10px 11px;border-top:1px solid var(--tkrvue-border);background:color-mix(in srgb,var(--tkrvue-topbar-panel-bg) 34%,var(--tkrvue-layer-surface-bg));border-radius:0 0 7px 7px; }
.messaging-app .compose label { flex:1;min-width:0; }
.messaging-app textarea { width:100%;max-height:18dvh;box-sizing:border-box;resize:vertical; }
.messaging-app .compose button { position:sticky;bottom:0;align-self:flex-end; }
.messaging-app svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }
.messaging-app button { font:inherit;align-self:start; }
.messaging-app button.primary-action,.messaging-app button.secondary-action { flex-shrink:0;width:auto;white-space:nowrap;min-height:34px; }
.messaging-app .thread .panel-head { flex-wrap:wrap;max-height:35%;overflow:auto; }
.messaging-app .thread .panel-head > div { flex:1 1 160px;min-width:0; }
.messaging-app .thread-back { display:none; }
.messaging-app button:disabled { opacity:.6;cursor:default; }
.messaging-app :focus-visible { outline:2px solid var(--tkrvue-accent);outline-offset:3px; }
.messaging-app .empty { padding:24px; }
.messaging-app .welcome { min-height:0;max-width:640px;margin:clamp(12px,5dvh,60px) auto;padding:24px;overflow:auto; }
.messaging-app .status { padding:0 20px 14px;max-height:15dvh;overflow:auto;box-sizing:border-box; }
.messaging-app .status:empty { display:none; }
.messaging-app :is(.notice,.client-update-notice,.install-onboarding) { max-height:25dvh;overflow:auto;box-sizing:border-box; }
.messaging-app details label { margin-top:10px; }
.messaging-app .filters form { display:grid;gap:8px; }
@media(max-width:1100px) { .messaging-app .layout { grid-template-columns:210px minmax(230px,1fr) minmax(300px,1.3fr);padding:12px;gap:8px; } }
@media(max-width:850px) {
  .messaging-app .layout { grid-template-columns:1fr;grid-template-rows:minmax(0,.8fr) minmax(0,1fr); }
  .messaging-app .filters { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start; }
  .messaging-app .layout:not(.thread-selected) > .thread { display:none; }
  .messaging-app .layout.thread-selected { grid-template-rows:minmax(0,1fr); }
  .messaging-app .layout.thread-selected > :not(.thread) { display:none; }
  .messaging-app .thread-back { display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:6px; }
}
@media(max-width:720px) { .messaging-app .install-onboarding { margin-inline:12px; }.messaging-app .install-onboarding > summary { align-items:flex-start; }.messaging-app .install-options { grid-template-columns:1fr; } }
@media(max-width:450px) { .messaging-app .filters { grid-template-columns:1fr; } .messaging-app .compose { max-height:55%;flex-direction:column;align-items:stretch;overflow:hidden; } .messaging-app .compose label { flex:1;min-height:0;overflow:auto; } .messaging-app .compose textarea { flex:1;min-height:34px; } .messaging-app .compose button { position:static;align-self:flex-end; } }
