/* ──────────────────────────────────────────────── */
/* 24. Dymki: emotikon + nazwa nadawcy           */
/* ──────────────────────────────────────────────── */
#draftbox-messages .message.user::before {
  content: "👤 TY  ";           /* Twoje dymki: avatarka + TY */
}

#draftbox-messages .message.ai::before {
  content: "🤖 AI  ";           /* dymki AI: emotikon + AI */
}

#draftbox-messages .message.admin::before {
  content: "🛠️ Administrator  "; /* dymki administratora */
}

#draftbox-messages .message.lawyer::before {
  content: "⚖️ Prawnik  ";      /* dymki prawnika: emotikon + Prawnik */
}
/* 1. Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* === 0. Full-height base to avoid bottom clipping === */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* === 1. Ensure scale-wrapper covers full viewport height === */
.scale-wrapper {
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
}

/* Fallback (zawsze działa): PNG */
body {
  background: #0b0b0b url('../obrazy/background.png') center / cover fixed no-repeat;
}

/* Nowe przeglądarki: nadpisanie PNG -> WebP (jeśli wspierają image-set) */
body {
  background-image: -webkit-image-set(
    url('../obrazy/background.webp') 1x,
    url('../obrazy/background.png')  1x
  );
  background-image: image-set(
    url('../obrazy/background.webp') 1x,
    url('../obrazy/background.png')  1x
  );
}

/* Mobile: płynniejsze przewijanie tła (opcjonalnie) */
@media (max-width: 768px) {
  body { background-attachment: scroll; }
}

/* Mobile – podmień obraz na lżejszy */
@media (max-width: 768px) {
  body {
    background-image: -webkit-image-set(
      url('../obrazy/background-mobile.webp') 1x,
      url('../obrazy/background-mobile.png')  1x
    );
    background-image: image-set(
      url('../obrazy/background-mobile.webp') 1x,
      url('../obrazy/background-mobile.png')  1x
    );
  }
}





/* 2. Body i tło */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: url('../obrazy/background.png') center/cover no-repeat fixed;
  color: #fff;
  line-height: 1.5;
}

/* ---------- Nagłówek panelu: logo nad tytułem, zwiększona wysokość ---------- */
/* ---------- Nagłówek panelu AI (fixed, logo nad tytułem) ---------- */
/* 3. Nagłówek */
header {
  display: flex;
  justify-content: center;
  padding: 20px 0 1px;
}
.header-inner {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  border-radius: 8px;
  padding: 0 20px;
  width: 480px;
}
.header-inner .logo {
  max-height: 80px;
  width: auto;
  margin-right: 12px;
  display: block;
}

/*  1-sza grafika tytułu : Generator prawny legaltech-DRAFTRON

.header-inner h1.app-title {
  font-family: 'Orbitron', sans-serif;
  flex: 1;
  text-align: center;
  font-size: 1.4rem;
  color: #e0e0e0;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.7),
   -1px -1px 2px rgba(255,255,255,0.4),
    0 0 6px rgba(255,255,255,0.2);
  -webkit-text-stroke: 1px #333;
          text-stroke: 1px #333;
  white-space: nowrap;
}
*/

/* 2-a grafika tytułu : Generator prawny legaltech-DRAFTRON */

.header-inner h1.app-title {
  font-family: 'Orbitron', sans-serif;
  flex: 1;
  text-align: center;
  font-size: 1.4rem;
  color:#a9a9a9;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.7),
   -1px -1px 2px rgba(255,255,255,0.4),
    0 0 6px rgba(255,255,255,0.2);
  -webkit-text-stroke: 1px #333;
          text-stroke: 1px #333;
  white-space: nowrap;
}






/* 4. Główna sekcja */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

/* 5. Formularz */
.form-box {
  background: rgba(0,0,0,0.6);
  border: 2px solid rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  width: 480px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.form-box .pole {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 12px;
  position: relative;
  padding-left: 32px;
}
/*.form-box .pole:not(:nth-of-type(7))::before {
  content: '✎';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.4);
}
.form-box .pole:nth-of-type(7)::before {
 /* content: '📎';*/
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(220,220,220,0.9);
  font-size: 1.2rem;
  text-shadow:
    0 0 2px rgba(255,255,255,0.8),
    0 0 4px rgba(255,255,255,0.3);
} */
.form-box .pole label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.form-box .pole input,
.form-box .pole select,
.form-box .pole textarea {
  width: 100%;
  padding: 8px;
  border: 2px solid rgba(0,255,255,0.4);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));
  color: #fff;
}
.form-box .pole input:focus,
.form-box .pole select:focus,
.form-box .pole textarea:focus {
  outline: none;
  border-color: #5ff;
}
.form-box .przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.form-box .przyciski button {
  flex: 1 1 45%;
  padding: 12px;
  background: #026778;
  color: #fff;
  border: 2px solid #5ff;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.form-box .przyciski button:hover {
  background: #038899;
  box-shadow: 0 0 8px rgba(0,255,255,0.5);
}
.zamknij-draftbox {
  display: block;
  margin: 12px auto 0;
  padding: 8px 16px;
  background: #026778;
  color: #fff;
  border: 2px solid #5ff;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.zamknij-draftbox:hover {
  background: #038899;
  box-shadow: 0 0 8px rgba(0,255,255,0.5);
}

/* 6. Draftbox */
#draftbox-container {
  width: 480px;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 240px;
}
#draftbox-container.hidden {
  display: none;
}
#draftbox-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0,0,0,0.2);
}
.message.user {
  align-self: flex-end;
  background: rgba(0,255,255,0.2);
  color: #000;
  padding: 8px 12px;
  border-radius: 6px;
  max-width: 80%;
  word-wrap: break-word;
}
.message.ai {
  align-self: flex-start;
  background: rgba(255,255,255,0.3);
  color: #000;
  padding: 8px 12px;
  border-radius: 6px;
  max-width: 80%;
  word-wrap: break-word;
}

/* 6b. Input area */
.pw24pl-draftbox-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.pw24pl-draftbox-input-wrap textarea {
  flex: 1;
  padding: 8px;
  border: 2px solid rgba(0,255,255,0.4);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));
  color: #fff;
  resize: vertical;
  min-height: 80px;
}
.pw24pl-draftbox-input-wrap button {
  width: 100%;
  background: #026778;
  color: #fff;
  border: 2px solid #5ff;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.pw24pl-draftbox-input-wrap button:hover {
  background: #038899;
  box-shadow: 0 0 8px rgba(0,255,255,0.5);
}

/* 7. Responsywność standardowa (up to 900px) */
@media (max-width: 900px) {
  .header-inner,
  .form-box,
  #draftbox-container {
    width: 90%;
    max-width: none;
  }
  .header-inner .logo {
    max-height: 200px ;
    margin-bottom: 0;
  }
}

/* 8. Skalowanie 140% dla większych ekranów */
.scale-wrapper {
  position: relative;
  transform: scale(1.4);
  transform-origin: top center;
  width: calc(100% / 1.4);
  margin: 0 auto;
}

/* 9. Overlay AI */
#ai-overlay {
  position: relative;
  margin: 16px 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  background: rgba(245,238,220,0.8);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#ai-overlay.hidden {
  display: none;
}
#overlay-close {
  position: absolute;
  top: 4px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

/* 10. Pełna responsywność dla smartfonów (up to 600px) */
@media (max-width: 600px) {
  .scale-wrapper {
    transform: none;
    width: 100%;
  }
  .header-inner {
    flex-direction: column;
    height: auto;
    padding: 12px;
  }
  .header-inner .logo {
    max-height: 120px;
    margin-bottom: 8px;
  }
  .header-inner h1.app-title {
    font-size: 1.6rem;
    white-space: normal;
  }
  .form-box,
  #draftbox-container {
    width: 100%;
    padding: 16px;
  }
  .pw24pl-draftbox-input-wrap textarea {
    min-height: 120px;
  }
}

/* Spinacz przy etykiecie „Załącz plik” 
.form-box label[for="plik_ai"] {
  position: relative;
  padding-left: 32px;
}


.form-box label[for="plik_ai"]::before {
  content: '📎';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(220,220,220,0.9);
  font-size: 1.2rem;
  text-shadow:
    0 0 2px rgba(255,255,255,0.8),
    0 0 4px rgba(255,255,255,0.3);
}
.form-box .pole:nth-of-type(7)::before {
  content: none !important;
}  */


/* Strzałka przy polu „Wybierz plik” – tylko w .file-pole 
.form-box .file-pole {
  position: relative;
}
.form-box .file-pole::after {
  content: '⇪';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 1.2rem;
  pointer-events: none;
}   */


/* Przywrócenie prostokątnego kształtu plusa z papierowymi spinaczami po bokach */
#draftbox-add-file {
  position: relative;
  background: #026778;
  color: #fff;
  border: 2px solid #5ff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 1.2rem;
  cursor: pointer;
  width: 100% !important;
  padding: 12px 16px !important;
  margin-top: 8px;
  box-sizing: border-box;
}
#draftbox-add-file::before,
#draftbox-add-file::after {
  content: '📎';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(220,220,220,0.9);
  font-size: 1rem;
  text-shadow:
    0 0 2px rgba(255,255,255,0.8),
    0 0 4px rgba(255,255,255,0.3);
  pointer-events: none;
}
#draftbox-add-file::before {
  left: 22px !important;
}
#draftbox-add-file::after {
  right: 22px !important;
}
#draftbox-add-file:hover::before {
  content: '📎 Pliki';
  left: 8px;
}
#draftbox-add-file:hover::after {
  content: 'Obrazy 📎';
  right: 8px;
}

/* Strzałki po bokach przycisku „Wyślij” w Draftboxie */
#draftbox-send {
  position: relative;
  padding: 8px 24px;
}
#draftbox-send::before,
#draftbox-send::after {
  content: '⇪';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  pointer-events: none;
}
#draftbox-send::before {
  left: 22px !important;
}
#draftbox-send::after {
  right: 22px !important;
}

/* Kolory placeholderów w Draftboxie i opisie */
#draftbox-input::placeholder { color: rgba(255,255,255,0.7); opacity: 1; }
#opis::placeholder { color: rgba(255,255,255,0.7); opacity: 1; }
/* wsparcie dla starszych przeglądarek */
#draftbox-input::-webkit-input-placeholder,
#opis::-webkit-input-placeholder { color: rgba(255,255,255,0.7); }
#draftbox-input:-ms-input-placeholder,
#opis:-ms-input-placeholder         { color: rgba(255,255,255,0.7); }
#draftbox-input::-ms-input-placeholder,
#opis::-ms-input-placeholder       { color: rgba(255,255,255,0.7); }
#draftbox-input::-moz-placeholder,
#opis::-moz-placeholder            { color: rgba(255,255,255,0.7); opacity:1; }
#draftbox-input:-moz-placeholder,
#opis:-moz-placeholder             { color: rgba(255,255,255,0.7); opacity:1; }

/* -------------------------------------------- */
/*  Styl input[type="date"] (tylko padding i border) */
/* -------------------------------------------- */
.form-box .pole input[type="date"] {
  /* appearance: none; */                  /* zakomentowane */
  /* -moz-appearance: none; */             /* zakomentowane */
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));
  border: 2px solid rgba(0,255,255,0.4);
  border-radius: 6px;
  color: #fff;
  padding: 8px;
  font-size: 1rem;
}

/* ewentualny custom-owy wskaźnik kalendarza */
.form-box .pole input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  cursor: pointer;
}

/* Ukryj ikonkę kalendarza w polu date */
/*
.form-box input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}
*/

/* Dla Firefoxa i Edge */
/*
.form-box input[type="date"]::-ms-clear,
.form-box input[type="date"]::-ms-expand {
  display: none;
}
*/

/* Stary override – zakomentowany */
/*
.form-box .pole input[type="date"] {
  appearance: auto !important;
  -moz-appearance: auto !important;
}
.form-box input[type="date"]::-webkit-calendar-picker-indicator {
  display: auto !important;
}
*/

/* ============================================ */
/* Blok naprawczy: przywrócenie natywnego date */
/* ============================================ */
.form-box .pole input[type="date"] {
  appearance: auto !important;
  -moz-appearance: auto !important;
  -webkit-appearance: auto !important;
}
.form-box .pole input[type="date"]::-webkit-calendar-picker-indicator {
  display: block !important;
  cursor: pointer;
  filter: invert(1) brightness(2);
}
#temat {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

#temat option {
  background-color: rgba(0, 0, 0, 0.8) !important;
}
/* ===========================
   Powiększone logo na tabletach
   (od 601px do 900px szerokości)
   =========================== */
@media (min-width: 601px) and (max-width: 900px) {
  .header-inner .logo {
    max-height: 240px;   /* zamiast 160px – logo będzie większe */
    margin-bottom: 0;
  }
}

/* ===========================
   Powiększone logo na smartfonach
   (do 600px szerokości)
   =========================== */
@media (max-width: 600px) {
  .header-inner .logo {
    max-height: 200px;   /* zamiast 120px – logo będzie duże, ale zmieści się */
    margin-bottom: 8px;
  }
  .header-inner h1.app-title {
    font-size: 1.4rem;   /* trochę większy tekst tytułu */
  }
}



/*//////////////////////NOWE OTWARCIE//////////////////////////*/

/* --- blok dla wybieralnika tematów --- */
.temat-dropdown {
  position: relative;
  margin-top: 6px;
}


/* przycisk ▾ – nakłada się nad prawą częścią selecta */
#temat-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

/* lista tematów – domyślnie ukryta */
.temat-lista.hidden {
  display: none !important;
}

/* kontener listy */
.temat-lista {
  background: rgba(0,0,0,0.8);
  border: 2px solid rgba(0,255,255,0.4);
  border-radius: 6px;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
}

/* kategorie i tematy */
.kat-pism summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  font-weight: bold;
  color: #5ff;
}

.kat-pism ul {
  margin: 4px 0 12px 16px;
  padding: 0;
}

.kat-pism li {
  list-style: disc inside;
  padding: 2px 0;
  cursor: pointer;
  color: #fff;
}

.kat-pism li:hover {
  text-decoration: underline;
}


/* ===== przywrócenie czarnego pola z zieloną ramką dla wyboru tematu ===== */
.temat-pole {
  position: relative;
  margin-bottom: 1.5em; /* tak jak inne pola */
}

.temat-pole select {
  width: 100%;
  padding: .75em 1em;
  background-color: #222;       /* ciemne tło jak panel */
  border: 1px solid #00b8b4;    /* zielono-turkusowa ramka */
  border-radius: 4px;
  color: #fff;
  font-size: 1em;
  appearance: none;             /* usuwa natywną strzałkę */
  cursor: pointer;
}
/* opcjonalnie: efekt focus jak dla innych inputów */
.temat-pole select:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(0, 184, 180, .6);
  border-color: #00b8b4;
}

/* ===== Styl dla pola wyboru tematu (czarne tło + zielona ramka) ===== */
.temat-dropdown {
  position: relative; /* aby .temat-lista mogła wypaść pod spodem */
}

.temat-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #222;       /* ciemne tło */
  border: 1px solid #00b8b4;    /* zielonawa ramka */
  border-radius: 4px;
  padding: 0.75em 1em;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.temat-field:hover {
  background-color: #2a2a2a;
}

.temat-field:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(0, 184, 180, .6);
}


/* aktualnie wyświetlana wartość */
.temat-field[data-value]:empty::before {
  content: attr(data-placeholder);
  color: #999;
}


/* ---- Styl dropdownu tematów ---- */
.temat-dropdown {
  position: relative;
  margin-bottom: 1.5em;
}

/* widoczne pole wyboru */
.temat-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #222;
  border: 1px solid #00b8b4;
  border-radius: 4px;
  padding: 0.75em 1em;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

/* placeholder wewnątrz pola */
.temat-field[data-value=""]::before {
  content: attr(data-placeholder);
  color: #777;
}


/* kontener listy kategorii */
.temat-lista {
  position: absolute;
  top: calc(100% + 0.25em);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background-color: #111;
  border: 1px solid #00b8b4;
  border-radius: 4px;
  padding: 0.5em;
  z-index: 10;
}

/* ukrywanie listy */
.temat-lista.hidden {
  display: none;
}

/* details/summary – kategorie */
.kat-pism > summary {
  margin: 0.25em 0;
  padding: 0.5em;
  font-weight: bold;
  color: #00b8b4;
  cursor: pointer;
  list-style: none;
}

/* usuwamy domyślną strzałkę <summary> */
.kat-pism > summary::-webkit-details-marker {
  display: none;
}

/* lista tematów w środku kategorii */
.kat-pism .lista-pism {
  margin: 0.5em 0 1em 1em;
  padding: 0;
  list-style: disc inside;
}

.kat-pism .lista-pism li {
  margin: 0.25em 0;
  color: #fff;
  cursor: pointer;
}

.temat-dropdown {
  position: relative;
}

.temat-lista {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: #000;
  border: 1px solid #0fc;
  box-shadow: 0 0 10px rgba(15, 204, 204, 0.5);
  z-index: 100;
}


/* dropdown tematów */
.temat-dropdown {
  position: relative;
}

.temat-field {
  background: #1f1f1f;           /* czarne tło */
  border: 1px solid #0fc;        /* zielona ramka */
  padding: .5em;
  cursor: pointer;
}

.temat-lista {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: #000;
  border: 1px solid #0fc;
  box-shadow: 0 0 10px rgba(15, 204, 204, 0.5);
  z-index: 100;
}

/* ukryta lista */
.hidden {
  display: none;
}

/* kiedy pokazujemy: */
.temat-lista:not(.hidden) {
  display: block;
}

/* ===== dropdown tematów ===== */
.temat-pole {
  position: relative;
}

.temat-dropdown {
  position: relative;
}

.temat-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1f1f1f;
  border: 1px solid #0fc;
  padding: 0.5em 0.75em;
  color: #fff;
  cursor: pointer;
}

.temat-lista {
  position: absolute;
  top: calc(100% + 0.2em);
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: #000;
  border: 1px solid #0fc;
  box-shadow: 0 0 10px rgba(15, 204, 204, 0.5);
  z-index: 100;
}

.temat-lista.hidden {
  display: none;
}

/* style kategorii i pozycji */
.kat-pism {
  margin: 0;
}

.kat-pism summary {
  padding: 0.5em;
  color: #0fc;
  list-style: none;
  cursor: pointer;
}

.kat-pism ul {
  list-style: none;
  margin: 0;
  padding-left: 1em;
}

.kat-pism li {
  padding: 0.3em 0.5em;
  cursor: pointer;
  color: #fff;
}

.kat-pism li:hover {
  background: rgba(15, 204, 204, 0.1);
}



/* ==== dropdown tematów ==== */
.temat-pole {
  position: relative;
}
.temat-dropdown {
  position: relative;
}
.temat-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1f1f1f;
  border: 1px solid #0fc;
  padding: 0.5em 0.75em;
  color: #fff;
  cursor: pointer;
}
.temat-lista {
  position: absolute;
  top: calc(100% + 0.3em);
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: #000;
  border: 1px solid #0fc;
  box-shadow: 0 0 10px rgba(15,204,204,0.5);
  z-index: 100;
}
.temat-lista.hidden {
  display: none;
}
.kat-pism {
  margin: 0;
}
.kat-pism summary {
  padding: 0.5em;
  color: #0fc;
  list-style: none;
  cursor: pointer;
}
.kat-pism ul {
  list-style: none;
  margin: 0;
  padding-left: 1em;
}
.kat-pism li {
  padding: 0.3em 0.5em;
  cursor: pointer;
  color: #fff;
}
.kat-pism li:hover {
  background: rgba(15,204,204,0.1);
}

.temat-dropdown {
  position: relative;
}

.temat-field {
  cursor: pointer;
}

.temat-lista {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: #000;
  border: 1px solid #0fc;
  box-shadow: 0 0 10px rgba(15, 204, 204, 0.5);
  z-index: 100;
}

.temat-lista.hidden {
  display: none;
}

/* style dla details/summary */
.temat-lista details {
  margin: 0;
}

.temat-lista summary {
  list-style: none;
  padding: 0.5em;
  font-weight: bold;
  color: #0fc;
  cursor: pointer;
  user-select: none;
}

/* plus/minus */
.temat-lista summary::marker { content: ''; }
.temat-lista summary::after {
  content: '+';
  float: right;
}
.temat-lista details[open] summary::after {
  content: '−';
}

/* lista tematów */
.temat-lista ul {
  list-style: disc inside;
  margin: 0 0 0 1em;
  padding: 0.25em 0 0.5em;
}
.temat-lista li {
  padding: 0.2em 0;
  color: #fff;
  cursor: pointer;
}
.temat-lista li:hover {
  text-decoration: underline;
}


/* Wyśrodkowanie symbolu */
.temat-field[data-value=""] {
  justify-content: center;
}

/* Po wyborze tematu przywracamy normalny wygląd tekstu */
.temat-field:not([data-value=""])::before {
  content: none;
}

/* Gdy pole jest puste, pokaż strzałki ⯈ ○ ○ ⯇ 
.temat-field:empty::before {
  content: "⯈ ○ ○ ⯇";
  font-size: 1.4em;
  color: #0fc;
  letter-spacing: 0.2em;
  pointer-events: none;
  display: block;
  text-align: center;
}  */

/* Wyśrodkowanie */
.temat-field:empty {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Po tym, jak w .temat-field pojawi się jakikolwiek tekst, zabierzemy pseudo-element */
.temat-field:not(:empty)::before {
  content: none;
}
/* === Eleganckie dwie strzałki + kółka w polu tematu === */


/* Dla stanu pustego: strzałki i kółka
.temat-field[data-value=""]::before {
  content: "▶ ○ ○ ◀";
  font-size: 1.4em;
  color: #0fc;               /* brandowy turkus */
  letter-spacing: 0.2em;
  pointer-events: none;
}  */

/* Wyśrodkowanie symbolu */
.temat-field[data-value=""] {
  justify-content: center;
}

/* Po wyborze tematu przywracamy normalny wygląd tekstu */
.temat-field:not([data-value=""])::before {
  content: none;
}
/* ===== Dopasowanie obramowania .temat-field do pozostałych pól ===== */
.temat-field {
  border: 2px solid #0fc !important;  /* ten sam turkus co w inputach */
  border-radius: 6px;                 /* zaokrąglenie takie jak inne pola */
  box-shadow: none !important;        /* wyłącz ewentualny wewnętrzny cień */
}

/* Podczas focus/hover, podkreślenie kolorem brandu */
.temat-field:hover,
.temat-field:focus {
  border-color: #0ff !important;      /* jaśniejszy turkus na hover */
  outline: none;                      /* usuń domyślne focus-ring */
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.5) !important;
}
/* ===== Dopasowanie obramowania pola tematu do pozostałych pól formularza ===== */
.temat-field {
  border: 2px solid rgba(0,255,255,0.4) !important;  /* ta sama grubość i kolor */
  border-radius: 6px !important;                     /* takie samo zaokrąglenie */
}

/* efekt focus / hover jak w inputach */
.temat-field:hover,
.temat-field:focus {
  outline: none;
  border-color: #5ff !important;
  box-shadow: 0 0 8px rgba(0,255,255,0.5) !important;
}
/* ===== Wyższe, wyśrodkowane pole tematu z dużą, wycentrowaną strzałką ===== */

/* 2. Wyrównaj wysokość i wyśrodkuj zawartość */
.temat-field {
  display: flex;
  align-items: center;       /* wyśrodkowanie pionowe */
  justify-content: center;   /* wyśrodkowanie poziome pustego pola */
  height: 3em;               /* analogicznie jak inne pola (np. data) */
  padding: 0 1em;            /* poziome odsunięcia */
  border: 2px solid rgba(0,255,255,0.4) !important;
  border-radius: 6px !important;
}



/* 4. Po wybraniu tematu – usuń symbol i wyświetl tekst wybieranego tematu */
.temat-field:not(:empty)::before {
  content: none;
  justify-content: flex-start; /* tekst od lewej */
}
/* ===== Ulepszenie startowej strzałki w .temat-field ===== */


/* Wyśrodkowane, duże pole tematu */
.temat-field {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  padding: 0 1em;
  border: 2px solid #0fc !important;
  border-radius: 6px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}



.temat-field:empty:hover {
  box-shadow: 0 0 8px rgba(0,255,255,0.4);
}
/* ===== Ostateczne nadpisanie stylu pola tematu ===== */


/* 2) Ustawienie ramki identycznej jak w pozostałych polach */
.temat-dropdown .temat-field {
  border: 2px solid rgba(0,255,255,0.4) !important;
  border-radius: 6px !important;
  height: 3em !important;                 /* tak wysoka jak pole daty */
  padding: 0 1em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .2s, box-shadow .2s;
}



/* 4) Hover na pustym polu – jaśniejszy turkus i poświata */
.temat-dropdown .temat-field:empty:hover::before {
  color: #5ff !important;
  text-shadow: 0 0 8px rgba(0,255,255,0.6) !important;
}
.temat-dropdown .temat-field:empty:hover {
  box-shadow: 0 0 8px rgba(0,255,255,0.4) !important;
  border-color: #5ff !important;
}

/* 5) Po wyborze tematu – wyłączamy pseudo-element, wyrównujemy tekst */
.temat-dropdown .temat-field:not(:empty)::before {
  content: none !important;
}
.temat-dropdown .temat-field:not(:empty) {
  justify-content: flex-start !important;
}




/* === Tematy – zwykła czcionka + responsywność === */

/* 1) Wyłącz pogrubienie dla wybranego tematu */
.temat-dropdown .temat-field:not(:empty) {
  font-weight: normal !important;
}

/* 2) Lista tematów – zwykła czcionka i lepsza czytelność na mobile */
.temat-dropdown .temat-lista li {
  font-weight: normal;
  padding: 0.75em 1em;
  line-height: 1.4;
}

/* 3) Responsywność: na wąskich ekranach rozszerzamy i zmniejszamy font */
@media (max-width: 600px) {
  .temat-dropdown {
    width: 100% !important;
  }
  .temat-dropdown .temat-lista {
    max-height: 60vh;
    font-size: 0.9em;
    overflow-y: auto;
  }
  .temat-dropdown .temat-field {
    font-size: 1em;
    padding: 0 0.75em;
  }
}
.temat-field {
  font-weight: normal !important;
}

/* === Lżejsza, nowa czcionka i mniejszy font dla pól tematu === */

/* 1) Zmień font-family na Space Mono (jak w całym formularzu) i usuń bold */
.temat-dropdown .temat-field,
.temat-dropdown .temat-lista li {
  font-family: 'Space Mono', monospace !important;
  font-weight: normal !important;
}

/* 2) Dostosuj rozmiar czcionki */
.temat-dropdown .temat-field {
  font-size: 1em !important;      /* normalny rozmiar jak w inputach */
}
.temat-dropdown .temat-lista li {
  font-size: 0.95em !important;   /* nieco mniejszy dla lepszej czytelności */
}

/* 3) Na wąskich ekranach zmniejsz jeszcze bardziej */
@media (max-width: 600px) {
  .temat-dropdown .temat-field {
    font-size: 0.95em !important;
  }
  .temat-dropdown .temat-lista li {
    font-size: 0.9em !important;
  }
}

/* ── Temat: czcionka jak etykiety, normalny font-weight ── */
.temat-dropdown .temat-field,
.temat-dropdown .temat-lista details summary,
.temat-dropdown .temat-lista ul li {
  font-family: inherit !important;
  font-weight: normal  !important;
}

/* ── Mniejszy font dla pola i listy ── */
.temat-dropdown .temat-field {
  font-size: 0.9em !important;     /* minimalnie mniejszy niż standardowe inputy */
}
.temat-dropdown .temat-lista details summary {
  font-size: 0.85em !important;    /* tytuły kategorii */
}
.temat-dropdown .temat-lista ul li {
  font-size: 0.85em !important;    /* pozycje w liście */
}

/* ── Tło i kolor tytułów kategorii ── */
.temat-dropdown .temat-lista {
  background-color: #2e2e2e !important;  /* ciemny grafit, nie czarny */
  border: 1px solid #35e5aa;             /* zachowaj akcent obramowania */
}
.temat-dropdown .temat-lista details summary {
  color: #bbbbbb !important;             /* łagodniejszy, neutralny odcień */
  padding: 0.5em 0.8em;
  cursor: pointer;
}

/* ── Hover na tytułach kategorii ── */
.temat-dropdown .temat-lista details summary:hover {
  color: #ffffff !important;
  background-color: #3a3a3a !important;
}

/* ── Responsywność: jeszcze mniejszy font na małych ekranach ── */
@media (max-width: 600px) {
  .temat-dropdown .temat-field {
    font-size: 0.85em !important;
  }
  .temat-dropdown .temat-lista details summary,
  .temat-dropdown .temat-lista ul li {
    font-size: 0.8em !important;
  }
}

/* === Usuń podkreślenie w nagłówkach kategorii i w tytułach pism === */
.temat-dropdown .temat-lista details summary,
.temat-dropdown .temat-lista details summary:hover,
.temat-dropdown .temat-lista ul li,
.temat-dropdown .temat-lista ul li:hover,
.temat-dropdown .temat-lista ul li a,
.temat-dropdown .temat-lista ul li a:hover {
  text-decoration: none !important;
}

/* === Hover tytułu pisma: jaśniejsze grafitowe tło + wiszące wcięcie === */
.temat-dropdown .temat-lista ul li {
  padding: 0.75em 1em;        /* zgodnie z dotychczasowymi odstępami */
  text-indent: -1em;          /* cofnięcie pierwszej linii o 1em */
  padding-left: 1em;          /* wcięcie dla wszystkich linii */
  background-color: transparent;
  transition: background-color 0.2s;
}

/* Jaśniejsze grafitowe tło na hover */
.temat-dropdown .temat-lista ul li:hover {
  background-color: #3a3a3a !important;
}

/* Jeśli element był linkiem, też zastosuj wcięcie */
.temat-dropdown .temat-lista ul li a {
  display: block;
  padding: inherit;
  text-indent: inherit;
}

/* Upewnij się, że zawijanie działa poprawnie */
.temat-dropdown .temat-lista ul li,
.temat-dropdown .temat-lista ul li a {
  white-space: normal;
}

/* === Usuń wiszące wcięcie – wszystkie linie rozpoczynają się równo === */
.temat-dropdown .temat-lista ul li,
.temat-dropdown .temat-lista ul li a {
  /* Zatrzymujemy zwykły padding po lewej, ale wyłączamy text-indent */
  padding-left: 0em !important;  
  text-indent: 0em !important;
  margin-left: 0 !important;
  white-space: normal;            /* pozwól na łamanie linii */
}

/* Tło na hover – jasny grafit */
.temat-dropdown .temat-lista ul li:hover,
.temat-dropdown .temat-lista ul li a:hover {
  background-color: #3a3a3a !important;
}
/* === Wyrównanie wszystkich wierszy tytułów listy na tę samą odległość od lewej === */

/* Usuń wcięcia i list-style z całej listy */
.temat-dropdown .temat-lista ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Wyrównaj każdy <li> i ewentualny <a> wewnątrz tak, by wszystkie wiersze były flush-left */
.temat-dropdown .temat-lista ul li,
.temat-dropdown .temat-lista ul li a {
  display: block !important;
  padding: 0.75em 1em !important;  /* ten sam padding z lewej dla wszystkich wierszy */
  margin: 0 !important;
  text-indent: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}

/* Hover – jaśniejsze tło */
.temat-dropdown .temat-lista ul li:hover,
.temat-dropdown .temat-lista ul li a:hover {
  background-color: #3a3a3a !important;
}

/* === Temat list styling === */

/* Nagłówki kategorii – nieco większa czcionka, jasny grafit */
.temat-dropdown .temat-lista details summary {
  font-size: 1em;
  color: #ddd;
}

/* Pozycje tematów – mniejsza czcionka, łagodny szary */
.temat-dropdown .temat-lista ul li {
  font-size: 0.7em !important;
  color: #bbb;
  padding: 0.75em 1em;
  background-color: transparent;
  transition: color 0.2s, background-color 0.2s;
}

/* Hover – kontrastujący biały tekst na ciemniejszym graficie */
.temat-dropdown .temat-lista ul li:hover {
  color: #fff;
  background-color: #3a3a3a;
}

/* Wybrany temat – jaskrawa zieleń i ciemne tło, utrzymuje się po kliknięciu */
.temat-dropdown .temat-lista ul li.selected {
  color: #0f0;
  background-color: #2d2d2d;
}

/* Kompletnie usuń domyślny list-style i marginesy, aby każda linia zaczynała się w tym samym miejscu */
.temat-dropdown .temat-lista ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* === Indentacja listy tematów względem nagłówka kategorii === */
.temat-dropdown .temat-lista details > ul {
  padding-left: 1.5em !important;  /* przesunięcie całej listy w prawo */
}

/* Jeśli chcesz dodatkowo zwiększyć odstęp każdej pozycji: */
.temat-dropdown .temat-lista ul li {
  padding-left: 1em !important;    /* dodatkowe odsunięcie tekstu wewnątrz li */
}

/* === Utrzymanie wyróżnienia wybranego tytułu aż do zmiany === */
.temat-dropdown .temat-lista ul li.selected {
  color: #0f0     !important;  /* jaskrawa zieleń */
  background-color: #505050 !important; /* jaśniejsze grafitowe tło */
}

/* Przy hoverie nad inną pozycją zmiana tła jak dotychczas */
.temat-dropdown .temat-lista ul li:hover {
  background-color: #3a3a3a !important;
}

/* Po kliknięciu nagłówka kategorii – wyczyści .selected (kod JS powyżej) */
/* ── Stylowanie <summary> dla Wnioskodawcy i Adresata ── */
.form-box details > summary {
  position: relative;        /* pozwala na absolutne pozycjonowanie pseudo-elementu */
  display: flex;
  align-items: center;       /* pionowe wyśrodkowanie tekstu */
  height: 3em;               /* taka sama wysokość jak pola input */
  padding: 0 1em 0 2.5em;     /* zostawiamy 2.5em z lewej na ikonę */
  margin-bottom: 1em;        /* odstęp pod summary */
  border: 2px solid rgba(0,255,255,0.4);
  border-radius: 6px;
  background-color: #2a2a2a;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

/* Ikony już masz wstawione poniżej tego bloku */

/* ── Hover i focus na summary ── */
.form-box details > summary:hover,
.form-box details > summary:focus {
  background-color: #333333;           /* jaśniejszy grafit na hover */
  border-color: #5ff;                  /* rozświetlenie obramowania */
  outline: none;
}

/* ── Kiedy <details> jest otwarte, summary ma ten sam styl ── */
.form-box details[open] > summary {
  background-color: #2a2a2a;           /* tło pozostaje spójne */
  border-color: rgba(0,255,255,0.4);
}
/* === Smooth slide dla Draftbox/AI-BOX === */

/* Panel domyślnie schowany */
#draftbox-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Kiedy nie ma klasy hidden, rozwijamy do pożądanej wysokości */
#draftbox-container:not(.hidden) {
  /* ustaw tu taki max-height, żeby pomieścić całą zawartość panelu;
     np. 40vh, 400px lub auto jeśli wolisz: */
  max-height: 50vh;
}

/* Upewnij się, że .hidden po prostu dodaje/rezygnuje z max-height: 0 */
#draftbox-container.hidden {
  max-height: 0 !important;
}





label {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* === Wyłączanie zaznaczania tekstu placeholderów === */
::placeholder {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

::-webkit-input-placeholder {
  user-select: none;
}

::-moz-placeholder {
  user-select: none;
}

:-ms-input-placeholder {
  user-select: none;
}

::-ms-input-placeholder {
  user-select: none;
}
/* === Wyłączanie zaznaczania tekstu w nagłówkach summary === */
details > summary {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* === Flatpickr – custom theme === */
.flatpickr-calendar {
  background: #2a2a2a;
  border: 2px solid #0fc;
  border-radius: 6px;
  color: #fff;
}
.flatpickr-months,
.flatpickr-weekday {
  background: #2a2a2a;
  color: #bbb;
}
.flatpickr-day:hover {
  background: #5ff !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #0fc !important;
  color: #000 !important;
}
.flatpickr-prev-month, .flatpickr-next-month {
  color: #0fc;
}
.flatpickr-weekday {
  font-weight: normal;
}

/* === input date – ukryj natywną ikonę === */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* === Spinner – przypomnienie === */
#ai-spinner {
  pointer-events: none;
  /* reszta stylów spinnera już masz w poprzednim kroku */
}
/* ===== Flatpickr – wyraźniejsze tło kalendarza ===== */
.flatpickr-calendar {
  background: #404040 !important;        /* ciemnoszare, ale widoczne */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
  border: 2px solid #0fc !important;
  border-radius: 6px !important;
  z-index: 9999 !important;              /* nad wszystkimi warstwami */
}

/* dzień wybrany */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #0fc !important;
  color: #000 !important;
}

/* hover nad dniem */
.flatpickr-day:hover {
  background: #5ff !important;
  color: #000 !important;
}
/* ===== Flatpickr – wyraźniejsze tło kalendarza ===== */
.flatpickr-calendar {
  background: #404040 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
  border: 2px solid #0fc !important;
  border-radius: 6px !important;
  z-index: 9999 !important;
}

/* nagłówki i dni */
.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-weekday {
  background: #404040 !important;
  color: #ccc !important;
}

/* wszystkie dni na szarawym tle mają kolor srebrny */
.flatpickr-calendar .flatpickr-day {
  color: #ccc !important;
}

/* dzień wybrany */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
  background: #0fc !important;
  color: #000 !important;
}

/* hover nad dniem */
.flatpickr-calendar .flatpickr-day:hover {
  background: #5ff !important;
  color: #000 !important;
}
/* miesiąc i rok na biało */
.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar .flatpickr-current-month .flatpickr-year {
  color: #fff !important;
}

/* ---- Flatpickr: tło kalendarza ---- */
.flatpickr-calendar {
  background: #1f1f1f !important;      /* ciemny grafit */
  box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
}

/* ---- dni miesiąca: srebrne na grafitowym tle ---- */
.flatpickr-calendar .flatpickr-day {
  color: #CCC !important;
}
.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus {
  background: #333 !important;
}

/* ---- nagłówek (miesiąc + rok) ---- */
.flatpickr-calendar .flatpickr-current-month {
  background: transparent !important;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month .flatpickr-year {
  color: #00CCC4 !important;          /* brandowy zielony */
}

/* ---- wskaźniki nawigacji (strzałki) ---- */
.flatpickr-prev-month,
.flatpickr-next-month {
  color: #00CCC4 !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: #5FEAD2 !important;           /* jaśniejszy przy hover */
}

/* ---- wskaźnik pustego pola (placeholdery) nie podlegają selekcji ---- */
input::placeholder,
textarea::placeholder {
  user-select: none;
  opacity: 0.7;
}

/* ---- cała powierzchnia pola daty klikalna ---- */
input[type="date"] {
  position: relative;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto; height: auto;
  opacity: 0;             /* ukrywa oryginalny przycisk */
  cursor: pointer;
}

.pdf-icon {
  background-color: #D32F2F;   /* intensywna czerwień */
  color: #fff;                 /* biały napis */
  font-weight: bold;
  padding: 0.1em 0.4em;
  border-radius: 0.2em;
  font-size: 0.9em;
  vertical-align: middle;
}
/* Wnętrze selecta „Wybierz temat pisma” */
#temat {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #000;
  color: #fff;
  position: relative;
  padding: 0.5em 2em;
}

#temat::-ms-expand {
  display: none;
}

/* Pozbywamy się grocików i wstawiamy 🔍 📄 🔍 */
#temat::after {
  content: "🔍   📄   🔍";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: 0.9em;
}

.temat-lista summary {
  position: relative;    /* potrzebne, by ::after był względem summary */
}

/* domyślny stan: plus */
.temat-lista summary::after {
  content: '+';
  position: absolute;
  right: 1em;            /* odległość od prawej krawędzi – dostosuj wedle potrzeby */
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  line-height: 1;
}

/* gdy otwarte: minus */
.temat-lista details[open] summary::after {
  content: '−';
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  line-height: 1;
}

/* 3) Ikona wyszukiwania w pustym polu „Wybierz temat pisma” */
/* Ikona przy tytule „Wnioskodawca” */
.wnioskodawca summary {
  position: relative;
  padding-left: 1.2em;  /* zostaw miejsce na ikonę */
}

/*
.wnioskodawca summary::before {
  content: "✍️" !important;         /* albo 🧑‍💼 jeśli wolisz */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
}

/* Ikona przy tytule „Adresat” */
.adresat summary {
  position: relative;
  padding-left: 1.2em;
}
.adresat summary::before {
  content: "📮" !important;         /* lub 📬 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
}
*/

/* Ikona przy „Wnioskodawca” */
.form-box details summary[title*="Wnioskodawcy"] {
  position: relative;
  padding-left: 2em;    /* zostaw miejsce na ikonę */
}
.form-box details summary[title*="Wnioskodawcy"]::before {
  content: "✍️";         /* lub inna ikona, np. 🧑‍💼 */
  position: absolute;
  right: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
}

/* Ikona przy „Adresat” */
.form-box details summary[title*="Adresat"] {
  position: relative;
  padding-left: 2em;
}
.form-box details summary[title*="Adresat"]::before {
  content: "📬";         /* lub 📮 */
  position: absolute;
  right: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
}


/* ─────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────── */
/* --------------------------------------------
   Obwódki wokół pozycji listy tematów (wszystkie ekrany)
   -------------------------------------------- */
.temat-lista .temat-element {
  border: 1px solid var(--accent);
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 8px 12px;
}

/* Jeśli chcesz dodatkowo wzmocnić obramowanie na małych ekranach,
   możesz dopisać osobne media query: */
@media (max-width: 767px) {
  .temat-lista .temat-element {
    /* np. cieńsze marginesy lub inny odstęp */
    margin-bottom: 6px;
    padding: 6px 10px;
  }
}
/* … Twoje istniejące style … */

/* ------------------
   Temat-dropdown
   ------------------ */
.temat-dropdown {
  position: relative;
}
.temat-field {
  display: flex;
  align-items: center;
  padding: 0.5em;
  border: 1px solid #2ac2b5;
  border-radius: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  cursor: pointer;
}
.temat-dropdown .temat-field:empty::before {
  content: "🔍   📄   " !important;   /* jedna lupa i dokument */
  font-size: 1.6em !important;         /* rozmiar ikony */
  color: #0fc !important;              /* brandowy turkus */
  pointer-events: none !important;     /* klik idzie w select */
  letter-spacing: 0.2em !important;    /* odstępy między znakami */
}
.temat-field .temat-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.temat-field .icon-doc {
  /* tu wstaw ikonę dokumentu */
  font-style: normal;
  margin-left: 0.5em;
}
.temat-lista {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: rgba(0,0,0,0.8);
  border: 1px solid #2ac2b5;
  border-radius: 4px;
  margin-top: 4px;
  z-index: 10;
}
.temat-lista.hidden {
  display: none;
}
.temat-lista details {
  margin: 0.5em 0;
}
.temat-lista summary {
  cursor: pointer;
  color: #2ac2b5;
  font-weight: bold;
}
.temat-lista ul {
  list-style: none;
  margin: 0.25em 0 0 1em;
  padding: 0;
}
.temat-lista li {
  padding: 0.25em 0.5em;
  cursor: pointer;
  color: #e0e0e0;
}
.temat-lista li.selected,
.temat-lista li:hover {
  background: rgba(42,194,181,0.2);
}

.temat-dropdown .temat-field {
  position: relative;
  padding: 0.5em 2.5em; /* zostaw miejsce na ikony po bokach */
  /* pozostałe Twoje style… */
}

/* prawa ikona (🔍) */
.temat-dropdown .temat-field::before {
  content: "🔍";
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6em;
  color: #0fc;
  pointer-events: none;
}

/* prawa ikona (📄) */
.temat-dropdown .temat-field::after {
  content: "📄";
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6em;
  color: #0fc;
  pointer-events: none;
}

.temat-dropdown .temat-field {
  position: relative;
  padding: 0.5em 2.5em; /* zostaw miejsce na ikonki, ale położymy je obok siebie */
}


/* lupa - wyżej w stosie (wyższy z-index), ale w tym samym miejscu */
.temat-dropdown .temat-field::after {
  content: "🔍";
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
  font-size: 1.6em;
  color: #fff;       /* np. biały żeby dobrze było widać */
  pointer-events: none;
  z-index: 1;
}
.temat-dropdown .temat-field {
  position: relative;
  /* zostaw trochę paddingu, by tekst i ikonki się nie nakładały */
  padding-left: 2em;
}

.temat-search-input {
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 8px;
  background: #222;
  border: 1px solid #444;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  border-radius: 4px;
}
.temat-lista li.focused {
  background: rgba(42,194,181,0.2);
}
/* ── Nowy, dyskretny spinner AI-BOX ── */
#ai-spinner {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 4em !important;
  height: 4em !important;
  background: #e0e0e0 !important;
  border-radius: 0.25em !important;
  box-shadow: 0 0 0.25em rgba(0,0,0,0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  z-index: 10000 !important;
}

/* Jednolite linie animowane top→bottom */
#ai-spinner .spinner-line {
  width: 100% !important;
  height: 0.8em !important;
  background: #a0a0a0 !important;
  opacity: 0.8 !important;
  animation: ai-slide-down 1s linear infinite !important;
}

/* Cztery linie z przesunięciami w czasie */
#ai-spinner .spinner-line:nth-child(1) { animation-delay: 0   !important; }
#ai-spinner .spinner-line:nth-child(2) { animation-delay: 0.25s!important; }
#ai-spinner .spinner-line:nth-child(3) { animation-delay: 0.5s !important; }
#ai-spinner .spinner-line:nth-child(4) { animation-delay: 0.75s!important; }

@keyframes ai-slide-down {
  0%   { transform: translateY(-100%); opacity: 0; }
  50%  { transform: translateY(0    ); opacity: 1; }
  100% { transform: translateY(100% ); opacity: 0; }
}
/* ================= SPINNER ================= */
#ai-spinner {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 180px; height: 180px;
  background: radial-gradient(circle at center, #333 0%, #111 80%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  flex-direction: column;
}

#ai-spinner .spinner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#ai-spinner .line {
  width: 60%; height: 4px;
  margin: 6px 0;
  background: linear-gradient(90deg, #6ab7ff, #4285f4, #2962ff);
  animation: slide 1.5s ease-in-out infinite;
}

#ai-spinner .line:nth-child(1) { animation-delay: 0s; }
#ai-spinner .line:nth-child(2) { animation-delay: 0.3s; }
#ai-spinner .line:nth-child(3) { animation-delay: 0.6s; }
#ai-spinner .line:nth-child(4) { animation-delay: 0.9s; }

@keyframes slide {
  0%   { transform: translateX(-100%); opacity: .2; }
  50%  { transform: translateX(0);     opacity: 1;  }
  100% { transform: translateX(100%);  opacity: .2; }
}

/* ============= hide "Brak wybranego pliku" ============= */
#file-name {
  display: none !important;
}

/*  Spinner overlay */
#spinner-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;               /* domyślnie ukryty */
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/*  Kontener spinnera */
#spinner-overlay .spinner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*  Pulsujące kropki */
#spinner-overlay .spinner-dots {
  display: flex;
  gap: 8px;
}
#spinner-overlay .dot {
  width: 14px;
  height: 14px;
  background: #0fc;            /* brandowy turkus */
  border-radius: 50%;
  animation: bounce 1s ease-in-out infinite;
}
#spinner-overlay .dot:nth-child(2) { animation-delay: 0.15s; }
#spinner-overlay .dot:nth-child(3) { animation-delay: 0.30s; }
#spinner-overlay .dot:nth-child(4) { animation-delay: 0.45s; }

/*  Napis pod spinnerem */
#spinner-overlay .spinner-text {
  margin-top: 12px;
  color: #fff;
  font-size: 1rem;
  font-family: "Space Mono", monospace;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

/*  Animacja odbijania */
@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(-12px); opacity: 1; }
}


/* jasne tło i ciemny tekst dla podglądu OCR */

/* jeżeli wykorzystujesz <pre> w attachment-preview */
#draftbox-messages .attachment-preview pre {
  background-color: #ffffff !important;
  color: #111111 !important;
}


/* ── DARK THEME dla głównej treści AI ── */

/* ── LIGHT THEME dla OCR (załączony obraz) ── */

/* zapewniamy kontrast dla linków w obu sekcjach */

/* ───── KONTRASTOWE WYSWIETLANIE OCR ───── */
#draftbox-messages .attachment-preview {
  background-color: #ffffff !important;
  color: #000000 !important;
  padding: 1em !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}

/* wymuszamy też na wszystkich elementach wewnątrz */
/* szczególnie <pre> z OCR */


/* ───── KONTRASTOWE WYSWIETLANIE OCR ───── */

/* wymuszamy też na wszystkich elementach wewnątrz */

/* szczególnie <pre> z OCR */
#draftbox-messages .attachment-preview pre {
  background-color: transparent !important;
  color: inherit !important;
  font-family: monospace !important;
  white-space: pre-wrap !important;
  margin: 0 !important;
}
/* ----- OCR-preview: jasne tło, ciemna czcionka ----- */
.attachment-preview,
.attachment-preview pre {
  background-color: #fff !important;
  color: #000   !important;
}
.attachment-preview pre {
  padding: 1em;
  border: 1px solid #ccc;
}

/* ----- Edytor/Preview pism: ciemne tło, jasna czcionka ----- */
/* kontener z wygenerowanym pismem */
.preview-wrapper,
#draftbox-container {
  background-color: #1f1f1f !important;
  color:            #eee      !important;
}
/* wszystkie akapity wewnątrz */
.preview-wrapper p {
  color: #eee !important;
}  

/* ==== PODGLĄD ARKUSZA A4 ==== */
#document-view {
  width: 480px;                   /* dokładnie tyle, co formularz */
  margin: 20px auto;              /* wyśrodkuj podgląd */
  padding: 16px;
  background: linear-gradient(
    135deg,
    #eef2f5 0%,
    #f5f7fa 100%
  );                               /* pastelowe, lekko błękitno-srebrne tło */
  box-shadow: 
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),  /* cienka ramka wewnętrzna */
    0 4px 12px rgba(0, 0, 0, 0.15);      /* zewnętrzny cień */
  border-radius: 6px;
}

#document-view .page {
  background: #fff;               /* właściwy arkusz */
  padding: 2cm;                   /* margines A4 */
  box-shadow: inset 0 0 0 1px #ddd;
  transform-origin: top center;
  transform: scale(0.85);         /* skaluj całość do 85% */
  width: 100%;                    /* wypełnij dostępne miejsce */
}

#document-view.hidden {
  display: none;                  /* ukrycie jak wcześniej */
}


/* ==== DOPASOWANIE PODGLĄDU A4 ==== */
#document-view {
  width: 480px;
  margin: 20px auto;
  padding: 12px;
  background: linear-gradient(
    135deg,
    #eef2f5 0%,
    #f5f7fa 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

#document-view .page {
  background: #fff;
  padding: 1cm;                  /* węższy margines wewnątrz „czarnej obwódki” */
  box-shadow: inset 0 0 0 1px #ccc;
  transform-origin: top center;
  transform: scale(0.8);         /* zmniejsz skalowanie, żeby całość się zmieściła */
  width: 100%;
  font-size: 12px;               /* mniejszy font */
  line-height: 1.4;
  color: #333 !important;        /* ciemniejszy tekst */
}

/* wymuś ciemny tekst na wszystkie elementy w podglądzie */
#document-view .page * {
  color: #333 !important;
}

/* ==== SPINNER ==== */
/* tło spinnera ciemniejsze, tekst biały */
#spinner-overlay {
  background: rgba(0, 0, 0, 0.85) !important;
}

#spinner-overlay .spinner-text {
  color: #fff !important;
}

/* ==== AUTOMATYCZNE DOPASOWANIE TŁA PODGLĄDU DO ARKUSZA ==== */
#document-view {
  display: inline-block;       /* pozwala obwódce dopasować się do szerokości .page */
  width: auto !important;      /* usuwa sztywny wymiar */
  padding: 12px;               /* zostaw drobny odstęp wokół */
  background: linear-gradient(
    135deg,
    #eef2f5 0%,
    #f5f7fa 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  margin: 20px auto;           /* wyśrodkuj */
  text-align: center;          /* wycentruj dziecięcy element inline-block */
}

/* zachowaj .page jako zeskalowany blok */
#document-view .page {
  transform-origin: top center;
  /* width: 100%; – już masz */
  /* scale ustawione wcześniej */
}

/* === PODGLĄD ARKUSZA A4 — KONTAJNER === */
#document-view {
  width: 480px;              /* szerokość jak formularz */
  max-width: 100%;           /* nie wychodzi poza viewport */
  margin: 20px auto;         /* wyśrodek */
  padding: 12px;
  background: linear-gradient(135deg, #eef2f5 0%, #f5f7fa 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.1),  /* cienka ramka wewnętrzna */
    0 4px 12px rgba(0,0,0,0.15);      /* zewnętrzny cień */
  border-radius: 6px;
  overflow: auto;
}

/* === PODGLĄD ARKUSZA A4 — ARKUSZ (.page) === */
#document-view .page {
  width: 100% !important;          /* wypełnia cały kontener */
  transform: none !important;      /* usuń skalowanie */
  padding: 1cm !important;         /* margines A4 */
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1) !important;
  font-size: 12px !important;      /* zmniejszony font */
  line-height: 1.4 !important;
  text-align: justify !important;  /* justowanie tekstu */
  color: #333 !important;          /* ciemny, czytelny tekst */
}

/* Usuń outline/focus-ring przy edycji i zostaw tylko subtelny cień */
#document-view .page:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1) !important;
}

/* Spinner – upewnij się, że tekst jest biały i widoczny na ciemnym tle */
#spinner-overlay {
  background: rgba(0,0,0,0.85) !important;
}
#spinner-overlay .spinner-text {
  color: #fff !important;
}

/* === OVERRIDE: usuń czarną obwódkę i wstaw delikatny cień === */
#document-view .page {
  border: none !important; /* wyłącz wszelkie border */
  /* cienki wewnętrzny obrys + lekki zewnętrzny cień */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important,
    0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* upewnij się, że strona nie wychodzi poza kontener */
#document-view {
  width: 480px !important;
  max-width: 100%  !important;
  overflow: hidden  !important;
}
#document-view .page {
  width: 100%  !important;
  transform: none !important;
}

/* ——————————————————————————————
   PODGLĄD: ciemniejsze tło zewnętrzne + arkusz z 40% przezroczystością
   —————————————————————————————— */

/* 1) Tło za całym podglądem (zewnętrzne) */
#document-view {
  background: rgba(0, 0, 0, 0.35) !important; /* ciemniejsze tło pod arkuszem */
  padding: 1em;                             /* odstęp wokół arkusza */
  box-sizing: border-box;
}

/* 2) Arkusz (wewnętrzny kontener) */
#document-view .page {
  background: rgba(240, 236, 227, 0.4) !important; /* ecru z 40% przezroczystością */
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15) !important; /* delikatny cień */
  border: 1px solid rgba(0, 0, 0, 0.1) !important;    /* lekka ramka */
}

/* Upewniamy się, że arkusz mieści się w szerokości formularza */
#document-view,
#document-view .page {
  width: 480px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* ————— BIAŁY ARKUSZ A4 ————— */
#document-view .page,
#dokument-container {
  background: #efefef !important;                /* śnieżnobiały arkusz */
  box-shadow: 0 0 18px rgba(0,0,0,0.2) !important; /* delikatny cień wokół */
 
  border: 0.1px solid #888888 !important;   /* === OVERRIDE: cienka, szara linia z delikatnym cieniem wewnętrznym === */

  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.06) !important;

  opacity: 0.9 !important;                      /* bez przezroczystości */
}
/* ==== Cień za całym podglądem arkusza A4 ==== */
#document-view {
  /* mocny, rozproszony cień "w powietrzu" */
  box-shadow:
    0 12px 32px 0 rgba(0,0,0,0.22),
    0 2px 8px 0 rgba(0,0,0,0.09);
  transition: box-shadow 0.25s;
}

/* Ogólne ograniczenie szerokości czatu */
#opis-chat-panel {
  max-width: 100%;
  width: auto;
}

/* Na ekranach do 768px (tablety) */
@media (max-width: 768px) {
  .form-box {
    padding: 12px;
  }
  #opis-chat-panel {
    margin: 8px 0;
    font-size: 0.9em;
  }
  #opis-chat-input {
    font-size: 0.9em;
  }
  .chat-msg {
    word-break: break-word;
    font-size: 0.9em;
    padding: 6px;
  }
}

/* Na ekranach do 480px (smartfony) */
@media (max-width: 480px) {
  #opis-chat-panel {
    padding: 6px;
  }
  #opis-chat-messages {
    max-height: 150px;
  }
  #opis-chat-input {
    font-size: 0.85em;
    padding: 6px;
  }
  .file-icon {
    display: block;
    width: 100%;
    text-align: left;
    margin: 4px 0;
  }
  button, input, select {
    font-size: 1em;
    padding: 8px;
  }
}

/* ==== Podgląd wyekstrahowanego tekstu (OCR/PDF) ==== */
#parsed-file-text,
#file-extracted-text {
  white-space: pre-wrap;    /* zachowuje łamanie wierszy */
  text-align: justify;      /* wyjustowanie tekstu */
  line-height: 1.5;         /* nieco większy odstęp między wierszami */
}


/* wszystkie linki w baloniku AI w mini-czacie */
#opis-chat-messages .message.ai a {
  color: #1a73e8;      /* niebieski Google-like */
  text-decoration: underline;
}


#opis-chat-input.custom-empty:before {
  content: attr(data-placeholder);
  color: #888;
  pointer-events: none;
  display: block;
}


.message.ai a {
  color: #0066cc;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.message.ai a:hover {
  color: #a100e6 !important; /* wyraźny fioletowy */
}

/* w polu opisu: skalowanie wstawionych obrazów */
#opis-chat-input img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 4px 0;
}

/* upewnij się, że div jest przewijalny, jeśli chciałbyś */
#opis-chat-input {
  overflow-y: auto;
}


/* Spinner overlay – ograniczony do kontenera z position:relative */
#spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;           /* domyślnie ukryty */
  align-items: center;
  justify-content: center;
  z-index: 1000;           /* nad innymi elementami w panelu */
}

/* Kontener spinnera */
#spinner-overlay .spinner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pulsujące kropki */
#spinner-overlay .spinner-dots {
  display: flex;
  gap: 8px;
}

#spinner-overlay .dot {
  width: 14px;
  height: 14px;
  background: #0fc;        /* brandowy turkus */
  border-radius: 50%;
  animation: bounce 1s ease-in-out infinite;
}

#spinner-overlay .dot:nth-child(2) { animation-delay: 0.15s; }
#spinner-overlay .dot:nth-child(3) { animation-delay: 0.30s; }
#spinner-overlay .dot:nth-child(4) { animation-delay: 0.45s; }

/* Napis pod spinnerem */
#spinner-overlay .spinner-text {
  margin-top: 12px;
  color: #fff;
  font-size: 1rem;
  font-family: "Space Mono", monospace;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

/* Animacja odbijania kropek */
@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(-12px); opacity: 1; }
}


/* ── LINKI w głównym komunikatorze AI-BOX ── */
#draftbox-messages a {
  color: #007bff;            /* niebieski */
  text-decoration: none;     /* bez podkreślenia domyślnie */
  transition: color 0.2s ease-in-out;
}

#draftbox-messages a:hover {
  color: #8a2be2;            /* fioletowy po najechaniu */
  text-decoration: underline;
}


/* Przyciski w Draftboxie – nowy przycisk Wydruk w PDF */
.print-pdf-btn {
  width: 100%;
  background: #026778;
  color: #fff;
  border: 2px solid #5ff;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}

.print-pdf-btn:hover {
  background: #038899;
  box-shadow: 0 0 8px rgba(0,255,255,0.5);
}

/*================================================ */

/* Ikonki przed wiadomością */
#draftbox-messages .message.user::before {
  content: "👤 ";
}
#draftbox-messages .message.ai::before {
  content: "🤖 ";
}
#draftbox-messages .message.lawyer::before {
  content: "⚖️ ";
}
#draftbox-messages .message.admin::before {
  content: "🛠️ ";
}

/* ── NOWE: manual resize całego AI-BOX + mniejszy font ── */
#draftbox-container {
  resize: both !important;      /* ręczne skalowanie w obu osiach */
  overflow: auto !important;    /* wewnętrzny scroll gdy przekroczysz rozmiar */
  min-width: 320px !important;  /* minimalna szerokość */
  min-height: 300px !important; /* minimalna wysokość */
  font-size: 10px !important;   /* mały font w całym panelu */
}

/* zapewniamy, że #draftbox-messages w flexie wypełnia resztę */
#draftbox-messages {
  flex: 1 1 auto !important;
}
/* ─────────────────────────────────────────────── */
/* 22. Resize tylko sekcji głównego chatu (vertical) */
/* ─────────────────────────────────────────────── */
#draftbox-chat-wrapper {
  resize: vertical !important;     /* pozwala przeciągać dolną krawędź */
  overflow: auto !important;       /* scroll gdy treść większa od boxa */
  min-height: 120px !important;    /* początkowa wysokość */
  max-height: 70vh !important;     /* nie wyjdzie poza 70% wysokości ekranu */
  cursor: row-resize !important;   /* wskaźnik „przeciągnij” */
  box-sizing: border-box !important;
}

/* Jeżeli masz border-bottom na wrapperze i chcesz go wyeksponować: */
#draftbox-chat-wrapper {
  border-bottom: 2px solid rgba(0,255,255,0.4) !important;
}


.chat-resizer {
  resize: vertical;
  overflow: auto !important;
  min-height: 120px;
  max-height: 70vh;
  cursor: row-resize;
  box-sizing: border-box;
  border-bottom: 2px solid rgba(0,255,255,0.4);
}


/* ───────────────────────────────────────────── */
/* 23. Wyłączenie ograniczeń slide i overflow dla AI-BOX */
/* ───────────────────────────────────────────── */
#draftbox-container {
  /* usuń limit wysokości z płynnego rozwijania */
  max-height: none !important;
  /* pozwól dzieciom (naszemu chat-resizer) wyjść poza ramy */
  overflow: visible !important;
}

/* ───────────────────────────────────────────── */
/* 24. Poprawiona klasa .chat-resizer            */
/* ───────────────────────────────────────────── */
.chat-resizer {
  resize: vertical !important;     /* uchwyt tylko w pionie */
  overflow: auto !important;       /* wewnętrzny scroll, gdy treści więcej niż box */
  min-height: 120px !important;    /* startowa wysokość */
  /* teraz nie ograniczamy max-height, bo kontener już nie ma limitu */
  cursor: row-resize !important;   /* wskaźnik „przeciągnij w pionie” */
  box-sizing: border-box !important;
  border-bottom: 2px solid rgba(0,255,255,0.4) !important; /* widoczny uchwyt */
}
/* ──────────────────────────────────────────────── */
/* 25. Dymki: emotikon + nazwa nadawcy           */
/* ──────────────────────────────────────────────── */
#draftbox-messages .message.user::before {
  content: "👤[ JA ] ";           /* Twoje dymki: avatarka + TY */
}

#draftbox-messages .message.ai::before {
  content: "🤖[ AI ] ";           /* dymki AI: emotikon + AI */
}

#draftbox-messages .message.admin::before {
  content: "🛠️[ Administrator ]  "; /* dymki administratora */
}

#draftbox-messages .message.lawyer::before {
 content: "👨‍⚖️⚖️👩‍⚖️ [ Prawnik ]  "; /* dymki prawnika: emotikon + Prawnik */
}
/* ──────────────────────────────────────────────── */
/* 25. Jasne dymki odpowiedzi AI / Prawnika / Admin  */
/* ──────────────────────────────────────────────── */
#draftbox-messages .message.ai,
#draftbox-messages .message.lawyer,
#draftbox-messages .message.admin {
  background-color: #fafafa !important;            /* jasne tło */
  border: 1px solid rgba(0, 255, 255, 0.6) !important; /* cienka turkusowa obwódka */
  color: #111 !important;                          /* ciemna czcionka */
  border-radius: 4px !important;                   /* lekko zaokrąglone rogi */
  padding: 10px 14px !important;                    /* odstęp wewnątrz dymka */
  margin-bottom: 8px !important;                    /* odstęp między dymkami */
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;  /* subtelny cień */
}

/* Użytkownik pozostaje na ciemnym tle */
#draftbox-messages .message.user {
  background-color: rgba(0,255,255,0.2) !important;
  color: #000 !important;
  border: none !important;
  padding: 8px 12px !important;
}

/* Błąd – czerwony border */
#draftbox-messages .message.error {
  background-color: #ffecec !important;
  color: #900 !important;
  border: 1px solid #f00 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

/* ─────────────────────────────────────────────────────── */
/* 27. Indywidualne, pastelowe tła i wyrazistość dymków     */
/* ─────────────────────────────────────────────────────── */

/* Użytkownik – mocny kontrast, ciemniejsze tło + biały tekst */
#draftbox-messages .message.user {
  background-color: #004d4d !important;   /* ciemny morski */
  border: 1px solid #00e0de !important;   /* jasno-turkusowy */
  color: #ffffff !important;              /* biały tekst */
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* AI – pastelowy niebieski */
#draftbox-messages .message.ai {
  background-color: #e0f4ff !important;   /* jasny pastelowy błękit */
  border: 1px solid #80bfff !important;   /* stonowany błękit */
  color: #111111 !important;              /* ciemny kontrast */
}

/* Prawnik – pastelowy zielony */
#draftbox-messages .message.lawyer {
  background-color: #e0ffe0 !important;   /* jasna mięta */
  border: 1px solid #80ff80 !important;   /* stonowana mięta */
  color: #111111 !important;
}

/* Administrator – jasny popielaty */
#draftbox-messages .message.admin {
  background-color: #f0f0f0 !important;   /* jasny popiel */
  border: 1px solid #cccccc !important;   /* szare obramowanie */
  color: #111111 !important;
}


.review-infobox {
  background: #f9f8ee !important;   /* pastelowy ecru */
  color: #222 !important;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 1em;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
}
#document-view .page,
#document-view .doc-editable {
  background: #e7faee !important;   /* bardzo delikatna pastelowa zieleń */
  color: #222;
  /* Pozostałe style mogą pozostać takie jak były */
}
#document-view.check-mode .page,
#document-view.check-mode .doc-editable {
  background: #e6f2fb !important;  /* delikatny pastelowy niebieski */
  color: #222;
}

#document-view.review-mode .page,
#document-view.review-mode .doc-editable {
  background: #f9f8ee !important; /* pastelowe ecru */
}

.review-infobox {
  background: #ffa050 !important;   /*  pomarańczowy */
  color: #7a4017;                   /* kontrastujący, głęboki brązowy */
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 1em;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  font-weight: 500;
}
[contenteditable="true"]:focus {
  outline: 0.5px solid #bbb !important;   /* bardzo cienki, popielaty (jasnoszary) */
  outline-offset: 2px;
  box-shadow: 0 2px 8px 0 rgba(120,120,120,0.08); /* delikatny cień pod spodem */
  border-radius: 2px;  /* opcjonalnie zaokrągl rogi */
  transition: box-shadow 0.15s;
}

.analiza-topbar {
  display: flex;
  justify-content: flex-end;
  padding: 8px;
  background: #004d40;
}
.analiza-btn {
  background: #00796b;
  color: #fff;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
}
.analiza-extra {
  margin: 12px 8px;
}
.analiza-facts {
  width: 100%;
  min-height: 80px;
  margin-bottom: 8px;
  padding: 6px;
  border: 1px solid #555;
  border-radius: 4px;
}
.analiza-buttons {
  display: flex;
  gap: 8px;
}
.analiza-btn-secondary {
  background: #004d40;
  color: #fff;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.6;
}
.analiza-btn-secondary:enabled {
  opacity: 1;
}
/* Analiza.js */
.analiza-topbar {
  display: none;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
  background: #004d40;
}
.analiza-btn {
  background: #00796b;
  color: #fff;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
}
.analiza-extra {
  display: none;
  margin: 12px 8px;
}
.analiza-facts {
  width: 100%;
  min-height: 80px;
  margin-bottom: 8px;
  padding: 6px;
  border: 1px solid #555;
  border-radius: 4px;
  resize: vertical;
}
.analiza-buttons {
  display: flex;
  gap: 8px;
}
.analiza-btn-secondary {
  background: #004d40;
  color: #fff;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.6;
}
.analiza-btn-secondary:enabled {
  opacity: 1;
}
#analiza-facts::placeholder {
  font-size: 0.9em;
  opacity: 0.7;
}
/* ── Belka Pełna analiza ── */
.analiza-topbar {
  display: flex;
  justify-content: center;       /* wyśrodkowanie przycisku */
  align-items: center;
  background-color: #00574b;      /* ciemniejszy odcień brandowej zieleni */
  padding: 8px 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* ── Główny przycisk Pełna analiza ── */
.analiza-btn {
  background: linear-gradient(135deg, #00796b, #00bfa5);
  color: #fff;
  border: none;
  padding: 10px 24px;
  font-size: 1em;
  font-weight: 600;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.3s, transform 0.1s, box-shadow 0.2s;
}
.analiza-btn:hover {
  background: linear-gradient(135deg, #00897b, #00c4a7);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
.analiza-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* ── Przyciski etapów analizy ── */
.analiza-btn-secondary {
  background: #00675b;
  color: #fff;
  border: none;
  padding: 8px 12px;
  font-size: 0.9em;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.2s;
}
.analiza-btn-secondary:disabled {
  opacity: 0.4;
  cursor: default;
}
.analiza-btn-secondary:not(:disabled):hover {
  background: #00796b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.analiza-btn-secondary:not(:disabled):active {
  background: #005f54;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* ── Wycentrowanie trzech przycisków i przywrócenie ich pełnej szerokości ── */
.analiza-buttons {
  display: flex;
  justify-content: center;  /* wycentrowanie w poziomie */
  gap: 12px;                 /* odrobinę więcej odstępów */
  margin-top: 8px;
}

/* równy rozkład i większy rozmiar */
.analiza-btn-secondary {
  flex: 1;                  /* rozciągnij tak, żeby wszystkie trzy były tej samej szerokości */
  min-width: 0;             /* potrzebne, by flex:1 poprawnie działało w ciasnych kontenerach */
  padding: 10px 0;          /* większa wysokość, tak jak wcześniej */
  font-size: 1.3em;           /* przywrócenie poprzedniego rozmiaru czcionki */
  border-radius: 6px;       /* zaokrąglenie pasujące do reszty */
}

/* ── Przywrócenie “Pełna analiza” do kształtu takich przycisków ── */
.analiza-btn {
  border-radius: 6px;       /* taki sam jak poniższe */
  padding: 10px 0;          /* analogiczna wysokość */
  width: 150px;             /* stała szerokość lub ustaw na 100% jeżeli chcesz */
  font-size: 1.8em;           
  background: linear-gradient(135deg, #00796b, #00bfa5);
  box-shadow: none;         /* usuń ciężki cień, by zmiękczyć formę */
  transition: background 0.3s, transform 0.1s;
  font-family: inherit;   /* dziedziczenie tej samej rodziny czcionek co reszta UI */
  font-weight: 400;       /* taka sama pogrubiona waga */
}
.analiza-btn:hover {
  background: linear-gradient(135deg, #00897b, #00c4a7);
  transform: translateY(-1px);
}
/* Hover: cienka obwódka wokół przycisków etapów analizy */
.analiza-btn-secondary:not(:disabled):hover {
  outline: 1px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* Dla pełnej analizy, analogicznie */
.analiza-btn:hover {
  outline: 1px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* skrypty/styl.css lub odpowiedni plik */
.analiza-output {
  margin-top: 12px;
  padding: 10px;
  background: #e6f4ea;          /* jasne zielone tło */
  border: 1px solid #4caf50;    /* ciemniejsza obwódka */
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.analiza-output .analiza-result {
  color: #1e4620;
  font-size: 0.95em;
  line-height: 1.4;
}

/* Panel precedensów – wyróżnione linki */
.analiza-output .analiza-result a {
  background-color: #d0fce0; /* jasny seledyn */
  color: #06470c;            /* ciemna zieleń tekstu */
  padding: 2px 4px;
  border-radius: 3px;
  text-decoration: none;
}

/* Przy hover delikatne podkreślenie */
.analiza-output .analiza-result a:hover {
  text-decoration: underline;
}

/* → wyróżnienie pojedynczego precedensu */
.precedent-item {
  background: #e6f9e6;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.precedent-item a {
  font-weight: bold;
  color: #06470c;
  text-decoration: none;
}

.precedent-item span {
  margin-left: 8px;
  color: #333;
  font-size: 0.9em;
}

.precedent-item p {
  margin: 4px 0 0;
  color: #333;
  font-size: 0.95em;
  line-height: 1.4;
}

.precedent-item {
  background: #e6f9e6;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 12px;
  line-height: 1.4;
}
.precedent-item a {
  font-weight: bold;
  color: #06470c;
  text-decoration: none;
}
.precedent-item a:hover {
  text-decoration: underline;
}
.precedent-item details summary {
  cursor: pointer;
  font-weight: bold;
  margin-top: 6px;
}
.precedent-item pre {
  white-space: pre-wrap;
  background: #fff;
  padding: 6px;
  border: 1px solid #ccc;
  margin: 6px 0;
}
.precedent-item em {
  color: #555;
}

.precedent-item {
  background: #e6f9e6;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.precedent-item details {
  margin-top: 8px;
}
.precedent-item pre {
  max-height: 200px;
  overflow-y: auto;
  background: #f4f4f4;
  padding: 6px;
  border-radius: 4px;
}
/* === OVERRIDES dla formularza pism === */

/* Usunięcie globalnej ikony ✎ */
#formularz-pisma-ai .pole::before {
  content: none !important;
  display: none !important;
}

/* „Pytaj o opis” – etykieta + checkbox w jednej linii */
#formularz-pisma-ai .ask-opis-row{
  display:flex; align-items:center; gap:8px;
  flex-wrap:nowrap; width:fit-content; margin-bottom:6px;
}
#formularz-pisma-ai label[for="ask-opis"]{
  margin:0; cursor:pointer; display:inline-block;
  width:auto; white-space:nowrap; flex:0 0 auto;
}
#formularz-pisma-ai #ask-opis{
  margin:0; display:inline-block; vertical-align:middle;
}

/* „Opis aktualnej sytuacji” – etykieta + checkbox widoczności */
#formularz-pisma-ai .opis-label-row{
  display:flex; align-items:center; gap:8px;
  flex-wrap:nowrap; width:fit-content; margin:6px 0;
}
#formularz-pisma-ai .opis-label-row label[for="opis"]{
  margin:0; white-space:nowrap; cursor:pointer;
}
#formularz-pisma-ai #opis-visible{
  margin:0; vertical-align:middle;
}

/* Sekcja pliku – spinacz 📎 w miejscu dawnego ✎ + większy odstęp */
#formularz-pisma-ai .file-pole{
  position: relative;
  margin-top: 16px;
  padding-left: 34px;  /* miejsce na ikonę */
}
#formularz-pisma-ai .file-pole::before{
 /* content: '📎';*/
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: rgba(220,220,220,0.9);
  text-shadow:
    0 0 2px rgba(255,255,255,0.8),
    0 0 4px rgba(255,255,255,0.3);
  pointer-events: none;
}

/* === OVERRIDES: formularz pism === */

/* 0) Usuń globalny ołówek ✎ */
#formularz-pisma-ai .pole::before {
  content: none !important;
  display: none !important;
}

/* 1) „Pytaj o opis” w jednej linii */
#formularz-pisma-ai .ask-opis-row{
  display:flex; align-items:center; gap:8px;
  flex-wrap:nowrap; width:fit-content; margin-bottom:6px;
}
#formularz-pisma-ai label[for="ask-opis"]{ margin:0; white-space:nowrap; cursor:pointer; }
#formularz-pisma-ai #ask-opis{ margin:0; }

/* 2) Etykieta „Opis aktualnej sytuacji” + checkbox */
#formularz-pisma-ai .opis-label-row{
  display:flex; align-items:center; gap:8px;
  flex-wrap:nowrap; width:fit-content; margin:6px 0;
}
#formularz-pisma-ai .opis-label-row label[for="opis"]{ margin:0; white-space:nowrap; cursor:pointer; }
#formularz-pisma-ai #opis-visible{ margin:0; }

/* 2a) BEZ JS: chowaj/pokazuj #opis przez :has() */
#formularz-pisma-ai .pole:has(#opis-visible:not(:checked)) #opis { display:none; }
#formularz-pisma-ai .pole:has(#opis-visible:checked) #opis { display:block; }

/* 3) Plik – spinacz 📎 w miejscu dawnego ✎ + większy odstęp */
#formularz-pisma-ai .file-pole{
  position: relative;
  margin-top: 16px;
  padding-left: 34px;            /* miejsce na ikonę */
}
#formularz-pisma-ai .file-pole::before{
 /* content: '📎';*/
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: rgba(220,220,220,0.9);
  text-shadow:
    0 0 2px rgba(255,255,255,0.8),
    0 0 4px rgba(255,255,255,0.3);
  pointer-events: none;
}
/* === A11y: focus dla checkboxów === */
#formularz-pisma-ai input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(80, 220, 255, 0.65);
  border-radius: 3px;
}

/* === Usunięcie globalnego ✎ (bez zmian istniejących nazw) === */
#formularz-pisma-ai .pole::before {
  content: none !important;
  display: none !important;
}

/* === Rząd etykiety „Opis…” + checkbox (układ) === */
#formularz-pisma-ai .opis-label-row{
  display:flex; align-items:center; gap:8px;
  flex-wrap:nowrap; width:fit-content; margin:6px 0;
}
#formularz-pisma-ai .opis-label-row label[for="opis"]{ margin:0; white-space:nowrap; cursor:pointer; }
#formularz-pisma-ai #opis-visible{ margin:0; }

/* === (jeśli chcesz również CSS-owo) ukryj #opis, gdy checkbox odznaczony === */
#formularz-pisma-ai .pole:has(#opis-visible:not(:checked)) #opis { display:none; }

/* === Plik: dopracowane odstępy i 📎 === */
#formularz-pisma-ai .file-pole{
  position: relative;
  margin-top: 18px;            /* nieco większy oddech nad załącznikiem */
  padding-left: 38px;          /* miejsce na ikonę */
}
#formularz-pisma-ai .file-pole::before{
 /* content: '📎';*/
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: rgba(220,220,220,0.9);
  text-shadow: 0 0 2px rgba(255,255,255,0.8), 0 0 4px rgba(255,255,255,0.3);
  pointer-events: none;
  transition: filter .15s ease-in-out;
}
#formularz-pisma-ai .file-pole:hover::before { filter: brightness(1.12); }

/* Focus na polu pliku */
#formularz-pisma-ai #plik_ai:focus-visible{
  outline: 2px solid #5ff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* === A11y: focus dla checkboxów === */
#formularz-pisma-ai input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(80, 220, 255, 0.65);
  border-radius: 3px;
}

/* === Wyłącz globalny ✎ w polach formularza (tylko w tym formularzu) === */
#formularz-pisma-ai .pole::before {
  content: none !important;
  display: none !important;
}

/* === „Pytaj o opis” w jednej linii (jeśli jeszcze nie ma) === */
#formularz-pisma-ai .ask-opis-row{
  display:flex; align-items:center; gap:8px;
  flex-wrap:nowrap; width:fit-content; margin:6px 0;
}
#formularz-pisma-ai .ask-opis-row label[for="ask-opis"]{ margin:0; white-space:nowrap; cursor:pointer; }
#formularz-pisma-ai #ask-opis{ margin:0; }

/* === Rząd: Opis + checkbox widoczności === */
#formularz-pisma-ai .opis-label-row{
  display:flex; align-items:center; gap:8px;
  flex-wrap:nowrap; width:fit-content; margin:6px 0;
}
#formularz-pisma-ai .opis-label-row label[for="opis"]{ margin:0; white-space:nowrap; cursor:pointer; }
#formularz-pisma-ai #opis-visible{ margin:0; }

/* CSS-owe ukrywanie textarea gdy odznaczone (działa w nowoczesnych przeglądarkach) */
#formularz-pisma-ai .pole:has(#opis-visible:not(:checked)) #opis { display:none; }

/* === Wariant B: Załącznik + checkbox widoczności === */
#formularz-pisma-ai .plik-label-row{
  display:flex; align-items:center; gap:8px;
  width:fit-content; margin:6px 0 0;
}
#formularz-pisma-ai .plik-label-row label[for="plik_ai"]{ margin:0; white-space:nowrap; cursor:pointer; }
#formularz-pisma-ai #plik-visible:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(80, 220, 255, 0.65);
  border-radius: 3px;
}

/* ukryj input pliku gdy odznaczone (CSS śledzi checkbox) */
#formularz-pisma-ai .pole:has(#plik-visible:not(:checked)) #plik_ai { display:none; }

/* === Plik – dopracowana ikonka 📎 i odstępy === */
#formularz-pisma-ai .file-pole{
  position: relative;
  margin-top: 18px;
  padding-left: 38px;          /* miejsce na ikonę */
}
#formularz-pisma-ai .file-pole::before{
 /* content: '📎';*/
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: rgba(220,220,220,0.9);
  text-shadow: 0 0 2px rgba(255,255,255,0.8), 0 0 4px rgba(255,255,255,0.3);
  pointer-events: none;
  transition: filter .15s ease-in-out;
}
#formularz-pisma-ai .file-pole:hover::before { filter: brightness(1.12); }

/* Focus na polu pliku */
#formularz-pisma-ai #plik_ai:focus-visible{
  outline: 2px solid #5ff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- 3 wiersze: etykieta + checkbox (prosto i równo) --- */
.form-box .opis-label-row,
.form-box .ask-opis-row,
.form-box .plik-label-row {
  display: grid;
  grid-template-columns: 1fr auto;   /* tekst po lewej, checkbox po prawej */
  align-items: center;
  column-gap: 12px;
  margin: 10px 0;
}

/* Etykiety klikalne, trochę większy hit-area */
.form-box .opis-label-row label,
.form-box .ask-opis-row  label,
.form-box .plik-label-row label {
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}

/* Normalne systemowe checkboxy (bez custom rysowania) */
.form-box .opis-label-row input[type="checkbox"],
.form-box .ask-opis-row  input[type="checkbox"],
.form-box .plik-label-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #20d6a8;      /* kolor zaznaczenia */
  vertical-align: middle;
}

/* Widoczny focus (dostępność) */
.form-box .opis-label-row input[type="checkbox"]:focus-visible,
.form-box .ask-opis-row  input[type="checkbox"]:focus-visible,
.form-box .plik-label-row input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(32,214,168,.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Delikatny hover tła na etykiecie */
.form-box .opis-label-row:hover label,
.form-box .ask-opis-row:hover  label,
.form-box .plik-label-row:hover label {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}

/* Spinacz przed tekstem etykiety pliku — tylko odstęp */
.form-box .plik-label-row label::before { margin-right: .6rem; }

/* Fallback gdy przeglądarka nie wspiera accent-color */
@supports not (accent-color: #000) {
  .form-box .opis-label-row input[type="checkbox"],
  .form-box .ask-opis-row  input[type="checkbox"],
  .form-box .plik-label-row input[type="checkbox"] {
    transform: scale(1.1);
    transform-origin: center;
  }
}

/* Równe wiersze: tekst po lewej, checkbox po prawej */
.form-box .opis-label-row,
.form-box .ask-opis-row,
.form-box .plik-label-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  margin: 10px 0;
}

/* Etykiety: inline-flex zapewnia stały odstęp dla ikon/emoji */
.form-box .opis-label-row label,
.form-box .ask-opis-row  label,
.form-box .plik-label-row label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;         /* stała przerwa między ikoną/glyph a tekstem */
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}

/* Normalne checkboxy + delikatny focus */
.form-box .opis-label-row input[type="checkbox"],
.form-box .ask-opis-row  input[type="checkbox"],
.form-box .plik-label-row input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: #20d6a8;
  vertical-align: middle;
}
.form-box .opis-label-row input[type="checkbox"]:focus-visible,
.form-box .ask-opis-row  input[type="checkbox"]:focus-visible,
.form-box .plik-label-row input[type="checkbox"]:focus-visible{
  outline: 2px solid rgba(32,214,168,.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tylko spinacz: bez absolute, bez padding-left — działa jak zwykły znak */
.form-box label[for="plik-visible"]::before{
  content:'📎';
  font-size: 1.1em;    /* lekko większy, ale nie krzyczy */
  line-height: 1;       /* ładny baseline z tekstem */
  /* gap ze wspólnej reguły label załatwia odstęp */
}

/* (opcjonalnie) lekki hover tła */
.form-box .opis-label-row:hover label,
.form-box .ask-opis-row:hover  label,
.form-box .plik-label-row:hover label {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}

/* Fallback, jeśli accent-color brak */
@supports not (accent-color: #000) {
  .form-box .opis-label-row input[type="checkbox"],
  .form-box .ask-opis-row  input[type="checkbox"],
  .form-box .plik-label-row input[type="checkbox"]{
    transform: scale(1.1);
    transform-origin: center;
  }
}

/* --- MOBILE TWEAKS: 3 wiersze z labelami i checkboxami --- */
@media (max-width: 480px) {
  .form-box .opis-label-row,
  .form-box .ask-opis-row,
  .form-box .plik-label-row {
    display: grid;
    grid-template-columns: 1fr;        /* 1 kolumna */
    grid-auto-rows: auto;
    row-gap: 8px;                       /* odstęp między tekstem a checkboxem */
    padding: 10px 12px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(255,255,255,0.03); /* delikatny panel pod dotyk */
    min-height: 48px;                   /* wygodny target dotykowy */
  }

  .form-box .opis-label-row label,
  .form-box .ask-opis-row label,
  .form-box .plik-label-row label {
    font-size: 0.95rem;
    line-height: 1.25;
    word-break: break-word;             /* niech się ładnie łamie */
    cursor: pointer;
    user-select: none;
  }

  .form-box .opis-label-row input[type="checkbox"],
  .form-box .ask-opis-row  input[type="checkbox"],
  .form-box .plik-label-row input[type="checkbox"] {
    justify-self: end;                  /* checkbox na prawo, pod tekstem */
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: #20d6a8;
  }

  /* subtelny hover/focus na mobile (jak jest mysz/klawiatura) */
  .form-box .opis-label-row:hover input[type="checkbox"],
  .form-box .ask-opis-row:hover  input[type="checkbox"],
  .form-box .plik-label-row:hover input[type="checkbox"] {
    outline: 2px solid rgba(32,214,168,.35);
    outline-offset: 2px;
  }
  .form-box .opis-label-row input[type="checkbox"]:focus-visible,
  .form-box .ask-opis-row  input[type="checkbox"]:focus-visible,
  .form-box .plik-label-row input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(32,214,168,.55);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

/* --- Spinacz: przypnij do właściwej etykiety (toggle pliku), stary wyłącz --- */
.form-box label[for="plik_ai"]::before { content: none !important; }

.form-box label[for="plik-visible"] {
  position: relative;
  padding-left: 28px;                   /* miejsce na spinacz */
}
.form-box label[for="plik-visible"]::before {
  content: '📎';
  position: absolute;
  left: 0;
  top: 0.15em;                          /* delikatnie w dół względem tekstu */
  font-size: 1.1rem;
  opacity: .9;
}

/* Desktop/większe ekrany: klasyczny układ 1 wiersz (tekst lewo, checkbox prawo) */
@media (min-width: 481px) {
  .form-box .opis-label-row,
  .form-box .ask-opis-row,
  .form-box .plik-label-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    background: transparent;
    padding: 6px 8px;
    border-radius: 8px;
  }
  .form-box .opis-label-row input[type="checkbox"],
  .form-box .ask-opis-row  input[type="checkbox"],
  .form-box .plik-label-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }
}
/* Kontrast i zawijanie linii dla panelu wyników analizy */
.analiza-output, .analiza-pre {
  color: #e8f0ff;
  background: #121314;
  border: 1px solid #2a2f35;
  border-radius: 6px;
  padding: 10px;
  white-space: pre-wrap;
  line-height: 1.45;
}
.analiza-btn[disabled] {
  opacity: .55;
  filter: grayscale(40%);
  cursor: not-allowed;
}