/* ================================
   LokalnyGPT – Dark UI (FULL CSS)
   ================================ */

/* ---- Reset ---- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========= Root / Theme ========= */
:root {
  --bg: #0b1220;              /* główne tło */
  --panel: #111827;           /* panele / bąbelki AI */
  --panel-2: #0f172a;         /* header/footer/side */
  --panel-3: #0f1b33;         /* lista wątków hover */
  --border: #1f2937;          /* linie, ramki */
  --border-2: #22314a;
  --muted: #9aa4b2;           /* tekst pomocniczy */
  --text: #e5e7eb;            /* podstawowy tekst */
  --text-dim: #cfd7e7;
  --primary: #2563eb;         /* akcje */
  --primary-2: #1d4ed8;       /* hover akcji */
  --primary-3: #3b82f6;
  --chip: #1f2a44;            /* tło „chipów” */
  --chip-border: #2a3858;
  --user-bubble: #1d4ed8;     /* bąbelek użytkownika */
  --user-text: #ffffff;       /* tekst w bąbelku usera */
  --success: #10b981;
  --danger: #ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

/* ========= Global ========= */
body.chat-dark {
  background: radial-gradient(1200px 800px at 70% -220px, #0d1833 0%, #0b1220 40%, #0b1220 100%);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  min-height: 100vh;
}
.chat-dark a { color: var(--primary); text-decoration: none; }
.chat-dark a:hover { color: var(--primary-2); }
.chat-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.chat-dark ::-webkit-scrollbar-thumb { background: #293245; border-radius: 8px; border:2px solid transparent; }
.chat-dark ::-webkit-scrollbar-track { background: transparent; }

/* ========= Navbar ========= */
.navbar {
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 18px; margin-bottom:16px;
  background: rgba(20,24,31,0.75); backdrop-filter: blur(8px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 20px rgba(2,6,23,.35);
}

.navbar__left { display:flex; align-items:center; gap:16px; min-width:0; }
.navbar__right { display:flex; align-items:center; gap:12px; }

.navbar__brand {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; letter-spacing:.2px; color:#e5ecff; text-decoration:none;
  padding:6px 10px; border-radius:12px;
}
.brand__dot {
  width:10px; height:10px; border-radius:999px; background:#4f80ff;
  box-shadow:0 0 0 6px rgba(79,128,255,.12);
}

.navbar__search {
  display:flex; align-items:center; gap:8px; min-width:280px; max-width:520px; width:36vw;
  background:#12171f; border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:4px 6px 4px 10px;
}
.navbar__search input {
  flex:1; background:transparent; border:none; outline:none; color:#e0e6f0;
  font-size:14px; padding:8px 4px;
}
.navbar__search .btn--ghost { padding:8px 10px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; border:1px solid transparent; cursor:pointer;
  padding:10px 14px; font-weight:700; font-size:14px; transition:transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#fff; border-color: rgba(37,99,235,.4);
  box-shadow: 0 6px 18px rgba(37,99,235,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn--primary:hover { filter:saturate(1.06); }

.btn--ghost {
  background:transparent; color:#cdd6e6; border-color:rgba(255,255,255,0.08);
}
.btn--ghost:hover { background:rgba(255,255,255,0.05); }

.btn--danger {
  background:#b91c1c; color:#fff; border-color:#7f1d1d;
}
.btn--sm { height:34px; padding:0 12px; font-size:13px; }

.pill-indicator {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-size:12px; color:#a9b4c8;
  background:#0f141b; border:1px solid rgba(255,255,255,.06);
}
.pill-indicator__dot { width:8px; height:8px; border-radius:999px; }
.pill-indicator__dot--ok {
  background:#33d29f; box-shadow:0 0 0 6px rgba(51,210,159,.12);
}
.pill-indicator__dot--err {
  background:#ff5e5e; box-shadow:0 0 0 6px rgba(255,94,94,.12);
}

/* Dropdown (native <details>) */
.menu { position:relative; }
.menu > summary { list-style:none; display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; cursor:pointer; }
.menu > summary::-webkit-details-marker { display:none; }
.menu[open] > summary { background:rgba(255,255,255,0.06); }
.menu__list {
  position:absolute; right:0; top:110%; min-width:220px;
  background:#0f141b; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  box-shadow:0 12px 24px rgba(0,0,0,.35); padding:6px; display:flex; flex-direction:column; gap:2px; z-index:60;
}
.menu__list a {
  color:#d6deed; text-decoration:none; padding:10px 12px; border-radius:10px; display:block; font-size:14px;
}
.menu__list a:hover { background:#121a25; }

/* ========= Containers / Layout ========= */
.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* ważne przy flex */
}
.app-shell {
  display: grid;
  grid-template-columns: 300px 1fr; /* sidebar + content */
  gap: 24px;
  min-height: calc(100vh - 96px); /* approx minus navbar */
}

.sidebar {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  height: calc(100vh - 120px);
  overflow: auto;
  box-shadow: var(--shadow);
}
.side-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.side-title { font-weight:800; color:#e6edff; font-size:14px; }

.thread-list { display: grid; gap: 10px; }
.thread-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--panel-3); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; transition:.15s ease;
}
.thread-item:hover { background: #112046; border-color:#26344c; }
.thread-item--active { outline: 2px solid rgba(37,99,235,.55); }
.thread-title { font-size: .92rem; font-weight: 700; line-height: 1.2; color:#e6edff; }
.thread-meta { font-size: .72rem; color: var(--muted); }
.thread-count { font-size:11px; padding:.2rem .5rem; border:1px solid var(--border); border-radius:999px; color:#c2cbe0; }

.content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  height: calc(100vh - 120px);
}



.chat-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

/* header czatu (tytuł + akcje) */
.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.chat-topic { font-weight:800; color:#e6edff; }

/* separator */
.divider { height: 1px; background: var(--border); margin: 8px 0; }

/* ========= Messages ========= */
.chat-main {
  flex: 1;
  min-height: 300px; /* minimalna wysokość sekcji wiadomości */
}

.chat-main--full {
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  min-height: 400px; /* stała wysokość minimalna */
  min-width: 100%;   /* wymusza pełną szerokość w układzie */
  box-sizing: border-box;
}

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 400px;  /* ta sama wysokość co przy wiadomościach */
  min-width: 100%;
  color: #9ca3af; /* szary tekst */
  font-size: 0.95rem;
}

.chat-input {
  border-top: 1px solid #1f2937;
  padding: 0.75rem;
  display: flex;
  gap: 0.5rem;
}



.empty-state {
  margin-top: 12vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  max-width: min(780px, 85%); /* Nowe */
  margin-left: auto;          /* Nowe */
  margin-right: auto;         /* Nowe */
}
.empty-state__icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: .75rem;
  background: #0d1930; color: #7187ad;
  border: 1px solid var(--border);
}

/* Lista wiadomości */
.messages { display: flex; flex-direction: column; gap: 18px; }
.message-group { display: grid; gap: 12px; }

/* Meta (np. „Ty”, „AI”) */
.meta { font-size: 12px; color: var(--muted); margin: 0 4px 6px; font-weight:700; }

/* Bąbelki */
.bubble {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  animation: popin .18s ease;
}
.bubble--ai { background: var(--panel); }
.bubble--user {
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  border-color: rgba(255,255,255,.08);
  color: var(--user-text);
  box-shadow: 0 8px 18px rgba(37,99,235,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Wyrównania */
.row { display: flex; width: 100%; }
.row--user { justify-content: flex-end; }
.row--ai   { justify-content: flex-start; }
.row > .col { max-width: min(780px, 85%); }




/* Źródła jako „chipy” */
.source-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--chip-border); color: #c2cbe0;
  display:inline-flex; align-items:center; gap:6px; transition:.15s ease;
}
.chip:hover { transform:translateY(-1px); border-color:#324465; }

/* ========= Composer ========= */
.chat-footer {
  position: sticky; bottom: 0; z-index: 10;
  background: linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.96) 35%);
  border-top: 1px solid var(--border);
}

.composer { padding: 8px 2px 2px; }
.input-wrap {
  display: flex; align-items: flex-end; gap: 8px;
  background: #0b1428; border: 1px solid #1f2a40;
  border-radius: 14px; padding: 6px;
}
.textarea {
  flex: 1 1 auto; min-height: 50px; max-height: 220px;
  padding: 10px 12px; border: none; outline: none;
  background: transparent; color: var(--text);
  resize: none; line-height: 1.5;
}
.textarea::placeholder { color: #6b7280; }
.helper { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* wysyłka */
.btn-send {
  padding:12px 16px; border-radius:12px; font-weight:800;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#eef3ff; border:1px solid rgba(37,99,235,.45);
  box-shadow: 0 8px 18px rgba(37,99,235,.25), inset 0 1px 0 rgba(255,255,255,.12);
  cursor:pointer; transition: transform .15s ease, filter .15s ease;
}
.btn-send[disabled]{ opacity:.6; cursor:not-allowed; filter:grayscale(.1); }
.btn-send:hover:not([disabled]){ transform:translateY(-1px); }

/* ========= Markdown w odpowiedzi ========= */
.bubble--ai h1, .bubble--ai h2, .bubble--ai h3 { margin: .25rem 0 .4rem; font-weight: 700; }
.bubble--ai p { margin: .35rem 0; }
.bubble--ai ul { padding-left: 1.1rem; margin: .35rem 0; }
.bubble--ai li { margin: .15rem 0; }
.bubble--ai code {
  background: #0e1a2e; border: 1px solid #1b2a47; color: #e1e8ff;
  padding: .15rem .35rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bubble--ai pre {
  background: #0e1a2e; border: 1px solid #1b2a47; color: #e1e8ff;
  padding: .8rem; border-radius: 10px; overflow: auto; line-height: 1.45;
}

/* ========= Skeleton / Toast / Utils ========= */
.skeleton {
  border-radius:12px; overflow:hidden; background:#0e162a;
  position:relative; border:1px solid #1e2a44; height:88px;
}
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
@keyframes shimmer{ 100%{ transform: translateX(100%); } }
@keyframes popin { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background:#0f172a; color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; box-shadow: var(--shadow);
}

/* Utility */
.shadow-soft { box-shadow: var(--shadow); }
.round-xl     { border-radius: 16px; }
.border       { border: 1px solid var(--border); }

/* ========= Responsive ========= */
@media (max-width: 1200px){
  .app-shell { grid-template-columns: 280px 1fr; }
}
@media (max-width: 1024px){
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { order:2; height:auto; }
  .content { order:1; height:auto; }
}
@media (max-width: 640px){
  .navbar { padding:12px 14px; }
  .navbar__search { width: 48vw; min-width: 220px; }
  .container-chat { padding: 0 14px 14px; }
  .row > .col { max-width: 92%; }
  .btn { height: 38px; padding: 0 12px; }
}