/* Workspace zalogowanych (/app) — uklad W2: ciemny rail operacji + panel
   (operacja -> dodatki -> wyjscie) + grid + dolny pasek akcji.
   Kontrolki dziedzicza style z app.css (zmienne CSS => dziala tez ciemny motyw).
   Ladowany TYLKO na stronie app (layout.php). */

/* --- caly viewport, scroll wewnatrz sekcji --- */
body.page-app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
body.page-app .header{flex:none}
body.page-app .verify-banner{flex:none}
body.page-app main{flex:1;min-height:0;display:flex;flex-direction:column}

/* --- bramka logowania --- */
.ws-gate{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.ws-gate-card{max-width:420px;text-align:center}
.ws-gate-title{font-size:1.4rem;font-weight:800;margin-bottom:10px}
.ws-gate-card p{color:var(--text-muted);margin-bottom:16px}
.ws-gate-card a{color:var(--accent)}

/* --- szkielet --- */
.ws-shell{flex:1;min-height:0;display:flex}

/* rail */
.ws-rail{width:58px;flex:none;background:#1E2230;display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:4px}
.ws-rit{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:#A9AEC2;font-size:17px;position:relative;border:none;background:none;cursor:pointer}
.ws-rit small{position:absolute;bottom:3px;font-size:7.5px;font-weight:700;letter-spacing:.2px}
.ws-rit:hover{background:#2A2F42;color:#fff}
.ws-rit.active{background:var(--accent);color:#fff}
.ws-collapse{margin-top:auto;width:44px;height:38px;border-radius:10px;color:#6B7280;font-size:15px;border:none;background:none;cursor:pointer}
.ws-collapse:hover{background:#2A2F42;color:#fff}

/* panel */
.ws-panel{width:335px;flex:none;background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.ws-panel.collapsed{display:none}
.ws-panel-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:16px}
.ws-panel-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 9px}
.ws-panel-head h2{font-size:.9375rem;font-weight:700}
.ws-panel-head button{border:none;background:none;color:var(--text-light);font-size:14px;cursor:pointer}
.ws-panel-head button:hover{color:var(--accent)}
.ws-pane{padding:0 16px 14px;border-bottom:1px solid var(--border)}
.ws-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.ws-hint{font-size:.7188rem;color:var(--text-light);line-height:1.5;margin-top:10px}
.ws-zone-label{font-size:.6563rem;font-weight:700;letter-spacing:.8px;color:var(--text-light);padding:13px 16px 3px;text-transform:uppercase}

/* panel: kontrolki na pelna szerokosc kolumny, zero poziomego przewijania */
.ws-row{min-width:0}
.ws-panel .aspect-chips{flex-wrap:wrap;row-gap:6px;min-width:0}
.ws-panel .ratio-custom{max-width:100%}
.ws-panel .styled-select{max-width:100%}
.ws-panel .wm-text-input{flex:1;width:auto;min-width:140px}
.ws-panel .name-input{flex:1;width:auto;min-width:0}
.ws-panel .quality-slider{width:118px}
.ws-panel .settings-label{min-width:0}

/* dodatki: naglowek z przelacznikiem */
.ws-tgl{border-bottom:1px solid var(--border)}
.ws-tgl-head{width:100%;display:flex;align-items:center;gap:9px;padding:11px 16px;font-weight:600;font-size:.8438rem;color:var(--text);border:none;background:none;cursor:pointer;text-align:left}
.ws-tgl-head:hover{background:var(--bg-secondary)}
.ws-switch{margin-left:auto;width:34px;height:19px;border-radius:99px;background:var(--border);position:relative;flex:none;transition:.15s}
.ws-switch::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:.15s}
.ws-tgl-head.active .ws-switch{background:var(--accent)}
.ws-tgl-head.active .ws-switch::after{left:17px}
.ws-tgl-body{padding:0 16px 14px}

.ws-preview{padding:12px 16px;border-bottom:1px solid var(--border)}
.ws-preview .extra-preview{display:block;margin-top:8px;max-width:100%}
.ws-out{padding:0 16px 8px}

/* grid */
.ws-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;position:relative}
.ws-gridbar{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--border);background:var(--bg-card);flex-wrap:wrap}
.ws-gridbar .ws-divider{width:1px;height:22px;background:var(--border);margin:0 2px}
.ws-gridbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ws-usage{font-size:.7813rem;color:var(--text-muted);display:flex;align-items:center;gap:7px}
.ws-usage b{color:var(--text)}
.ws-usage .plan-chip{background:linear-gradient(135deg,#F59E0B,#F97316);color:#fff;font-size:.6563rem;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.3px}
.ws-usage .plan-chip.free{background:var(--accent-light);color:var(--accent)}
/* upsell Premium (tylko plan free) — akcentowana piguika prowadzaca do cennika */
.ws-upgrade{display:inline-flex;align-items:center;gap:5px;font-size:.7813rem;font-weight:700;text-decoration:none;color:#fff;background:linear-gradient(135deg,#6366F1,#4F46E5);padding:6px 13px;border-radius:99px;box-shadow:0 2px 8px rgba(79,70,229,.35);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.ws-upgrade:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(79,70,229,.45)}

.ws-stage{flex:1;overflow-y:auto;min-height:0}
.ws-dropzone{margin:18px;padding:60px 24px;min-height:calc(100% - 36px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.ws-workspace{padding:16px}
.ws-grid{padding:0;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ws-main .error-msg{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:20;margin:0}

/* pasek akcji */
.ws-actionbar{flex:none;display:flex;align-items:center;gap:14px;padding:10px 18px;background:var(--bg-card);border-top:1px solid var(--border);flex-wrap:wrap}
.ws-actionbar .ws-summary{margin:0;font-size:.8125rem;font-weight:600;color:var(--text)}
.ws-exif{font-size:.7188rem;color:var(--text-light)}
.ws-ab-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ws-preset{display:flex;align-items:center;gap:8px}
.ws-actionbar #processBtn{padding:11px 24px;font-size:.9063rem}

/* wezsze ekrany: panel jako nakladka nad gridem */
@media (max-width: 900px){
  .ws-panel{position:absolute;left:58px;top:0;bottom:0;z-index:30;box-shadow:var(--shadow-md)}
  .ws-shell{position:relative}
}
@media (max-width: 640px){
  .ws-gridbar{padding:8px 10px}
  .ws-exif{display:none}

  /* pasek akcji w kolumnie: preset i przycisk na pelna szerokosc,
     pole nazwy presetu elastyczne (nic nie wystaje poza ekran) */
  .ws-actionbar{padding:10px 12px;flex-direction:column;align-items:stretch;gap:8px}
  .ws-ab-right{margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:8px}
  .ws-preset{width:100%;flex-wrap:wrap;min-width:0}
  .ws-preset .styled-select{flex:1;min-width:0}
  .ws-preset .preset-name-wrap{flex:1 1 100%;min-width:0}
  .ws-preset .preset-name-input{flex:1;width:auto;min-width:0}
  .ws-actionbar #processBtn{width:100%;justify-content:center}
}

/* ---- AI na railu (etap 8): wyrozniony gradientem, ale w jezyku raila ---- */
.ws-rit-ai{color:#C7BFFF;background:linear-gradient(160deg,rgba(79,70,229,.32),rgba(129,140,248,.14));margin-top:6px}
.ws-rit-ai:hover{background:linear-gradient(160deg,rgba(79,70,229,.55),rgba(129,140,248,.3));color:#fff}