/* modal-algo.css — 100% niezależne style TYLKO dla algoaiModal */

.algoaiModal{
  --am-text: rgba(0,0,0,.86);
  --am-muted: rgba(0,0,0,.62);
  --am-border: rgba(0,0,0,.10);
  --am-shadow: 0 26px 76px rgba(0,0,0,.22);

  --am-accent: #0b67c7;
  --am-accentSoft: rgba(11,103,199,.14);
  --am-accentSoft2: rgba(11,103,199,.08);

  --am-warm: rgba(255, 204, 102, .22);
  --am-warm2: rgba(255, 204, 102, .10);

  --am-radius: 18px;

  position: fixed;
  inset: 0;
  z-index: 2147483000;

  display: grid;
  place-items: center;

  padding: 18px;
  color: var(--am-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  overflow: auto;
  overscroll-behavior: contain;
}

.algoaiModal[hidden]{
  display: none !important;
}

/* BACKDROP */
.algoaiModal__overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
}

/* PANEL */
.algoaiModal__panel{
  position: relative;
  z-index: 1;

  width: min(920px, 100%);
  max-height: calc(100dvh - 36px); /* <-- FIX: nie rozwala wysokości */
  border-radius: var(--am-radius);

  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  border: 1px solid var(--am-border);
  box-shadow: var(--am-shadow);

  overflow: hidden;
  isolation: isolate;

  display: flex;
  flex-direction: column;

  transform: translateY(10px);
  opacity: 0;
  animation: algoaiIn .18s ease-out forwards;
}

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

@media (prefers-reduced-motion: reduce){
  .algoaiModal__panel{ animation: none; transform: none; opacity: 1; }
}

/* SVG defs hidden */
.algoaiModal__defs{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* CLOSE */
.algoaiModal__closeBtn{
  position: absolute;
  right: 12px;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;

  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  color: rgba(0,0,0,.70);

  cursor: pointer;
  font-size: 22px;
  line-height: 38px;

  display: grid;
  place-items: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.algoaiModal__closeBtn:hover{
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.algoaiModal__closeBtn:active{
  transform: translateY(1px);
  box-shadow: none;
}
.algoaiModal__closeBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.12);
}

/* HEADER */
.algoaiModal__header{
  position: relative;
  padding: 18px 18px 16px;
  background:
    radial-gradient(1100px 420px at 0% 0%, var(--am-accentSoft), transparent 56%),
    linear-gradient(180deg, rgba(245,250,255,.98), rgba(255,255,255,.86));
  border-bottom: 1px solid rgba(0,0,0,.07);
}

/* watermark */
.algoaiModal__watermark{
  position: absolute;
  right: -30px;
  top: -36px;
  width: 220px;
  height: 220px;
  opacity: .55;
  pointer-events: none;
  transform: rotate(8deg);

  color: rgba(11,103,199,.18);
}

.algoaiModal__wmSvg{
  width: 100%;
  height: 100%;
  display: block;
}

/* TITLE ROW */
.algoaiModal__titleRow{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 56px;
}

.algoaiModal__mark{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--am-accentSoft), var(--am-accentSoft2));
  border: 1px solid rgba(11,103,199,.22);
  box-shadow: 0 12px 22px rgba(11,103,199,.12);
  display: grid;
  place-items: center;
  color: var(--am-accent);
  flex: 0 0 auto;
}

.algoaiModal__markSvg{
  width: 32px;
  height: 32px;
  display: block;
}

.algoaiModal__titles{ min-width: 0; }

.algoaiModal__title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(0,0,0,.88);
}

.algoaiModal__subtitle{
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--am-muted);
  max-width: 64ch;
}

/* CONTENT — tylko to scrolluje */
.algoaiModal__content{
  padding: 16px 18px 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.algoaiModal__grid{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px){
  .algoaiModal__grid{ grid-template-columns: 1fr; }
}

.algoaiModal__card{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.algoaiModal__card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.algoaiModal__cardHead{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.algoaiModal__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--am-accent);
  box-shadow: 0 0 0 6px rgba(11,103,199,.10);
  flex: 0 0 auto;
}

.algoaiModal__cardTitle{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(0,0,0,.84);
}

.algoaiModal__cardText{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(0,0,0,.70);
}

.algoaiModal__note,
.algoaiModal__tip{
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.algoaiModal__note{
  background: linear-gradient(180deg, rgba(11,103,199,.09), rgba(11,103,199,.05));
  border-color: rgba(11,103,199,.18);
  margin: 0 0 10px;
}

.algoaiModal__tip{
  background: linear-gradient(180deg, var(--am-warm), var(--am-warm2));
  border-color: rgba(255, 204, 102, .34);
}

.algoaiModal__noteTitle,
.algoaiModal__tipTitle{
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3px;
  color: rgba(0,0,0,.82);
}

.algoaiModal__noteText,
.algoaiModal__tipText{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(0,0,0,.72);
}

/* FOOTER */
.algoaiModal__footer{
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.72);
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.algoaiModal__okBtn{
  appearance: none;
  border: 1px solid rgba(11,103,199,.32);
  background: linear-gradient(180deg, rgba(11,103,199,.16), rgba(11,103,199,.08));
  color: rgba(0,0,0,.86);
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.algoaiModal__okBtn:hover{
  background: linear-gradient(180deg, rgba(11,103,199,.20), rgba(11,103,199,.10));
  box-shadow: 0 12px 26px rgba(11,103,199,.14);
}
.algoaiModal__okBtn:active{
  transform: translateY(1px);
  box-shadow: none;
}
.algoaiModal__okBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.12), 0 12px 26px rgba(0,0,0,.10);
}