:root{
  --bg:#0b1020; --panel:#121a2b; --text:#e6edf3; --muted:#94a3b8; --accent:#0ea5e9; --accent-2:#22c55e; --danger:#ef4444; --border:#233049;
}
*{box-sizing:border-box}
html,body{height:100vh}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.app-header{position:sticky;top:0;z-index:3;background:var(--panel);border-bottom:1px solid var(--border);padding:12px;display:flex;justify-content:space-between;align-items:center}
.app-controls{display:flex;gap:12px;align-items:flex-start;padding:12px}
.floating-input{position:fixed;bottom:0;left:0;right:0;z-index:10;background:var(--panel);border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(0,0,0,0.3)}
.filter-nav{position:sticky;top:0;z-index:1;background:var(--panel);border-bottom:1px solid var(--border);padding:8px 12px}
.app-title{margin:0 0 8px 0;font-size:18px;color:var(--text)}
.task-input-section{
  flex:1;
  min-width:200px;
}
.action-controls{
  display:flex;
  gap:8px;
  align-items:flex-start;
  flex-shrink:0;
  transition:width 0.2s ease-in-out;
}
.action-controls.collapsed{
  display:none;
}
.task-input{width:100%;min-width:120px;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#0d1628;color:var(--text);font-size:16px;resize:none;overflow:auto;white-space:pre-wrap;word-break:break-word}
.task-input:focus{outline:2px solid var(--accent)}
.btn{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:#0d1628;color:var(--text);cursor:pointer}
.btn:disabled{opacity:.4;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#0d1628;color:var(--muted);cursor:pointer;font-size:12px}
.chip.active{background:var(--accent);border-color:var(--accent);color:#001019}
.chip.project{--chip:#075985}
.chip.context{--chip:#166534}
.list{flex:1;padding:10px;padding-bottom:140px;overflow-y:auto}
.row{padding:10px;border-bottom:1px solid var(--border)}
.row.completed{opacity:.6;text-decoration:line-through}
.row.newly-added{
  background-color:rgba(34,197,94,0.2);
  border:1px solid var(--accent-2);
  border-radius:8px;
  animation:newTaskHighlight 2s ease-out forwards;
}
@keyframes newTaskHighlight{
  0%{background-color:rgba(34,197,94,0.3);border-color:var(--accent-2)}
  100%{background-color:transparent;border-color:var(--border)}
}
.task-content{display:flex;flex-direction:column;gap:8px}
.row .toggle{padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:#0d1628;color:var(--accent-2);cursor:pointer;font-size:14px}
.row .raw{white-space:pre-wrap;word-break:break-word}
.row .row-actions{display:none;align-items:center;justify-content:space-between}
.row.show-actions{background-color:rgba(14,165,233,0.1)}
.row.show-actions .row-actions{display:flex}
.row .action-group{display:flex;gap:12px}
.row .row-actions .edit,.row .row-actions .delete{padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:#0d1628;color:var(--muted);cursor:pointer}
.row .row-actions .delete{color:var(--danger)}
.token.project,.token.context{display:none}
.task-tags{display:none;margin-bottom:8px;flex-wrap:wrap;gap:4px}
.task-tags.show{display:flex}
.task-tag{padding:2px 6px;border-radius:999px;font-size:11px;border:1px solid}
.task-tag.project{background:#075985;border-color:#075985;color:#7dd3fc}
.task-tag.context{background:#166534;border-color:#166534;color:#86efac}
.inline-editor{width:100%;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:#0d1628;color:var(--text);resize:none;overflow:auto;white-space:pre-wrap;word-break:break-word}

/* オーバーフローメニュー */
.overflow-menu{position:relative;display:inline-block}
.overflow-btn{
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:14px;
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
}
.overflow-btn:hover{
  background:#1e293b;
  color:var(--text);
}
.overflow-menu-content{
  position:absolute;
  top:100%;
  right:0;
  margin-top:4px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  min-width:140px;
  z-index:10;
  opacity:0;
  transform:translateY(-10px);
  transition:all 0.15s ease-in-out;
  pointer-events:none;
}
.overflow-menu-content:not([hidden]){
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.overflow-menu-content button{display:block;width:100%;padding:12px 16px;min-height:48px;border:none;background:none;color:var(--text);text-align:left;cursor:pointer;border-radius:0;border-bottom:1px solid var(--border)}
.overflow-menu-content button:hover{background:#1e293b}
.overflow-menu-content button:focus{outline:2px solid var(--accent);outline-offset:-2px}
.overflow-menu-content button:first-child{border-radius:8px 8px 0 0}
.overflow-menu-content button:last-child{border-radius:0 0 8px 8px;border-bottom:none}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .floating-input {
    padding: 8px 12px;
  }
  
  .task-input {
    font-size: 16px; /* iOS のズーム防止 */
    min-height: 44px; /* タッチターゲットサイズ */
  }
  
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  .overflow-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 14px;
  }
  
  .list {
    padding-bottom: 120px;
  }
}

/* キーボード表示時の調整（iOS Safari対応） */
@supports (height: 100dvh) {
  html,body {
    height: 100dvh;
  }
}

/* 仮想キーボード対応 */
@media (max-height: 500px) {
  .list {
    padding-bottom: 100px;
  }
  
  .floating-input {
    padding: 6px 12px;
  }
  
  .task-input {
    rows: 2;
    min-height: 36px;
  }
}