:root{
    --bg: #0f1216;
    --panel: #151a20;
    --ink: #e8eef6;
    --muted: #a7b3c3;
    --accent: #66b2ff;
    --accent-2:#7ee787;
    --warning:#f6c177;
    --danger:#ff6b6b;
    --card:#1b222b;
    --border:#273142;
    --badge:#223049;
    --shadow: 0 6px 20px rgba(0,0,0,.25);
    --bg-gradient: linear-gradient(180deg,#0b0e12, #0f141a 20%, #0f1216);
    --radius: 12px;
    --tap-target: 44px;
    --col-header-height: 64px;
    --header-height: 64px;
    --chat-panel-width: 360px;
    --backlog-collapsed-width: 36px;
    color-scheme: dark;
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
  }
  :root[data-theme="light"]{
    --bg: #f3f5f9;
    --panel: #ffffff;
    --ink: #1b2430;
    --muted: #5f6b7a;
    --accent: #2563eb;
    --accent-2: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --card: #f7f9fc;
    --border: #d4dbe6;
    --badge: #e8eef7;
    --shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    --bg-gradient: var(--bg);
    color-scheme: light;
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme]){
      --bg: #f3f5f9;
      --panel: #ffffff;
      --ink: #1b2430;
      --muted: #5f6b7a;
      --accent: #2563eb;
      --accent-2: #16a34a;
      --warning: #d97706;
      --danger: #dc2626;
      --card: #f7f9fc;
      --border: #d4dbe6;
      --badge: #e8eef7;
      --shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
      --bg-gradient: var(--bg);
      color-scheme: light;
    }
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body{
    margin:0; color:var(--ink); background: var(--bg-gradient, var(--bg));
    font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    display:flex;
    flex-direction:column;
    min-height:100vh;
    overflow:hidden;
  }
  body.chat-open{
    padding-right: var(--chat-panel-width, 360px);
  }
  header{
    position: sticky; top:0; z-index: 60; background: var(--panel); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .header-row{
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 24px;
    background: var(--panel);
  }
  .header-row + .header-row{
    border-top:1px solid var(--border);
  }
  .header-title h1{ font-size:16px; margin:0; font-weight:600; letter-spacing:.2px; }
  .header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
  }
  #addTask{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  #addTask .quick-add__label--short{
    display:none;
  }
  .view-tabs{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    min-width:0;
    margin-left:16px;
    margin-right:auto;
  }
  .view-tab{
    background: transparent;
    color: var(--muted);
    padding:6px 4px 8px;
    border-radius:0;
    border:0;
    border-bottom:2px solid transparent;
    min-height: var(--tap-target);
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
  }
  .view-tab.is-active{
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .view-tab:hover{
    color: var(--ink);
  }
  .view-tab__icon{
    width:16px;
    height:16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .view-select{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .sr-only{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
  }
  @media (min-width: 821px){
    .sr-only--mobile{
      position: static !important;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto;
      clip-path: none;
      white-space: normal;
    }
  }
  .header-filters{
    align-items:flex-start;
  }
  .advanced-controls{
    display:flex;
    align-items:center;
    gap:16px;
    flex:1;
  }
  .filters-left{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
  }
  .filters-range{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .date-nav{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .date-nav__today{
    padding:6px 12px;
  }
  .date-nav__icon{
    padding:6px 10px;
    font-weight:600;
    min-width:36px;
  }
  .date-range-label{
    font-weight:600;
    color: var(--ink);
    white-space:nowrap;
  }
  .date-inputs-hidden{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space:nowrap;
    border:0;
  }
  .filters-toggle{ display:none; }
  .filters-toggle[aria-expanded="true"]{
    border-color: rgba(102,178,255,.6);
    box-shadow: 0 0 0 1px rgba(102,178,255,.35);
  }
  .ai-controls{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .ai-controls[hidden]{ display: none !important; }
  .chat-toggle[hidden],
  #chatToggle[hidden]{
    display: none !important;
  }
  .swimlane-toolbar{
    position: static;
    z-index: 5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding:0;
    border:0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .swimlane-toolbar[hidden]{
    display:none;
  }
  .swimlane-toolbar__controls{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .swimlane-toolbar__toggle label{
    font-size:12px;
    color: var(--muted);
  }
  .swimlane-toolbar__icon-button{
    width: var(--tap-target);
    height: var(--tap-target);
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0;
  }
  .swimlane-toolbar__icon-button svg{
    width:16px;
    height:16px;
    stroke: currentColor;
    stroke-width:2;
    fill:none;
  }
  .swimlane-toolbar__menu{
    position: relative;
  }
  .swimlane-toolbar__more{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .swimlane-toolbar__menu-panel{
    position:absolute;
    left:0;
    right:auto;
    top:calc(100% + 6px);
    display:none;
    flex-direction:column;
    min-width:160px;
    max-width:calc(100vw - 16px);
    overflow-x:hidden;
    padding:6px;
    border:1px solid var(--border);
    border-radius:12px;
    background: var(--panel);
    box-shadow: var(--shadow);
    z-index: 70;
  }
  .swimlane-toolbar__menu-panel.open{
    display:flex;
  }
  .swimlane-toolbar__menu-item{
    width:100%;
    text-align:left;
    border:1px solid transparent;
    background: transparent;
    color: var(--ink);
    padding:8px 10px;
    border-radius:8px;
    font-size:13px;
  }
  .swimlane-toolbar__menu-item:hover,
  .swimlane-toolbar__menu-item:focus-visible{
    background: color-mix(in srgb, var(--panel) 65%, var(--accent) 12%);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .swimlane-toolbar button:disabled{
    opacity:0.5;
    cursor:not-allowed;
    transform:none;
  }
  .active-filters{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    padding:8px 24px 12px;
    border-top:1px solid var(--border);
  }
  body.list-view label[for="startDate"],
  body.list-view #startDate,
  body.list-view label[for="endDate"],
  body.list-view #endDate,
  body.list-view label[for="dateRangePreset"],
  body.list-view #dateRangePreset,
  body.list-view .date-nav,
  body.list-view .date-range-label{
    display:none;
  }
  .filter-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
  }
  .filter-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid var(--border);
    background: var(--panel);
    color: var(--ink);
    border-radius:999px;
    padding:3px 10px;
    font-size:12px;
  }
  .filter-chip__label{
    color: var(--muted);
  }
  .filter-chip__value{
    font-weight: 600;
  }
  .filter-chip__clear{
    border:none;
    background:none;
    color: var(--muted);
    padding:0;
    width:18px;
    height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    transform:none;
  }
  .filter-chip__clear:hover{
    color: var(--ink);
    background: rgba(255,255,255,0.08);
    transform:none;
  }
  .filter-chip--action{
    cursor:pointer;
    font-weight:600;
  }
  .filter-chip--action:hover{
    border-color: rgba(102,178,255,.5);
  }
  .clear-filters{
    padding:3px 10px;
    font-size:12px;
  }
  label{ color:var(--muted); font-size:12px; }
  .search-input{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
  }
  .search-input__icon{
    width:16px;
    height:16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--muted);
  }
  .search-input input{
    min-width:180px;
    width:100%;
  }
  input[type="date"], input[type="number"], input[type="search"], input[type="text"], input[type="password"], select, textarea, button{
    background: var(--panel); border:1px solid var(--border); color:var(--ink);
    padding:8px 10px; border-radius:8px;
    min-height: var(--tap-target);
  }
  textarea{
    width:100%;
    font: inherit;
    resize: vertical;
  }
  select[multiple]{
    min-width: 160px;
    min-height: 120px;
  }
  button{ cursor:pointer; transition:.15s transform ease; min-width: var(--tap-target); }
  button:hover{ transform: translateY(-1px); }
  button.primary{ background: linear-gradient(180deg, #2a72e5, #205ec5); border: none; }
  button.accent-button{
    background: linear-gradient(180deg,#4884ff,#2d5fda);
    border: none;
    border-radius: 10px;
    padding: .5rem 1rem;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(45,95,218,.35);
  }
  button.ghost{ background: var(--panel); }
  button.danger{
    border-color: var(--danger);
    color: var(--danger);
  }
  button.danger:hover{
    background: rgba(255, 107, 107, 0.08);
  }
  button.settings-button{
    width: var(--tap-target);
    height: var(--tap-target);
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
  .app{
    flex: 1 1 auto;
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:16px;
    width:100%;
    min-width:0;
    box-sizing: border-box;
    height: calc(100dvh - var(--header-height));
    min-height:0;
    overflow:hidden;
  }
  .no-results{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    border:1px dashed var(--border);
    background: color-mix(in srgb, var(--panel) 85%, transparent);
    border-radius: var(--radius);
    padding:12px 16px;
  }
  .no-results[hidden]{
    display:none;
  }
  .no-results__text{
    display:flex;
    flex-direction:column;
    gap:4px;
    color: var(--muted);
  }
  .no-results__text strong{
    color: var(--ink);
    font-size:14px;
  }
  .getting-started{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
    justify-content:space-between;
    border:1px dashed var(--border);
    background: color-mix(in srgb, var(--panel) 85%, transparent);
    border-radius: var(--radius);
    padding:16px;
  }
  .getting-started[hidden]{
    display:none;
  }
  .getting-started__content{
    display:flex;
    flex-direction:column;
    gap:6px;
    color: var(--muted);
    min-width: min(360px, 100%);
  }
  .getting-started__content strong{
    color: var(--ink);
    font-size:15px;
  }
  .getting-started__note{
    font-size:12px;
    color: var(--muted);
  }
  .getting-started__actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
  }
  .getting-started__actions button{
    white-space:nowrap;
  }
  .kanban-switcher{
    display:none;
    align-items:center;
    gap:8px;
    margin:8px 0 4px;
    padding:6px 8px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--panel);
    box-shadow: var(--shadow);
  }
  .kanban-switcher__center{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    min-width:0;
  }
  .kanban-switcher__label{
    font-size:12px;
    font-weight:600;
    color:var(--ink);
  }
  .kanban-switcher__dots{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .kanban-switcher__dot{
    width:6px;
    height:6px;
    border-radius:999px;
    border:none;
    background:var(--border);
    padding:0;
    cursor:pointer;
  }
  .kanban-switcher__dot.is-active{
    background:var(--accent);
  }
  .kanban-switcher__button{
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }
  .board{
    gap:12px;
    align-content: start;
    align-items: start;
    overflow-x:auto; overflow-y:auto;
    align-self: stretch;
    width:100%;
    min-width:0;
    height:100%;
    min-height:0;
    padding:0 0 16px;
    scrollbar-gutter: stable both-edges;
  }
  .board.grid-board{
    display:flex;
    flex-direction:row;
    align-items:stretch;
  }
  .board.list-board{
    display:block;
    padding-bottom:0;
  }
  .list-table{
    width:max-content;
    min-width:100%;
    border-collapse:collapse;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .list-table thead th{
    position:sticky;
    top:0;
    background:var(--panel);
    z-index:2;
    color:var(--muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.3px;
  }
  .list-table th,
  .list-table td{
    padding:8px 10px;
    border-bottom:1px solid var(--border);
    border-right:1px solid var(--border);
    vertical-align:middle;
    white-space:nowrap;
  }
  .list-table th:last-child,
  .list-table td:last-child{
    border-right:none;
  }
  .list-table tbody tr:nth-child(even){
    background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  }
  .list-cell-input,
  .list-cell-select{
    width:100%;
    min-width:140px;
    padding:6px 8px;
    border-radius:6px;
  }
  .list-cell--task .list-cell-input{
    min-width:240px;
  }
  .list-cell--stack-rank .list-cell-input{
    min-width:90px;
  }
  .list-cell--date .list-cell-input{
    min-width:160px;
  }
  .list-mobile-cards{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .list-card{
    width:100%;
  }
  .list-card-fields{
    margin-top:8px;
  }
  .list-card-field{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .list-card-field .list-cell-input,
  .list-card-field .list-cell-select{
    min-width:0;
    width:100%;
  }
  .list-card-field .list-cell-select{
    background: var(--panel);
  }
  @media (max-width: 600px){
    .kanban-switcher{
      display:flex;
    }
    .kanban-switcher[hidden]{
      display:none;
    }
    .board.list-board{
      overflow-x:hidden;
    }
    .board.list-board .list-table{
      display:none;
    }
    .board.grid-board[data-view="kanban"]{
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 12px;
    }
    .board.grid-board[data-view="kanban"] .column{
      flex: 0 0 calc(100% - 32px);
      scroll-snap-align: start;
    }
  }
  @media (pointer: coarse){
    .board.grid-board{
      scroll-snap-type: x proximity;
    }
    .board.grid-board .column{
      scroll-snap-align: start;
    }
    .board.grid-board[data-view="kanban"]{
      scroll-snap-type: x mandatory;
    }
  }
  .board.grid-board[data-view="kanban"]{
    align-items:flex-start;
  }
  .board.grid-board[data-view="kanban"] .column{
    height: auto;
  }
  @media (min-width: 601px) and (max-width: 1199px){
    .board.grid-board[data-view="kanban"] .column{
      flex: 0 0 calc((100% - 12px) / 2);
    }
  }
  @media (min-width: 1200px){
    .board.grid-board[data-view="kanban"] .column{
      flex: 0 0 calc((100% - 24px) / 3);
    }
  }
  .board.grid-board[data-view="schedule"]{
    align-items:flex-start;
  }
  .board.swimlanes{
    display:flex;
    flex-direction:column;
    overflow-x:auto;
    gap:16px;
    /* Base .board sets align-items:start for grid layout; in swimlanes (flex)
       we want each lane to stretch full-width. */
    align-items: stretch;
  }
  .lane-board{
    display:grid;
    grid-auto-flow: column;
    align-content: start;
    align-items: stretch;
    padding-bottom:4px;
    grid-auto-columns: minmax(0, 1fr);
    overflow: visible;
    width: 100%;
    min-width: 0;
    gap: 12px;
  }
  .swimlane-columns-header{
    position: sticky;
    top: 0;
    z-index: 35;
  }
  .swimlane-columns-header .column{
    min-height: auto;
  }
  .swimlane-columns-header .col-header{
    position: static;
  }
  .lane-board.backlog-collapsed{
    grid-template-columns: var(--backlog-collapsed-width);
  }

  /* Swimlanes should be compact: don't force each lane to be a full viewport tall. */
  .board.swimlanes .column{ min-height: 0; }
  .board.swimlanes .lane-board .column{ height: auto; }
  .board.swimlanes .dropzone{ min-height: 120px; flex: 1 1 auto; }
  .swimlane{ display:flex; flex-direction:column; gap:8px; }
  .swimlane.collapsed .lane-board{ display:none; }
  .swimlane-header{ display:flex; gap:8px; align-items:center; padding:4px 2px; color:var(--muted); font-size:12px; }
  .swimlane-title-row{ display:flex; align-items:center; gap:6px; min-width:0; flex:1; }
  .swimlane-title{ font-weight:600; color:var(--ink); font-size:13px; cursor:text; }
  .swimlane-drag-handle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:6px;
    border:1px solid var(--border);
    background:var(--panel);
    color:var(--ink);
    cursor:grab;
    padding:0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  }
  .swimlane-drag-handle svg{ width:14px; height:14px; }
  .swimlane-drag-handle:active{ cursor:grabbing; }
  .swimlane-drag-handle:hover,
  .swimlane-drag-handle:focus-visible{
    border-color: var(--border);
    color: var(--ink);
    background: rgba(255,255,255,0.06);
    outline:none;
  }
  .swimlane-title-input{
    font-weight:600;
    font-size:13px;
    color:var(--ink);
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:6px;
    padding:2px 6px;
    min-width:140px;
  }
  .swimlane-title-input:focus{
    outline:none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(102,178,255,.3);
  }
  .swimlane-sub{ color:var(--muted); }
  .swimlane-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--panel);
    color:var(--ink);
    cursor:pointer;
    padding:0;
  }
  .swimlane-toggle:hover,
  .swimlane-toggle:focus-visible{
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(102,178,255,.3);
    outline:none;
  }
  .swimlane-toggle svg{
    width:14px;
    height:14px;
    transition: transform .2s ease;
  }
  .swimlane.collapsed .swimlane-toggle svg{
    transform: rotate(-90deg);
  }
  .swimlane-quick-add{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:4px 10px;
    font-size:11px;
    border:1px solid var(--border);
    background:var(--panel);
    color:var(--ink);
    cursor:pointer;
  }
  .swimlane-quick-add:hover,
  .swimlane-quick-add:focus-visible{
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(102,178,255,.3);
    outline:none;
  }
  .backlog-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--panel);
    color:var(--ink);
    cursor:pointer;
    padding:0;
    margin-right:6px;
  }
  .backlog-toggle:hover,
  .backlog-toggle:focus-visible{
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(102,178,255,.3);
    outline:none;
  }
  .backlog-toggle svg{
    width:12px;
    height:12px;
    transition: transform .2s ease;
  }
  .column.backlog.collapsed .backlog-toggle svg{
    transform: rotate(-90deg);
  }
  .swimlane-placeholder{ padding:24px; border:1px dashed var(--border); border-radius:12px; color:var(--muted); text-align:center; }
  .swimlane-status{ font-size:12px; color:var(--muted); }
  .swimlane-status[data-state="error"]{ color: var(--danger); }
  .swimlane-status[data-state="success"]{ color: var(--accent-2); }
  .swimlane.swimlane-dragging{ opacity:0.6; }
  .swimlane.swimlane-dragover{ outline:1px dashed var(--border); outline-offset:6px; border-radius:12px; }
  #board{
    position: relative;
    overflow: auto;
    padding-bottom: 16px;
  }
  .column{
    display:flex; flex-direction:column; gap:10px; background: var(--panel); border:1px solid var(--border);
    border-radius: var(--radius); min-height: 420px; min-width: 0; box-shadow: var(--shadow);
  }
  .board.grid-board .column{
    flex:1 0 240px;
  }
  .column,
  .column > .inner,
  .column .cards,
  .column .dropzone{
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
  }
  .col-header{
    position: sticky;
    top: 0;            /* stick to top of the board’s scrollport */
    z-index: 30;
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    background: var(--panel);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }
  .col-title{ font-weight:600; font-size: 13px; letter-spacing:.2px; overflow-wrap:anywhere; display:flex; align-items:center; gap:6px; }
  .col-title-text{ min-width:0; }
  .schedule-col-header{
    padding:8px 10px;
  }
  .schedule-col-header .col-title{
    justify-content: space-between;
    align-items:center;
    flex-wrap: wrap;
    gap:8px;
  }
  .col-date{
    display:flex;
    flex-direction:column;
    line-height:1.05;
    min-width:0;
  }
  .col-weekday{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    color: var(--muted);
  }
  .col-day{
    font-size:18px;
    font-weight:600;
    color: var(--ink);
  }
  .col-meta{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .task-count-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    padding:2px 6px;
    border-radius:999px;
    border:1px solid var(--border);
    background: var(--badge);
    color: var(--ink);
    font-size:11px;
    line-height:1;
  }
  .weather-icon{
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .weather-icon img{
    width:24px;
    height:24px;
    object-fit:contain;
  }
  .weather-icon.weather-empty{
    color:var(--muted);
    font-size:12px;
  }
  .col-sub{ color: var(--muted); font-size:12px; }
  .dropzone{
    padding: 12px;     /* simple, consistent spacing */
    margin-top: 0;     /* no overlap with header */
    display:flex; flex-direction:column; gap:10px; min-height: 320px;
    flex:1;
  }
  .column.backlog.collapsed{
    min-height: auto;
    gap: 0;
    flex: 0 0 var(--backlog-collapsed-width);
    max-width: var(--backlog-collapsed-width);
    min-width: var(--backlog-collapsed-width);
  }
  .column.backlog.collapsed .col-header{
    padding: 10px 6px;
  }
  .column.backlog.collapsed .col-title{
    justify-content: center;
    gap: 0;
  }
  .column.backlog.collapsed .col-title span,
  .column.backlog.collapsed .col-sub{
    display:none;
  }
  .column.backlog.collapsed .dropzone{
    display:none;
  }
  .dropzone.dragover{ outline:2px dashed var(--accent); outline-offset: 4px; border-radius: 10px; }
  .card-placeholder{
    display:block;
    width:100%;
    min-height:44px;
    border:1px dashed var(--accent);
    border-radius:10px;
    background:rgba(102,178,255,.12);
    pointer-events:none;
  }
  .card{
    background: var(--card); border:1px solid var(--border); border-radius: 10px; padding:10px; display:flex; flex-direction:column; gap:8px;
    transition: background .2s ease, border-color .2s ease;
    min-width:0;
  }
  .card.dragging{ opacity:0.35; }
  .card.selected{
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(102,178,255,.35);
  }
  .selection-box{
    position: fixed;
    border: 1px dashed var(--accent);
    background: rgba(102,178,255,.15);
    border-radius: 6px;
    pointer-events: none;
    z-index: 9999;
  }
  .context-menu{
    position:fixed;
    background: var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow: var(--shadow);
    padding:4px 0;
    min-width:160px;
    display:none;
    overflow: visible;
    z-index:10000;
  }
  .context-menu-content{
    max-height: none;
    overflow: visible;
  }
  .context-menu.open{ display:block; }
  .context-menu-item{ position:relative; }
  .context-menu button{
    width:100%;
    text-align:left;
    background:none;
    border:none;
    color:var(--ink);
    padding:8px 14px;
    font:inherit;
    cursor:pointer;
    min-height: var(--tap-target);
    display:flex;
    align-items:center;
  }
  .context-menu .submenu-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .context-submenu{
    position:absolute;
    top:0;
    left:100%;
    margin-left:4px;
    background: var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow: var(--shadow);
    padding:4px 0;
    min-width:160px;
    display:none;
    z-index:10001;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .context-menu-item.has-submenu:hover .context-submenu,
  .context-menu-item.has-submenu:focus-within .context-submenu{
    display:block;
  }
  .context-menu button:hover,
  .context-menu button:focus{
    background:var(--badge);
    outline:none;
  }
  .context-menu button.danger{ color: var(--danger); }
  .card[draggable="true"]{ cursor:grab; }
  .card:active{ cursor:grabbing; }
  .card:focus{ outline:none; }
  .card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .card.collapsed{ gap:4px; }
  .card.collapsed .form{ display:none; }
  .card.collapsed .titleline{ margin-bottom:0; }
  .titleline{ display:flex; align-items: baseline; gap:8px; min-width:0; }
  .title{
    font-weight: 600; letter-spacing:.2px; font-size:14px; outline:none; overflow-wrap:anywhere; min-width:0;
  }
  .titleline-actions{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
  }
  .card-actions-button{
    border:1px solid transparent;
    background: var(--panel);
    color: var(--muted);
    border-radius:8px;
    padding:2px 6px;
    font-size:16px;
    line-height:1;
    cursor:pointer;
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .card-actions-button:hover,
  .card-actions-button:focus-visible{
    color: var(--ink);
    background: var(--badge);
    border-color: var(--border);
    outline:none;
  }
  .meta{ display:flex; gap:8px; align-items:center; flex-wrap: wrap; color: var(--muted); font-size:12px; }
  .keyword-badges{
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-wrap: wrap;
  }
  .card.collapsed .keyword-badges-expanded{ display:none; }
  .card:not(.collapsed) .keyword-badges-collapsed{ display:none; }
  .badge{ background: var(--badge); border:1px solid var(--border); padding:2px 6px; border-radius: 999px; }
  .badge.status-badge{ text-transform: uppercase; letter-spacing:.4px; font-size:11px; }
  .badge.status-to-do{ background: color-mix(in srgb, var(--accent) 16%, var(--badge)); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
  .badge.status-in-progress{ background: color-mix(in srgb, var(--warning) 18%, var(--badge)); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); color: var(--ink); }
  .badge.status-done{ background: color-mix(in srgb, var(--accent-2) 18%, var(--badge)); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); color: var(--ink); }
  .column.status-column{ border-top:3px solid transparent; }
  .column.status-to-do{ border-top-color: var(--accent); }
  .column.status-in-progress{ border-top-color: var(--warning); }
  .column.status-done{ border-top-color: var(--accent-2); }
  .form{
    display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:8px;
  }
  .form .full{ grid-column: 1 / -1; }
  .form input, .form select, .form textarea{
    width:100%; background: var(--panel); border:1px solid var(--border); color:var(--ink); border-radius: 8px; padding:6px 8px;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .form label{ display:block; font-size:11px; color: var(--muted); margin-bottom:4px; }
  .money{ color: var(--accent-2); font-weight:600; }
  .immediate{ background: color-mix(in srgb, var(--danger) 18%, var(--badge)); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--ink); }
  .backlog .col-header{ background: linear-gradient(180deg, color-mix(in srgb, var(--badge) 85%, var(--panel)), var(--panel)); }
  .count-dot{
    display:inline-block; min-width: 24px; text-align:center; background:var(--badge); border:1px solid var(--border);
    padding:1px 6px; border-radius:999px; font-size:12px;
  }
  .count-dot.over-limit{
    background: var(--danger);
    border-color: var(--danger);
    color: var(--ink);
    font-weight:600;
  }
  @media (max-width: 600px), (pointer: coarse){
    .card .form{
      grid-template-columns: 1fr;
      gap:12px;
    }
    .card .form input,
    .card .form select,
    .card .form textarea{
      font-size:16px;
    }
    .card .form label{
      font-size:12px;
    }
  }
  @media (max-width: 980px){
    html,
    body{ overflow-x:hidden; }
    body{ overflow-y:auto; }
    .app{
      height:auto;
      overflow: visible;
      min-height: auto;
    }
    .board{
      height:auto;
      min-height:auto;
      overflow-y:visible;
    }
  }
  @media (max-width: 820px){
    .header-row{
      padding:10px 16px;
      flex-wrap:wrap;
    }
    .view-tabs{
      width:100%;
      flex-wrap:wrap;
      row-gap:6px;
      margin-left:0;
      margin-right:0;
    }
    .view-select{
      width:100%;
      justify-content:space-between;
    }
    .header-filters{
      flex-direction:column;
      align-items:stretch;
    }
    .filters-toggle{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .advanced-controls{
      display:none;
      width:100%;
      flex-direction:column;
      align-items:stretch;
      gap:12px;
    }
    header.filters-expanded .advanced-controls{
      display:flex;
    }
    .filters-left{
      flex:1;
      flex-wrap:wrap;
      justify-content:flex-start;
    }
    .filters-left{
      width:100%;
    }
    .filters-range{
      width:100%;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      align-items:start;
      gap:8px;
    }
    .swimlane-toolbar{
      width:100%;
      justify-content:flex-start;
    }
    .header-row input,
    .header-row select{
      width:100%;
    }
  }
  @media (max-width: 520px){
    .view-tabs{
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      padding-bottom:4px;
    }
    .view-tabs::-webkit-scrollbar{
      display:none;
    }
  }
  @media (max-width: 600px){
    .header-row{
      padding:8px 12px;
      gap:8px;
    }
    .header-actions{
      width:100%;
      flex-wrap:wrap;
      justify-content:flex-start;
    }
    .header-title h1{
      font-size:14px;
    }
    .active-filters{
      padding:8px 12px;
      gap:6px;
    }
  }
  @media (max-width: 480px){
    .header-row{
      padding:6px 8px;
      gap:6px;
    }
    .header-top{
      flex-wrap:wrap;
    }
    .header-top .view-tabs{
      margin-left:8px;
    }
    .header-top .header-title{
      flex:1 1 auto;
      min-width:0;
    }
    .header-top .header-title h1{
      font-size:13px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .header-top .header-actions{
      flex:0 1 auto;
      width:auto;
      flex-wrap:nowrap;
      gap:6px;
    }
    #addTask{
      padding:4px 6px;
      font-size:11px;
      line-height:1.1;
      white-space:nowrap;
    }
    #addTask .quick-add__label{
      display:none;
    }
    #addTask .quick-add__label--short{
      display:inline;
    }
    .header-actions button{
      min-width:0;
    }
  }
  @media (pointer: coarse){
    :root{
      --tap-target: 48px;
    }
    .header-row{
      gap:18px;
      padding:14px 16px;
    }
    .header-actions,
    .filters-range{
      gap:12px;
    }
    .actions{
      gap:12px;
      flex-wrap:wrap;
    }
    .context-menu{
      padding:6px 0;
    }
  }
  .side-sheet{position:fixed;top:0;left:0;bottom:0;width:380px;max-width:92vw;background:var(--panel);color:var(--ink);
    border-right:1px solid var(--border);box-shadow:var(--shadow);transform:translateX(-102%);
    transition:transform .2s ease;z-index:1000;display:flex;flex-direction:column}
  .side-sheet.open{transform:translateX(0)}
  .side-sheet-header{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
  .side-sheet-spacer{flex:1}
  .tabs{display:flex;gap:.25rem;padding:.5rem 1rem;border-bottom:1px solid var(--border)}
  .tab{padding:.5rem .75rem;background:none;border:none;color:var(--muted);cursor:pointer}
  .tab.is-active{color:var(--ink);border-bottom:2px solid var(--ink)}
  .field-label{display:block;padding:.75rem 1rem 0 1rem;font-size:.9rem;color:var(--muted)}
  #ioSheet .field-label{padding:0}
  .io-panel{display:flex;flex-direction:column;gap:.75rem;padding:.75rem 1rem 1rem}
  .io-textarea{width:100%;margin:0;min-height:180px;max-height:40vh;resize:vertical;
    background:var(--card);color:var(--ink);border:1px solid var(--border);border-radius:8px;padding:.75rem;box-sizing:border-box}
  .actions{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem}
  .io-actions{margin-top:auto;border-top:1px solid var(--border);padding:.75rem 0 0}
  .actions .hint{margin-left:auto;color:var(--muted);font-size:.75rem}
  .actions .hint[data-state="error"]{ color: var(--danger); }
  .history-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;max-height:40vh;overflow:auto}
  .icon-btn{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer}
  .icon-btn{
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .icon-btn:hover{color:var(--ink)}
  .io-fab{position:fixed;left:12px;bottom:12px;width:var(--tap-target);height:var(--tap-target);border-radius:9999px;border:1px solid var(--border);
    background:var(--panel);color:var(--ink);box-shadow:var(--shadow);z-index:999;cursor:pointer}
  .io-fab::after{content:"IO";font-weight:600}
  .side-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:saturate(80%) blur(2px);
    z-index:999;opacity:0;pointer-events:none;transition:opacity .2s ease}
  .side-sheet-backdrop.show{opacity:1;pointer-events:auto}
  @media (max-width:900px){
    header{
      position: static;
      background: var(--bg);
      backdrop-filter: none;
    }
    .side-sheet{left:0;right:0;bottom:0;top:auto;height:70vh;width:100%;max-width:none;transform:translateY(102%);
      border-right:none;border-top:1px solid var(--border);border-radius:16px 16px 0 0}
    .side-sheet.open{transform:translateY(0)}
    .io-fab{left:auto;right:12px}
  }
  @media (prefers-reduced-motion:reduce){.side-sheet,.side-sheet-backdrop{transition:none}}

  .toast-region{
    position:fixed;
    top:calc(var(--header-height, 64px) + 12px);
    right:16px;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-width:min(360px, 90vw);
    pointer-events:none;
    z-index:1250;
  }
  .toast{
    background:var(--panel);
    color:var(--ink);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow);
    padding:10px 12px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    pointer-events:auto;
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease;
  }
  .toast--visible{opacity:1;transform:translateY(0)}
  .toast[data-state="closing"]{opacity:0;transform:translateY(-6px)}
  .toast__message{flex:1;font-size:13px;line-height:1.35;word-break:break-word}
  .toast__action{
    background:color-mix(in srgb, var(--accent) 18%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius:999px;
    color:var(--accent);
    cursor:pointer;
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    line-height:1;
    padding:6px 10px;
  }
  .toast__action:hover{background:color-mix(in srgb, var(--accent) 28%, transparent);color:var(--ink)}
  .toast__dismiss{
    background:none;
    border:none;
    color:var(--muted);
    cursor:pointer;
    font-size:14px;
    line-height:1;
    padding:0;
  }
  .toast__dismiss:hover{color:var(--ink)}
  @media (max-width:900px){
    .toast-region{
      left:12px;
      right:12px;
    }
  }
  @media (prefers-reduced-motion:reduce){.toast{transition:none}}

  /* Command palette */
  #commandPalette[hidden]{display:none !important;}
  .command-palette{
    position:fixed;
    inset:0;
    background:rgba(7,10,14,.6);
    backdrop-filter: blur(6px);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:16vh 16px 24px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:1450;
  }
  .command-palette.open{
    opacity:1;
    pointer-events:auto;
  }
  .command-palette__dialog{
    width:min(560px, 92vw);
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    outline:none;
  }
  .command-palette__header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
  }
  .command-palette__header h2{
    margin:0;
    font-size:15px;
    font-weight:600;
  }
  .command-palette__hint{
    margin-left:auto;
    color:var(--muted);
    font-size:12px;
  }
  .command-palette__body{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px 16px 16px;
  }
  .command-palette__input{
    width:100%;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
  }
  .command-palette__list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:260px;
    overflow:auto;
  }
  .command-palette__item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 12px;
    border-radius:10px;
    border:1px solid transparent;
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    text-align:left;
    width:100%;
    font:inherit;
  }
  .command-palette__item:focus-visible{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(102,178,255,.3);
  }
  .command-palette__item:hover,
  .command-palette__item.is-active{
    background:rgba(102,178,255,.12);
    border-color:rgba(102,178,255,.4);
  }
  .command-palette__meta{
    color:var(--muted);
    font-size:12px;
  }
  .command-palette__empty{
    color:var(--muted);
    font-size:13px;
    padding:8px 12px;
  }
  @media (max-width:900px){
    .command-palette{
      padding:12vh 12px 24px;
    }
  }
  @media (prefers-reduced-motion:reduce){.command-palette{transition:none}}

  /* Weather modal */
  .weather-modal{
    position:fixed;
    inset:0;
    background:rgba(7,10,14,.6);
    backdrop-filter: blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:1300;
  }
  .weather-modal.open{
    opacity:1;
    pointer-events:auto;
  }
  .weather-dialog{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    width:min(520px, 92vw);
    max-height:80vh;
    display:flex;
    flex-direction:column;
    outline:none;
  }
  .settings-dialog{
    width:min(920px, 94vw);
    height:min(80vh, 640px);
    max-height:80vh;
    border-radius:calc(var(--radius) + 4px);
    overflow:hidden;
  }
  .quick-add-dialog{
    width:min(640px, 92vw);
  }
  .weather-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
  }
  .weather-header h2{
    margin:0;
    font-size:16px;
    font-weight:600;
  }
  .weather-header button{
    margin-left:auto;
  }
  #quickAddMic{
    margin-left:auto;
  }
  #quickAddClose{
    margin-left:0;
  }
  .weather-content{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:12px 0 16px;
    overflow-y:auto;
  }
  .weather-content .text-input{
    width:calc(100% - 2rem);
    margin:0 1rem;
  }
  .settings-section{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 0 1rem;
    padding-bottom: 10px;
  }
  .settings-section h3{
    margin: 0;
    padding: 10px 12px 0;
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .settings-section .field-label{
    padding: 10px 12px 0;
  }
  .settings-section .toggle-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding: 8px 12px 0;
    color: var(--muted);
    font-size: 12px;
    min-height: var(--tap-target);
  }
  .settings-section .toggle-row input{
    margin: 0;
  }
  .settings-section .text-input{
    width: calc(100% - 24px);
    margin: 0 12px;
  }
  .settings-section .actions{
    padding: 10px 12px;
  }
  .settings-help{
    margin: 0 12px;
    color: var(--muted);
    font-size: 12px;
  }
  .settings-layout{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:220px minmax(0, 1fr);
    background:var(--panel);
  }
  .settings-nav{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:16px 12px;
    border-right:1px solid var(--border);
    background:var(--panel);
    min-height:0;
    overflow-y:auto;
  }
  .settings-nav-button{
    appearance:none;
    border:1px solid transparent;
    background:transparent;
    color:var(--ink);
    text-align:left;
    padding:10px 12px;
    border-radius:12px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    min-height:var(--tap-target);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .settings-nav-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    flex:0 0 16px;
    overflow:hidden;
  }
  .settings-nav-button svg{
    width:16px;
    height:16px;
    max-width:16px;
    max-height:16px;
  }
  .settings-nav-icon svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .settings-nav-button:hover,
  .settings-nav-button:focus-visible{
    background:var(--card);
    border-color:var(--border);
  }
  .settings-nav-button.is-active{
    background:var(--card);
    border-color:var(--border);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .settings-main{
    min-height:0;
    overflow-y:auto;
    padding:18px;
  }
  .settings-panel{
    display:none;
  }
  .settings-panel.is-active{
    display:block;
  }
  .settings-dialog .settings-section{
    margin:0;
    padding:0 16px 16px;
  }
  .settings-dialog .settings-section h3{
    padding:16px 0 0;
  }
  .settings-dialog .settings-section .field-label,
  .settings-dialog .settings-section .toggle-row{
    padding:8px 0 0;
  }
  .settings-dialog .settings-section .text-input{
    width:100%;
    margin:0;
  }
  .settings-dialog .settings-section .actions{
    padding:10px 0 0;
  }
  .settings-dialog .settings-help{
    margin:0;
  }
  @media (max-width:720px){
    .settings-layout{
      grid-template-columns:1fr;
      grid-template-rows:auto minmax(0, 1fr);
    }
    .settings-nav{
      flex-direction:row;
      flex-wrap:wrap;
      gap:8px;
      border-right:none;
      border-bottom:1px solid var(--border);
      padding:12px;
    }
    .settings-nav-button{
      flex:1 1 140px;
      text-align:center;
      justify-content:center;
    }
  }
  @media (prefers-reduced-motion:reduce){.weather-modal{transition:none}}

  /* Chat assistant */
  .chat-toggle{
    position:fixed;right:12px;bottom:12px;width:var(--tap-target);height:var(--tap-target);border-radius:9999px;border:1px solid var(--border);
    background:var(--panel);color:var(--ink);box-shadow:var(--shadow);z-index:998;cursor:pointer;font-size:20px;
    display:flex;align-items:center;justify-content:center;transition:transform .2s ease;
  }
  .chat-toggle:hover{transform:translateY(-1px)}
  .chat-panel{
    position:fixed;top:0;right:0;bottom:0;width:var(--chat-panel-width,360px);max-width:92vw;background:var(--panel);color:var(--ink);
    border-left:1px solid var(--border);box-shadow:var(--shadow);transform:translateX(105%);
    background-color: var(--panel);transition:transform .2s ease;z-index:1200;display:flex;flex-direction:column;overflow:hidden;
    isolation:isolate;
  }
  .chat-panel.resizing{transition:transform .2s ease, width 0s;cursor:ew-resize;user-select:none}
  .chat-panel.open{transform:translateX(0)}
  .chat-header{display:flex;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border);gap:.5rem}
  .chat-header__icon{font-size:1.1rem;line-height:1}
  .chat-header strong{font-size:1rem}
  .chat-header button{margin-left:auto;background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;min-height:var(--tap-target);min-width:var(--tap-target)}
  .chat-header button:hover{color:var(--ink)}
  .chat-resize-handle{position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:1}
  .chat-resize-handle::after{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:2px;height:48px;background:rgba(255,255,255,.16);border-radius:2px}
  .chat-panel.resizing .chat-resize-handle::after{background:rgba(102,178,255,.55)}
  .chat-messages{flex:1;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;font-size:.9rem}
  .chat-message{padding:.65rem .75rem;border-radius:10px;max-width:90%;box-shadow:var(--shadow);}
  .chat-message p{margin:0;white-space:pre-wrap;word-break:break-word}
  .chat-message.user{align-self:flex-end;background:color-mix(in srgb, var(--accent) 14%, var(--panel));border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border))}
  .chat-message.assistant{align-self:flex-start;background:var(--card);border:1px solid var(--border)}
  .chat-message.error{border-color:var(--danger);color:var(--danger)}
  .chat-message.pending{opacity:.7}
  .chat-task-cards{margin-top:.6rem;display:flex;flex-direction:column;gap:.6rem}
  .chat-task-cards .card{box-shadow:none}
  .chat-empty{color:var(--muted);text-align:center;padding:1rem 0;font-size:.85rem}
  .chat-form{padding:.75rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.5rem}
  .chat-composer{display:flex;align-items:flex-end;gap:.5rem}
  .chat-form textarea{min-height:42px;max-height:180px;resize:none;background:var(--card);border:1px solid var(--border);
    border-radius:14px;color:var(--ink);padding:.55rem .7rem;font:inherit;line-height:1.4;flex:1;overflow-y:hidden}
  .chat-composer__actions{display:flex;align-items:center;gap:.25rem}
  .chat-icon-button{border:1px solid var(--border);background:var(--panel);color:var(--ink);width:var(--tap-target);height:var(--tap-target);
    border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease}
  .chat-icon-button svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .chat-icon-button .icon-stop{display:none}
  .chat-icon-button.is-recording .icon-mic{display:none}
  .chat-icon-button.is-recording .icon-stop{display:block}
  .chat-icon-button:hover{transform:translateY(-1px)}
  .chat-icon-button:disabled{opacity:.6;cursor:not-allowed;transform:none}
  .chat-icon-button.is-recording,
  .ghost.is-recording{
    border-color:color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .chat-send{background:linear-gradient(135deg, #3a7bd5, #3a6073);color:white;border-color:transparent}
  .chat-send svg{stroke:white}
  .chat-send.is-sending{opacity:.8}
  @media (max-width:900px){
    .chat-panel{width:auto;max-width:none;left:0;right:0;top:auto;height:65vh;transform:translateY(105%);
      border-left:none;border-top:1px solid var(--border)}
    .chat-panel.open{transform:translateY(0)}
    .chat-messages{max-height:none}
    .chat-toggle{right:70px}
    .chat-resize-handle{display:none}
  }
  @media (prefers-reduced-motion:reduce){.chat-panel,.chat-toggle{transition:none}}

  @media (max-width:900px){
    body.chat-open{padding-right:0}
  }