/* Modern UI styling for Task Q */
:root {
  --bg: #0f141a;
  --surface: #1e2731;
  --surface-alt: #25303c;
  --border: #314050;
  --border-accent: #4aa8ff;
  --text: #e6edf3;
  --text-dim: #9aa7b5;
  --danger: #ff5572;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --focus: 2px solid var(--border-accent);
  --shadow: 0 4px 12px -2px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
  --transition: 140ms cubic-bezier(.4,.2,.2,1);
}

html, body { height:100%; }
body { margin:0; background:linear-gradient(145deg,#111b24,#0b0e12); color:var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing:antialiased; }

header { display:flex; gap:.75rem; flex-wrap:wrap; padding:.9rem clamp(.75rem,2vw,2rem) .55rem; align-items:center; background:rgba(255,255,255,.03); backdrop-filter:blur(12px); position:sticky; top:0; z-index:20; border-bottom:1px solid var(--border); }
header h1 { font-size:1.05rem; letter-spacing:.5px; margin:0; font-weight:600; background:linear-gradient(90deg,#4aa8ff,#61dfff); -webkit-background-clip:text; background-clip:text; color:transparent; }
header .spacer { flex:1; }
header button { background:var(--surface-alt); color:var(--text-dim); border:1px solid var(--border); padding:.55rem .85rem; border-radius:var(--radius-md); font-size:.75rem; letter-spacing:.5px; cursor:pointer; transition:var(--transition); }
header button:hover { color:var(--text); border-color:var(--border-accent); }

main { padding: .6rem clamp(.9rem,2vw,2rem) 2rem; }

.queues-wrapper { display:flex; flex-direction:column; gap:1.25rem; }
.queues { display:flex; flex-direction:column; gap:1.25rem; }

.queue { background:linear-gradient(165deg,var(--surface),var(--surface-alt)); border:1px solid var(--border); border-radius:var(--radius-lg); padding: .9rem .95rem 1rem; position:relative; box-shadow:var(--shadow); transition:var(--transition); overflow:hidden; }
.queue.dragging { opacity:.4; }
.queue.placeholder { border:2px dashed var(--border-accent); background:repeating-linear-gradient(135deg,rgba(74,168,255,.15) 0 10px, rgba(74,168,255,.07) 10px 20px); box-shadow:none; min-height:120px; }

.queue-header { display:flex; align-items:center; gap:.75rem; margin:0 0 .65rem; }
.queue-title { font-weight:600; font-size:.95rem; background:var(--surface-alt); border:1px solid var(--border); color:var(--text); padding:.5rem .7rem; border-radius:var(--radius-md); width: clamp(160px, 30vw, 380px); transition:var(--transition); }
.queue-title:focus { outline:none; border-color:var(--border-accent); box-shadow:0 0 0 3px rgba(74,168,255,.25); }


.tasks { display:flex; flex-direction:row; gap:.85rem; overflow-x:auto; padding:.35rem .35rem .65rem .35rem; /* removed scroll-snap-type to prevent jump-back when paging via scrollbar */ }
.tasks::-webkit-scrollbar { height:8px; }
.tasks::-webkit-scrollbar-track { background:transparent; }
.tasks::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.tasks::after { content:"TAIL →"; align-self:center; font-size:.55rem; color:var(--text-dim); padding:.3rem .6rem; border:1px solid var(--border); border-radius:var(--radius-sm); margin-left:.25rem; flex:0 0 auto; background:linear-gradient(145deg,var(--surface-alt),var(--surface)); letter-spacing:1px; }

.task { width:220px; flex:0 0 220px; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:var(--radius-md); padding:.7rem .65rem .6rem; display:flex; flex-direction:column; gap:.5rem; position:relative; /* removed scroll-snap-align to match removal of snap container */ }
.task.dragging { opacity:.35; }
.task.placeholder { background:transparent; border:2px dashed var(--border-accent); box-shadow:none; }
.task-title { display:none; }
.task-body { flex:1; background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.45rem .55rem .55rem; color:var(--text); font:inherit; line-height:1.15rem; min-height:120px; max-height:160px; overflow:hidden; }
.task-body[contenteditable='true'] { overflow:auto; }
.task-body[contenteditable='true']:focus { outline:none; border-color:var(--border-accent); box-shadow:0 0 0 2px rgba(74,168,255,.3); }
.delete-task-btn { position:absolute; top:4px; right:4px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text-dim); padding:.25rem .4rem; font-size:.6rem; border-radius:var(--radius-sm); cursor:pointer; line-height:1; }
.delete-task-btn:hover { background:var(--danger); border-color:var(--danger); color:#fff; }

.delete-queue-btn { background:var(--danger); border:1px solid var(--danger); color:#fff; font-size:.6rem; padding:.45rem .65rem; border-radius:var(--radius-md); cursor:pointer; margin-left:auto; letter-spacing:.5px; }
.delete-queue-btn:hover { filter:brightness(1.1); }

.add-queue-card, .add-task-btn { display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); position:relative; overflow:hidden; }
.add-queue-card { border:2px dashed var(--border); background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); border-radius:var(--radius-lg); padding:2rem 1.25rem; font-weight:600; color:var(--text-dim); font-size:.8rem; letter-spacing:.5px; }
.add-queue-card:hover, .add-task-btn:hover { border-color:var(--border-accent); color:var(--text); background:linear-gradient(145deg,rgba(74,168,255,.15),rgba(74,168,255,.05)); }
.add-task-btn { width:220px; min-width:220px; height:160px; border:2px dashed var(--border); border-radius:var(--radius-md); background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); flex:0 0 auto; }
.add-icon { width:40px; height:40px; stroke:var(--border-accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; fill:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.add-task-btn .add-icon { width:32px; height:32px; }

.export-panel { margin-top:1.5rem; background:var(--surface); border:1px solid var(--border); padding:1rem; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.export-panel h2 { margin-top:0; font-size:.85rem; font-weight:600; letter-spacing:.5px; }
.export-panel textarea { width:100%; background:var(--surface-alt); color:var(--text-dim); border:1px solid var(--border); border-radius:var(--radius-md); padding:.75rem; resize:vertical; min-height:160px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }

button, input { font:inherit; }
button { cursor:pointer; }
button:focus-visible, .add-task-btn:focus-visible, .add-queue-card:focus-visible { outline:var(--focus); outline-offset:2px; }

@keyframes popIn { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }
.queue, .task { animation:popIn .25s var(--transition); }

@media (max-width: 820px) {
  .task { width:200px; }
  .queue-title { width: clamp(140px, 55vw, 300px); }
  header { padding: .75rem 1rem; }
}