/* Główny kontener – usuwamy nadmiarowy margines górny, jeśli nie jest potrzebny */
.dls-ai {
    position: relative !important;
    width: 100% !important;
    max-width: 85vw !important;
    margin: 24px auto !important;
    border-radius: 20px;
    background: #fff;
    color: #262626;
    font: 16px/1.5 system-ui, sans-serif;
    text-align: left;
    overflow: visible !important; /* Kluczowe, żeby postać wystawała ponad górę */
    box-shadow: 0 8px 30px #0000000a;
}

/* Górny pasek staje się punktem odniesienia dla postaci */
.dls-ai-header {
    position: relative !important;
    padding: 18px 24px;
    background: #e9ba26;
    font-size: 20px;
    line-height: 1.4;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: white !important;
    font-weight: var(--pls-font-weight-bold, 600)!important;
}


/* Ministrant przyklejony do dolnej krawędzi headera i wyłaniający się w górę */
.dls-ai-mascot {
    position: absolute !important;
    bottom: 0 !important;
    right: 25px !important;
    height: 200% !important; /* Wysokość równa dwukrotności wysokości headera */
    width: auto !important;  /* Szerokość dopasuje się automatycznie zachowując proporcje */
    pointer-events: none !important;
    z-index: 10 !important;
}

.dls-ai * {box-sizing:border-box}
.dls-ai button,.dls-ai textarea {font:inherit!important;letter-spacing:normal!important;text-transform:none!important;margin:0!important;box-shadow:none!important}

/* Styl dla przycisków (w tym "Nowa rozmowa" oraz przycisku wysyłania) */
.dls-ai button {
    cursor: pointer;
    background-color: var(--pls-shop-cart-button-bg-color, #ffffff)!important;
    color: var(--pls-shop-cart-button-color, #ffffff)!important;
    border-radius: var(--pls-radius-round, 10px)!important;
    box-shadow: 0 0 3px rgba(0, 0, 0, .15)!important;
    font-size: 16px!important;
    font-weight: var(--pls-font-weight-bold, 600)!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 12px!important;
    line-height: 24px!important;
    padding: 14px 20px!important;
    border: none!important;
    height: auto!important;
    text-decoration: none!important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dls-ai button:hover {
    background-color: #e9ba26 !important;
    color: #ffffff !important;
}

/* Styl dla linku "Kontakt" w stopce (sam czerwony tekst bez ramek i tła) */
.dls-ai .dls-ai-footer a {
    color: #e9ba26 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: color 0.2s ease;
}

.dls-ai .dls-ai-footer a:hover {
    color: #e9ba26 !important;
    background: none !important;
}

.dls-ai button:disabled {opacity:.55;cursor:wait}
.dls-ai :focus-visible {outline:3px solid #e9ba26!important;outline-offset:3px}

.dls-ai-header {padding:18px 24px;background:#e9ba26;font-size:20px;line-height:1.4}
.dls-ai-top {padding:20px 24px 16px;border-bottom:1px solid #eee}
.dls-ai .dls-ai-role-title {font-size:16px;font-weight:600;margin:0 0 12px!important}

/* Pola wyboru typu konta responsywne na całej szerokości, bez rysunków */
.dls-ai-roles {display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:12px;width:100%;margin:0 0 16px}
/* Styl bazowy dla wszystkich przycisków wyboru konta */
.dls-ai button.dls-ai-role {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    background: #fff !important;
    border-radius: 14px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.dls-ai button.dls-ai-role span {
    line-height: 1.3;
    text-align: center;
}

/* 1. Część publiczna – szarawy kolor */
.dls-ai button.dls-ai-role:nth-child(1) {
    border: 2px solid #d1d5db !important;
    color: #4b5563 !important;
}
.dls-ai button.dls-ai-role:nth-child(1) span {
    color: #4b5563 !important;
}
.dls-ai button.dls-ai-role:nth-child(1):hover,
.dls-ai button.dls-ai-role.active:nth-child(1) {
    background: #f3f4f6 !important;
}

/* 2. Konto Ministranta – #e9ba26 (żółty) */
.dls-ai button.dls-ai-role:nth-child(2) {
    border: 2px solid #e9ba26 !important;
    color: #b78a0b !important;
}
.dls-ai button.dls-ai-role:nth-child(2) span {
    color: #b78a0b !important;
}
.dls-ai button.dls-ai-role:nth-child(2):hover,
.dls-ai button.dls-ai-role.active:nth-child(2) {
    background: #fff9e6 !important;
}

/* 3. Konto Rodzica – #b7d154 (zielonawy) */
.dls-ai button.dls-ai-role:nth-child(3) {
    border: 2px solid #b7d154 !important;
    color: #637a14 !important;
}
.dls-ai button.dls-ai-role:nth-child(3) span {
    color: #637a14 !important;
}
.dls-ai button.dls-ai-role:nth-child(3):hover,
.dls-ai button.dls-ai-role.active:nth-child(3) {
    background: #f4fbe8 !important;
}

/* 4. Konto Opiekuna – #7771ff (fioletowy) */
.dls-ai button.dls-ai-role:nth-child(4) {
    border: 2px solid #7771ff !important;
    color: #4f46e5 !important;
}
.dls-ai button.dls-ai-role:nth-child(4) span {
    color: #4f46e5 !important;
}
.dls-ai button.dls-ai-role:nth-child(4):hover,
.dls-ai button.dls-ai-role.active:nth-child(4) {
    background: #eef2ff !important;
}

.dls-ai .dls-ai-note {font-size:13px;line-height:1.5;color:#626262;margin:0 0 12px!important}

/* Checkbox pod textarea */
.dls-ai-consent-wrapper {padding:0 24px 12px;background:#fff}
.dls-ai-consent-label {display:flex!important;align-items:flex-start;gap:9px;font-size:13px!important;font-weight:400!important;line-height:1.5!important;margin:0!important;cursor:pointer;color:#626262}
.dls-ai .dls-ai-consent-label input {appearance:auto!important;position:static!important;flex:0 0 16px;width:16px!important;height:16px!important;min-height:0!important;margin:3px 0 0!important;accent-color:#e9ba26}

.dls-ai-messages {min-height:320px;max-height:640px;overflow:auto;padding:20px 24px 10px;background:#faf9f6}
.dls-ai-message {white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.6;padding:12px 16px;background:white;border:1px solid #e7e3d9;border-radius:12px;margin:0 40px 12px 0}
.dls-ai-user {background:#fff1bd;margin:0 0 12px 40px}l
.dls-ai-links {font-size:12px;margin-top:10px;white-space:normal}
.dls-ai .dls-ai-links a {display:block;color:#735600;text-decoration:underline}
.dls-ai-status {font-size:13px;padding:0 24px;color:#6e5010}
.dls-ai-status:not(:empty) {padding-top:10px}
.dls-ai .dls-ai-form {display:block!important;position:relative!important;padding:16px 24px 8px!important;margin:0!important}
.dls-ai textarea {display:block!important;width:100%!important;height:60px!important;min-height:60px!important;max-height:60px!important;resize:none!important;border:1px solid #d8d5ce!important;border-radius:10px!important;padding:9px 48px 9px 12px!important;background:white!important;color:#262626!important;font-size:15px!important;line-height:20px!important;overflow-y:auto!important}
.dls-ai button[data-el=send] {position:absolute!important;right:32px!important;bottom:18px!important;width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;font-size:18px!important;}

.dls-ai-footer {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px 20px}
.dls-ai button[data-el=reset] {font-size:15px!important;min-height:44px!important;padding:12px 20px!important}
.dls-ai-sr {position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}

@media(max-width:480px) {
  .dls-ai {border-radius:14px;margin:16px auto!important;max-width:95vw!important}
  
  .dls-ai-mascot {
      height: 200% !important;
      width: auto !important;
      right: 15px !important;
      bottom: 0 !important;
  }

  .dls-ai-header {padding:16px;font-size:18px}
  .dls-ai-top {padding:16px}
  .dls-ai-roles {grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important;}
  .dls-ai button.dls-ai-role {font-size:13px!important;padding:10px!important}
  .dls-ai-messages {padding:16px 12px 4px;min-height:300px}
  .dls-ai-message {margin-right:18px}
  .dls-ai-user {margin-right:0;margin-left:18px}
  .dls-ai .dls-ai-form {padding:12px 12px 6px!important;gap:8px!important}
  .dls-ai-consent-wrapper {padding:0 12px 10px}
  .dls-ai-footer {padding:0 12px 16px}
  .dls-ai-status {padding-left:12px;padding-right:12px}
}