/* TD AI / AI2 readability, 2026-10-11. Text only; icon and status semantics stay local. */
html:root[data-theme] {
  --td-font-chat: 18px;
  --td-font-translation: 17px;
  --td-font-list-name: 18px;
  --td-font-list-preview: 16px;
  --td-font-control: 17px;
  --td-font-chat-title: 20px;
  --td-font-details-title: 19px;
  --td-font-details: 16px;
  --td-font-meta: 14px;
  --td-readable-text: var(--text);
  --td-readable-muted: var(--muted);
}
html:root:is([data-theme="whatsapp"], [data-theme="light"], [data-theme="forest-dawn"]) {
  --text: #111827;
  --muted: #475569;
  --td-wa-text: #111827;
  --td-wa-muted: #475569;
  --td-readable-text: #111827;
  --td-readable-muted: #475569;
}
html:root:is([data-theme="dark"], [data-theme="sage-mist"]) {
  --text: #f1f5f9;
  --muted: #cbd5e1;
  --td-readable-text: #f1f5f9;
  --td-readable-muted: #cbd5e1;
}
html:root[data-theme] body[data-release] {
  font-size: 17px !important;
  font-weight: 500;
  line-height: 1.55;
  color: var(--td-readable-text);
}

/* Login, settings, AI rules, knowledge, workflows and connection forms. */
html:root[data-theme] body[data-release] :is(#login-view, #view-ai-studio, #view-knowledge, #view-workflows, #view-connection, #view-settings, .app-dialog) {
  font-size: 17px;
}
html:root[data-theme] body[data-release] :is(#login-view, #view-ai-studio, #view-knowledge, #view-workflows, #view-connection, #view-settings, .app-dialog) :is(p, li, td, dd, pre) {
  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 500;
}
html:root[data-theme] body[data-release] :is(#login-view, #view-ai-studio, #view-knowledge, #view-workflows, #view-connection, #view-settings, .app-dialog) :is(label, th, dt) {
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
  color: var(--td-readable-text) !important;
}
html:root[data-theme] body[data-release] :is(#login-view, #view-ai-studio, #view-knowledge, #view-workflows, #view-connection, #view-settings, .app-dialog) :is(small, .muted, .settings-help, .details-tip, .field-help) {
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: var(--td-readable-muted) !important;
}
html:root[data-theme] body[data-release] :is(#login-view, #view-ai-studio, #view-knowledge, #view-workflows, #view-connection, #view-settings, .app-dialog) p.muted {
  font-size: 17px !important;
}
html:root[data-theme] body[data-release] :is(#view-ai-studio, #view-knowledge, #view-workflows, #view-connection, #view-settings) :is(.card > p, .settings-card p, .content-header p, .connection-card p, .qr-card p) {
  color: var(--td-readable-muted) !important;
}
html:root[data-theme] body[data-release] :is(#login-view, #view-ai-studio, #view-knowledge, #view-workflows, #view-connection, #view-settings, .app-dialog) :is(h2, h3, h4) {
  color: var(--td-readable-text) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
html:root[data-theme] body[data-release] :is(.content-header h2, .panel-header h1) { font-size: 26px !important; }
html:root[data-theme] body[data-release] :is(.card h3, .dialog-header h3, .appearance-heading h3) { font-size: 21px !important; }
html:root[data-theme] body[data-release] :is(.card h4, .app-dialog h4) { font-size: 18px !important; }

/* Match ID-bearing legacy form rules without changing checkboxes, sliders or icons. */
html:root[data-theme] body[data-release] :is(#app-view, #login-view, .app-dialog, #quick-reply-dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), textarea, select),
html:root[data-theme] body[data-release] :is(#conversation-search, #chat-search-input, #forward-conversation-search, #message-input, #translation-preview-text),
html:root[data-theme] body[data-release] #app-view .composer .composer-input-shell #message-input {
  font-size: var(--td-font-control) !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: var(--td-readable-text) !important;
}
html:root[data-theme] body[data-release] :is(#app-view, #login-view, .app-dialog, #quick-reply-dialog) :is(input, textarea)::placeholder,
html:root[data-theme] body[data-release] :is(#conversation-search, #chat-search-input, #forward-conversation-search)::placeholder,
html:root[data-theme] body[data-release] #message-input[data-placeholder]:empty::before {
  color: var(--td-readable-muted) !important;
  opacity: 1 !important;
}
html:root[data-theme] body[data-release] :is(.button:not([id="file-preview-download"]), .language-segment button, .theme-choice b, .language-choice b, .drawer-tabs button, [role="menuitem"], #settings-anchor-nav button, #td-font-size-reset) {
  font-size: 17px !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
}
html:root[data-theme] body[data-release] :is(.button:not([id="file-preview-download"]), #settings-anchor-nav button) { min-height: 42px; }
html:root[data-theme] body[data-release] #inbox-tabs button {
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  height: auto !important;
  min-height: 38px !important;
  padding-block: 7px !important;
}
html:root[data-theme] body[data-release] #inbox-tabs button span {
  font-size: 14px !important;
  font-weight: 650 !important;
}
html:root[data-theme] body[data-release] :is(.nav-section-title, .app-version, .wa-menu-note, .eyebrow, .conversation-platform-source, .conversation-platform-pill) {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}
html:root[data-theme] body[data-release] #wa-inbox-menu label {
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
  color: var(--td-readable-text) !important;
}

/* Conversation list, message content, translations and customer details. */
html:root[data-theme] body[data-release] #conversation-list :is(.conversation-item h4, .conversation-name-text, .conversation-name) {
  font-size: var(--td-font-list-name) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--td-readable-text) !important;
}
html:root[data-theme] body[data-release] #conversation-list :is(.conversation-item p, .conversation-preview-text, .conversation-preview) {
  font-size: var(--td-font-list-preview) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: var(--td-readable-muted) !important;
}
html:root[data-theme] body[data-release] #conversation-list time {
  font-size: var(--td-font-meta) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: var(--td-readable-muted) !important;
}
html:root[data-theme] body[data-release] #message-list :is(.bubble:not(.has-contact-card), .message-body-text, .message-caption, .bubble p, .bubble li, .quoted-message-text) {
  font-size: var(--td-font-chat) !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  color: var(--td-readable-text) !important;
}
html:root[data-theme] body[data-release] #message-list :is(.whatsapp-inline-bold, .message-body-text strong, .message-body-text b) { font-weight: 750 !important; }
html:root[data-theme] body[data-release] #message-list :is(.media-document-name, .document-card .title, .file-card .title, .special-card-title) {
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
}
html:root[data-theme] body[data-release] :is(#message-list, #translation-preview) :is(.translation, .source-text, .transcription, .image-analysis, .video-analysis, .document-analysis, .translation-original-text, .translation-result-field) {
  font-size: var(--td-font-translation) !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  color: var(--td-readable-text) !important;
}
html:root[data-theme] body[data-release] #message-list :is(.bubble small, .message-meta, .meta-text, .voice-duration, .message-divider, .day-separator, .date-chip) {
  font-size: var(--td-font-meta) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: var(--td-readable-muted) !important;
}
html:root[data-theme] body[data-release] :is(#contact-name, #details-name, .chat-header h3, .details-header h3, .contact-title-block h3, .details-profile h3) {
  font-size: var(--td-font-chat-title) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--td-readable-text) !important;
}
html:root[data-theme] body[data-release] :is(#details-phone, #contact-phone, .details-list dt, .details-list dd, .details-profile p, .details-tip) {
  font-size: var(--td-font-details) !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: var(--td-readable-muted) !important;
}
html:root[data-theme] body[data-release] #app-view .details-list dd { color: var(--td-readable-text) !important; }
html:root[data-theme] body[data-release] :is(#quick-reply-list .quick-reply-card-content, #quick-reply-dialog .quick-reply-form label, .chat-search-result-snippet, .message-search-result small) {
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}
html:root[data-theme] body[data-release] :is(#quick-reply-list .quick-reply-card-header strong, .message-search-result strong) {
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
}

/* Let larger text reflow inside the existing responsive layout. */
html:root[data-theme] body[data-release] #login-view { overflow-y: auto; }
html:root[data-theme] body[data-release] .login-card { margin-block: auto; }
html:root[data-theme] body[data-release] .settings-anchor-nav { flex-wrap: wrap; }
html:root[data-theme] body[data-release] .voice-track { grid-template-rows: 31px auto; }
html:root[data-theme] body[data-release] .pinned-message-bar {
  min-height: 54px;
  max-height: none;
  flex-basis: 54px;
  background: var(--panel);
}
html:root[data-theme] body[data-release] .pinned-message-copy small {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--td-readable-muted);
}
html:root[data-theme] body[data-release] .pinned-message-copy strong {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--td-readable-text);
}
@media (max-width: 720px) {
  html:root[data-theme] body[data-release] .login-page { padding: 16px; }
  html:root[data-theme] body[data-release] .login-card { padding: 28px 22px; }
  html:root[data-theme] body[data-release] .content-header h2 { font-size: 24px !important; }
  /* Chat headings sit on green bars; settings/content headers use white cards. */
  html:root[data-theme="whatsapp"] body[data-release] :is(#contact-name, #contact-phone) {
    color: #ffffff !important;
  }
  html:root[data-theme="whatsapp"] body[data-release] :is(#view-ai-studio, #view-knowledge, #view-workflows, #view-connection, #view-settings) .content-header :is(h1, h2, h3, p, .eyebrow) {
    color: inherit !important;
  }
  html:root[data-theme="whatsapp"] body[data-release] #contact-name { font-size: 18px !important; }
  html:root[data-theme="whatsapp"] body[data-release] #contact-phone { font-size: 14px !important; }
}