:root{
  --opti-red:#E31E24;
  --opti-red-2:#C61A20;

  /* jaśniejszy motyw */
  --opti-text:#0f1115;
  --opti-muted:#6b7280;
  --opti-bg:#f3f4f6;        /* TŁO PANELU – jasnoszare */
  --opti-bg-2:#ffffff;      /* nagłówek */
  --opti-card:#ffffff;      /* kafelki/karty */
  --opti-stroke:rgba(17,24,39,.12);
  --opti-shadow:0 16px 42px rgba(0,0,0,.18);
}

/* Reset lokalny */
#opti-widget, #opti-widget *{
  box-sizing:border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Color Emoji","Segoe UI Emoji","Apple Color Emoji";
}
#opti-widget button, #opti-widget a{
  appearance:none; border:0; background:none; text-decoration:none; color:inherit; outline:0;
}

/* kotwica */
#opti-widget{
  position:fixed !important; right:16px !important; bottom:16px !important;
  z-index:2147483647 !important; color:var(--opti-text); pointer-events:auto;
}

/* FAB */
#opti-fab{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px;
  background:var(--opti-red) !important; color:#fff !important; font-weight:800; letter-spacing:.2px;
  box-shadow:0 12px 28px rgba(227,30,36,.45); cursor:pointer; border:1px solid rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#opti-fab:hover{ transform:translateY(-2px); filter:brightness(1.02); }
#opti-fab:active{ transform:translateY(0); }

/* panel */
#opti-panel{
  position:fixed !important; right:16px !important; bottom:76px !important;
  width:min(95vw,420px); max-height:78vh;
  background:var(--opti-bg); border:1px solid var(--opti-stroke); border-radius:14px;
  box-shadow:var(--opti-shadow); display:flex; flex-direction:column; overflow:hidden;
  z-index:2147483647 !important;
}
#opti-panel[hidden]{ display:none !important; }

.opti-head{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--opti-bg-2); padding:10px 12px; border-bottom:1px solid var(--opti-stroke);
}
.opti-title{ font-size:14px; font-weight:900; }
.opti-x{ color:var(--opti-muted); font-size:18px; line-height:1; padding:4px; border-radius:8px; cursor:pointer; }
.opti-x:hover{ color:#111; background:#f2f3f7; }

/* log */
#opti-log{ padding:12px; overflow:auto; display:flex; flex-direction:column; gap:10px; min-height:160px; max-height:50vh; }
.opti-msg{ border-radius:12px; padding:10px 12px; max-width:92%; font-size:14px; line-height:1.4; border:1px solid var(--opti-stroke); }
.opti-bot{ align-self:flex-start; background:#ffffff; }
.opti-user{ align-self:flex-end; background:#eef2f7; }

/* chips */
.opti-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.opti-chip{
  padding:9px 12px; border-radius:10px; cursor:pointer; font-weight:800;
  background:#ffffff; color:#111; border:1px solid var(--opti-stroke); font-size:12px; text-transform:uppercase; letter-spacing:.25px;
}
.opti-chip:hover{ background:#f9fafb; }

/* tiles */
.opti-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 2px; }
.opti-tile{
  background:var(--opti-card); border:1px solid var(--opti-stroke); border-radius:12px; padding:10px; cursor:pointer; min-height:64px; display:flex; align-items:flex-start; gap:8px;
}
.opti-tile:hover{ border-color:#cfd6e4; }
.opti-tile input{ margin-top:2px; }
.opti-tile h4{ margin:0; font-size:13px; line-height:1.25; }
.opti-tile p{ margin:4px 0 0; font-size:12px; color:#4b5563; opacity:.95 }

/* produkty */
.opti-products{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.opti-card{ display:flex; gap:10px; padding:10px; border-radius:12px; background:var(--opti-card); border:1px solid var(--opti-stroke); }
.opti-card img{ width:60px; height:60px; object-fit:contain; background:#f3f4f6; border-radius:10px; }
.opti-card h4{ margin:0; font-size:14px; color:#0f1115; }
.opti-card .meta{ font-size:12px; color:#4b5563; margin:2px 0 8px; }
.opti-view{ display:inline-block; font-size:12px; border:1px solid var(--opti-stroke); border-radius:10px; padding:7px 10px; color:#0f1115 !important; }
.opti-view:hover{ background:#f3f4f6; }

/* stopka formularza */
.opti-form{ display:flex; gap:0; border-top:1px solid var(--opti-stroke); }
#opti-input{ flex:1; padding:12px; border:0; background:#ffffff; color:#0f1115; border-right:1px solid var(--opti-stroke); }
#opti-send{ padding:0 16px; background:var(--opti-red); color:#fff; font-weight:900; cursor:pointer; }
#opti-send:hover{ background:var(--opti-red-2); }

/* CTA */
.opti-cta{ display:flex; gap:8px; margin-top:8px; }
.opti-btn{ background:var(--opti-red); color:#fff; font-weight:900; padding:10px 12px; border-radius:10px; cursor:pointer; box-shadow:0 6px 18px rgba(227,30,36,.25); }
.opti-btn.secondary{ background:#ffffff; box-shadow:none; border:1px solid var(--opti-stroke); color:#0f1115; }

@media (max-width:480px){
  #opti-panel{ right:10px !important; left:10px !important; width:auto; }
  #opti-fab{ padding:11px 13px; }
}