:root {
      --bg: #0d0d0f;
      --surface: #141418;
      --surface2: #1c1c22;
      --border: #2a2a32;
      --accent: #c8ff00;
      --accent2: #00d4ff;
      --text: #e8e8f0;
      --muted: #606070;
      --user-bg: #1e1e28;
      --bot-bg: #141418;
      --danger: #ff4444;
    }

    body.light-theme {
      --bg: #ebf2f8;
      --surface: #f6f9fc;
      --surface2: #e4edf5;
      --border: #d2e1ee;
      --accent: #0077cc;
      --accent2: #4db8ff;
      --text: #0e1823;
      --muted: #5e7386;
      --user-bg: #dceaf7;
      --bot-bg: #f6f9fc;
      --danger: #e53935;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Syne', sans-serif;
      height: 100dvh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── header ── */
    header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
    }

    .logo {
      width: 36px;
      height: 36px;
      background: transparent;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: 14px;
      color: #000;
      flex-shrink: 0;
    }

    .header-text h1 {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--text);
    }

    .header-text p {
      font-size: 11px;
      color: var(--muted);
      font-family: 'JetBrains Mono', monospace;
      margin-top: 1px;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      margin-left: auto;
      box-shadow: 0 0 8px var(--accent);
      animation: pulse 2.5s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.4;
      }
    }

    /* ── chat area ── */
    #chat {
      flex: 1;
      overflow-y: auto;
      padding: 24px 0;
      scroll-behavior: smooth;
    }

    #chat::-webkit-scrollbar {
      width: 4px;
    }

    #chat::-webkit-scrollbar-track {
      background: transparent;
    }

    #chat::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 2px;
    }

    .message-wrap {
      padding: 0 24px;
      margin-bottom: 20px;
      animation: fadeUp 0.25s ease both;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── user message ── */
    .msg-user {
      display: flex;
      justify-content: flex-end;
    }

    .msg-user .bubble {
      background: var(--user-bg);
      border: 1px solid var(--border);
      border-radius: 16px 16px 4px 16px;
      padding: 12px 16px;
      max-width: 65%;
      font-size: 14px;
      line-height: 1.6;
      color: var(--text);
    }

    /* ── bot message ── */
    .msg-bot {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .bot-avatar {
      width: 30px;
      height: 30px;
      background: transparent;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      padding: 4px;
    }

    .bot-avatar img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .bot-content {
      flex: 1;
      min-width: 0;
    }

    .bot-content .bubble {
      background: var(--bot-bg);
      border: 1px solid var(--border);
      border-radius: 4px 16px 16px 16px;
      padding: 14px 16px;
      font-size: 14px;
      line-height: 1.7;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
    }

    /* ── source tag ── */
    .source-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    mark.highlight-zdanie {
      background-color: var(--accent);
      color: #000;
      padding: 0 4px;
      border-radius: 3px;
      font-weight: 500;
    }


    .source-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--muted);
    }

    .source-tag .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }

    .source-tag .dot.secondary {
      background: var(--accent2);
    }

    .source-tag .title-text {
      color: var(--text);
      font-weight: 600;
    }

    /* ── similarity bar ── */
    .sim-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
    }

    .sim-label {
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--muted);
      flex-shrink: 0;
      width: 80px;
    }

    .sim-track {
      flex: 1;
      height: 3px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .sim-fill {
      height: 100%;
      border-radius: 2px;
      background: var(--accent);
      transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      width: 0;
    }

    .sim-fill.secondary {
      background: var(--accent2);
    }

    .sim-pct {
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent);
      width: 30px;
      text-align: right;
      flex-shrink: 0;
    }

    .sim-pct.secondary {
      color: var(--accent2);
    }

    /* ── typing indicator ── */
    .typing-wrap {
      padding: 0 24px;
      margin-bottom: 20px;
    }

    .typing {
      display: flex;
      gap: 12px;
      align-items: center;
      position: relative;
    }

    .typing-text {
      font-size: 11px;
      color: var(--muted);
      font-family: 'JetBrains Mono', monospace;
      margin-left: 4px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      animation: pulse 2s ease-in-out infinite;
    }

    .typing .bot-avatar {
      margin-top: 0;
    }

    .typing-dots {
      display: flex;
      gap: 5px;
      padding: 14px 16px;
      background: var(--bot-bg);
      border: 1px solid var(--border);
      border-radius: 4px 16px 16px 16px;
    }

    .typing-dots span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--muted);
      animation: blink 1.2s ease-in-out infinite;
    }

    .typing-dots span:nth-child(2) {
      animation-delay: 0.2s;
    }

    .typing-dots span:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes blink {

      0%,
      80%,
      100% {
        opacity: 0.3;
        transform: scale(1);
      }

      40% {
        opacity: 1;
        transform: scale(1.3);
      }
    }

    /* ── welcome ── */
    .welcome {
      text-align: center;
      padding: 48px 24px;
      color: var(--muted);
    }

    .welcome .big {
      font-size: 32px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }

    .welcome .big span {
      color: var(--accent);
    }

    .welcome p {
      font-size: 13px;
      line-height: 1.6;
      max-width: 360px;
      margin: 0 auto 28px;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      max-width: 500px;
      margin: 0 auto;
    }

    .chip {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 8px 14px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
      color: var(--text);
    }

    .chip:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(200, 255, 0, 0.05);
    }

    /* ── input area ── */
    footer {
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
    }

    .input-row {
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }

    #input {
      flex: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 16px;
      font-family: 'Syne', sans-serif;
      font-size: 14px;
      color: var(--text);
      resize: none;
      min-height: 46px;
      max-height: 120px;
      outline: none;
      transition: border-color 0.15s;
      line-height: 1.5;
    }

    #input::placeholder {
      color: var(--muted);
    }

    #input:focus {
      border-color: var(--accent);
    }

    #btn {
      width: 46px;
      height: 46px;
      background: var(--accent);
      border: none;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }

    #btn:hover {
      background: #d8ff20;
      transform: scale(1.05);
    }

    #btn:active {
      transform: scale(0.97);
    }

    #btn:disabled {
      background: var(--border);
      cursor: not-allowed;
      transform: none;
    }

    #btn svg {
      width: 18px;
      height: 18px;
    }

    .odp-wstep {
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--accent);
      font-family: 'Syne', sans-serif;
      font-size: 13px;
    }

    .odp-punkty {
      padding-left: 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .odp-punkty li {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      line-height: 1.6;
    }

    .odp-zacheta {
      margin-top: 10px;
      font-size: 11px;
      color: var(--muted);
      font-style: italic;
    }

    .btn-rozwin {
      margin-top: 10px;
      background: none;
      border: 1px solid var(--border);
      color: var(--muted);
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 11px;
      cursor: pointer;
      font-family: 'JetBrains Mono', monospace;
      transition: all 0.15s;
    }

    .btn-rozwin:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .pelna-tresc {
      margin-top: 10px;
      font-size: 11px;
      line-height: 1.7;
      color: var(--muted);
      border-left: 2px solid var(--border);
      padding-left: 12px;
      white-space: pre-wrap;
    }

    .feedback-row {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }

    .btn-feedback {
      background: none;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 3px 10px;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.15s;
    }

    .btn-feedback:hover {
      border-color: var(--accent);
      transform: scale(1.1);
    }

    .btn-copy {
      margin-left: auto;
      background: none;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 3px 10px;
      cursor: pointer;
      font-size: 13px;
      color: var(--muted);
      transition: all 0.15s;
    }

    .btn-copy:hover {
      border-color: var(--text);
      color: var(--text);
    }

    .btn-copy.copied {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* ── pływający przycisk scrolla ── */
    #btn-scroll-down {
      position: absolute;
      bottom: 90px;
      right: 30px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s, transform 0.2s;
      z-index: 500;
    }

    #btn-scroll-down.show {
      opacity: 1;
      pointer-events: auto;
    }

    #btn-scroll-down:hover {
      transform: scale(1.1);
      border-color: var(--accent);
      color: var(--accent);
    }

    /* ── custom tooltips ── */
    [data-tooltip] {
      position: relative;
    }

    [data-tooltip]::before {
      content: attr(data-tooltip);
      position: absolute;
      bottom: -35px;
      left: 50%;
      transform: translateX(-50%) scale(0.9);
      background: var(--surface2);
      color: var(--text);
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: all 0.2s;
      border: 1px solid var(--border);
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    [data-tooltip]:hover::before {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }

    .hint {
      font-size: 10px;
      color: var(--muted);
      font-family: 'JetBrains Mono', monospace;
      margin-top: 8px;
      text-align: center;
    }

    /* ── sidebar historii ── */
    .sidebar {
      position: fixed;
      top: 0;
      left: -320px;
      width: 320px;
      height: 100%;
      background: var(--surface);
      border-left: 1px solid var(--border);
      transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    }

    .sidebar.open {
      left: 0;
    }

    .sidebar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
    }

    .sidebar-header h3 {
      font-size: 14px;
      color: var(--text);
    }

    .sidebar-header button {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 18px;
      cursor: pointer;
      transition: color 0.15s;
    }

    .sidebar-header button:hover {
      color: var(--accent);
    }

    #sidebar-content {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
    }

    .sidebar-item {
      padding: 14px 16px;
      margin-bottom: 8px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text);
      transition: all 0.15s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-item:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* ── okno opcji (modal) ── */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .modal-overlay.active {
      display: flex;
      animation: fadeIn 0.2s;
    }

    .modal-content {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 90%;
      max-width: 400px;
      padding: 24px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .modal-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
    }

    .btn-close {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--muted);
      cursor: pointer;
      transition: 0.2s;
    }

    .btn-close:hover {
      color: var(--danger);
    }

    .modal-btn {
      display: block;
      width: 100%;
      text-align: left;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 10px;
      color: var(--text);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Syne', sans-serif;
    }

    .modal-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .modal-info {
      font-size: 12px;
      color: var(--muted);
      margin-top: 20px;
      line-height: 1.6;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.95);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* ── responsywność mobilna ── */
    /* ── toggles w sekcji bazy wiedzy ── */
    .sb-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }

    .sb-toggle-row:last-child {
      border-bottom: none;
    }

    .sb-toggle-sw {
      position: relative;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }

    .sb-toggle-sw input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .sb-slider {
      position: absolute;
      inset: 0;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 24px;
      cursor: pointer;
      transition: 0.3s;
    }

    .sb-slider:before {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      left: 3px;
      top: 3px;
      background: var(--muted);
      border-radius: 50%;
      transition: 0.3s;
    }

    .sb-toggle-sw input:checked+.sb-slider {
      background: rgba(200, 255, 0, 0.15);
      border-color: var(--accent);
    }

    .sb-toggle-sw input:checked+.sb-slider:before {
      transform: translateX(20px);
      background: var(--accent);
    }

    @media (max-width: 600px) {
      header {
        padding: 12px 16px;
      }

      .header-text h1 {
        font-size: 13px;
      }

      #chat {
        padding: 16px 0;
      }

      .message-wrap {
        padding: 0 12px;
        margin-bottom: 14px;
      }

      .msg-user .bubble {
        max-width: 90%;
        font-size: 13px;
      }

      .bot-content .bubble {
        font-size: 12px;
      }

      footer {
        padding: 12px 16px;
      }

      .welcome .big {
        font-size: 24px;
      }

      .chips {
        gap: 6px;
      }

      .chip {
        font-size: 11px;
        padding: 6px 10px;
      }

      #btn-clear span,
      #btn-options span {
        display: none;
      }
    }