/* Chattrutan i tre nivåer. Flyttad hit ur services.css 2026-08-24 när
   nivåerna fick en egen sida. Ramarna är attrapper, inget är klickbart. */

.levels {
  display: grid;
  gap: clamp(56px, 8vw, 108px);
}
.wdemo {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  align-items: center;
  min-width: 0;
}
@media (min-width: 900px) {
  .ch-head + .levels { margin-top: clamp(52px, 6vw, 92px); }
  .wdemo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 96px);
  }
  .wdemo:nth-child(even) .wdemo-frame { order: 2; }
}

.wdemo-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  height: 400px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 22px 44px -26px rgba(var(--ink-rgb), 0.42);
}

.wdemo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(var(--surface-2-rgb), 0.45);
}

.wdemo-head .chat-avatar { width: 30px; height: 30px; }
.wdemo-head-text { flex: 1; min-width: 0; }
.wdemo-name {
  display: block;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--ink);
}
.wdemo-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 0.67rem;
  color: var(--accent);
}
.wdemo-icon,
.wdemo-clip,
.wdemo-chev {
  display: flex;
  flex-shrink: 0;
  color: var(--muted);
}

.wdemo-tabs {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
}
.wdemo-tab {
  padding: 10px 9px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.wdemo-tab.is-on {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.wdemo-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 13px 11px;
}

.wdemo-body--chat {
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
}

.wdemo-day {
  text-align: center;
  font-size: 0.66rem;
  color: var(--muted);
}

.wdemo-msg { display: flex; }
.wdemo-msg.is-user { justify-content: flex-end; }
.wdemo-b {
  max-width: 86%;
  padding: 8px 12px;
  border-radius: 15px;
  font-size: 0.775rem;
  line-height: 1.45;
}

.wdemo-b.is-bot {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  border-top-left-radius: 5px;
}
.wdemo-b.is-user {
  background: var(--ink);
  color: var(--bg);
  border-top-right-radius: 5px;
}

.wdemo-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}
.wdemo-search-text {
  font-size: 0.74rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wdemo-faq {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
}
.wdemo-faq-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
}
.wdemo-faq-q {
  flex: 1;
  min-width: 0;
  font-size: 0.755rem;
  line-height: 1.35;
  color: var(--ink);
}

.wdemo-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg);
  box-shadow: 0 10px 20px -16px rgba(var(--ink-rgb), 0.5);
}
.wdemo-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wdemo-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}

.wdemo-card-title {
  flex: 1;
  min-width: 0;
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wdemo-pill {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--accent-dark);
  white-space: nowrap;
}
.wdemo-card-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.69rem;
  color: var(--muted);
}

.wdemo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wdemo-chip {
  padding: 5px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  font-size: 0.69rem;
  font-weight: 600;
  color: var(--accent-dark);
}

.wdemo-sys {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
  font-size: 0.67rem;
  color: var(--muted);
}
.wdemo-sys::before,
.wdemo-sys::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.wdemo-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 11px 12px;
  border-top: 1px solid var(--border);
  background: rgba(var(--surface-2-rgb), 0.3);
}
.wdemo-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wdemo-send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
}

.wdemo-step {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.wdemo-title {
  margin: 0 0 14px;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wdemo-desc {
  margin: 0;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}
.wdemo-plus {
  margin: 18px 0 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.wdemo-desc + .wdemo-list { margin-top: 14px; }
.wdemo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wdemo-list li {
  position: relative;
  padding-left: 21px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink);
}

.wdemo-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}

.wdemo-note {
  margin: clamp(44px, 6vw, 72px) 0 0;
  max-width: 60ch;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .wdemo-frame { box-shadow: none; }
  .wdemo-card { box-shadow: none; }
}

/* ---- Tre farger pa de tre nivaerna, 2026-09-06 -----------------------
   Hamid: "de ser samma ut med samma farg som hemsidan, lagg den med andra
   farger sa att folk kan relatera och se sina vision i samma farg som
   deras hemsida."

   Poangen med kapitlet ar att rutan tar KUNDENS farger. Tre identiskt bla
   rutor motsade den poangen. Nu bar varje niva sin egen palett.

   Alla tre klarar AA: vit text pa accenten ger 5.96, 6.29 och 8.73 mot 1,
   och accenten som text pa vitt ger samma varden. Byter du farg, rakna om.
   ------------------------------------------------------------------- */

.wdemo-frame {
  --w-accent: #A8442A;
  --w-soft: rgba(168, 68, 42, 0.09);
  --w-user: #A8442A;
}
.wdemo:nth-child(2) .wdemo-frame {
  --w-accent: #2F6B4F;
  --w-soft: rgba(47, 107, 79, 0.09);
  --w-user: #2F6B4F;
}
.wdemo:nth-child(3) .wdemo-frame {
  --w-accent: #4B3F8F;
  --w-soft: rgba(75, 63, 143, 0.09);
  --w-user: #4B3F8F;
}

.wdemo-head { background: var(--w-soft); }
.wdemo-head .chat-avatar {
  background:
    radial-gradient(76% 68% at 34% 24%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 58%),
    var(--w-accent);
}
.wdemo-status { color: var(--w-accent); }
.wdemo-status .status-dot { background: var(--w-accent); }
.wdemo-b.is-user { background: var(--w-user); color: #FFFFFF; }
.wdemo-send { background: var(--w-accent); }
.wdemo-tab.is-on { color: var(--w-accent); border-bottom-color: var(--w-accent); }
.wdemo-faq-q { color: var(--w-accent); }
.wdemo-card-top { background: var(--w-soft); color: var(--w-accent); }

/* Allt INUTI ramen ska folja widgetens farg. Etiketterna utanfor ramen
   (.wdemo-step, bockarna i .wdemo-list) ar Kodivos egen copy och forblir
   bla med flit. */
.wdemo-pill {
  background: var(--w-soft);
  color: var(--w-accent);
}
.wdemo-chip {
  border-color: color-mix(in srgb, var(--w-accent) 18%, transparent);
  background: var(--w-soft);
  color: var(--w-accent);
}