/* Notify Studio 3.1 — couche d’interface unifiée */
:root {
  --accent: var(--green, #35d6a0);
  --success: #22c98d;
  --warning: #e8ad48;
  --danger: #ff6f7d;
  --info: #5ea7ff;
  --line: var(--border, rgba(125, 152, 141, .22));
  --surface: var(--panel-solid, #0d1d18);
  --surface-soft: var(--bg-soft, #10231d);
  --panel-soft: var(--bg-soft, #10231d);
  --control-height: 48px;
  --content-width: 1180px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; overscroll-behavior-x: none; }
body { min-width: 320px; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, [role="button"], summary { touch-action: manipulation; }
h1, h2, h3, p, span, strong, small, code { overflow-wrap: anywhere; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

.button, .icon-button, .modal-close, .text-button, .nav-item { min-height: 44px; }
.button { justify-content: center; }
.button:disabled, button:disabled { cursor: not-allowed; opacity: .48; filter: saturate(.5); }
.button.loading { color: transparent !important; position: relative; pointer-events: none; }
.button.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: var(--text); border-radius: 50%; animation: ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.page, .main-content, .page-heading, .panel, .settings-panel, .settings-content,
.connection-card, .automation-card, .history-panel, .message-workspace { min-width: 0; max-width: 100%; }
.main-content { width: min(100%, var(--content-width)); margin-inline: auto; }
.page-heading { align-items: flex-start; gap: 16px; }
.page-heading > div { min-width: 0; }
.page-heading h1 { text-wrap: balance; }
.panel, .connection-card, .automation-card { border-color: var(--line); }
.muted, .field-help, .connection-card p, .automation-card p { color: var(--muted); }

/* Navigation et en-tête */
.sidebar { border-right-color: var(--line); }
.sidebar .nav-item[aria-current="page"], .sidebar .nav-item.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sidebar .nav-item[aria-current="page"]::before, .sidebar .nav-item.active::before { background: var(--accent); }
.topbar { border-bottom-color: var(--line); }
.topbar-save:not(.hidden) { animation: save-in .18s ease-out; }
@keyframes save-in { from { opacity: 0; transform: translateY(-3px); } }

/* Accueil */
.dashboard-hero { min-height: 0; padding: clamp(24px, 5vw, 54px); }
.dashboard-hero h2 { max-width: 760px; text-wrap: balance; }
.dashboard-hero .hero-actions { max-width: 640px; }
.hero-badge { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.status-dot, .status-dot.online { background: var(--success); }
.status-dot.offline { background: var(--danger); }

/* Champs et sélecteurs */
.field { min-width: 0; }
.field > span:first-child, .field-label-row { font-size: .86rem; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.field select, .field textarea, .search-field input {
  width: 100%; min-width: 0; min-height: var(--control-height); padding: 12px 14px;
  color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); border-radius: min(16px, var(--radius));
}
.field select {
  appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 13px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus, .search-field input:focus { border-color: var(--accent); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }
.password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; min-width: 0; }
.password-field input { border-radius: min(16px, var(--radius)) 0 0 min(16px, var(--radius)) !important; }
.password-field button { min-width: 112px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent); background: var(--surface-soft); border: 1px solid var(--line); border-left: 0; border-radius: 0 min(16px, var(--radius)) min(16px, var(--radius)) 0; font-weight: 760; }
.password-field button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Authentification compacte et stable */
.auth-page { min-height: 100dvh; }
.login-shell { min-height: 100dvh; width: 100%; padding: max(24px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); display: grid; place-items: center; }
.login-container { width: min(100%, 520px); display: grid; gap: 20px; }
.login-brand { justify-self: center; margin: 0; }
.login-brand .brand-mark { width: 58px; height: 58px; border-radius: 18px; }
.login-card { width: 100%; padding: clamp(24px, 5vw, 40px); display: grid; gap: 18px; }
.login-card h1 { font-size: clamp(2rem, 8vw, 3rem); }
.login-card .field { gap: 8px; }
.login-card .field input { min-height: 56px; }
.login-remember { min-width: 0; padding: 14px 16px; align-items: center; }
.login-remember span { min-width: 0; }
.login-remember small { display: block; margin-top: 2px; }
.auth-submit, .passkey-button { width: 100%; min-height: 56px; }
.passkey-button svg { flex: 0 0 auto; }
.first-login-note { text-align: center; }
.auth-footer { text-align: center; margin: 0; font-size: .82rem; }
.auth-shell, .setup-shell { max-width: 100%; overflow-x: clip; }

/* Messages */
.message-view-tabs, .activity-tabs { display: grid; gap: 8px; }
.message-view-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.message-view-tabs button, .activity-tabs button { min-width: 0; min-height: 52px; border-radius: 16px; }
.message-view-tabs button[aria-selected="true"], .activity-tabs button[aria-selected="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
.message-workspace { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: 20px; align-items: start; }
.message-editor-panel, .message-preview-panel { min-width: 0; }
.formatting-toolbar { flex-wrap: wrap; }
.variable-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.variable-chips button { max-width: 100%; overflow-wrap: anywhere; }

/* Applications et automatisations */
.connection-card-header { position: relative; }
.connection-config-toggle { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; color: var(--text); background: color-mix(in srgb, var(--surface-soft) 72%, transparent); border: 0; border-top: 1px solid var(--line); font-weight: 760; text-align: left; }
.connection-config-toggle::after { content: "⌄"; color: var(--muted); transition: transform .2s ease; }
.connection-card.config-collapsed .connection-config-toggle::after { transform: rotate(-90deg); }
.connection-card.config-collapsed .connection-card-body, .connection-card.config-collapsed .connection-card-footer { display: none; }
.automation-service-grid button, .automation-card button { min-width: 0; }
.automation-bulk-bar { position: sticky; top: 74px; z-index: 4; backdrop-filter: blur(16px); }

/* Activité */
.activity-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.activity-toolbar { display: grid; gap: 14px; }
.activity-search { position: relative; }
.activity-search input { padding-left: 44px; }
.activity-search svg { position: absolute; left: 15px; top: 50%; width: 20px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; }
.history-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.history-filters button[aria-pressed="true"], .history-filters button.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.history-date-group { display: grid; gap: 0; }
.history-date-heading { margin: 22px 4px 10px; color: var(--muted); font-size: .78rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.history-date-group:first-child .history-date-heading { margin-top: 4px; }
.history-title { min-width: 0; }
.history-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-status.sent, .history-status.done { color: var(--success); }
.history-status.failed, .history-status.error { color: var(--danger); }
.history-status.queued, .history-status.pending { color: var(--warning); }
.history-status.ignored, .history-status.cancelled { color: var(--muted); }

/* Réglages */
.settings-layout { min-width: 0; }
.settings-sidebar { border-color: var(--line); }
.settings-nav-button { min-height: 64px; }
.settings-nav-button[aria-current="page"], .settings-nav-button.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.settings-detail { min-width: 0; }
.settings-pane[hidden] { display: none !important; }
.settings-back { min-height: 44px; color: var(--accent); }

/* WhatsApp */
.whatsapp-hub { overflow: hidden; }
.whatsapp-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.whatsapp-status-item { min-width: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; text-align: center; color: var(--muted); }
.whatsapp-status-item strong { display: block; color: var(--text); font-size: .78rem; }
.whatsapp-status-item.complete { border-color: color-mix(in srgb, var(--success) 42%, var(--line)); background: color-mix(in srgb, var(--success) 8%, transparent); }
.whatsapp-status-item.warning { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.whatsapp-flow-step { border-color: var(--line); }

/* Aide */
.help-search-panel { position: sticky; top: 72px; z-index: 3; padding: 14px; backdrop-filter: blur(18px); }
.help-search { position: relative; }
.help-search input { padding-right: 50px; }
.help-search button { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border-radius: 12px; }
.help-content article.help-filtered { display: none; }
.help-empty { padding: 42px 20px; text-align: center; color: var(--muted); }

/* Modales, notifications et réseau */
.modal-backdrop { padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); }
.modal { max-height: min(86dvh, 760px); overflow: auto; overscroll-behavior: contain; }
.modal-close { width: 44px; height: 44px; }
.confirm-modal { width: min(100%, 500px); }
.confirm-modal #confirm-message { color: var(--muted); line-height: 1.6; }
.toast { max-width: min(420px, calc(100vw - 28px)); }
.toast-action { min-height: 36px; color: var(--accent); font-weight: 800; }
.network-status { position: fixed; left: 50%; bottom: 20px; z-index: 120; width: min(620px, calc(100% - 28px)); transform: translateX(-50%); padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: 16px; color: var(--text); background: color-mix(in srgb, var(--danger) 15%, var(--surface)); box-shadow: var(--shadow); text-align: center; font-weight: 700; }
.command-block, .json-view, .modal pre { max-width: 100%; overflow: auto; color: color-mix(in srgb, var(--accent) 82%, var(--text)); background: color-mix(in srgb, var(--surface-soft) 85%, #000); border: 1px solid var(--line); }

/* Thème clair : aucune zone noire héritée */
:root[data-color-scheme="light"] body, :root[data-color-scheme="light"] .app-shell { color-scheme: light; }
:root[data-color-scheme="light"] .field input:not([type="checkbox"]):not([type="radio"]),
:root[data-color-scheme="light"] .field select, :root[data-color-scheme="light"] .field textarea,
:root[data-color-scheme="light"] .password-field button, :root[data-color-scheme="light"] .command-block,
:root[data-color-scheme="light"] .json-view, :root[data-color-scheme="light"] .modal pre { background-color: rgba(245, 249, 247, .92); color: var(--text); }
:root[data-color-scheme="light"] .bottom-nav, :root[data-color-scheme="light"] .topbar { background: rgba(250, 253, 251, .92); }
:root[data-color-scheme="light"] .whatsapp-phone { background: #f4f1ea; color: #17201d; }

@media (max-width: 980px) {
  .message-workspace { grid-template-columns: 1fr; }
  .message-preview-panel[hidden] { display: none !important; }
  .whatsapp-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 740px) {
  :root { --control-height: 50px; }
  input, select, textarea { font-size: 16px !important; }
  .main-content { width: 100%; padding-inline: 16px; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .page-heading { padding-top: 12px; }
  .page-heading h1 { font-size: clamp(1.75rem, 8vw, 2.35rem); }
  .page-heading .heading-actions { flex: 0 0 auto; }
  .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); border-top: 1px solid var(--line); backdrop-filter: blur(22px) saturate(1.4); }
  .bottom-nav .nav-item { min-width: 0; min-height: 62px; padding: 6px 2px; gap: 3px; border-radius: 16px; }
  .bottom-nav .nav-item span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; line-height: 1.2; text-align: center; }
  .bottom-nav .nav-item svg { width: 24px; height: 24px; }
  .bottom-nav .nav-item[aria-current="page"], .bottom-nav .nav-item.active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .network-status { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .activity-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-tabs button { min-height: 64px; }
  .history-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .history-row > :last-child:not(.history-status) { display: none; }
  .automation-bulk-bar { top: 58px; }
  .help-search-panel { top: 56px; }
  .modal-actions { display: grid; grid-template-columns: 1fr; }
  .modal-actions .button { width: 100%; }
  .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }
  .password-field button { min-width: 54px; padding-inline: 14px; }
  .password-field .password-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .login-shell { align-items: start; padding-top: max(18px, env(safe-area-inset-top)); }
  .login-container { gap: 14px; }
  .login-brand .brand-mark { width: 50px; height: 50px; }
  .login-card { padding: 22px; gap: 15px; }
  .login-card h1 { font-size: 2.1rem; }
  .login-card .field input { min-height: 52px; }
  .login-remember { padding: 12px; }
  .auth-submit, .passkey-button { min-height: 52px; }
  .settings-shell.detail-open .settings-overview { display: none; }
  .settings-shell:not(.detail-open) .settings-detail { display: none; }
}

@media (max-width: 380px) {
  .main-content { padding-inline: 12px; }
  .bottom-nav .nav-item span { font-size: .64rem; }
  .activity-tabs button { padding-inline: 8px; }
}

@media (max-height: 760px) and (min-width: 741px) {
  .login-shell { place-items: start center; }
  .login-card { padding-block: 24px; gap: 13px; }
  .login-card .field input { min-height: 48px; }
  .auth-submit, .passkey-button { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}