/* SEOkonsulten AI-chatt, tilläggets stil (paket 182). Knappen och panelen stylas av kärnans
   inline-stil (#ws-aifab-css i inc/ai-chat.php). Här ligger det som temats main.css annars bär:
   kontaktkortet och avatarens foto. Färger ur kärnans --skai-variabler, med reservvärden. */
.ws-aifab .ws-ai__kort { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #cfe0ee; border-radius: 16px; padding: 12px 14px; box-shadow: 0 12px 28px -16px rgba(6,58,92,.4); }
.ws-aifab .ws-ai__kort-foto { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #e7f1f8; display: block; box-shadow: 0 0 0 3px #eaf4fb; }
.ws-aifab .ws-ai__kort-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ws-aifab .ws-ai__kort-info { min-width: 0; }
.ws-aifab .ws-ai__kort-namn { font-weight: 700; color: #0a2233; font-size: .98rem; line-height: 1.15; }
.ws-aifab .ws-ai__kort-roll { color: #5b7488; font-size: .8rem; margin-top: 1px; }
.ws-aifab .ws-ai__kort-lankar { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ws-aifab .ws-ai__kort-lankar a { color: var(--skai-primar, #006aac); font-weight: 600; font-size: .85rem; text-decoration: none; }
.ws-aifab .ws-ai__kort-lankar a:hover, .ws-aifab .ws-ai__kort-lankar a:focus-visible { text-decoration: underline; }
.ws-aifab .ws-ai__avatar--foto { overflow: hidden; padding: 0; }
.ws-aifab .ws-ai__avatar--foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ws-aifab button:focus-visible, .ws-aifab a:focus-visible, .ws-aifab input:focus-visible, .ws-aifab textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--skai-primar, #006aac); }
/* Sajtens tema (t.ex. Nectar) kan sätta egna knapp- och fältstilar: håll panelens egna. */
.ws-aifab button { text-transform: none; letter-spacing: normal; min-height: 0; }
.ws-aifab input, .ws-aifab textarea { box-sizing: border-box; max-width: 100%; margin: 0; }
/* CF7-läget: sajtens formulär inne i panelen. */
.ws-aifab .sk-ai-cf7 { background: #fff; border: 1px solid #cfe0ee; border-radius: 16px; padding: 12px 14px; }
.ws-aifab .sk-ai-cf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .ws-aifab .sk-ai-cf7 textarea { width: 100%; }
.ws-aifab .sk-ai-cf7 textarea { min-height: 84px; }
/* Knappen "Lämna dina uppgifter" ovanför skrivfältet. */
.ws-aifab .ws-ai__lamna { display: block; width: calc(100% - 30px); margin: 0 15px 8px; padding: 9px 12px; border: 1px solid #cadbe8; border-radius: 999px; background: #fff; color: #062b60; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ws-aifab .ws-ai__lamna:hover { background: #f1f6fa; }
.ws-aifab .ws-ai__lamna:focus-visible { outline: 2px solid #1f6fb2; outline-offset: 2px; }
.ws-aifab .ws-ai__lamna[hidden] { display: none; }
/* Sajtens CF7-formulär i chattens vita ruta: ljusa varianter av formulärets egna variabler (sk-form),
   samma värden som landningssidans #skhm. Utan dem ärvs sajtens mörka tema: vit text på vitt (mätt 1:1). */
.ws-aifab .wpcf7, .ws-aifab .wpcf7 .sk-form { --sk-ink: #062b60; --sk-muted: #597089; --sk-field-bg: #f9fbfd; --sk-field-bg-hover: #f1f6fa; --sk-field-solid: #f9fbfd; --sk-field-line: #cadbe8; --sk-placeholder: #597089; --sk-btn-bg: #40c4ef; --sk-btn-bg-hi: #7fd6f4; --sk-btn-ink: #052956; --sk-err: #b42318; --sk-err-line: #d92d20; --sk-ok: #067647; color: #062b60; }