/*
 * MODUŁ STYLÓW: BASE.CSS
 * Zmienne, reset, ekran powitalny, sidebar i główny układ.
 * Kolejność modułów jest zapisana w index.html i chroni istniejącą kaskadę.
 */

/*
 * ARKUSZ WYGLĄDU APLIKACJI
 * ------------------------
 * Reguły są ułożone zgodnie z budową ekranu: najpierw zmienne kolorów i reset,
 * następnie tło oraz główny układ, później komponenty, a na końcu wariant
 * mobilny w @media. Klasy opisują wygląd; JavaScript jedynie dodaje lub usuwa
 * takie stany jak `.hidden`, `.active` i `.open`.
 */

:root{
  --bg:#0b1020;
  --bg-2:#0f172a;
  --panel:rgba(13,18,34,.75);
  --panel-solid:#11182c;
  --line:rgba(255,255,255,.08);
  --text:#e5ecff;
  --muted:#96a2c6;
  --accent:#6ea8ff;
  --accent-2:#8b5cf6;
  --user:#1c4ed8;
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow:0 18px 60px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{
  height:100%;
  min-height:100%;
}

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:#09111f;
  overflow:hidden;
  position:relative;
}

/* Podczas pierwszego wejścia aplikacja jest już widoczna, ale nieaktywna.
   ``inert`` w HTML blokuje także klawiaturę, a te reguły dają czytelny efekt
   warstw bez ukrywania charakterystycznego wideo. */
body.welcome-open .shell{
  filter:blur(5px) brightness(.58);
  pointer-events:none;
  user-select:none;
}
.app-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at top left, rgba(110,168,255,.18), transparent 24%),
    radial-gradient(circle at top right, rgba(139,92,246,.18), transparent 22%),
    linear-gradient(180deg, #0a0f1d 0%, #09111f 100%);
}

.app-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  transform:none;
  filter:none;
  opacity:.72;
}

.app-bg-blur-layer{
  position:absolute;
  inset:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.app-bg-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(7,12,24,.36) 0%,
      rgba(7,12,24,.08) 20%,
      rgba(7,12,24,.08) 80%,
      rgba(7,12,24,.36) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4,8,18,.08) 0%,
      rgba(5,10,20,.22) 100%
    );
}

.welcome-overlay{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:24px;
  overflow:auto;
  background:rgba(2,6,18,.38);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:1;
  transition:opacity .24s ease,visibility .24s ease;
}
.welcome-overlay.is-closing{opacity:0;visibility:hidden}
.welcome-card{
  width:min(540px,100%);
  padding:27px 29px 25px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  color:#edf3ff;
  background:rgba(11,16,32,.82);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 30px 90px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);
}
.welcome-brand-mark{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 14px 35px rgba(110,168,255,.35);
  font-size:22px;
  font-weight:900;
}
.welcome-eyebrow{
  margin-bottom:5px;
  color:#a8bbdf;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.welcome-card h1{margin:0;font-size:30px;line-height:1.1;letter-spacing:-.025em}
.welcome-subtitle{margin:7px 0 19px;color:#b5c4df;font-size:14px}
.welcome-points{
  display:grid;
  gap:9px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
.welcome-points li{
  position:relative;
  padding-left:20px;
  color:#d7e0f1;
  font-size:13px;
  line-height:1.48;
}
.welcome-points li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#6ee7c8;
  font-weight:900;
}
.welcome-privacy{
  padding:13px 14px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:15px;
  background:rgba(4,9,22,.45);
}
.welcome-privacy strong{font-size:12px;color:#edf4ff}
.welcome-privacy p{margin:6px 0 0;color:#9eacc6;font-size:11px;line-height:1.5}
.welcome-enter-btn{
  width:100%;
  min-height:50px;
  margin-top:17px;
  border:0;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 14px 32px rgba(110,168,255,.24);
  font:inherit;
  font-weight:900;
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}
.welcome-enter-btn:hover{transform:translateY(-1px);filter:brightness(1.07)}

button,textarea,select{font:inherit}

.shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  transition:filter .24s ease;
}

.sidebar{
  border-right:1px solid var(--line);
  background:rgba(8,11,24,.58);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.sidebar::-webkit-scrollbar{
  width:0;
  height:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 8px 14px;
}

.brand-mark{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:900;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow:0 12px 30px rgba(110,168,255,.35);
}

.brand-title{font-weight:900;font-size:18px}
.brand-sub{font-size:12px;color:var(--muted)}

.side-section{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px;
  box-shadow:var(--shadow);
}

.history-section{
  min-height:116px;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
}
.tools-section{margin-top:auto}

.side-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:800;
  margin-bottom:10px;
}

.primary-side-btn,.side-btn,.task-btn,.ghost-btn,.quality-btn,.icon-btn,.send-btn,.live-toggle-btn{
  border:none;
  cursor:pointer;
  transition:.2s ease;
}

.primary-side-btn{
  border-radius:16px;
  padding:14px 16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:800;
  box-shadow:0 14px 30px rgba(110,168,255,.24);
}

.primary-side-btn:hover{transform:translateY(-1px)}

.mode-list,.task-grid{display:grid;gap:8px}
.mode-list{grid-template-columns:1fr}
.task-grid{grid-template-columns:repeat(2,1fr)}
.agent-task-btn{grid-column:1/-1}

.side-btn,.task-btn,.ghost-btn,.quality-btn{
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  border:1px solid transparent;
  font-weight:700;
}
.composer-quick-actions{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
.composer-actions-btn{
  font-size:22px;
  font-weight:500;
  line-height:1;
}
.composer-actions-menu{
  position:absolute;
  right:0;
  bottom:56px;
  z-index:12;
  width:250px;
  display:flex;
  flex-direction:column;
  gap:3px;
  background:rgba(11,17,33,.96);
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px;
  box-shadow:var(--shadow);
}
.composer-menu-item{
  width:100%;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:10px;
  padding:9px 10px;
  color:var(--text);
  background:transparent;
  text-align:left;
  font-weight:700;
  cursor:pointer;
}
.composer-menu-item:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.08)}
.composer-menu-item > span:first-child{color:#b8c9ee;text-align:center;font-size:16px}
.composer-menu-item .menu-icon-text{font-size:8px;font-weight:900;letter-spacing:-.04em}
.composer-menu-item.active{
  background:rgba(16,185,129,.15);
  border-color:rgba(16,185,129,.45);
  color:#d7ffee;
}
.composer-menu-separator{height:1px;background:var(--line);margin:4px 5px}

.side-btn:hover:not(.active),.task-btn:hover:not(.active),.ghost-btn:hover,.quality-btn:hover{
  background:rgba(255,255,255,.075);
  border-color:rgba(180,202,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.side-btn.active,.task-btn.active,.quality-btn.active{
  background:linear-gradient(135deg,rgba(110,168,255,.22),rgba(139,92,246,.14));
  border-color:rgba(133,180,255,.7);
  color:#dcebff;
  box-shadow:0 8px 22px rgba(61,102,192,.18),inset 0 1px 0 rgba(255,255,255,.08);
}

.side-btn[data-tooltip]{position:relative}
@media (hover:hover) and (pointer:fine){
  .side-btn[data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;
    z-index:40;
    left:8px;
    bottom:calc(100% + 7px);
    width:230px;
    padding:9px 10px;
    border:1px solid rgba(146,177,245,.24);
    border-radius:10px;
    background:#0b1223;
    color:#dce7ff;
    box-shadow:0 12px 35px rgba(0,0,0,.38);
    font-size:11px;
    font-weight:600;
    line-height:1.4;
    text-align:left;
    opacity:0;
    visibility:hidden;
    transform:translateY(4px);
    pointer-events:none;
    transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
  }
  .side-btn[data-tooltip]:hover::after,
  .side-btn[data-tooltip]:focus-visible::after{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}

.task-btn.disabled-task,
.task-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.04);
  color:rgba(229,236,255,.55);
  box-shadow:none;
}
.task-btn.disabled-task:hover,
.task-btn:disabled:hover{
  background:rgba(255,255,255,.02);
  transform:none;
}

.manual-model-wrap,.quality-wrap{margin-top:10px}
.hidden{display:none !important}
.mini-label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:700}
.select{
  width:100%;
  border-radius:14px;
  background:#0c1326;
  color:var(--text);
  border:1px solid var(--line);
  padding:12px;
  outline:none;
}

.tool-row{display:flex;gap:8px}

.password-modal{
  position:fixed;
  inset:0;
  z-index:30;
  background:rgba(0,0,0,.5);
  display:grid;
  place-items:center;
  padding:16px;
}
.password-modal-card{
  width:min(440px, 100%);
  background:var(--panel-solid);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px;
}
.password-modal-card h3{
  margin:0 0 8px;
}
.password-modal-sub{
  margin:0 0 12px;
  color:var(--muted);
}
.password-modal-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.history-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.history-list::-webkit-scrollbar{width:0;height:0}

.history-entry{
  display:grid;
  grid-template-columns:minmax(0,1fr) 30px;
  gap:4px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid transparent;
}
.history-entry:hover{background:rgba(255,255,255,.06)}
.history-entry.active{
  border-color:rgba(110,168,255,.45);
  background:rgba(110,168,255,.12);
}
.history-item{
  min-width:0;
  padding:10px 4px 10px 12px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.history-delete{
  align-self:center;
  width:28px;
  height:28px;
  border:0;
  border-radius:9px;
  color:#9faecc;
  background:transparent;
  cursor:pointer;
  opacity:.45;
}
.history-entry:hover .history-delete,.history-delete:focus-visible{opacity:1}
.history-delete:hover{
  color:#fecaca;
  background:rgba(239,68,68,.16);
}
.history-item-title{
  font-weight:700;
  font-size:14px;
  margin-bottom:4px;
}
.history-item-sub{
  font-size:12px;
  color:var(--muted);
}

.main-panel{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  height:100dvh;
  overflow:hidden;
}

.topbar{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:16px;
  padding:20px 24px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(9,14,27,.42);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  flex-shrink:0;
}
.mobile-menu-btn{
  display:none;
  width:42px;height:42px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:18px;
}

.topbar-title{font-size:20px;font-weight:900}
.topbar-subtitle{font-size:13px;color:var(--muted);margin-top:4px}
.live-toggle-btn{
  min-height:44px;
  border-radius:999px;
  padding:12px 16px;
  font-weight:800;
  color:#ffe6e6;
  background:rgba(239,68,68,.18);
  border:1px solid rgba(239,68,68,.35);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.live-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:currentColor;
  display:inline-block;
  box-shadow:0 0 10px rgba(255,255,255,.18);
  flex:0 0 auto;
}
.live-toggle-btn.active{
  background:rgba(16,185,129,.18);
  color:#d9fff0;
  border-color:rgba(16,185,129,.4);
}
.sidebar-live-btn{
  width:100%;
  justify-content:center;
  margin-top:10px;
  border-radius:16px;
  background:rgba(9,16,31,.72);
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}
.sidebar-live-btn:hover{
  border-color:rgba(248,113,113,.44);
  background:rgba(127,29,29,.2);
}


/* Dyskretne przejście do portfolio Michała — widoczne również na telefonie. */
.studio-portfolio-link {
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  padding:7px 11px; min-height:44px; flex-shrink:0;
  border:1px solid rgba(206,239,105,.4); border-radius:24px;
  color:var(--text, #f3f5f7); text-decoration:none; font-size:12px;
  background:rgba(16,24,32,.45); transition:background .2s, border-color .2s;
}
.studio-portfolio-link:hover { background:rgba(54,75,32,.65); border-color:#ceef69; }
.studio-portfolio-link:focus-visible { outline:2px solid #ceef69; outline-offset:4px; }
.studio-portfolio-mark {
  display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:#ceef69; color:#18251f;
  font:bold 20px/1 Arial, sans-serif; letter-spacing:-2px; padding-right:2px;
}
.topbar>div { min-width:0; }
.topbar-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:700px) {
  .studio-portfolio-label { display:none; }
  .studio-portfolio-link { padding:6px 8px; gap:5px; }
}
@media (prefers-reduced-motion:reduce) { .studio-portfolio-link { transition:none; } }