/* ============================================================
   Dodatek WOW — LISTA ZAKUPÓW.
   Guzik 🛒+ w nagłówku + panel podglądu (dwukolumnowy, pod orientację poziomą).
   Styl spójny z resztą tablicy (paleta var(--…), guziki jak ⚙ / #wxPanel).
   ============================================================ */

/* ---------- guzik w nagłówku (środek, przed temperaturami) ----------
   Szeroka, opisana pigułka z bursztynowym akcentem — wyraźny, łatwy cel dotyku. */
.zk-toggle{display:inline-flex;align-items:center;gap:.45em;cursor:pointer;white-space:nowrap;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.02em;line-height:1;
  color:var(--amber);background:rgba(255,182,39,.08);border:1px solid var(--amber-dim);
  border-radius:11px;padding:.5em 1.3em;align-self:center;
  transition:background .2s,border-color .2s}
.zk-toggle:hover,.zk-toggle:active{background:rgba(255,182,39,.18);border-color:var(--amber)}
.zk-toggle .zk-t-ico{font-size:1.25em;line-height:1}
.zk-toggle .zk-t-label{color:var(--ink)}
.zk-toggle .zk-t-plus{font-family:"JetBrains Mono",monospace;font-weight:700;color:var(--amber);
  font-size:1.15em}
/* wąski ekran (telefon pionowo) — zwiń do samej ikony + „+", żeby nie rozpychać nagłówka */
@media (max-width:600px){ .zk-toggle .zk-t-label{display:none} }

/* ---------- panel (nakładka nad tablicą) ---------- */
#zakupyPanel{position:fixed;inset:0;z-index:84;display:none;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + .8rem) 1rem calc(env(safe-area-inset-bottom,0px) + .8rem);
  background:rgba(6,9,14,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#zakupyPanel.open{display:flex}

.zk-box{width:min(46rem,96vw);max-height:92vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--bg-panel),#0d121a);
  border:1px solid var(--line-bright);border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.55);color:var(--ink)}

.zk-head{display:flex;align-items:center;gap:.6em;padding:.75rem .95rem;
  border-bottom:1px solid var(--line)}
.zk-head .zk-badge{font-size:1.5rem;line-height:1}
.zk-head .zk-title{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.45rem;
  color:var(--ink);line-height:1;margin:0}
.zk-head .zk-close{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:1.1rem;line-height:1;
  color:var(--ink-dim);background:var(--bg-panel);border:1px solid var(--line-bright);border-radius:8px;
  padding:.3em .55em;cursor:pointer;transition:color .2s,border-color .2s}
.zk-head .zk-close:hover{color:var(--amber);border-color:var(--amber-dim)}

/* dwie kolumny: lewa lista (przewijalna) + prawa dodawanie */
.zk-body{display:flex;gap:1rem;padding:.9rem;min-height:0;flex:1}
.zk-col{min-width:0}
.zk-col-list{flex:1;min-height:0;display:flex}
.zk-col-add{flex:none;width:15rem;display:flex;flex-direction:column;align-items:stretch;gap:.7rem;
  justify-content:center}

/* lista pozycji */
.zk-list{list-style:none;margin:0;padding:.2rem .3rem;width:100%;overflow-y:auto;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-rail)}
.zk-list.zk-loading{opacity:.5}
.zk-item{display:flex;align-items:baseline;gap:.6em;padding:.5em .55em;
  border-bottom:1px solid var(--line);font-family:"Barlow",sans-serif}
.zk-item:last-child{border-bottom:none}
.zk-item .zk-name{color:var(--ink);font-size:1.15rem;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zk-item .zk-qty{flex:none;font-family:"JetBrains Mono",monospace;font-size:.9rem;font-weight:700;
  color:var(--bg);background:var(--amber-dim);border-radius:6px;padding:.1em .5em}
/* odhaczone — wyszarzone i przekreślone */
.zk-item.zk-done .zk-name{color:var(--ink-faint);text-decoration:line-through}
.zk-item.zk-done .zk-qty{background:var(--line-bright);color:var(--ink-faint)}
.zk-empty{padding:1.2em .6em;text-align:center;color:var(--ink-faint);font-style:italic;
  font-family:"Barlow",sans-serif}
.zk-empty.err{color:var(--red);font-style:normal}
.zk-empty b{color:var(--ink-dim);font-style:normal}

/* prawa kolumna — duży mikrofon */
.zk-mic{align-self:center;width:6.5rem;height:6.5rem;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%, #1b2432, var(--bg-panel));
  border:2px solid var(--line-bright);color:var(--ink);
  transition:border-color .2s,box-shadow .2s,transform .1s}
.zk-mic .zk-mic-ico{font-size:2.9rem;line-height:1}
.zk-mic:hover{border-color:var(--amber-dim)}
.zk-mic:active{transform:scale(.96)}
/* nasłuch — podświetlenie + tętnienie */
.zk-mic.zk-listening{border-color:var(--amber);box-shadow:0 0 0 0 rgba(255,182,39,.55);
  animation:zkPulse 1.3s infinite}
@keyframes zkPulse{
  0%{box-shadow:0 0 0 0 rgba(255,182,39,.5)}
  70%{box-shadow:0 0 0 1.1rem rgba(255,182,39,0)}
  100%{box-shadow:0 0 0 0 rgba(255,182,39,0)}
}
@media(prefers-reduced-motion:reduce){ .zk-mic.zk-listening{animation:none} }

.zk-or{text-align:center;font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}

/* input + wyślij */
.zk-form{display:flex;gap:.5em}
.zk-input{flex:1;min-width:0;box-sizing:border-box;background:var(--bg-panel);color:var(--ink);
  border:1px solid var(--line-bright);border-radius:10px;padding:.6em .7em;
  font-family:"Barlow",sans-serif;font-size:1.05rem}
.zk-input:focus{outline:2px solid var(--amber);outline-offset:1px}
.zk-send{flex:none;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.05rem;
  letter-spacing:.02em;color:var(--bg);background:var(--amber);border:none;border-radius:10px;
  padding:.55em 1em;cursor:pointer;transition:filter .15s}
.zk-send:hover{filter:brightness(1.06)}

.zk-hint{min-height:1.1em;text-align:center;font-family:"JetBrains Mono",monospace;font-size:.8rem;
  color:var(--ink-dim)}

/* bardzo niski/wąski ekran — nie pozwól, żeby panel się nie zmieścił */
@media (max-height:26rem){
  .zk-mic{width:5rem;height:5rem}
  .zk-mic .zk-mic-ico{font-size:2.1rem}
  .zk-col-add{width:13rem}
}