:root{
  /* Default (dark) theme variables */
  --bg: linear-gradient(180deg,#071021 0%,#0b1522 100%);
  --card: #0b1220;
  --text: #f3f6f9;
  --muted: #9aa4b2;
  --accent: #2E8B57;
}

/* Light theme */
body.theme-light{
  --bg: linear-gradient(180deg,#f6f7fb 0%,#ffffff 100%);
  --card: #ffffff;
  --text: #111111;
  --muted: #6b6b6b;
  --accent: #2E8B57;
}

/* OLED / true black theme */
body.theme-oled{
  --bg: #000000;
  --card: #000000;
  --text: #e6eef6;
  --muted: #7f8b95;
  --accent: #2E8B57;
}

/* Dark explicit class (same as default) */
body.theme-dark{ }
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text);min-height:100vh;zoom:0.67;overflow-x:hidden}

/* Fallback for browsers without zoom support (e.g., Firefox) */
@supports not (zoom:1) {
  body {
    transform: scale(0.67);
    transform-origin: 0 0;
    /* expand width to compensate for scaling */
    width: calc(100% / 0.67);
  }
}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,0.02);backdrop-filter:blur(6px)}
.brand{font-weight:700;font-size:18px}
.download-app-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:white;text-decoration:none;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;transition:all 0.2s;margin-right:12px}
.download-app-btn:hover{background:#3da06a;transform:translateY(-1px)}
.panel{background:rgba(255,255,255,0.03);border-radius:12px;padding:16px;margin:16px}
.muted{color:var(--muted);margin-top:8px}
.hidden{display:none}
main{padding:12px}

#projects-view{display:flex;gap:12px;align-items:flex-start}

#projects-list-placeholder{}
.projects-list{max-width:360px;flex:0 0 360px;transition:flex 240ms ease,width 240ms ease,opacity 240ms ease,padding 240ms ease,margin 240ms ease}
.projects-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.projects-list-header h3{margin:0}
.minimize-sidebar-btn{background:transparent;color:var(--muted);font-size:16px;padding:4px 8px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,0.1)}
.minimize-sidebar-btn:hover{background:rgba(255,255,255,0.06);color:var(--fg)}
#projects .project{padding:10px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.row{display:flex;gap:8px}
input,button{padding:8px;border-radius:8px;border:0;outline:none}
button{background:var(--accent);color:white;cursor:pointer}

.board{flex:1;transition:all 240ms ease;min-width:0;width:100%;overflow-x:hidden}
.board-header{display:flex;align-items:center;justify-content:space-between}
.lists{
  /* Masonry layout using JS-driven column wrappers */
  display:flex;
  gap:12px;
  align-items:flex-start;
  width:100%;
  flex-wrap:nowrap;
  /* allow vertical scrolling if content exceeds height */
  overflow-y:auto;
  padding:12px 0;
}
.list-column{display:flex;flex-direction:column;gap:12px;flex:1 1 280px;min-width:240px}
.list{
  background:rgba(255,255,255,0.04);
  padding:12px;
  border-radius:8px;
  margin:0 0 12px 0;
  display:block;
  width:100%;
  position:relative; /* create stacking context so inline editors can be elevated */
  z-index:0;
}
.list .list-title{font-weight:600;margin-bottom:8px}
.list.light-text{color:#111}
.list.light-text .muted{color:#6b6b6b}
.list.light-text .toggle{color:#333}
.list.light-text .delete-list{color:#333}
.list.light-text .item .content{color:inherit}
.item{background:rgba(255,255,255,0.04);padding:8px;border-radius:6px;margin-bottom:8px}
.item-row{display:flex;align-items:center;gap:8px}
.task-heading{font-weight:600}
.heading-block{padding:8px 10px;border-radius:6px;background:transparent;font-weight:600;margin-bottom:8px;color:inherit;transition:background 120ms ease,box-shadow 120ms ease;text-align:center}
.heading-block[contenteditable="true"]{cursor:text}
.heading-block[contenteditable="true"]:focus{background:rgba(255,255,255,0.02);box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);outline:none}
.item .content{flex:1}
/* Subtle editable styling for task and heading text */
.content[contenteditable="true"]{padding:4px 6px;border-radius:6px;min-height:20px;font-weight:500;letter-spacing:0.1px;text-align:left}
/* ensure non-editable content also left-aligns */
.item .content, .subtask .content { text-align: left }
.content[contenteditable="true"]:focus{background:rgba(255,255,255,0.02);box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);outline:none}

/* hide checkboxes until the checklist is activated */
.list .item-row input[type="checkbox"],
.list .subtask input[type="checkbox"] {
  opacity: 0;
  pointer-events: none;
  width: 0; /* collapse space */
  margin-right: 0;
  transition: opacity 120ms ease, width 120ms ease, margin 120ms ease;
}
.list.show-controls .item-row input[type="checkbox"],
.list.show-controls .subtask input[type="checkbox"],
.list:focus-within .item-row input[type="checkbox"],
.list:focus-within .subtask input[type="checkbox"] {
  opacity: 1;
  pointer-events: auto;
  width: auto;
  margin-right: 8px;
}
.item.dragging{opacity:0.6}
.list.dragging{opacity:0.4;transform:scale(0.98)}
.item .subtasks{margin-left:0;margin-top:8px}
.subtasks .subtask{margin-left:28px}

/* completed state */
.item.done .content,
.subtask.done .content { text-decoration: line-through; opacity: 0.7; color: var(--muted); }

/* projects column */
.projects-list{transition:width 0.18s, opacity 0.18s}
.projects-list.hidden { width: 0; padding:0; margin:0; opacity:0; overflow:hidden; flex:0 0 0 }
/* pull-tab: hidden by default, revealed when sidebar is collapsed */
#sidebar-pull-tab{display:none;align-self:flex-start;margin-top:16px;flex-shrink:0;writing-mode:vertical-rl;padding:10px 6px;border-radius:0 8px 8px 0;background:var(--accent);color:#fff;border:0;cursor:pointer;font-size:13px;letter-spacing:0.5px;opacity:0.82;transition:opacity 0.15s}
#sidebar-pull-tab:hover{opacity:1}
.projects-list.hidden ~ #sidebar-pull-tab{display:flex}
.item .subtask{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;background:rgba(255,255,255,0.01);margin-bottom:6px}
.toggle{width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,0.02);border:0;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
.toggle:hover{background:rgba(255,255,255,0.04);color:#fff}
.toggle:active{transform:translateY(1px)}
.toggle.open{transform:rotate(90deg)}
/* improve touch response */
.toggle{touch-action:manipulation}

/* Touch-drag visuals */
.drag-clone{position:fixed;pointer-events:none;z-index:9999;opacity:0.95;box-shadow:0 6px 20px rgba(0,0,0,0.4);border-radius:6px;transform:translate(-50%,-50%)}
.drag-placeholder{border:2px dashed rgba(255,255,255,0.06);border-radius:6px;margin-bottom:8px;background:rgba(255,255,255,0.01)}

/* Ensure items are easier to tap on mobile */
.item, .subtask { touch-action: manipulation }

/* On small screens collapse projects column by default when hidden */
@media (max-width:800px){
  .projects-list{transition:width 0.18s, opacity 0.18s}
  .projects-list.hidden { width: 0; padding:0; margin:0; opacity:0; overflow:hidden; flex:0 0 0 }
}

/* Hide per-item action buttons until the item or subtask is focused/clicked */
.item .item-row button.item-action,
.subtask button.item-action,
.heading-block button.item-action {
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.item:focus-within .item-row button.item-action,
.subtask:focus-within button.item-action,
.heading-block:focus-within button.item-action,
.list.show-controls .heading-block button.item-action,
.list.show-controls .item-row button.item-action,
.list.show-controls .subtask button.item-action {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Hide the toggle button until the item or checklist is active; reveal on focus or when checklist controls are shown */
.item .item-row button.toggle { opacity: 0; pointer-events: none; transform: translateY(2px); transition: opacity 120ms ease, transform 120ms ease }
.item:focus-within .item-row button.toggle,
.list.show-controls .item-row button.toggle,
.list:focus-within .item-row button.toggle {
  opacity: 1; pointer-events: auto; transform: none
}

/* checklist header */
.list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;user-select:none}
.list-header .list-title{font-weight:700}
/* indicate header as draggable */
.list-header[draggable="true"]{cursor:grab;padding:4px;margin:-4px;border-radius:6px;transition:background 120ms ease}
.list-header[draggable="true"]:hover{background:rgba(255,255,255,0.03)}
.list-header[draggable="true"]:active{cursor:grabbing}

/* placeholder for list drag-and-drop */
.list-drag-placeholder{
  background:rgba(46, 139, 87, 0.08);
  border:3px dashed rgba(46, 139, 87, 0.4);
  border-radius:8px;
  margin-bottom:12px;
  transition:all 150ms ease;
}

/* subtle delete button */
.delete-list{
  background:transparent;
  border:0;
  color:var(--muted);
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
}
.delete-list:hover{ background: rgba(255,255,255,0.03); color:#ff6b6b }
.delete-list:active{ transform:translateY(1px) }

/* hide delete until checklist is active (click/tap) */
.list .delete-list{
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.list.show-controls .delete-list{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.add-list{display:flex;gap:8px;align-items:center;margin:8px}

/* edit checklist button - hidden until the checklist is active */
.list .edit-list{opacity:0;pointer-events:none;border:0;background:transparent;color:var(--muted);padding:6px 8px;border-radius:6px;cursor:pointer}
.list.show-controls .edit-list{opacity:1;pointer-events:auto;color:var(--muted)}
.list .list-edit-row{display:flex;gap:8px;align-items:center;padding:6px;position:relative;z-index:20;background:rgba(0,0,0,0.02);border-radius:6px}

/* collapse button styling */
.collapse-list{background:transparent;border:0;color:var(--muted);padding:6px 8px;border-radius:6px;cursor:pointer;font-size:14px;margin-right:6px}
.collapse-list:hover{background:rgba(255,255,255,0.02);color:var(--text)}

/* collapsed checklist: hide items and entry rows */
.list.collapsed .items{display:none}
.list.collapsed .list-controls{display:none}
.list.collapsed .heading-row{display:none}

@media (max-width:800px){
  .board{margin-left:0}
  .lists{overflow:auto}
  .projects-list{margin-bottom:12px}
  .toggle{width:48px;height:48px;font-size:18px}
}

/* On narrow screens, when the projects column is hidden, remove it from layout entirely */
@media (max-width:800px){
  .projects-list.hidden { display: none; }
}

/* hide checklist entry rows until the checklist is activated (clicked/tapped) */
.list .list-controls,
.list .heading-row {
  display: none;
  gap: 8px;
  align-items: center;
}
.list.show-controls .list-controls,
.list.show-controls .heading-row,
.list:focus-within .list-controls,
.list:focus-within .heading-row {
  display: flex;
}

/* Chat sidebar */
.chat-sidebar{position:fixed;right:0;top:56px;bottom:0;width:360px;background:var(--card);box-shadow:-8px 0 40px rgba(0,0,0,0.4);padding:12px;display:flex;flex-direction:column;z-index:1200}
.chat-sidebar.hidden{display:none}
.chat-top{flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.chat-top textarea{min-height:70px;padding:8px;border-radius:8px;border:0}
.chat-messages{flex:1 1 auto;overflow:auto;margin-top:12px;border-top:1px solid rgba(255,255,255,0.02);padding-top:8px}
.chat-list{display:flex;flex-direction:column;gap:8px}
.chat-item{padding:8px;border-radius:8px;background:rgba(255,255,255,0.02)}
.chat-item .meta{font-size:12px;color:var(--muted);margin-bottom:6px}
.chat-compose{display:flex;gap:8px;align-items:center;padding-top:8px}
.chat-compose input{flex:1;padding:8px;border-radius:8px;border:0}

/* Mobile improvements: make checklists stack and increase tap targets */
@media (max-width:600px){
  /* scale down slightly to fit two narrow columns on small devices */
  body{zoom:0.6}
  /* fallback when `zoom` isn't supported */
  @supports not (zoom:1) {
    body { transform: scale(0.6); transform-origin: 0 0; width: calc(100% / 0.6); }
  }
  /* use a two-column grid so checklists form two columns on mobile */
  .lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:8px}
  .list{flex:1 1 100%;min-width:0;width:100%;padding:14px;border-radius:10px}
  .list .list-title{font-size:16px}
  .item, .subtask{padding:12px;font-size:15px;border-radius:8px}
  .toggle, .delete-list, .add-list button, .chat-compose input{height:48px}
  .projects-list{flex:0 0 auto;max-width:100%;width:100%;order:-1}
  .board{padding:8px}
  .chat-sidebar{width:100%;right:0;left:0;top:auto;bottom:0;height:40vh;position:fixed}
}