--subtle:    #294540;

        /* Pattern tags — warm coral */
        --tag-bg:    rgba(255,100,70,0.12);
        --tag-color: #ff7b5c;
        --tag-bd:    rgba(255,100,70,0.26);

        /* Options */
        --opt-a-bg: rgba(90,140,125,0.09);  --opt-a-bd: #4da893;
        --opt-b-bg: rgba(60,120,200,0.09);  --opt-b-bd: #5b94c4;
        --opt-c-bg: rgba(80,160,100,0.09);  --opt-c-bd: #52a870;

        /* Status */
        --err:      #e05c5c;
        --err-bg:   rgba(224,92,92,0.1);
        --err-bd:   rgba(224,92,92,0.25);
        --warn-bg:  rgba(45,122,107,0.07);
        --warn-bd:  rgba(45,122,107,0.18);
        --warn-txt: #2D7A6B;

        /* Geometry */
        --radius:    16px;
        --radius-sm: 10px;
        --radius-xs: 6px;
        --pill:      100px;

        /* Shadows */
        --shadow:    0 8px 32px rgba(0,0,0,0.5);
        --shadow-sm: 0 2px 10px rgba(0,0,0,0.3);

      /* ── LIGHT MODE ─────────────────────────────────────────────────────────────── */
      :root[data-theme="light"] {
      --bg:        #F4EFE6;
      --surface:   rgba(255,252,245,0.92);
      --surface2:  rgba(237,230,218,0.95);
      --border:    rgba(45,122,107,0.13);
      --border-hi: rgba(45,122,107,0.24);
      --teal-dim:  rgba(45,122,107,0.10);
      --teal-glow: rgba(45,122,107,0.22);
      --text:      #1a2e28;
      --muted:     #5a7a72;
      --subtle:    #c8dfd8;
      --opt-a-bg:  rgba(45,122,107,0.07);
      --opt-b-bg:  rgba(60,120,200,0.07);
      --opt-c-bg:  rgba(80,160,100,0.07);
      --warn-bg:   rgba(45,122,107,0.08);
      --warn-bd:   rgba(45,122,107,0.22);
      --shadow:    0 8px 32px rgba(45,122,107,0.13);
      --shadow-sm: 0 2px 10px rgba(45,122,107,0.09);
      }
      [data-theme="light"] body {
      background-image:
      radial-gradient(ellipse 80% 50% at 8% 0%,   rgba(45,122,107,0.09) 0%, transparent 60%),
      radial-gradient(ellipse 60% 60% at 92% 100%, rgba(180,210,200,0.18) 0%, transparent 55%);
      }
      [data-theme="light"] .header {
      background: rgba(244,239,230,0.88);
      border-bottom-color: rgba(45,122,107,0.13);
      }
      [data-theme="light"] .card {
      background: rgba(255,252,245,0.88);
      }
      [data-theme="light"] .brand-name {
      background: linear-gradient(120deg, #2D7A6B 0%, #1f5a4e 55%, #154035 100%);
      -webkit-background-clip: text;
      background-clip: text;
      }
      [data-theme="light"] .disclaimer-bar {
      background: rgba(244,239,230,0.96);
      border-top-color: rgba(45,122,107,0.18);
      color: var(--muted);
      }
      [data-theme="light"] .option-desc { color: #5a7a72; }
      [data-theme="light"] .tab-nav {
      background: rgba(237,230,218,0.8);
      border-bottom-color: rgba(45,122,107,0.13);
      }

      /* ── RESET ──────────────────────────────────────────────────────────────────── */
      *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
      html { font-size:16px; -webkit-text-size-adjust:100%; }
      body {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.65;
      min-height: 100vh;
      background-image:
      radial-gradient(ellipse 80% 50% at 8% 0%,   rgba(45,122,107,0.07) 0%, transparent 60%),
      radial-gradient(ellipse 60% 60% at 92% 100%, rgba(0,130,180,0.12) 0%, transparent 55%);
      background-attachment: fixed;
      }
      button { font-family:inherit; cursor:pointer; border:none; background:none; }
      input, textarea { font-family:inherit; font-size:1rem; color:var(--text); }
      a { color:var(--teal); }

      /* ── APP ─────────────────────────────────────────────────────────────────────── */
      #app { min-height:100vh; display:flex; flex-direction:column; position:relative; }

      /* ── HEADER ──────────────────────────────────────────────────────────────────── */
      .header {
      background: rgba(12,24,33,0.9);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border-bottom: 1px solid var(--border);
      position: sticky; top:0; z-index:100;
      }
      .header-inner {
      max-width: var(--max-w); margin:0 auto; padding:0 18px;
      height: var(--header-h);
      display:flex; align-items:center; justify-content:space-between;
      }

      /* Brand */
      .brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
      .brand-icon {
      flex-shrink:0; position:relative;
      filter: drop-shadow(0 0 6px var(--teal-glow));
      animation: shieldGlow 4s ease-in-out infinite;
      }
      @keyframes shieldGlow {
      0%,100% { filter:drop-shadow(0 0 4px rgba(45,122,107,0.22)); }
      50%      { filter:drop-shadow(0 0 18px rgba(45,122,107,0.55)); }
      }
      .brand-text { display:flex; flex-direction:column; gap:0; }
      .brand-name {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: 1.2rem; font-weight:400; letter-spacing:0.01em;
      background: linear-gradient(120deg, #3a9080 0%, #2D7A6B 55%, #215a4e 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text; line-height:1.2;
      }
      .brand-tagline {
      font-size: 0.67rem; color: var(--muted); letter-spacing:0.08em;
      font-weight: 500; -webkit-text-fill-color: var(--muted);
      }
      .module-label {
      font-size: 0.6rem; font-weight: 700;
      color: var(--teal); background: var(--teal-dim);
      border: 1px solid rgba(45,122,107,0.2);
  <!DOCTYPE html>
  <html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NarcFilter – Kompas Rozwodowy</title>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%230f1923'/><path d='M16 4 L26 8 L26 18 C26 23.5 16 28 16 28 C16 28 6 23.5 6 18 L6 8 Z' fill='%232D7A6B'/><text x='16' y='22' text-anchor='middle' font-family='sans-serif' font-weight='bold' font-size='14' fill='white'>N</text></svg>" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap" rel="stylesheet" />
    <style>

      /* ── VARIABLES ─────────────────────────────────────────────────────────────── */
      :root {
        --header-h: 60px;
        --max-w: 640px;

        /* Palette — deep ocean */
        --bg:        #0c1821;
        --surface:   rgba(16,36,52,0.85);
        --surface2:  rgba(22,44,64,0.9);
        --border:    rgba(255,255,255,0.07);
        --border-hi: rgba(255,255,255,0.13);

        /* Accent — teal */
        --teal:      #2D7A6B;
        --teal-lt:   #3a9080;
        --teal-dim:  rgba(45,122,107,0.12);
        --teal-glow: rgba(45,122,107,0.28);

        /* Text */
        --text:      #dff0ec;
        --muted:     #5a8880;
      }
      border-radius: var(--pill); padding: 2px 9px;
  letter-spacing: 0.07em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
  -webkit-text-fill-color: var(--teal);
}

/* Header controls */
.header-controls { display:flex; align-items:center; gap:10px; }
.lang-toggle {
  display:flex; align-items:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--pill); padding:3px;
}
.lang-btn {
  padding:5px 13px; border-radius:var(--pill);
  font-size:0.77rem; font-weight:600; color:var(--muted);
  letter-spacing:0.04em; transition:all 0.2s;
}
.lang-btn.active {
  background:var(--teal); color:#0c1821;
  box-shadow:0 1px 6px rgba(45,122,107,0.35);
}
.lang-btn:hover:not(.active) { color:var(--teal); }
.btn-settings {
  width:38px; height:38px; border-radius:var(--radius-sm);
  color:var(--muted); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; border:1px solid transparent;
}
.btn-settings:hover {
  background:var(--surface2); color:var(--teal);
  border-color:var(--border);
  transform:rotate(30deg);
}
.btn-theme {
  width:38px; height:38px; border-radius:var(--radius-sm);
  color:var(--muted); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; border:1px solid transparent;
}
.btn-theme:hover {
  background:var(--surface2); color:var(--teal);
  border-color:var(--border);
}
.access-key-overlay {
  position:fixed; inset:0; z-index:600;
  background:var(--bg); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.access-key-overlay.hidden { display:none !important; }
.access-key-box {
  width:100%; max-width:360px;
  background:var(--surface);
  border:1px solid var(--border-hi);
  border-radius:var(--radius);
  padding:36px 28px 28px;
  box-shadow:var(--shadow);
  text-align:center;
}

/* ── TAB NAV ─────────────────────────────────────────────────────────────────── */
.tab-nav {
  background:rgba(12,24,33,0.9);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);
  position:sticky; top:var(--header-h); z-index:99;
}
.tab-nav-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; padding:0 18px; gap:4px;
}
.tab-btn {
  flex:1; padding:13px 16px;
  font-size:0.88rem; font-weight:500; color:var(--muted);
  border-bottom:2px solid transparent; transition:all 0.2s;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.tab-btn.active { color:var(--teal); border-bottom-color:var(--teal); font-weight:600; }
.tab-btn:hover:not(.active) { color:var(--text); }
.tab-icon { font-size:0.95rem; }

/* ── MAIN ────────────────────────────────────────────────────────────────────── */
.main-content {
  flex:1; max-width:var(--max-w); margin:0 auto; width:100%;
  padding:20px 16px calc(88px + 56px);
}
.panel.hidden { display:none; }

/* ── CARDS ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.35s ease-out both;
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Teal shimmer on top edge */
.card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--teal-dim) 30%, rgba(45,122,107,0.38) 50%, var(--teal-dim) 70%, transparent 100%);
}

/* ── FORMS ───────────────────────────────────────────────────────────────────── */
.form-label {
  display:block; font-size:0.82rem; font-weight:600;
  color:var(--muted); margin-bottom:9px;
  text-transform:uppercase; letter-spacing:0.07em;
}
.form-hint { font-size:0.79rem; color:var(--subtle); margin-top:8px; line-height:1.55; }
.input {
  width:100%; padding:11px 15px;
  background: var(--surface2);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:0.95rem;
  transition:border-color 0.2s, box-shadow 0.2s; outline:none;
}
.input:focus {
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-dim), 0 0 14px rgba(45,122,107,0.1);
  background: rgba(22,50,70,0.9);
}
.textarea {
  width:100%; padding:13px 15px;
  background: var(--surface2);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:0.95rem;
  resize:vertical; min-height:140px; line-height:1.65;
  transition:border-color 0.2s, box-shadow 0.2s; outline:none;
}
.textarea:focus {
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-dim), 0 0 18px rgba(45,122,107,0.08);
  background: rgba(22,50,70,0.9);
}
.textarea-sm { min-height:78px; }
.input-group { display:flex; gap:8px; }
.input-group .input { flex:1; min-width:0; }
.kbd-hint { font-size:0.74rem; color:var(--subtle); text-align:right; margin-top:7px; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 22px; border-radius:var(--radius-sm);
  font-size:0.91rem; font-weight:600; transition:all 0.2s;
  min-height:46px; outline:none; position:relative; overflow:hidden;
}
.btn:focus-visible { box-shadow:0 0 0 3px var(--teal-glow); }

/* Primary — teal */
.btn-primary {
  background:linear-gradient(135deg, #3a9080, #2D7A6B);
  color:#0c1821; font-weight:700;
  box-shadow:0 2px 12px rgba(45,122,107,0.3);
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.2) 50%,transparent 100%);
  transform:translateX(-100%); transition:transform 0.55s ease;
}
.btn-primary:hover:not(:disabled)::after { transform:translateX(100%); }
.btn-primary:hover:not(:disabled) {
  box-shadow:0 4px 22px rgba(45,122,107,0.45);
  transform:translateY(-1px);
}

/* Secondary — glass */
.btn-secondary {
  background: var(--surface2);
  color:var(--text);
  border:1px solid var(--border);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn-secondary:hover:not(:disabled) {
  border-color:var(--teal); color:var(--teal);
  background:rgba(45,122,107,0.06);
}

/* Danger outline */
.btn-outline-danger {
  background:transparent; color:var(--err);
  border:1px solid var(--err-bd);
}
.btn-outline-danger:hover:not(:disabled) { background:var(--err-bg); }

/* Icon variant */
.btn-icon-sm {
  padding:9px 15px;
  background: var(--surface2);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--muted); font-size:0.84rem; min-height:44px;
  white-space:nowrap;
}
.btn-icon-sm:hover { border-color:var(--teal); color:var(--teal); }

/* Analyzing shimmer state */
.btn-analyzing {
  background:linear-gradient(90deg,#245f55,#2D7A6B,#3a9080,#2D7A6B,#245f55) !important;
  background-size:200% 100% !important;
  animation:shimmer 1.4s linear infinite !important;
  color:#0c1821 !important;
}
@keyframes shimmer {
  0% { background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

.btn-full { width:100%; margin-top:14px; }
.btn:disabled { opacity:0.42; cursor:not-allowed; transform:none!important; box-shadow:none!important; }
.btn-text {
  background:none; color:var(--teal); font-size:0.84rem;
  font-weight:500; padding:5px 0; min-height:auto;
}
.btn-text:hover { text-decoration:underline; }

/* ── ALERTS ──────────────────────────────────────────────────────────────────── */
.alert { border-radius:var(--radius-sm); padding:15px 18px; font-size:0.91rem; margin-bottom:14px; }
.alert-error { background:var(--err-bg); border:1px solid var(--err-bd); color:var(--err); }
.alert-warning {
  background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn-txt);
  display:flex; flex-direction:column; gap:12px;
}

/* ── RESULTS ─────────────────────────────────────────────────────────────────── */
.results-card { animation:cardIn 0.3s ease-out; }
@keyframes cardIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Staggered reveal */
.reveal { animation:revealIn 0.35s ease-out both; }
@keyframes revealIn {
  from { opacity:0; transform:translateY(7px); }
  to   { opacity:1; transform:translateY(0); }
}

.result-section {
  font-family:'DM Serif Display', Georgia, serif;
  font-size:0.95rem; font-weight:400; font-style:italic;
  color:var(--muted); letter-spacing:0.01em;
  margin:22px 0 10px; padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.result-section:first-child { margin-top:0; }

.results-card p { font-size:0.94rem; line-height:1.75; margin-bottom:9px; }
.results-card ul { padding-left:22px; margin-bottom:9px; }
.results-card li { font-size:0.94rem; line-height:1.75; margin-bottom:5px; }
.results-card strong { color:var(--text); font-weight:600; }

/* ── OPTION BLOCKS ───────────────────────────────────────────────────────────── */
.option-block {
  border-radius:var(--radius-sm); padding:15px 18px;
  margin:12px 0; border-left:3px solid transparent;
  position:relative;
}
.option-block p { font-size:0.92rem!important; margin-bottom:5px!important; }
.option-label {
  font-weight:700; font-size:0.84rem!important;
  margin-bottom:9px!important; letter-spacing:0.01em;
  display:flex; align-items:center; gap:8px;
}
.option-a { background:var(--opt-a-bg); border-left-color:var(--opt-a-bd); }
.option-b { background:var(--opt-b-bg); border-left-color:var(--opt-b-bd); }
.option-c { background:var(--opt-c-bg); border-left-color:var(--opt-c-bd); }
.option-a .option-label { color:var(--opt-a-bd); }
.option-b .option-label { color:var(--opt-b-bd); }
.option-c .option-label { color:var(--opt-c-bd); }

/* ── WARM SUPPORT SECTION ────────────────────────────────────────────────────── */
.section-warm {
  color:var(--teal) !important;
  border-bottom-color:rgba(45,122,107,0.22) !important;
}
.section-warm ~ p {
  background:rgba(45,122,107,0.05);
  border:1px solid rgba(45,122,107,0.14);
  border-radius:var(--radius-sm);
  padding:15px 18px; font-style:italic;
  line-height:1.85; color:var(--text);
}

/* ── LOG PANEL ───────────────────────────────────────────────────────────────── */
.log-actions { display:flex; gap:8px; margin-bottom:16px; }
.log-actions .btn { flex:1; font-size:0.84rem; }

/* ── LOG ENTRIES ─────────────────────────────────────────────────────────────── */
.log-entry {
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--border);
  border-left:3px solid var(--teal);
  border-radius:var(--radius);
  padding:18px 18px 14px;
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
  transition:all 0.2s;
  animation: fadeInUp 0.3s ease-out both;
}
.log-entry:hover {
  border-color:var(--border-hi);
  border-left-color:var(--teal);
  background: rgba(22,44,64,0.9);
}
.entry-header {
  display:flex; align-items:flex-start;
  justify-content:space-between; margin-bottom:11px; gap:8px;
}
.entry-date {
  font-size:0.77rem; color:var(--muted); font-weight:600;
  letter-spacing:0.02em;
}
.btn-delete {
  color:var(--subtle); font-size:0.8rem; flex-shrink:0;
  padding:3px 7px; border-radius:var(--radius-xs); line-height:1;
  transition:all 0.15s;
}
.btn-delete:hover { background:var(--err-bg); color:var(--err); }
.entry-patterns { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.ptag {
  background:var(--tag-bg); color:var(--tag-color);
  border:1px solid var(--tag-bd);
  border-radius:var(--pill); padding:3px 11px;
  font-size:0.72rem; font-weight:600;
  animation:tagPop 0.2s ease-out both;
}
@keyframes tagPop {
  from { opacity:0; transform:scale(0.85); }
  to   { opacity:1; transform:scale(1); }
}
.ptag-none { background:var(--surface2); color:var(--subtle); border-color:var(--border); }
.entry-msg {
  font-size:0.87rem; color:var(--muted); font-style:italic;
  background:var(--surface2); border-radius:var(--radius-xs);
  padding:10px 14px; border-left:2px solid var(--border);
  margin-bottom:10px; line-height:1.55;
}
.entry-note { font-size:0.84rem; color:var(--muted); margin-bottom:9px; }
.entry-note strong { color:var(--text); }
.btn-toggle { font-size:0.81rem; font-weight:500; color:var(--muted); padding:4px 0; min-height:auto; }
.btn-toggle:hover { color:var(--teal); }
.entry-analysis {
  margin-top:14px; padding-top:14px; border-top:1px solid var(--border);
  animation:cardIn 0.22s ease-out;
}
.entry-analysis .result-section { font-size:0.77rem; margin-top:14px; }
.entry-analysis .option-block { padding:11px 14px; margin:8px 0; }

/* ── EMPTY STATE ─────────────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:64px 20px; color:var(--muted); }
.empty-icon { font-size:2.8rem; margin-bottom:16px; opacity:0.7; }
.empty-title { font-family:'DM Serif Display',Georgia,serif; font-size:1.15rem; font-weight:400; color:var(--text); margin-bottom:8px; }
.empty-sub { font-size:0.87rem; line-height:1.65; max-width:270px; margin:0 auto; }

/* ── SETTINGS PANEL ──────────────────────────────────────────────────────────── */
.settings-card-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:22px; gap:12px; flex-wrap:wrap;
}
.settings-card-title {
  font-family:'DM Serif Display',Georgia,serif;
  font-size:1.2rem; font-weight:400; color:var(--text);
}
.security-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(45,122,107,0.1); border:1px solid rgba(45,122,107,0.2);
  border-radius:var(--pill); padding:4px 12px;
  font-size:0.75rem; font-weight:600; color:var(--teal);
}
.form-group { margin-bottom:20px; }
.settings-note {
  margin-top:16px; padding:13px 15px;
  background: rgba(22,44,64,0.6);
  border-radius:var(--radius-xs);
  border:1px solid var(--border);
  font-size:0.79rem; color:var(--muted); line-height:1.6;
}
.settings-divider {
  height:1px; background:var(--border); margin:24px 0;
}
.danger-zone-label {
  font-size:0.75rem; font-weight:600; color:var(--subtle);
  text-transform:uppercase; letter-spacing:0.07em; margin-bottom:12px;
}

/* ── TOAST ───────────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--surface2); color:var(--text);
  border:1px solid var(--border); border-left:3px solid var(--teal);
  padding:11px 22px; border-radius:var(--radius-sm);
  font-size:0.87rem; font-weight:500;
  z-index:400; opacity:0; pointer-events:none;
  transition:opacity 0.22s, transform 0.22s;
  white-space:nowrap; box-shadow:var(--shadow);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.hidden { display:none; }

/* ── DISCLAIMER BAR ──────────────────────────────────────────────────────────── */
.disclaimer-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:800;
  text-align:center; padding:7px 20px;
  font-size:11px; line-height:1.5;
  color:rgba(255,255,255,0.62);
  background:rgba(12,24,33,0.92);
  backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,0.06);
}

/* ── LOADING OVERLAY ─────────────────────────────────────────────────────────── */
.loading-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(8,16,26,0.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  animation:fadeIn 0.2s ease-out;
}
.loading-overlay.hidden { display:none !important; }
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
.loading-spinner {
  width:44px; height:44px; border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--teal);
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text {
  font-family:'DM Serif Display',Georgia,serif;
  font-size:1rem; color:var(--muted); letter-spacing:0.04em;
}

/* ── UTILS ───────────────────────────────────────────────────────────────────── */
.hidden { display:none !important; }

/* ── FOOTER ─────────────────────────────────────────────────────────────────── */
.app-footer {
  text-align:center; padding:16px 16px 32px;
  color:var(--muted); font-size:0.78rem;
}
.footer-link {
  color:var(--muted); text-decoration:none; opacity:0.65;
  transition:opacity 0.15s;
}
.footer-link:hover { opacity:1; text-decoration:underline; }
.footer-sep { margin:0 8px; opacity:0.35; }

/* ── LEGAL MODAL ─────────────────────────────────────────────────────────────── */
.legal-modal {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,0.72); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.legal-modal-box {
  background:var(--surface2); border:1px solid var(--border-hi);
  border-radius:var(--radius); max-width:600px; width:100%;
  max-height:82vh; display:flex; flex-direction:column;
  box-shadow:var(--shadow);
}
.legal-modal-header {
  display:flex; justify-content:flex-end;
  padding:12px 16px 0; flex-shrink:0;
}
.legal-modal-close {
  background:transparent; border:1px solid var(--border-hi);
  border-radius:var(--radius-xs); color:var(--muted); cursor:pointer;
  padding:4px 12px; font-size:0.8rem; transition:background 0.15s;
}
.legal-modal-close:hover { background:rgba(255,255,255,0.06); }
.legal-modal-body {
  overflow-y:auto; padding:4px 28px 28px; flex:1;
}
.legal-title {
  font-family:'DM Serif Display',Georgia,serif;
  font-size:1.15rem; color:var(--teal); margin-bottom:2px;
}
.legal-subtitle { font-size:0.8rem; color:var(--muted); margin-bottom:16px; }
.legal-section {
  font-weight:600; font-size:0.88rem; color:var(--text);
  margin:16px 0 4px;
}
.legal-p { font-size:0.86rem; line-height:1.7; color:var(--text); margin-bottom:6px; }

/* ── DESKTOP ─────────────────────────────────────────────────────────────────── */
@media (min-width:640px) {
  .main-content { padding:24px 20px calc(88px + 56px); }
  .card { padding:26px; }
}

  </style>
</head>
<body>
<div id="app">

  <!-- HEADER -->
  <header class="header">
    <div class="header-inner">
      <a class="brand" href="#" onclick="return false;">
        <!-- Shield with co-parenting tree symbol -->
        <svg class="brand-icon" width="26" height="28" viewBox="0 0 26 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13 1.5L3.5 5.5v7c0 6.8 4.2 12.5 9.5 14.5 5.3-2 9.5-7.7 9.5-14.5v-7L13 1.5z"
                fill="url(#sg)"/>
          <text x="13" y="19" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="14" fill="rgba(255,255,255,0.95)">N</text>
          <defs>
            <linearGradient id="sg" x1="3.5" y1="1.5" x2="22.5" y2="28" gradientUnits="userSpaceOnUse">
              <stop offset="0%"   stop-color="#4aab97"/>
              <stop offset="55%"  stop-color="#2D7A6B"/>
              <stop offset="100%" stop-color="#1f5a50"/>
            </linearGradient>
          </defs>
        </svg>
        <div class="brand-text">
          <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
            <span class="brand-name">NarcFilter</span>
            <span class="module-label">Moduł analizy komunikacji</span>
          </div>
          <span class="brand-tagline">owned by kompasrozwodowy.vercel.app</span>
        </div>
      </a>
      <div class="header-controls">
        <div class="lang-toggle" role="group" aria-label="Language">
          <button class="lang-btn active" id="btn-pl" aria-label="Polski">PL</button>
          <button class="lang-btn" id="btn-en" aria-label="English">EN</button>
        </div>
        <button class="btn-theme" id="btn-theme" aria-label="Toggle theme" title="Light / Dark">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
            <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
          </svg>
        </button>
        <button class="btn-settings" id="btn-settings" aria-label="Settings">⚙</button>
      </div>
    </div>
  </header>

  <!-- TABS -->
  <nav class="tab-nav" role="tablist">
    <div class="tab-nav-inner">
      <button class="tab-btn active" role="tab" aria-selected="true"  data-tab="analyzer" data-i18n="tab_analyze">
        <span class="tab-icon">◎</span><span></span>
      </button>
      <button class="tab-btn" role="tab" aria-selected="false" data-tab="log" data-i18n="tab_log">
        <span class="tab-icon">⊟</span><span></span>
      </button>
      <button class="tab-btn" role="tab" aria-selected="false" data-tab="settings" data-i18n="tab_settings">
        <span class="tab-icon">⚙</span><span></span>
      </button>
    </div>
  </nav>

  <!-- MAIN -->
  <main class="main-content">

    <!-- ANALYZER -->
    <div id="panel-analyzer" class="panel" role="tabpanel">

      <div id="no-key-warning" class="alert alert-warning hidden">
        <p data-i18n="no_key_msg"></p>
        <button class="btn btn-secondary" id="btn-from-warning" data-i18n="open_settings"
                style="align-self:flex-start;font-size:0.85rem;padding:9px 16px;margin-top:0"></button>
      </div>

      <div id="analyzer-input" class="card hidden">
        <label class="form-label" for="msg-input" data-i18n="input_label"></label>
        <textarea id="msg-input" class="textarea" rows="6" data-i18n-ph="input_ph"></textarea>
        <p class="kbd-hint" data-i18n="kbd_hint"></p>
        <button id="btn-analyze" class="btn btn-primary btn-full" data-i18n="btn_analyze"></button>
      </div>

      <div id="error-area" class="hidden">
        <div class="alert alert-error"><p id="error-msg"></p></div>
      </div>

      <div id="results-area" class="hidden">
        <div id="results-content" class="card results-card"></div>
        <div class="card" style="margin-top:0">
          <label class="form-label" for="entry-note" data-i18n="note_label"></label>
          <textarea id="entry-note" class="textarea textarea-sm" rows="2" data-i18n-ph="note_ph"></textarea>
          <button id="btn-save-log" class="btn btn-secondary btn-full" data-i18n="btn_save"></button>
        </div>
      </div>

    </div>

    <!-- LOG -->
    <div id="panel-log" class="panel hidden" role="tabpanel">
      <div class="log-actions">
        <button id="btn-export" class="btn btn-secondary" data-i18n="btn_export" disabled></button>
        <button id="btn-clear"  class="btn btn-outline-danger" data-i18n="btn_clear" disabled></button>
      </div>
      <div class="log-actions" style="margin-top:-4px">
        <button id="btn-export-logbook" class="btn btn-secondary btn-full" disabled>Eksportuj do coParentLogBook</button>
      </div>
      <div id="log-empty" class="empty-state">
        <div class="empty-icon">⊟</div>
        <p class="empty-title" data-i18n="empty_title"></p>
        <p class="empty-sub"   data-i18n="empty_sub"></p>
      </div>
      <div id="log-entries"></div>
    </div>

    <!-- SETTINGS -->
    <div id="panel-settings" class="panel hidden" role="tabpanel">
      <div class="card">
        <div class="settings-card-header">
          <h2 class="settings-card-title" data-i18n="settings_title"></h2>
          <span class="security-badge"><span>🔒</span><span data-i18n="security_badge"></span></span>
        </div>
        <div class="form-group">
          <label class="form-label" for="api-key-input" data-i18n="key_label"></label>
          <div class="input-group">
            <input type="text" id="api-key-input" class="input" placeholder="NF-XXXXX-XXXXX"
                   autocomplete="off" autocorrect="off" spellcheck="false"
                   style="letter-spacing:0.05em;text-transform:uppercase" />
            <button class="btn btn-icon-sm" id="btn-toggle-key" data-i18n="key_show"></button>
          </div>
          <p class="form-hint" data-i18n="key_hint"></p>
        </div>
        <button id="btn-save-settings" class="btn btn-primary btn-full" data-i18n="btn_save_settings"></button>
        <div class="settings-note"><p data-i18n="settings_note"></p></div>

        <div class="settings-divider"></div>
        <p class="danger-zone-label" data-i18n="danger_zone_label"></p>
        <button id="btn-clear-all" class="btn btn-outline-danger btn-full" data-i18n="btn_clear_all"></button>
      </div>
    </div>

  </main>

  <footer class="app-footer">
    <a href="#" class="footer-link" onclick="Legal.open('privacy');return false;" data-i18n="footer_privacy"></a>
    <span class="footer-sep">·</span>
    <a href="#" class="footer-link" onclick="Legal.open('terms');return false;" data-i18n="footer_terms"></a>
  </footer>
</div>

<!-- LEGAL MODAL -->
<div id="legal-modal" class="legal-modal hidden" role="dialog" aria-modal="true">
  <div class="legal-modal-box">
    <div class="legal-modal-header">
      <button class="legal-modal-close" onclick="Legal.close()" data-i18n="btn_close"></button>
    </div>
    <div class="legal-modal-body" id="legal-content"></div>
  </div>
</div>

<!-- ACCESS KEY OVERLAY — shown on first launch when no key stored -->
<div id="access-key-overlay" class="access-key-overlay hidden">
  <div class="access-key-box">
    <div class="brand-name" style="font-size:1.35rem;margin-bottom:6px">NarcFilter</div>
    <p style="color:var(--muted);font-size:0.88rem;margin-bottom:28px;line-height:1.5">Wprowadź klucz dostępu,<br>aby korzystać z aplikacji.</p>
    <input type="text" id="overlay-key-input" class="input" placeholder="NF-XXXXX-XXXXX"
           autocomplete="off" spellcheck="false"
           style="letter-spacing:0.07em;text-transform:uppercase;text-align:center;margin-bottom:12px" />
    <button id="btn-overlay-save" class="btn btn-primary btn-full">Zapisz klucz</button>
    <p style="font-size:0.75rem;color:var(--muted);margin-top:18px;text-align:center;line-height:1.6">
      Klucz dostępu otrzymasz emailem po zakupie pakietu.<br>
      Możesz go też zmienić w zakładce Ustawienia.
    </p>
  </div>
</div>

<!-- DISCLAIMER -->
<div class="disclaimer-bar" id="disclaimer-bar" data-i18n="disclaimer"></div>

<!-- LOADING OVERLAY -->
<div id="loading-overlay" class="loading-overlay hidden" aria-live="polite" aria-label="Analyzing...">
  <div class="loading-spinner"></div>
  <p class="loading-text" id="loading-text"></p>
</div>

<!-- TOAST -->
<div id="toast" class="toast hidden" aria-live="polite"></div>

<script>
'use strict';

// ═══════════════════════════════════════════════════════════════════════════════
// CONSTANTS
// ═══════════════════════════════════════════════════════════════════════════════
const MODEL   = 'claude-sonnet-4-20250514';
const API_URL = 'https://api.anthropic.com/v1/messages';
const SK      = { key:'cps_api_key', lang:'cps_lang', log:'cps_log', theme:'cps_theme', accessKey:'nf_access_key' };

const SUN_SVG = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>`;
const MOON_SVG = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>`;

// ═══════════════════════════════════════════════════════════════════════════════
// SYSTEM PROMPTS
// ═══════════════════════════════════════════════════════════════════════════════
const PROMPT_PL = `Jesteś asystentem analizy komunikacji dla osób, które utrzymują kontakt z osobami wykazującymi narcystyczne wzorce komunikacyjne. Twoja rola jest ściśle ograniczona do analizowania wzorców komunikacji i sugerowania strategii odpowiedzi. Nie jesteś terapeutą, psychologiem ani doradcą prawnym.

FRAMEWORK ANALIZY

Gdy użytkownik wklei wiadomość, przeanalizuj ją pod kątem następujących wzorców manipulacji. Zidentyfikuj, które są obecne i nazwij je prostym językiem:

1. WZBUDZANIE POCZUCIA WINY — zmuszanie odbiorcy do tłumaczenia się lub udowadniania swojej wartości. Cel: uległość.
2. ZNIEKSZTAŁCANIE RZECZYWISTOŚCI (Gaslighting) — zaprzeczanie faktom, przepisywanie historii, sprawianie, że odbiorca wątpi we własną percepcję.
3. BEZPOŚREDNIA DEWALUACJA — jawne ataki na inteligencję, kompetencje, uczciwość lub charakter.
4. INSTRUMENTALNE CIEPŁO — życzliwość pojawiająca się wyłącznie, gdy nadawca czegoś potrzebuje.
5. ODWRÓCENIE RÓL OFIARY — nadawca przedstawia siebie jako skrzywdzonego. Jego zachowanie jest reinterpretowane jako Twoja wina.
6. WORD SALAD — chaotyczna, kołowa wiadomość zaprojektowana tak, aby zdezorientować i wyczerpać.
7. TRIANGULACJA — wprowadzanie osób trzecich w celu wywołania niepewności lub presji.
8. HACZYK (Bait) — wiadomość zaprojektowana tak, aby wywołać reakcję emocjonalną dotykającą dzieci, lęków lub dawnych ran.
9. PROJEKCJA — oskarżanie odbiorcy o zachowania, które należą do nadawcy.

STRATEGIA ODPOWIEDZI

Podaj TRZY opcje wyraźnie oznaczone:

OPCJA A — GRAY ROCK: Krótka, rzeczowa, emocjonalnie neutralna. Bez JADE (Uzasadniaj, Kłóć się, Broń się, Tłumacz). Maks. 2-3 zdania.
OPCJA B — TYLKO FAKTY: Odnosi się wyłącznie do treści praktycznych, całkowicie ignoruje warstwę manipulacji.
OPCJA C — BRAK ODPOWIEDZI: Użyj, gdy wiadomość nie ma treści wymagającej działania lub odpowiedź mogłaby eskalować. Wyjaśnij krótko, dlaczego milczenie jest właściwe.

ZASADY TONU
- Ciepły, spokojny, wspierający wobec użytkownika
- Nigdy kliniczny ani zimny
- Nigdy nie mów użytkownikowi, co ma robić z relacją
- Nigdy nie diagnozuj nadawcy — mów "ta wiadomość zawiera wzorce...", nie "ta osoba jest..."
- Jeśli użytkownik wydaje się w trudnym stanie, delikatnie zaznacz, że profesjonalne wsparcie może być pomocne

TWARDE LIMITY
NIGDY: nie diagnozuj nikogo, nie dawaj porad prawnych, nie mów użytkownikowi, czy ma zostać czy odejść
ZAWSZE: opieraj analizę wyłącznie na dostarczonym tekście, przypominaj użytkownikowi, że najlepiej zna swoją sytuację

FORMAT WYJŚCIA:

## Analiza wzorców
[wykryte wzorce, jeden w linii]

## Co ta wiadomość próbuje osiągnąć
[jeden krótki akapit]

## Twoje opcje odpowiedzi

**Opcja A — Gray Rock**
[tekst odpowiedzi]

**Opcja B — Tylko fakty**
[tekst odpowiedzi lub "Nie dotyczy"]

**Opcja C — Brak odpowiedzi**
[jeśli zalecane: krótkie wyjaśnienie dlaczego]

## Słowo dla ciebie
[2-3 zdania ciepłego, uziemiającego wsparcia. Nie porady. Tylko uznanie.]`;

const PROMPT_EN = `You are a communication analysis assistant for people who are in contact with individuals who display narcissistic communication patterns. Your role is strictly limited to analyzing communication patterns and suggesting response strategies. You are not a therapist, psychologist, or legal advisor.

ANALYSIS FRAMEWORK

When the user pastes a message, analyze it for the following manipulation patterns. Identify which are present and briefly name them in plain language:

1. GUILT INDUCTION — pushing the recipient to explain themselves or prove their worth. Goal: submission.
2. REALITY DISTORTION (Gaslighting) — denying facts, rewriting history, making recipient doubt their own perception.
3. DIRECT DEVALUATION — explicit attacks on intelligence, competence, honesty, or character.
4. TRANSACTIONAL WARMTH — kindness that appears only when the sender needs something.
5. VICTIM REVERSAL — sender positions themselves as wronged party. Their behavior reframed as your fault.
6. WORD SALAD — chaotic, circular message designed to confuse and exhaust.
7. TRIANGULATION — introducing third parties to create insecurity or pressure.
8. BAIT — message designed to trigger emotional reaction touching on children, fears, or past wounds.
9. PROJECTION — accusing recipient of behaviors that belong to the sender.

RESPONSE STRATEGY

Provide THREE options labeled clearly:

OPTION A — GRAY ROCK: Short, factual, emotionally neutral. No JADE (Justify, Argue, Defend, Explain). Max 2-3 sentences.
OPTION B — FACTS ONLY: Acknowledges only practical content, ignores manipulation layer completely.
OPTION C — NO RESPONSE: Use when message has no actionable content or responding would escalate. Explain briefly why silence is appropriate.

TONE RULES
- Warm, calm, supportive toward the user
- Never clinical or cold
- Never tell user what to do about the relationship
- Never diagnose the sender — say "this message contains patterns of..." not "this person is..."
- If user seems distressed, gently note professional support can be helpful

HARD LIMITS
NEVER: diagnose anyone, give legal advice, tell user to stay or leave the relationship
ALWAYS: base analysis only on provided text, remind user they know their situation best

OUTPUT FORMAT:

## Pattern Analysis
[detected patterns, one per line]

## What this message is trying to achieve
[one short paragraph]

## Your response options

**Option A — Gray Rock**
[response text]

**Option B — Facts Only**
[response text or "N/A"]

**Option C — No Response**
[if recommended: brief explanation why]

## A word for you
[2-3 sentences of warm, grounding support. Not advice. Just acknowledgment.]`;

// ═══════════════════════════════════════════════════════════════════════════════
// TRANSLATIONS
// ═══════════════════════════════════════════════════════════════════════════════
const TRANSLATIONS = {
  pl: {
    tab_analyze:'Analizuj', tab_log:'Dziennik', tab_settings:'Ustawienia',
    settings_title:'Ustawienia',
    security_badge:'Dane tylko lokalnie',
    key_label:'Klucz dostępu NarcFilter',
    key_hint:'Klucz w formacie NF-XXXXX-XXXXX. Przechowywany wyłącznie na tym urządzeniu.',
    key_show:'Pokaż', key_hide:'Ukryj',
    btn_save_settings:'Zapisz ustawienia',
    settings_note:'Klucz API uzyskasz na platform.anthropic.com. Każda analiza zużywa tokeny z Twojego konta Anthropic.',
    danger_zone_label:'Strefa danych',
    btn_clear_all:'Usuń wszystkie dane i klucz API',
    open_settings:'Otwórz ustawienia',
    no_key_msg:'Aby korzystać z aplikacji, wprowadź klucz dostępu NarcFilter w ustawieniach.',
    input_label:'Wiadomość do analizy',
    input_ph:'Wklej tutaj wiadomość, którą chcesz przeanalizować...',
    kbd_hint:'Ctrl+Enter aby analizować',
    btn_analyze:'Analizuj wiadomość', btn_analyzing:'Analizuję...',
    note_label:'Twoja notatka (opcjonalna)',
    note_ph:'Kontekst, jak się czułeś/aś, co chcesz zapamiętać...',
    btn_save:'Zapisz do dziennika', btn_saved:'Zapisano ✓',
    btn_export:'Kopiuj do schowka', btn_clear:'Wyczyść dziennik',
    empty_title:'Dziennik jest pusty',
    empty_sub:'Analizuj wiadomości i zapisuj je tutaj. Wszystko zostaje tylko na tym urządzeniu.',
    btn_delete:'Usuń', btn_show:'Pokaż analizę ▾', btn_hide:'Ukryj analizę ▴',
    note_prefix:'Notatka:',
    toast_saved:'Dodano do dziennika', toast_deleted:'Wpis usunięty',
    toast_cleared:'Dziennik wyczyszczony', toast_copied:'Skopiowano!',
    toast_settings:'Ustawienia zapisane', toast_cleared_all:'Wszystkie dane usunięte',
    err_empty:'Wpisz lub wklej wiadomość do analizy.',
    err_no_key:'Brak klucza dostępu. Dodaj go w ustawieniach.',
    err_invalid_key:'Klucz dostępu jest nieprawidłowy lub wygasł. Sprawdź ustawienia.',
    err_network:'Brak połączenia z internetem.',
    err_rate:'Limit zapytań przekroczony. Poczekaj chwilę.',
    err_api:'Błąd serwera API. Spróbuj ponownie.',
    confirm_clear:'Wyczyścić cały dziennik? Tej operacji nie można cofnąć.',
    confirm_clear_all:'Usunąć wszystkie dane? Klucz API i cały dziennik zostaną usunięte. Tej operacji nie można cofnąć.',
    footer_privacy:'Polityka prywatności', footer_terms:'Regulamin',
    disclaimer:'Analizy generowane przez AI mogą zawierać błędy i mają charakter wyłącznie informacyjny. Nie zastępują porady prawnej, psychologicznej ani innej profesjonalnej rekomendacji. To Ty podejmujesz ostateczną decyzję co do swoich działań.',
    btn_close:'Zamknij',
  },
  en: {
    tab_analyze:'Analyze', tab_log:'Log', tab_settings:'Settings',
    settings_title:'Settings',
    security_badge:'Local storage only',
    key_label:'NarcFilter Access Key',
    key_hint:'Key in NF-XXXXX-XXXXX format. Stored only on this device.',
    key_show:'Show', key_hide:'Hide',
    btn_save_settings:'Save settings',
    settings_note:'Get your API key at platform.anthropic.com. Each analysis uses tokens from your account.',
    danger_zone_label:'Data zone',
    btn_clear_all:'Remove all data & API key',
    open_settings:'Open settings',
    no_key_msg:'To use the app, add your Anthropic API key in settings.',
    input_label:'Message to analyze',
    input_ph:'Paste the message you want to analyze here...',
    kbd_hint:'Ctrl+Enter to analyze',
    btn_analyze:'Analyze message', btn_analyzing:'Analyzing...',
    note_label:'Your note (optional)',
    note_ph:'Context, how you felt, what you want to remember...',
    btn_save:'Save to log', btn_saved:'Saved ✓',
    btn_export:'Copy to clipboard', btn_clear:'Clear log',
    empty_title:'Log is empty',
    empty_sub:'Analyze messages and save them here. Everything stays only on this device.',
    btn_delete:'Delete', btn_show:'Show analysis ▾', btn_hide:'Hide analysis ▴',
    note_prefix:'Note:',
    toast_saved:'Added to log', toast_deleted:'Entry deleted',
    toast_cleared:'Log cleared', toast_copied:'Copied!',
    toast_settings:'Settings saved', toast_cleared_all:'All data removed',
    err_empty:'Please enter or paste a message to analyze.',
    err_no_key:'No API key. Add it in settings.',
    err_invalid_key:'Invalid API key. Check settings.',
    err_network:'No internet connection.',
    err_rate:'Rate limit exceeded. Please wait.',
    err_api:'API server error. Please try again.',
    confirm_clear:'Clear the entire log? This cannot be undone.',
    confirm_clear_all:'Delete all data? API key and entire log will be removed. This cannot be undone.',
    footer_privacy:'Privacy Policy', footer_terms:'Terms',
    disclaimer:'AI-generated analyses may contain errors and are for informational purposes only. They do not replace legal, psychological, or other professional advice. You make the final decision about your actions.',
    btn_close:'Close',
  }
};

// ═══════════════════════════════════════════════════════════════════════════════
// STATE
// ═══════════════════════════════════════════════════════════════════════════════
const S = {
  lang:       'pl',
  apiKey:     '',
  accessKey:  '',
  log:        [],
  loading:    false,
  lastResult: null,
  saved:      false,
};

// ═══════════════════════════════════════════════════════════════════════════════
// MODULE: Store  — localStorage helpers
// ═══════════════════════════════════════════════════════════════════════════════
const Store = {
  get(k, fb = '')  { try { const v = localStorage.getItem(k); return v !== null ? v : fb; } catch { return fb; } },
  set(k, v)        { try { localStorage.setItem(k, String(v)); } catch {} },
  getJ(k, fb = []) { try { const v = localStorage.getItem(k); return v ? JSON.parse(v) : fb; } catch { return fb; } },
  setJ(k, v)       { try { localStorage.setItem(k, JSON.stringify(v)); } catch {} },
};

// ═══════════════════════════════════════════════════════════════════════════════
// MODULE: I18n  — translations & language switching
// ═══════════════════════════════════════════════════════════════════════════════
const I18n = {
  t(key) {
    return TRANSLATIONS[S.lang]?.[key] ?? TRANSLATIONS.pl[key] ?? key;
  },
  setLang(lang) {
    S.lang = lang;
    Store.set(SK.lang, lang);
    this.updateAll();
    Render.log();
  },
  updateAll() {
    document.querySelectorAll('[data-i18n]').forEach(el => {
      if (el.classList.contains('tab-btn')) {
        const label = el.querySelectorAll('span')[1];
        if (label) label.textContent = this.t(el.dataset.i18n);
        return;
      }
      const v = this.t(el.dataset.i18n);
      if (v) el.textContent = v;
    });
    document.querySelectorAll('[data-i18n-ph]').forEach(el => {
      const v = this.t(el.dataset.i18nPh);
      if (v) el.placeholder = v;
    });
    document.getElementById('btn-pl').classList.toggle('active', S.lang === 'pl');
    document.getElementById('btn-en').classList.toggle('active', S.lang === 'en');
    document.documentElement.lang = S.lang;
  },
};

// ═══════════════════════════════════════════════════════════════════════════════
// MODULE: Legal — Privacy Policy & Terms of Service
// ═══════════════════════════════════════════════════════════════════════════════
const Legal = {
  TEXTS: {
    pl: {
      privacy: [
        ['title',    'Polityka Prywatności'],
        ['subtitle', 'NarcFilter — Moduł Kompas Rozwodowy · Ostatnia aktualizacja: kwiecień 2026'],
        ['section',  '1. Administrator danych'],
        ['p',        'Administratorem danych osobowych jest Integral Mindset Institute spółka z ograniczoną odpowiedzialnością (działająca pod marką Kompas Rozwodowy), z siedzibą w Pruszkowie, al. Niepodległości 4/78, 05-800 Pruszków, wpisana do rejestru przedsiębiorców KRS pod numerem 0000820154, NIP: 5342613837. Kontakt: integralmindset@gmail.com'],
        ['section',  '2. Jakie dane przetwarzamy'],
        ['p',        'Gdy wklejasz wiadomość do analizy, jej treść jest wysyłana do API firmy Anthropic (USA) wyłącznie w celu przeprowadzenia analizy. Nie przechowujemy tej treści na własnych serwerach.'],
        ['p',        'Log incydentów jest przechowywany wyłącznie lokalnie w Twojej przeglądarce (localStorage). Nie mamy do niego dostępu.'],
        ['p',        'Nie zbieramy adresów email, imion, danych logowania ani żadnych innych danych osobowych.'],
        ['section',  '3. Anthropic API'],
        ['p',        'Treść wiadomości trafia do Anthropic Inc. zgodnie z ich polityką prywatności: anthropic.com/privacy. Anthropic może przechowywać zapytania przez ograniczony czas zgodnie ze swoją polityką.'],
        ['section',  '4. Pliki cookie'],
        ['p',        'Aplikacja nie używa plików cookie. Dane są przechowywane wyłącznie w localStorage Twojej przeglądarki.'],
        ['section',  '5. Twoje prawa (RODO)'],
        ['p',        'Masz prawo do dostępu, sprostowania i usunięcia danych. Ponieważ nie przechowujemy Twoich danych, możesz je usunąć samodzielnie przez funkcję "Usuń wszystkie dane lokalne" w Ustawieniach aplikacji. W sprawach dotyczących danych osobowych możesz kontaktować się pod adresem: integralmindset@gmail.com'],
        ['section',  '6. Zmiany polityki'],
        ['p',        'O istotnych zmianach poinformujemy na stronie kompasrozwodowy.vercel.app.'],
      ],
      terms: [
        ['title',    'Regulamin'],
        ['subtitle', 'NarcFilter — Moduł Kompas Rozwodowy · Ostatnia aktualizacja: kwiecień 2026'],
        ['section',  '1. Charakter narzędzia'],
        ['p',        'NarcFilter jest narzędziem psychoedukacyjnym. Nie jest formą terapii, poradnictwa psychologicznego ani pomocy prawnej. Analizy generowane przez AI mają charakter informacyjny i nie stanowią diagnozy.'],
        ['section',  '2. Użytkownik'],
        ['p',        'Z narzędzia mogą korzystać osoby pełnoletnie (18+). Korzystając z NarcFilter akceptujesz niniejszy regulamin.'],
        ['section',  '3. Ograniczenie odpowiedzialności'],
        ['p',        'Integral Mindset Institute sp. z o.o. (działająca pod marką Kompas Rozwodowy) nie ponosi odpowiedzialności za decyzje podjęte na podstawie analiz wygenerowanych przez aplikację. W sytuacjach kryzysowych skontaktuj się ze specjalistą — psychologiem, prawnikiem lub służbami pomocowymi.'],
        ['p',        'Integral Mindset Institute sp. z o.o. zobowiązuje się do starannego działania w zakresie dostarczania narzędzia, nie gwarantuje jednak osiągnięcia przez użytkownika określonych rezultatów w komunikacji z innymi osobami.'],
        ['p',        'Integral Mindset Institute sp. z o.o. nie ponosi odpowiedzialności za utracone korzyści ani szkody pośrednie wynikające z korzystania z narzędzia.'],
        ['section',  '4. Własność intelektualna'],
        ['p',        'Nazwa NarcFilter, interfejs i system promptów są własnością Integral Mindset Institute sp. z o.o. Kopiowanie i reprodukowanie bez zgody jest zabronione.'],
        ['section',  '5. Zmiany regulaminu'],
        ['p',        'Zastrzegamy prawo do zmiany regulaminu. Aktualna wersja zawsze dostępna jest na stronie aplikacji.'],
        ['section',  '6. Kontakt'],
        ['p',        'Integral Mindset Institute sp. z o.o.'],
        ['p',        'al. Niepodległości 4/78, 05-800 Pruszków'],
        ['p',        'NIP: 5342613837 · KRS: 0000820154'],
        ['p',        'integralmindset@gmail.com'],
      ],
    },
    en: {
      privacy: [
        ['title',    'Privacy Policy'],
        ['subtitle', 'NarcFilter — Kompas Rozwodowy Module · Last updated: April 2026'],
        ['section',  '1. Data Controller'],
        ['p',        'The data controller is Integral Mindset Institute spółka z ograniczoną odpowiedzialnością (trading as Kompas Rozwodowy), seated in Pruszków, al. Niepodległości 4/78, 05-800 Pruszków, Poland, registered in the National Court Register under KRS number 0000820154, NIP: 5342613837. Contact: integralmindset@gmail.com'],
        ['section',  '2. What data we process'],
        ['p',        'When you paste a message for analysis, its content is sent to Anthropic\'s API (USA) solely to perform the analysis. We do not store this content on our own servers.'],
        ['p',        'Your incident log is stored locally in your browser (localStorage) only. We have no access to it.'],
        ['p',        'We do not collect email addresses, names, login credentials, or any other personal data.'],
        ['section',  '3. Anthropic API'],
        ['p',        'Message content is processed by Anthropic Inc. under their privacy policy: anthropic.com/privacy. Anthropic may retain queries for a limited period per their policy.'],
        ['section',  '4. Cookies'],
        ['p',        'This application does not use cookies. Data is stored solely in your browser\'s localStorage.'],
        ['section',  '5. Your rights (GDPR)'],
        ['p',        'You have the right to access, correct, and delete your data. Since we do not store your data, you can delete it yourself using "Delete all local data" in the app Settings. For data-related inquiries contact: integralmindset@gmail.com'],
        ['section',  '6. Policy changes'],
        ['p',        'Material changes will be announced at kompasrozwodowy.vercel.app.'],
      ],
      terms: [
        ['title',    'Terms of Service'],
        ['subtitle', 'NarcFilter — Kompas Rozwodowy Module · Last updated: April 2026'],
        ['section',  '1. Nature of the tool'],
        ['p',        'NarcFilter is a psychoeducational tool. It is not a form of therapy, psychological counseling, or legal advice. AI-generated analyses are informational and do not constitute a diagnosis.'],
        ['section',  '2. Users'],
        ['p',        'This tool is intended for adults (18+). By using NarcFilter you accept these Terms of Service.'],
        ['section',  '3. Limitation of liability'],
        ['p',        'Integral Mindset Institute sp. z o.o. (trading as Kompas Rozwodowy) is not liable for decisions made based on analyses generated by the application. In crisis situations, please contact a professional — a psychologist, lawyer, or appropriate support services.'],
        ['p',        'Integral Mindset Institute sp. z o.o. commits to providing the tool with due care but does not guarantee that users will achieve specific outcomes in their communications with other people.'],
        ['p',        'Integral Mindset Institute sp. z o.o. shall not be liable for lost profits or indirect damages arising from use of the tool.'],
        ['section',  '4. Intellectual property'],
        ['p',        'The name NarcFilter, interface, and prompt system are the property of Integral Mindset Institute sp. z o.o. Copying or reproduction without permission is prohibited.'],
        ['section',  '5. Changes'],
        ['p',        'We reserve the right to modify these terms. The current version is always available in the application.'],
        ['section',  '6. Contact'],
        ['p',        'Integral Mindset Institute sp. z o.o.'],
        ['p',        'al. Niepodległości 4/78, 05-800 Pruszków, Poland'],
        ['p',        'NIP: 5342613837 · KRS: 0000820154'],
        ['p',        'integralmindset@gmail.com'],
      ],
    },
  },

  open(type) {
    const lines = this.TEXTS[S.lang][type];
    const esc = s => String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    const html = lines.map(([kind, text]) => {
      if (kind === 'title')    return `<p class="legal-title">${esc(text)}</p>`;
      if (kind === 'subtitle') return `<p class="legal-subtitle">${esc(text)}</p>`;
      if (kind === 'section')  return `<p class="legal-section">${esc(text)}</p>`;
      return `<p class="legal-p">${esc(text)}</p>`;
    }).join('');
    document.getElementById('legal-content').innerHTML = html;
    document.getElementById('legal-modal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  },

  close() {
    document.getElementById('legal-modal').classList.add('hidden');
    document.body.style.overflow = '';
  },
};

// ═══════════════════════════════════════════════════════════════════════════════
// MODULE: Api  — Anthropic API call
// ═══════════════════════════════════════════════════════════════════════════════
const Api = {
  async call(message) {
    if (!S.accessKey) throw new Error('NO_KEY');

    const res = await fetch('/api/analyze', {
      method: 'POST',
      headers: { 'content-type': 'application/json', 'authorization': `Bearer ${S.accessKey}` },
      body: JSON.stringify({ message, lang: S.lang }),
    });

    if (res.status === 403) {
      const data = await res.json().catch(() => ({}));
      throw new Error(`KEY_INVALID:${data.reason || 'Nieprawidłowy klucz'}`);
    }

    if (!res.ok) {
      let msg = `HTTP ${res.status}`;
      try { const e = await res.json(); msg = e?.error || msg; } catch {}
      throw new Error(msg);
    }

    const data = await res.json();
    return data.result;
  },
};

// ═══════════════════════════════════════════════════════════════════════════════
// MODULE: Render  — markdown → HTML, log entries
// ═══════════════════════════════════════════════════════════════════════════════
const Render = {

  esc(s) {
    return String(s)
      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
      .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
  },

  inline(s) {
    return s.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
            .replace(/\*(.+?)\*/g,'<em>$1</em>');
  },

  extractPatterns(md) {
    const pts = []; const lines = md.split('\n'); let active = false;
    for (const line of lines) {
      if (/^## (Analiza wzorców|Pattern Analysis)/i.test(line)) { active = true; continue; }
      if (active && /^## /.test(line)) break;
      if (active && line.trim()) {
        const p = line.replace(/^[-•*\d.]\s+/,'').replace(/\*\*/g,'')
                      .split('—')[0].split(':')[0].trim();
        if (p) pts.push(p);
      }
    }
    return pts;
  },

  markdown(md) {
    const clean = md.replace(/<script[\s\S]*?<\/script>/gi, '');
    const lines = clean.split('\n');
    let html = '', inOpt = false, inList = false, para = '';

    const flushPara = () => {
      if (para.trim()) { html += `<p>${this.inline(this.esc(para.trim()))}</p>`; para = ''; }
    };

    for (const line of lines) {
      if (/^## /.test(line)) {
        flushPara();
        if (inList)  { html += '</ul>'; inList = false; }
        if (inOpt)   { html += '</div>'; inOpt = false; }
        const isWarm = /słowo dla ciebie|a word for you/i.test(line);
        html += `<h3 class="result-section${isWarm ? ' section-warm' : ''}">${this.esc(line.slice(3))}</h3>`;
      } else if (/^\*\*(Opcja|Option)\s+([ABC])/i.test(line)) {
        flushPara();
        if (inList) { html += '</ul>'; inList = false; }
        if (inOpt)  { html += '</div>'; inOpt = false; }
        const m = line.match(/^\*\*(Opcja|Option)\s+([ABC])/i);
        const l = m[2].toLowerCase();
        const title = line.replace(/^\*\*/,'').replace(/\*\*$/,'');
        html += `<div class="option-block option-${l}"><p class="option-label">${this.inline(this.esc(title))}</p>`;
        inOpt = true;
      } else if (line.trim() === '') {
        flushPara();
        if (inList) { html += '</ul>'; inList = false; }
      } else if (/^[-•]\s/.test(line)) {
        flushPara();
        if (!inList) { html += '<ul>'; inList = true; }
        html += `<li>${this.inline(this.esc(line.replace(/^[-•]\s/,'')))}</li>`;
      } else {
        if (inList) { html += '</ul>'; inList = false; }
        if (para) para += ' ';
        para += line;
      }
    }

    flushPara();
    if (inList) html += '</ul>';
    if (inOpt)  html += '</div>';
    return html;
  },

  log() {
    const container = UI.$('log-entries'), empty = UI.$('log-empty');
    const expBtn = UI.$('btn-export'), clrBtn = UI.$('btn-clear'), lbBtn = UI.$('btn-export-logbook');

    if (!S.log.length) {
      empty.classList.remove('hidden'); container.innerHTML = '';
      expBtn.disabled = true; clrBtn.disabled = true; lbBtn.disabled = true; return;
    }

    empty.classList.add('hidden'); expBtn.disabled = false; clrBtn.disabled = false; lbBtn.disabled = false;

    container.innerHTML = S.log.map(e => {
      const preview = e.message.length > 130
        ? this.esc(e.message.slice(0,130)) + '…'
        : this.esc(e.message);

      const tags = e.patterns.length
        ? e.patterns.map(p => `<span class="ptag">${this.esc(p)}</span>`).join('')
        : `<span class="ptag ptag-none">—</span>`;

      const noteHtml = e.note
        ? `<div class="entry-note"><strong>${I18n.t('note_prefix')}</strong> ${this.esc(e.note)}</div>`
        : '';

      return `
        <div class="log-entry">
          <div class="entry-header">
            <span class="entry-date">${this.esc(fmtDate(e.timestamp))}</span>
            <button class="btn-delete" data-action="delete" data-id="${this.esc(e.id)}"
                    title="${I18n.t('btn_delete')}">✕</button>
          </div>
          <div class="entry-patterns">${tags}</div>
          <div class="entry-msg">${preview}</div>
          ${noteHtml}
          <button class="btn-toggle btn-text" data-action="toggle"
                  data-id="${this.esc(e.id)}" data-open="0">${I18n.t('btn_show')}</button>
          <div class="entry-analysis hidden" id="ea-${this.esc(e.id)}">
            ${this.markdown(e.fullAnalysis)}
          </div>
        </div>`;
    }).join('');
  },
};

// ═══════════════════════════════════════════════════════════════════════════════
// MODULE: Analyzer  — run analysis, manage panel states
// ═══════════════════════════════════════════════════════════════════════════════
const Analyzer = {

  async run() {
    const msg = UI.$('msg-input').value.trim();
    if (!msg)      { this.showError(I18n.t('err_empty'));  return; }
    if (!S.apiKey) { this.showError(I18n.t('err_no_key')); return; }

    S.loading = true; S.lastResult = null; S.saved = false;

    const btn = UI.$('btn-analyze');
    btn.disabled = true;
    btn.classList.add('btn-analyzing');
    btn.textContent = I18n.t('btn_analyzing');

    const ol = UI.$('loading-overlay'), lt = UI.$('loading-text');
    if (lt) lt.textContent = I18n.t('btn_analyzing');
    if (ol) ol.classList.remove('hidden');

    UI.$('results-area').classList.add('hidden');
    UI.$('error-area').classList.add('hidden');

    try {
      const markdown = await Api.call(msg);
      S.lastResult = { markdown, message: msg, patterns: Render.extractPatterns(markdown) };
      this.showResults(markdown);
    } catch (err) {
      this.showError(this.classifyError(err.message));
    } finally {
      S.loading = false;
      const ol2 = UI.$('loading-overlay');
      if (ol2) ol2.classList.add('hidden');
      btn.disabled = false;
      btn.classList.remove('btn-analyzing');
      btn.textContent = I18n.t('btn_analyze');
    }
  },

  showResults(markdown) {
    const el = UI.$('results-content');
    el.innerHTML = Render.markdown(markdown);

    el.querySelectorAll('h3, .option-block, p:not(.option-label), li').forEach((node, i) => {
      node.classList.add('reveal');
      node.style.animationDelay = `${i * 0.045}s`;
    });

    UI.$('entry-note').value = '';
    UI.$('results-area').classList.remove('hidden');
    this.resetSaveBtn();
    UI.$('results-area').scrollIntoView({ behavior:'smooth', block:'start' });
  },

  showError(msg) {
    UI.$('error-msg').textContent = msg;
    UI.$('error-area').classList.remove('hidden');
    UI.$('results-area').classList.add('hidden');
    UI.$('error-area').scrollIntoView({ behavior:'smooth', block:'nearest' });
  },

  resetSaveBtn() {
    const b = UI.$('btn-save-log');
    b.disabled = false; b.textContent = I18n.t('btn_save');
  },

  classifyError(msg) {
    if (msg === 'NO_KEY')                                        return I18n.t('err_no_key');
    if (/^KEY_INVALID:/i.test(msg))                             return msg.replace('KEY_INVALID:', '');
    if (/401|authentication|invalid/i.test(msg))               return I18n.t('err_invalid_key');
    if (!navigator.onLine || /fetch|network|failed/i.test(msg)) return I18n.t('err_network');
    if (/429|rate/i.test(msg))                                  return I18n.t('err_rate');
    if (/5\d{2}/.test(msg))                                     return I18n.t('err_api');
    return msg;
  },
};

// ═══════════════════════════════════════════════════════════════════════════════
// MODULE: Log  — save, delete, clear, export, toggle entry
// ═══════════════════════════════════════════════════════════════════════════════
const Log = {

  save() {
    if (!S.lastResult || S.saved) return;
    const note = UI.$('entry-note').value.trim();
    S.log.unshift({
      id: String(Date.now()),
      timestamp: new Date().toISOString(),
      message: S.lastResult.message,
      patterns: S.lastResult.patterns,
      fullAnalysis: S.lastResult.markdown,
      note,
    });
    Store.setJ(SK.log, S.log);
    S.saved = true;
    const b = UI.$('btn-save-log'); b.disabled = true; b.textContent = I18n.t('btn_saved');
    UI.toast(I18n.t('toast_saved'));
    Render.log();
  },

  delete(id) {
    S.log = S.log.filter(e => e.id !== id);
    Store.setJ(SK.log, S.log);
    Render.log();
    UI.toast(I18n.t('toast_deleted'));
  },

  exportLogBook() {
    if (!S.log.length) { alert('Brak wpisów do eksportu'); return; }
    const payload = {
      exportDate: new Date().toISOString(),
      source: 'NarcFilter',
      entries: S.log,
    };
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = 'narcfilter-export.json';
    a.click();
    URL.revokeObjectURL(url);
  },

  clear() {
    if (!confirm(I18n.t('confirm_clear'))) return;
    S.log = []; Store.setJ(SK.log, S.log);
    Render.log(); UI.toast(I18n.t('toast_cleared'));
  },

  export() {
    if (!S.log.length) return;

    let out = `NARCFILTER — LOG KOMUNIKACJI\nEksport: ${fmtShort(new Date().toISOString())}\n\n`;
    for (const e of S.log) {
      out += `─────────────────────────────\n`;
      out += `DATA: ${fmtDate(e.timestamp)}\n`;
      out += `WZORZEC: ${e.patterns.join(', ') || '—'}\n`;
      out += `WIADOMOŚĆ:\n"${e.message}"\n`;
      out += `NOTATKA: ${e.note || '—'}\n`;
      out += `─────────────────────────────\n\n`;
    }

    const counts = {};
    for (const e of S.log) for (const p of e.patterns) counts[p] = (counts[p] || 0) + 1;

    out += `PODSUMOWANIE WZORCÓW:\n`;
    const sorted = Object.entries(counts).sort(([,a],[,b]) => b - a);
    if (sorted.length) sorted.forEach(([p,c]) => out += `${p}: ${c}x\n`);
    else out += `—\n`;

    const copy = navigator.clipboard?.writeText(out);
    if (copy) { copy.then(() => UI.toast(I18n.t('toast_copied'))).catch(() => this._fallbackCopy(out)); }
    else this._fallbackCopy(out);
  },

  _fallbackCopy(text) {
    const ta = document.createElement('textarea');
    ta.value = text; ta.style.cssText = 'position:fixed;opacity:0;pointer-events:none';
    document.body.appendChild(ta); ta.select(); document.execCommand('copy');
    document.body.removeChild(ta); UI.toast(I18n.t('toast_copied'));
  },

  toggle(id, btn) {
    const panel = document.getElementById(`ea-${id}`);
    const isOpen = btn.dataset.open === '1';
    panel.classList.toggle('hidden', isOpen);
    btn.dataset.open = isOpen ? '0' : '1';
    btn.textContent  = isOpen ? I18n.t('btn_show') : I18n.t('btn_hide');
  },
};

// ═══════════════════════════════════════════════════════════════════════════════
// MODULE: Settings  — open, save, key state, clear all
// ═══════════════════════════════════════════════════════════════════════════════
const Settings = {

  open() {
    UI.$('api-key-input').value = S.accessKey;
    const showBtn = UI.$('btn-toggle-key');
    if (showBtn) showBtn.textContent = I18n.t('key_show');
    UI.setPanel('settings');
  },

  save() {
    const k = UI.$('api-key-input').value.trim().toUpperCase();
    S.accessKey = k; Store.set(SK.accessKey, k);
    this.refreshKeyState(); UI.toast(I18n.t('toast_settings'));
    if (k) UI.setPanel('analyzer');
  },

  toggleKeyVisibility() {
    const inp = UI.$('api-key-input'), btn = UI.$('btn-toggle-key');
    const showing = inp.type === 'text';
    inp.type = showing ? 'password' : 'text';
    btn.textContent = I18n.t(showing ? 'key_show' : 'key_hide');
  },

  refreshKeyState() {
    const has = !!S.accessKey;
    UI.$('no-key-warning').classList.toggle('hidden', has);
    UI.$('analyzer-input').classList.toggle('hidden', !has);
  },

  clearAll() {
    if (!confirm(I18n.t('confirm_clear_all'))) return;
    S.log = []; Store.setJ(SK.log, S.log);
    S.accessKey = ''; Store.set(SK.accessKey, '');
    UI.$('api-key-input').value = '';
    this.refreshKeyState();
    Render.log();
    UI.toast(I18n.t('toast_cleared_all'));
  },
};

// ═══════════════════════════════════════════════════════════════════════════════
// MODULE: UI  — DOM helpers, toast, panel switching
// ═══════════════════════════════════════════════════════════════════════════════
const UI = {

  $(id) { return document.getElementById(id); },

  toast(msg, ms = 2600) {
    const el = this.$('toast');
    el.textContent = msg;
    el.classList.remove('hidden'); el.classList.add('show');
    clearTimeout(el._t);
    el._t = setTimeout(() => {
      el.classList.remove('show');
      setTimeout(() => el.classList.add('hidden'), 250);
    }, ms);
  },

  setPanel(name) {
    document.querySelectorAll('.panel').forEach(p => p.classList.add('hidden'));
    document.querySelectorAll('.tab-btn').forEach(b => {
      const active = b.dataset.tab === name;
      b.classList.toggle('active', active);
      b.setAttribute('aria-selected', String(active));
    });
    this.$(`panel-${name}`).classList.remove('hidden');
  },
};

// ═══════════════════════════════════════════════════════════════════════════════
// HELPERS
// ═══════════════════════════════════════════════════════════════════════════════
function fmtDate(iso) {
  const d = new Date(iso), p = n => String(n).padStart(2,'0');
  return `${p(d.getDate())}.${p(d.getMonth()+1)}.${d.getFullYear()} ${p(d.getHours())}:${p(d.getMinutes())}`;
}
function fmtShort(iso) {
  const d = new Date(iso), p = n => String(n).padStart(2,'0');
  return `${p(d.getDate())}.${p(d.getMonth()+1)}.${d.getFullYear()}`;
}

// ═══════════════════════════════════════════════════════════════════════════════
// EVENTS
// ═══════════════════════════════════════════════════════════════════════════════
function setupEvents() {
  // Tab navigation
  document.querySelectorAll('.tab-btn').forEach(b =>
    b.addEventListener('click', () => UI.setPanel(b.dataset.tab)));

  // Language
  UI.$('btn-pl').addEventListener('click', () => I18n.setLang('pl'));
  UI.$('btn-en').addEventListener('click', () => I18n.setLang('en'));

  // Access key overlay
  UI.$('btn-overlay-save').addEventListener('click', () => {
    const k = UI.$('overlay-key-input').value.trim().toUpperCase();
    if (!k) return;
    S.accessKey = k; Store.set(SK.accessKey, k);
    UI.$('access-key-overlay').classList.add('hidden');
    Settings.refreshKeyState();
  });
  UI.$('overlay-key-input').addEventListener('keydown', e => {
    if (e.key === 'Enter') UI.$('btn-overlay-save').click();
  });

  // Theme toggle
  UI.$('btn-theme').addEventListener('click', () => {
    const next = document.documentElement.dataset.theme === 'light' ? 'dark' : 'light';
    Store.set(SK.theme, next);
    applyTheme(next);
  });

  // Settings — now a tab; gear icon in header opens settings tab
  UI.$('btn-settings').addEventListener('click', () => Settings.open());
  UI.$('btn-save-settings').addEventListener('click', () => Settings.save());
  UI.$('btn-from-warning').addEventListener('click', () => Settings.open());
  UI.$('api-key-input').addEventListener('keydown', e => { if (e.key === 'Enter') Settings.save(); });
  UI.$('btn-toggle-key').addEventListener('click', () => Settings.toggleKeyVisibility());
  UI.$('btn-clear-all').addEventListener('click', () => Settings.clearAll());

  // Analyzer
  UI.$('btn-analyze').addEventListener('click', () => Analyzer.run());
  UI.$('msg-input').addEventListener('keydown', e => {
    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) Analyzer.run();
  });

  // Log
  UI.$('btn-save-log').addEventListener('click', () => Log.save());
  UI.$('btn-export').addEventListener('click', () => Log.export());
  UI.$('btn-clear').addEventListener('click', () => Log.clear());
  UI.$('btn-export-logbook').addEventListener('click', () => Log.exportLogBook());

  // Log entry actions (delegated)
  UI.$('log-entries').addEventListener('click', e => {
    const btn = e.target.closest('[data-action]');
    if (!btn) return;
    const { action, id } = btn.dataset;
    if (action === 'delete') Log.delete(id);
    if (action === 'toggle') Log.toggle(id, btn);
  });

  // Legal modal — close on Escape or backdrop click
  document.addEventListener('keydown', e => { if (e.key === 'Escape') Legal.close(); });
  UI.$('legal-modal').addEventListener('click', e => { if (e.target === e.currentTarget) Legal.close(); });
}

// ═══════════════════════════════════════════════════════════════════════════════
// INIT
// ═══════════════════════════════════════════════════════════════════════════════
function applyTheme(t) {
  document.documentElement.dataset.theme = t;
  UI.$('btn-theme').innerHTML = t === 'light' ? MOON_SVG : SUN_SVG;
}

function init() {
  S.lang      = Store.get(SK.lang, 'pl');
  S.apiKey    = Store.get(SK.key, '');
  S.accessKey = Store.get(SK.accessKey, '');
  S.log       = Store.getJ(SK.log, []);

  I18n.updateAll();
  Settings.refreshKeyState();
  Render.log();
  setupEvents();
  applyTheme(Store.get(SK.theme, 'dark'));

  if (!S.accessKey) {
    UI.$('access-key-overlay').classList.remove('hidden');
  }
}

init();
</script>
</body>
</html>