/* ===================================================================
   Digital Palimpsest — styles.css (Hybrid: Mobile-First + Desktop)
   - Default is a simplified mobile view with only essential controls.
   - Progressively enhances to the full multi-column desktop layout.
   =================================================================== */

/* === Dark theme variables (shared) === */
:root{
  --bg: #0e1420;
  --panel: #121a2b;
  --panel-2: #0f1726;
  --border: #1e2943;
  --text: #e6ebff;
  --muted: #9cb0d9;
  --primary: #43b0ff;
  --primary-2: #7bd7ff;
  --accent: #ff72c9;
}

/* === Base Styles (shared) === */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
}

.site-title{ text-align:center; margin:18px 0 10px; letter-spacing:.5px; font-weight:700; flex-shrink: 0; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar{ width:0; height:0 }

.left,.center,.right,.actions-col{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:14px; padding:14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
}

/* === MOBILE STYLES (< 1200px) === */
body {
  overflow-x: hidden;
  overflow-y: auto; /* Allow scrolling on mobile */
}
.grid{
  width: 100%;
  padding: 0 16px 16px;
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}
/* Re-order grid for mobile view */
.center { order: 1; }
.actions-col { order: 2; }
.left { order: 3; }

/* Hide non-essential elements on mobile */
.right, .bottom-actions .switch {
  display: none;
}
.center { min-height: 50vh; }
.viewer{
  --reveal: 50%;
  position:relative;
  width:100%;
  flex-grow: 1;
  background:#0b1120;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
/* ... other mobile-specific component styles could go here ... */


/* === DESKTOP STYLES (>= 1200px) === */
@media (min-width: 1200px) {
  body {
    overflow: hidden; /* Disable scrolling on desktop */
  }
  .grid{
    flex-grow: 1;
    min-height: 0;
    margin: 0 0 16px 0;
    padding: 0 16px;
    grid-template-columns:260px 1fr 320px 300px;
  }
  /* Restore default order and show hidden elements on desktop */
  .left, .center, .right, .actions-col {
    order: initial;
  }
  .left, .right, .bottom-actions .switch {
    display: flex;
  }
  .bottom-actions .switch {
    display: inline-flex; /* Correct display for switch */
  }

  .left, .center, .right, .actions-col {
    min-height: 0;
  }
  .left .picker:last-child {
    flex-grow: 1;
  }
  .left .picker:last-child .listbox {
    flex-grow: 1;
    min-height: 0;
  }

  /* Restore desktop drop zone style */
  .drop {
    height: 120px;
  }
  .drop .desktop-text {
    display: block;
  }
  .drop .mobile-text {
    display: none;
  }
}


/* === Component Styles (apply to both mobile and desktop) === */

/* Drop area */
.drop{
  border:2px dashed var(--border); border-radius:12px; height:80px; /* Mobile height */
  display:grid; place-items:center; text-align:center; color:var(--muted); cursor:pointer; margin-bottom:12px;
  background: rgba(255,255,255,.02);
}
.drop .desktop-text { display: none; }
.drop .mobile-text { display: block; font-weight: 600; }

.drop.drag-over{ background:rgba(67,176,255,.08); border-color:var(--primary); color:var(--primary-2); }
/* Pickers */
.picker label{ font-weight:600; display:block; margin:4px 0 6px; color:var(--muted) }
#image-list{ width:100%; min-height:220px; }
.listbox{
  width:100%; background:#0b1120; color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:6px; outline:none;
}
.listbox:focus{ box-shadow:0 0 0 2px rgba(67,176,255,.25); }
/* Viewer */
.viewer .img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#0b1120 }
.viewer .overlay{ clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
#reveal{ position:absolute; left:0; right:0; bottom:0; width:100%; height:28px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; z-index:5; }
#reveal::-webkit-slider-runnable-track{ height:100%; background:linear-gradient(90deg, rgba(67,176,255,.0), rgba(67,176,255,.15), rgba(67,176,255,.0)); }
#reveal::-moz-range-track{ height:100%; background:linear-gradient(90deg, rgba(67,176,255,.0), rgba(67,176,255,.15), rgba(67,176,255,.0)); }
#reveal::-webkit-slider-thumb{ -webkit-appearance:none; width: 32px; height: 100%; background: #fff; border: 2px solid black; border-radius: 2px; cursor: ew-resize; }
#reveal::-moz-range-thumb{ width: 16px; height: 100%; background: #fff; border: 2px solid black; border-radius: 2px; cursor: ew-resize; }
/* Prompt & Actions */
#prompt-input{
  width:100%; margin-top:12px; border:1px solid var(--border); border-radius:10px; padding:.75rem;
  background:#0b1120; color:var(--text);
  flex-shrink: 0;
}
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
#submit-btn { width: 100%; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 1.05em; }
/* Buttons */
.btn{
  border:0; background:var(--primary); color:#06223a; padding:.55rem .9rem; border-radius:10px; cursor:pointer; font-weight:700;
  box-shadow: 0 6px 18px rgba(67,176,255,.2);
}
.btn:hover{ filter:brightness(1.08) }
.btn:disabled{ opacity:.6; cursor:not-allowed }
.btn.primary{ background:var(--primary); color:#06223a; font-weight:700; }
.btn.secondary{ background:#1f2b47; color:var(--text); }
.btn.muted{ background:#27385f; color:var(--text); }
.btn.loading{ animation: btnpulse 1.1s ease-in-out infinite; position:relative; }
.btn.loading:disabled{ opacity:1 }
.btn.loading::after{
  content:""; width:12px; height:12px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color: rgba(255,255,255,.9);
  display:inline-block; vertical-align:middle; margin-left:8px;
  animation: spin .8s linear infinite;
}
@keyframes btnpulse{ 0%{filter:none} 50%{filter:brightness(1.25)} 100%{filter:none} }
@keyframes spin{ to{ transform:rotate(1turn) } }
/* Sliders */
h3{ margin:8px 0; color:var(--muted) }
.right h3{ margin:18px 0 8px; padding-top:12px; border-top:1px solid var(--border); }
.right h3:first-of-type{ border-top:none; padding-top:0; }
.sliders label{ display:grid; grid-template-columns:1fr 56px; align-items:center; gap:.6rem; margin:.35rem 0; color:var(--text); }
.sliders label span{ text-align:right; color:var(--primary-2) }
.sliders input[type=range]{ width:100% }
input[type=range]{
  -webkit-appearance:none; height:6px; border-radius:999px; background:#243354; outline:none; border:1px solid #15213b;
}
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid #071226; box-shadow:0 0 0 3px rgba(255,114,201,.2) }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--accent); border:none; box-shadow:0 0 0 3px rgba(255,114,201,.2) }
/* Misc */
#prompt-input.locked { opacity: .7; }
#response-text{ margin:.6rem 0; color:var(--muted) }
#save-links a{ color:var(--primary-2); text-decoration:none }
#toast{ position:fixed; bottom:16px; right:16px; background:#101726; color:#eaf4ff; padding:10px 14px; border-radius:10px; opacity:0; transform:translateY(8px); transition:.15s }
#toast.show{ opacity:.98; transform:translateY(0) }
.bottom-actions{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px }
.bottom-actions .btn{ min-width:120px }
.switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none }
.switch input{ appearance:none; width:38px; height:22px; background:#0f1726; border:1px solid var(--border); border-radius:999px; position:relative; outline:none; transition:.15s }
.switch input:checked{ background:#173056; border-color:#264a7a }
.switch input::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.15s }
.switch input:checked::after{ transform:translateX(16px) }
.switch span{ color:var(--muted); font-weight:600 }