:root{
  /* ── Light theme (Jooto風) ── */
  --bg:#f4f5f7;          /* board background */
  --appbar:#ffffff;
  --panel:#ebecf0;       /* column background */
  --panel-head:#e3e5ea;
  --card:#ffffff;
  --text:#172b4d;
  --dim:#5e6c84;
  --muted:#8993a4;
  --line:#dfe1e6;
  --line2:#c1c7d0;
  --accent:#0d9488;      /* teal brand */
  --accent2:#0f766e;
  /* status colors */
  --todo:#8993a4;
  --doing:#2563eb;
  --review:#db2777;
  --waiting:#9333ea;
  --done:#16a34a;
  /* assignee colors */
  --human:#d97706;
  --ai:#64748b;
  --shadow:0 1px 2px rgba(9,30,66,.16),0 0 1px rgba(9,30,66,.12);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button{font-family:inherit;}

/* ── App bar ───────────────────────────────── */
.appbar{
  height:54px; display:flex; align-items:center; gap:12px; padding:0 16px;
  background:var(--appbar); border-bottom:1px solid var(--line);
}
.appbar .brand{font-weight:800; font-size:16px; display:flex; align-items:center; gap:8px; white-space:nowrap; color:var(--text);}
.appbar .brand .logo{
  width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,var(--accent),#22c55e);
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:#fff;
}
.appbar .date{color:var(--dim); font-size:13px; white-space:nowrap;}
.appbar .spacer{flex:1;}
.appbar .email{color:var(--muted); font-size:12px; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.iconbtn{
  background:#fff; color:var(--dim); border:1px solid var(--line2);
  border-radius:8px; padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; text-decoration:none;
}
.iconbtn:hover{background:#f4f5f7; color:var(--text);}
.iconbtn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.iconbtn.primary:hover{background:var(--accent2);}
.iconbtn.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.groupsel{
  background:#fff; color:var(--text); border:1px solid var(--line2);
  border-radius:8px; padding:7px 10px; font-size:13px; font-weight:600; cursor:pointer;
  max-width:160px;
}
.groupsel:focus{outline:none; border-color:var(--accent);}

.legend{display:flex; gap:10px; align-items:center; font-size:12px; color:var(--dim); padding:7px 16px; border-bottom:1px solid var(--line); background:var(--appbar); flex-wrap:wrap;}
.legend .chip{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-weight:700;}
.chip.human{background:rgba(217,119,6,.14); color:#b45309;}
.chip.ai{background:rgba(100,116,139,.20); color:#475569;}
.chip.todo{background:rgba(137,147,164,.18); color:#5e6c84;}
.chip.doing{background:rgba(37,99,235,.14); color:#1d4ed8;}
.chip.review{background:rgba(219,39,119,.14); color:#be185d;}
.chip.waiting{background:rgba(147,51,234,.14); color:#7e22ce;}
.chip.done{background:rgba(22,163,74,.15); color:#15803d;}
/* 絞込みチップ（押せるフィルタ＝担当/状態 共通）。未選択は淡く、選択(on)で色付き＋枠 */
.fchip,.afchip{border:1px solid transparent; cursor:pointer; opacity:.55; transition:opacity .1s,box-shadow .1s; font-size:12px;}
.fchip:hover,.afchip:hover{opacity:.85;}
.fchip.on,.afchip.on{opacity:1; box-shadow:0 0 0 1.5px currentColor inset;}
.fclear{border:1px solid var(--line2); background:#fff; color:var(--dim); border-radius:999px; padding:2px 10px; font-size:11.5px; font-weight:700; cursor:pointer;}
.fclear:hover{border-color:var(--accent); color:var(--accent);}

/* ── Board (5列グリッド・縦スクロール) ─────── */
#board{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; align-items:start;
  height:calc(100vh - 54px - 35px); overflow-y:auto; overflow-x:hidden;
  padding:16px;
}
.column{
  display:flex; flex-direction:column; min-width:0;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  /* 高さ上限を設けて列内スクロール（ボード全体が長くなりすぎないように） */
  max-height:calc(100vh - 54px - 35px - 32px);
}
.col-head{
  display:flex; align-items:center; gap:8px; padding:11px 12px; border-bottom:1px solid var(--line);
  border-top:3px solid var(--col,#2563eb); border-radius:12px 12px 0 0; background:var(--panel-head);
}
.col-dot{width:10px; height:10px; border-radius:50%; background:var(--col,#2563eb); flex:0 0 auto;}
.col-name{font-weight:700; font-size:14px; flex:1; cursor:pointer; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text);}
.col-count{font-size:12px; color:var(--dim); background:rgba(9,30,66,.06); border-radius:999px; padding:1px 8px;}
.col-menu{background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; padding:2px 4px; border-radius:6px;}
.col-menu:hover{color:var(--text); background:rgba(9,30,66,.06);}
.col-body{padding:10px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-height:0; overflow-y:auto;}
.col-body.dragover{background:rgba(13,148,136,.07);}
/* 完了タスクの折りたたみ */
.done-toggle{
  margin-top:2px; background:none; border:none; cursor:pointer; text-align:left;
  font-size:12px; font-weight:700; color:var(--dim); padding:5px 6px; border-radius:7px;
  display:flex; align-items:center; gap:6px;
}
.done-toggle:hover{background:rgba(9,30,66,.05); color:var(--text);}
.done-toggle .caret{transition:transform .12s; font-size:10px;}
.done-toggle.open .caret{transform:rotate(90deg);}
.done-list{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.col-add{margin:0 10px 12px;}
.col-add textarea{
  width:100%; background:#fff; border:1px solid var(--line2); color:var(--text);
  border-radius:8px; padding:8px 10px; font-size:13.5px; outline:none; resize:none; line-height:1.45;
  min-height:38px; font-family:inherit;
}
.col-add textarea::placeholder{color:var(--muted);}
.col-add textarea:focus{border-color:var(--accent);}
.col-add .hint{font-size:11px; color:var(--muted); margin-top:3px;}

/* ── Card ──────────────────────────────────── */
.card{
  position:relative;
  /* 左半分=担当色 / 右半分=ステータス色（中央に薄い仕切り）。下地は白カード */
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(9,30,66,.10) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(90deg, var(--a-tint,transparent) 0 50%, var(--s-tint,transparent) 50% 100%),
    var(--card);
  border:1px solid var(--line); border-left:4px solid var(--col,#2563eb);
  border-radius:8px; padding:10px 11px; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .08s, box-shadow .08s;
  display:flex; align-items:flex-start; gap:9px;
}
.card-content{flex:1 1 auto; min-width:0;}
/* 担当（左半分） */
.card.a-human{--a-tint:rgba(217,119,6,.18);}
.card.a-ai{--a-tint:rgba(100,116,139,.22);}
/* ステータス（右半分） */
.card.s-todo{--s-tint:rgba(137,147,164,.06);}
.card.s-doing{--s-tint:rgba(37,99,235,.18);}
.card.s-review{--s-tint:rgba(219,39,119,.16);}
.card.s-waiting{--s-tint:rgba(147,51,234,.16);}
.card.s-done{--s-tint:rgba(22,163,74,.18);}
.card:hover{box-shadow:0 4px 10px rgba(9,30,66,.2);}
.card.done{opacity:.7;}
.card.done .card-title{text-decoration:line-through; color:var(--muted);}
.card.sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent);}
.card-title{font-size:14px; line-height:1.45; word-break:break-word; white-space:pre-wrap; margin-bottom:8px;}
.card-link{color:var(--accent); text-decoration:underline; word-break:break-all;}
.card-link:hover{color:var(--accent2);}
.card-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.badge{font-size:11px; font-weight:700; border-radius:999px; padding:3px 9px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:3px;}
.badge.human{background:rgba(217,119,6,.14); color:#b45309;}
.badge.ai{background:rgba(100,116,139,.20); color:#475569;}
.badge.todo{background:rgba(137,147,164,.18); color:#5e6c84;}
.badge.doing{background:rgba(37,99,235,.14); color:#1d4ed8;}
.badge.review{background:rgba(219,39,119,.14); color:#be185d;}
.badge.waiting{background:rgba(147,51,234,.14); color:#7e22ce;}
.badge.done{background:rgba(22,163,74,.15); color:#15803d;}
.badge.mark-done{background:#fff; color:#15803d; border:1px solid rgba(22,163,74,.5);}
.badge.mark-done:hover{background:rgba(22,163,74,.12);}
.badge.revert{background:#fff; color:var(--dim); border:1px solid var(--line2);}
.badge.revert:hover{border-color:var(--accent); color:var(--accent);}
.card-check{
  flex:0 0 18px; width:18px; height:18px; margin-top:1px; border-radius:5px;
  border:2px solid var(--line2); background:#fff; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; color:#fff;
}
.card-check:hover{border-color:var(--accent);}
.card.sel .card-check{background:var(--accent); border-color:var(--accent);}

/* ── Drag & drop ───────────────────────────── */
.card.dragging{opacity:.4;}
.card.drop-before::before, .card.drop-after::after{
  content:''; display:block; position:absolute; left:0; right:0; height:3px;
  background:var(--accent); border-radius:2px;
}
.card.drop-before::before{top:-6px;}
.card.drop-after::after{bottom:-6px;}
.col-head{cursor:grab;}
.col-head:active{cursor:grabbing;}
.column.col-dragging{opacity:.5;}
.column.col-droptarget{outline:2px dashed var(--accent); outline-offset:-2px;}

.empty{color:var(--muted); font-size:13px; text-align:center; padding:16px 6px; line-height:1.6;}

/* ── Add-column tile ───────────────────────── */
.add-col{
  border:1.5px dashed var(--line2); border-radius:12px; background:rgba(9,30,66,.02);
  color:var(--dim); font-weight:700; font-size:14px; cursor:pointer;
  min-height:50px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.add-col:hover{border-color:var(--accent); color:var(--accent);}

/* ── Bulk action bar ───────────────────────── */
#bulkbar{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(120%);
  background:#172b4d; color:#fff; border-radius:12px; padding:9px 12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; z-index:70;
  box-shadow:0 12px 30px rgba(9,30,66,.4); transition:transform .2s; max-width:94vw;
}
#bulkbar.show{transform:translateX(-50%) translateY(0);}
#bulkbar .bcount{font-weight:800; font-size:13px; padding-right:4px; white-space:nowrap;}
#bulkbar .bbtn{
  background:rgba(255,255,255,.12); color:#fff; border:none; border-radius:8px;
  padding:7px 11px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}
#bulkbar .bbtn:hover{background:rgba(255,255,255,.24);}
#bulkbar .bbtn.danger{background:rgba(239,68,68,.85);}
#bulkbar .bbtn.danger:hover{background:#ef4444;}
#bulkbar select{
  background:rgba(255,255,255,.12); color:#fff; border:none; border-radius:8px;
  padding:7px 9px; font-size:12.5px; font-weight:700; cursor:pointer;
}
#bulkbar select option{color:#172b4d;}
#bulkbar .bsep{width:1px; align-self:stretch; background:rgba(255,255,255,.2);}

/* ── Modal ─────────────────────────────────── */
.overlay{position:fixed; inset:0; background:rgba(9,30,66,.42); display:none; align-items:center; justify-content:center; padding:18px; z-index:50;}
.overlay.open{display:flex;}
.modal{
  background:#fff; border:1px solid var(--line); border-radius:14px; width:100%; max-width:440px;
  padding:20px; box-shadow:0 24px 60px rgba(9,30,66,.3);
  /* 内容が画面より高くなったらモーダルごと縦スクロール（保存/削除ボタンも常に到達できるように） */
  max-height:calc(100vh - 36px); overflow-y:auto;
}
.modal h2{margin:0 0 16px; font-size:17px; display:flex; align-items:center; justify-content:space-between; color:var(--text);}
.modal .x{background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; color:var(--dim); font-weight:600; margin-bottom:6px;}
.field input[type=text], .field textarea{
  width:100%; background:#fff; border:1px solid var(--line2); color:var(--text);
  border-radius:9px; padding:10px 12px; font-size:14px; outline:none; resize:vertical; font-family:inherit;
}
.field input:focus, .field textarea:focus{border-color:var(--accent);}
.seg{display:flex; gap:8px; flex-wrap:wrap;}
.seg button{
  flex:1 1 0; min-width:88px; background:#fff; border:1px solid var(--line2); color:var(--dim);
  border-radius:9px; padding:9px 6px; font-size:13px; font-weight:700; cursor:pointer;
}
.seg button.on.human{background:rgba(217,119,6,.14); color:#b45309; border-color:var(--human);}
.seg button.on.ai{background:rgba(100,116,139,.18); color:#475569; border-color:var(--ai);}
.seg button.on.todo{background:rgba(137,147,164,.2); color:#5e6c84; border-color:var(--todo);}
.seg button.on.doing{background:rgba(37,99,235,.14); color:#1d4ed8; border-color:var(--doing);}
.seg button.on.review{background:rgba(219,39,119,.14); color:#be185d; border-color:var(--review);}
.seg button.on.waiting{background:rgba(147,51,234,.14); color:#7e22ce; border-color:var(--waiting);}
.seg button.on.done{background:rgba(22,163,74,.15); color:#15803d; border-color:var(--done);}
.field select{
  width:100%; background:#fff; border:1px solid var(--line2); color:var(--text);
  border-radius:9px; padding:10px 12px; font-size:14px; outline:none; font-family:inherit;
}
.field select:focus{border-color:var(--accent);}
/* AIコメント欄（閲覧専用・AIがMCP経由で追記したものを表示。人は編集不可） */
.ai-comment-box{
  width:100%; background:rgba(100,116,139,.08); border:1px solid var(--line2);
  border-radius:9px; padding:10px 12px; font-size:13px; color:var(--text);
  white-space:pre-wrap; word-break:break-word; line-height:1.6;
  max-height:200px; overflow:auto;
}
.ai-comment-box a.card-link{color:var(--doing); word-break:break-all;}
.ai-comment-box.empty{color:var(--muted); font-style:italic; min-height:auto;}
.badge.ai-note{background:rgba(100,116,139,.16); color:#475569; cursor:default;}
.swatches{display:flex; gap:9px; flex-wrap:wrap;}
.swatch{width:30px; height:30px; border-radius:50%; cursor:pointer; border:3px solid transparent;}
.swatch.on{border-color:var(--text);}
.modal-actions{display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:10px;}
.btn{border:none; border-radius:10px; padding:11px 18px; font-weight:700; font-size:14px; cursor:pointer;}
.btn.primary{background:var(--accent); color:#fff; flex:1;}
.btn.primary:hover{background:var(--accent2);}
.btn.danger{background:rgba(239,68,68,.1); color:#dc2626; border:1px solid rgba(239,68,68,.4);}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#172b4d; color:#fff; padding:11px 18px; border-radius:10px; font-size:13.5px; opacity:0; transition:opacity .25s; pointer-events:none; z-index:90;}
.toast.show{opacity:1;}

/* ── AI連携モーダル ───────────────────────── */
.modal.modal-wide{max-width:560px;}
.ai-lead{font-size:13px; color:var(--dim); line-height:1.6; margin:0 0 16px;}
.ai-lead strong{color:var(--text);}
.ai-endpoints{display:flex; flex-direction:column; gap:6px;}
.ep-row{display:flex; align-items:center; gap:8px;}
.ep-tag{flex:0 0 auto; font-size:11px; font-weight:700; color:#fff; background:var(--accent); border-radius:6px; padding:2px 7px;}
.ep-row code{flex:1 1 auto; background:#f4f5f7; border:1px solid var(--line); border-radius:7px; padding:6px 9px; font-size:12px; color:var(--text); overflow:auto; white-space:nowrap;}
.copybtn{flex:0 0 auto; border:1px solid var(--line2); background:#fff; color:var(--dim); border-radius:7px; padding:5px 10px; font-size:11.5px; font-weight:700; cursor:pointer;}
.copybtn:hover{border-color:var(--accent); color:var(--accent);}
.ai-genrow{display:flex; gap:8px;}
.ai-genrow input{flex:1 1 auto;}
.ai-genrow .btn.primary{flex:0 0 auto;}
.token-reveal{background:rgba(13,148,136,.08); border:1px solid rgba(13,148,136,.4); border-radius:10px; padding:12px; margin:0 0 16px;}
.tr-head{font-size:12px; font-weight:700; color:#b45309; margin-bottom:8px;}
.tr-row{display:flex; align-items:center; gap:8px;}
.tr-row code{flex:1 1 auto; background:#fff; border:1px solid var(--line2); border-radius:7px; padding:8px 10px; font-size:13px; color:var(--text); overflow:auto; white-space:nowrap; font-weight:700;}
.token-list{display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto;}
.tl-empty{font-size:12.5px; color:var(--muted); padding:8px 2px;}
.tl-row{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:9px; padding:8px 10px;}
.tl-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.tl-name{font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tl-meta{font-size:11px; color:var(--muted);}
.tl-revoke{flex:0 0 auto; border:1px solid rgba(239,68,68,.4); background:rgba(239,68,68,.08); color:#dc2626; border-radius:7px; padding:5px 11px; font-size:11.5px; font-weight:700; cursor:pointer;}
.tl-revoke:hover{background:rgba(239,68,68,.16);}
.ai-usage{margin-top:6px; border-top:1px solid var(--line); padding-top:12px;}
.ai-usage summary{font-size:12.5px; font-weight:700; color:var(--dim); cursor:pointer;}
.usage-body{font-size:12.5px; color:var(--dim); line-height:1.7; margin-top:10px;}
.usage-body code{background:#f4f5f7; border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:11.5px;}
.usage-body pre{background:#172b4d; color:#e6edf3; border-radius:8px; padding:10px 12px; font-size:11.5px; overflow:auto; white-space:pre; margin:6px 0 0;}

/* ── Responsive (5→4→3→2→1列) ─────────────── */
@media (max-width:1200px){ #board{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:992px){ #board{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:680px){ #board{grid-template-columns:repeat(2,minmax(0,1fr));} .appbar .date{display:none;} }
@media (max-width:460px){ #board{grid-template-columns:1fr;} }