/* ============ 汎用ボタン ============ */
.icon-btn {
  min-height:26px;
  display: flex;
  align-items:center;
  height: 100%;
  padding: 6px;
  background-color: #18829b99;
  border: 1px solid #18829baa;
  border-radius: 5px;
  font-size: 16px;
  aspect-ratio: 1 / 1;
}

@media (max-width:768px){
  .icon-btn{
    height: max(10px, 1.4vw);
  }
}

.icon-btn:hover { background: var(--color-bg); }

.icon-btn img{
  width: auto;
  height: 12px;
}

.primary-btn {
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: var(--ft-11);

}
.primary-btn:hover { filter: brightness(1.05); }
.danger-btn {
  background: #ff6950;
  color: #fff;
  border: none;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: var(--ft-12);
  cursor: pointer;
}
.danger-btn:hover { filter: brightness(1.05); }

.task-card-complete, .task-card-edit{
  padding: 5px 8px;
  border-radius:4px;
  font-size:var(--ft-11);
  color: #ffffffdd;
  border: transparent;
}

.task-card-edit{
  background-color: #4dbc2e;
}
/* ============ ヘッダーのタスク一覧バッジ ============ */
.task-list-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: var(--color-accent);
  border: 0px solid var(--color-accent);
  border-radius: 14px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-pane);
  cursor: pointer;
  transition: all 0.2s;
}
/*.task-list-badge:hover {
  color: #ffffffdd;
  background: #18829baa;
}*/

.task-list-badge.is-active {
  background: #ff6950;
  color: #fff;
  border-color: #ff6950;
}
.task-list-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 3px;
  background: var(--badge-unread);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1em;
}
.task-list-badge.is-active .task-list-badge-count { background: var(--color-pane); color: #ff6950; }

.task-img{
  margin-left: 2px;
  width: auto;
  height: 16px;
}

/* ============ タブ ============ */
.tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: var(--ft-12);
  line-height: 1em;
  border-radius: 6px 6px 0 0;
  background-color: var(--color-pane);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  border-bottom: 2px solid transparent;
  user-select: none; /* ダブルクリック時の文字選択を防止 */
}

@media (max-width: 768px) {
  .tab-item{
    font-size:clamp(10px, 1.8vw, 12px);
    padding: clamp(8px, 1.8vw, 10px) clamp(10px, 2vw, 12px);
    gap: max(2px, 0.6vw);
  }
}

.lucide-send{
  display: flex;
  align-items:center;
  height: 10px;
  width: auto;
}

@media (max-width:768px){
  .lucide-send{
    display: flex;
    align-items:center;
    height: max(12px, 2.2vw);
    width: auto;
  }
}

.tab-item:hover { background: var(--color-bg); }
.tab-item.is-active {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* タブのサービス別色（選択時） */
.tab-item[data-service="email"].is-active {
  border-bottom-color: var(--color-svc-email);
  color: var(--color-svc-email);
  background: color-mix(in srgb, var(--color-svc-email) 10%, transparent);
}
.tab-item[data-service="line"].is-active {
  border-bottom-color: var(--color-svc-line);
  color: var(--color-svc-line);
  background: color-mix(in srgb, var(--color-svc-line) 12%, transparent);
}
.tab-item[data-service="chatwork"].is-active {
  border-bottom-color: var(--color-svc-chatwork);
  color: var(--color-svc-chatwork);
  background: color-mix(in srgb, var(--color-svc-chatwork) 14%, transparent);
}
.tab-item[data-service="sms"].is-active {
  border-bottom-color: var(--color-svc-sms);
  color: var(--color-svc-sms);
  background: color-mix(in srgb, var(--color-svc-sms) 12%, transparent);
}

/* 編集モードの動き */
.tab-item { position: relative; } /* 挿入位置インジケーター用 */
.tab-item.is-dragging { opacity: 0.4; }

/* 挿入位置を縦の太線で明示（左に入れる／右に入れる） */
.tab-item.drag-before::before,
.tab-item.drag-after::after {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 6px var(--color-accent);
}
.tab-item.drag-before::before { left: -3px; }
.tab-item.drag-after::after   { right: -3px; }
.tab-rename, .tab-del { background: transparent; border: none; font-size: 11px; opacity: 0.5; }
.tab-rename:hover, .tab-del:hover { opacity: 1; }
#editTabsBtn.is-active {
 background: #219b7599;
 border: 1px solid #219b75;
 color: #219b75;
 font-size: var(--ft-11);
 border-radius: var(--radius-4);
}
.tab-unread-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--badge-unread);
}

@media (max-width:768px){
  .tab-unread-dot{
    width: max(4px, 1vw);
    height: max(4px, 1vw);
  }
}

.tab-unread-dot[hidden] { display: none; } /* hidden属性を優先させる */
.tab-edit, .tab-del {
  background: transparent;
  border: none;
  font-size: 11px;
  opacity: 0.4;
}
.tab-item:hover .tab-edit,
.tab-item:hover .tab-del { opacity: 1; }

/* タブ追加モーダル内のボタン群 */
.tab-add-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tab-add-list .chip-btn {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-pane);
  cursor: pointer;
  font-size: 13px;
}
.tab-add-list .chip-btn:hover:not(:disabled) {
  background: var(--color-bg);
  border-color: var(--color-accent);
}
.tab-add-list .chip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============ 新着通知カード ============ */
.notify-card {
  /* デフォルト(>768px): 3.33枚を左詰表示（チラ見えで横スクロール可能と分かる） */
  flex: 0 0 calc((100% - 24px) / 3.33);
  scroll-snap-align: start;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-pane);
  cursor: pointer;
  min-width: 158px;
}
/* 768px未満：3.25枚を左詰で表示（次の画面外カードがチラ見えで横スクロール可能と分かる） */
@media (max-width: 768px) {
  .notify-card {
    flex: 0 0 calc((100% - 24px) / 3.25);
    min-width: 0;
  }
}
/* 450px未満：1.5枚 */
@media (max-width: 450px) {
  .notify-card {
    flex: 0 0 calc((100% - 8px) / 1.5);
    min-width: 0;
  }
}
.notify-card:hover { background: #00000005; }
.notify-card[data-service="email"]    { border-left-color: var(--color-svc-email); }
.notify-card[data-service="line"]     { border-left-color: var(--color-svc-line); }
.notify-card[data-service="chatwork"] { border-left-color: var(--color-svc-chatwork); }
.notify-card[data-service="sms"]      { border-left-color: var(--color-svc-sms); }
.notify-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-sub);
  white-space: nowrap;
  min-width: 0;
}
.notify-card-head .notify-sender {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.notify-card-head .notify-elapsed {
  flex-shrink: 0; /* 経過時間は省略しない */
}
/* .notify-sender はヘッド内（旧 .notify-service 位置）にあり、親のスタイルを継承 */
.notify-title {
  font-size: 11px;
  color: var(--color-text-sub);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notify-sender{
  font-size:var(--ft-12);
  font-weight: 700;
}

.notify-elapsed{
  font-size:var(--ft-10);
}

/* ============ 一覧カード ============ */
/* 外殻：archiveボタンを右端に隠す土台 */
.msg-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: var(--color-pane); /* slideと同色：sliding時に背景にも色をつけるため */
}

/* 左スワイプで露出する archive ボタン（右端25%） */
.msg-card-archive {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 25%;
  background: #ff6950;
  color: #fff;
  border: none;
  font-size: var(--ft-12);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}
.msg-card-archive:hover { background: #e85540; }

/* 前景の本体（slide）。これがtranslateで動く */
.msg-card-slide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "badge main"
    "icon  main";
  column-gap: 10px;
  row-gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  cursor: pointer;
  align-items: start;
  background: var(--color-pane);
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
  /* タッチ時に縦スクロールは許可、横方向だけハンドリング */
  touch-action: pan-y;
}
.msg-card.is-archive-revealed .msg-card-slide {
  transform: translateX(-25%);
}

.msg-card-slide .msg-badge { grid-area: badge; justify-self: center; }
.msg-card-slide .msg-icon  { grid-area: icon;  justify-self: center; }
.msg-card-slide .msg-main  { grid-area: main;  min-width: 0; }
.msg-card-slide:hover { background: var(--color-bg); }
.msg-card.is-active .msg-card-slide { background: var(--color-accent-soft); }
.msg-card.is-unread .msg-sender,
.msg-card.is-unread .msg-title { font-weight: 700; }

/* サービス別の左線 + うっすらした背景色 */
.msg-card[data-service="email"]    .msg-card-slide {
  border-left-color: var(--color-svc-email);
  background: color-mix(in srgb, var(--color-svc-email) 7%, var(--color-pane));
}
.msg-card[data-service="line"]     .msg-card-slide {
  border-left-color: var(--color-svc-line);
  background: color-mix(in srgb, var(--color-svc-line) 8%, var(--color-pane));
}
.msg-card[data-service="chatwork"] .msg-card-slide {
  border-left-color: var(--color-svc-chatwork);
  background: color-mix(in srgb, var(--color-svc-chatwork) 9%, var(--color-pane));
}
.msg-card[data-service="sms"]      .msg-card-slide {
  border-left-color: var(--color-svc-sms);
  background: color-mix(in srgb, var(--color-svc-sms) 8%, var(--color-pane));
}

/* hover/選択時はサービス色を少し濃く */
.msg-card[data-service="email"]    .msg-card-slide:hover { background: color-mix(in srgb, var(--color-svc-email) 14%, var(--color-pane)); }
.msg-card[data-service="line"]     .msg-card-slide:hover { background: color-mix(in srgb, var(--color-svc-line) 16%, var(--color-pane)); }
.msg-card[data-service="chatwork"] .msg-card-slide:hover { background: color-mix(in srgb, var(--color-svc-chatwork) 18%, var(--color-pane)); }
.msg-card[data-service="sms"]      .msg-card-slide:hover { background: color-mix(in srgb, var(--color-svc-sms) 16%, var(--color-pane)); }
.msg-card[data-service="email"].is-active    .msg-card-slide { background: color-mix(in srgb, var(--color-svc-email) 20%, var(--color-pane)); }
.msg-card[data-service="line"].is-active     .msg-card-slide { background: color-mix(in srgb, var(--color-svc-line) 22%, var(--color-pane)); }
.msg-card[data-service="chatwork"].is-active .msg-card-slide { background: color-mix(in srgb, var(--color-svc-chatwork) 24%, var(--color-pane)); }
.msg-card[data-service="sms"].is-active      .msg-card-slide { background: color-mix(in srgb, var(--color-svc-sms) 22%, var(--color-pane)); }

/* バッジ */
.msg-badge {
  width: 42px;
  height: 20px;
  border-radius: 4px;
  border: none;
  color: #fff;
  font-size: 10px;
  align-self: start;
}
.msg-badge[data-status="unread"]     { background: var(--badge-unread); }
.msg-badge[data-status="unreplied"]  { background: var(--badge-unreplied); }
.msg-badge[data-status="replied"]    { background: var(--badge-replied); }
.msg-badge[data-status="incomplete"] { background: var(--badge-incomplete); }
.msg-badge[data-status="resolved"]   { background: var(--badge-resolved); }
.msg-badge[data-status="task"]       { background: var(--color-svc-chatwork); }
.msg-badge[data-status="completed"]  { background: var(--badge-replied); cursor: default; }

/* アイコン */
.msg-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: grid;
  place-items: center;
  font-weight: 600;
  overflow: hidden;
}
.msg-icon-img { width: 100%; height: 100%; object-fit: cover; }

/* 主要部 */
.msg-row1 { display: flex; justify-content: space-between; gap: 8px; }
.msg-sender { font-size: var(--ft-14); }
.msg-time { font-size: 11px; color: var(--color-text-sub); }
.msg-title { font-size: 13px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-preview { font-size: 12px; color: var(--color-text-sub); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row3 { display: flex; gap: 6px; margin-top: 4px;
  font-size: 10px; color: var(--color-text-sub); }

/* 経過時間の段階色（msg-time用） */
.msg-time[data-elapsed="normal"] { color: var(--elapsed-normal); }
.msg-time[data-elapsed="soon"]   { color: var(--elapsed-soon); font-weight: 600; }
.msg-time[data-elapsed="warn"]   { color: var(--elapsed-warn); font-weight: 600; }
.msg-time[data-elapsed="late"]   { color: var(--elapsed-late); font-weight: 700; }

/* ============ 詳細：吹き出し ============ */
.bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--color-bg);
  align-self: flex-start;
  /* 長いURLや半角連続文字でも枠を突き抜けず折り返す */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.bubble.is-me {
  align-self: flex-end;
  background: #18829b33;
  border: 1px solid #18829b39;
}
/* Chatworkのシステムメッセージ（タスク追加・完了通知など） */
.bubble.is-system {
  align-self: center;
  background: #fff8e6;
  border: 1px dashed var(--color-svc-chatwork);
  font-size: 12px;
  max-width: 80%;
}
.bubble.is-system .bubble-actions { display: none; }

/* dtextの種類に応じた吹き出し背景色 */
.bubble.bubble-task-added {
  background: color-mix(in srgb, var(--color-svc-chatwork) 12%, var(--color-bg));
  border-color: var(--color-svc-chatwork);
}
.bubble.bubble-task-done {
  background: color-mix(in srgb, var(--badge-replied) 12%, var(--color-bg));
  border-color: var(--badge-replied);
}
.bubble-text { white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
.bubble-text a { color: var(--color-accent); text-decoration: underline; }
.bubble-text a:hover { text-decoration: none; }

/* ----- Chatwork記法の見た目変換 ----- */
.cw-title {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--color-svc-chatwork);
  font-weight: 700;
}
.cw-to-badge {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 4px;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.cw-rp-badge {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 4px;
  background: color-mix(in srgb, var(--color-svc-chatwork) 18%, transparent);
  color: var(--color-svc-chatwork);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.cw-code {
  margin: 6px 0;
  padding: 8px 10px;
  background: #f5f6f8;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-x: auto;
}
.cw-qt {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--color-text-sub);
  background: #f5f6f8;
  color: var(--color-text-sub);
}
.cw-qt-meta { font-size: 10px; opacity: 0.8; margin-bottom: 4px; }
.cw-qt-body { white-space: pre-wrap; }
.cw-hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 8px 0;
}
.cw-picon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  background: var(--color-bg);
  border-radius: 8px;
  font-size: 11px;
}
.cw-picon-id { color: var(--color-text-sub); }

/* dtextバッジ（タスク追加・完了などの状態通知） */
.cw-dtext {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
  vertical-align: middle;
}
.cw-dtext-task-added { background: var(--color-svc-chatwork); color: #fff; }
.cw-dtext-task-done  { background: var(--badge-replied);      color: #fff; }
.cw-dtext-other      { background: var(--color-bg);  color: var(--color-text-sub); border: 1px solid var(--color-border); }

/* ファイルアップロード（[download:...]）— 連続して並べられるよう inline */
.cw-download {
  display: inline-block;
  margin: 2px 4px 2px 0;
}
.cw-download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-pane);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-accent);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}
.cw-download-link:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  text-decoration: none;
}
.cw-download-name { font-weight: 500; }
.bubble-meta { font-size: 10px; color: var(--color-text-sub); margin-top: 4px;
  display: flex; gap: 8px; }
.bubble-attachments { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }

/* ----- メッセージアクションバー（吹き出しの下にインライン表示） ----- */
.bubble { position: relative; }
.bubble-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
  opacity: 0.55;
  transition: opacity 0.15s;
}
.bubble:hover .bubble-actions { opacity: 1; }
.bubble-act {
  background: transparent;
  border: 1px solid transparent;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 12px;
  color: var(--color-text-sub);
}
.bubble-act:hover {
  background: var(--color-pane);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Chatworkリアクション（拡張機能経由） */
.bubble-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
}
.bubble-reactions[hidden] { display: none; }
.bubble-react {
  background: var(--color-pane);
  border: 1px solid var(--color-border);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
}
.bubble-react:hover { border-color: var(--color-svc-chatwork); background: color-mix(in srgb, var(--color-svc-chatwork) 8%, var(--color-pane)); }
.bubble-react-status { font-size: 11px; color: var(--color-text-sub); margin-left: 4px; }

.bubble-bookmark { font-size: 12px; }

/* ============ AI敬語変換アコーディオン ============ */
.ai-keigo {
  border-top: 1px solid var(--color-border);
  background: #f6f8fc;
}
.ai-keigo > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-accent);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-keigo > summary::-webkit-details-marker { display: none; }
.ai-keigo > summary::after { content: '▾'; margin-left: auto; transition: transform 0.2s; }
.ai-keigo[open] > summary::after { transform: rotate(180deg); }
.ai-keigo-body {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-keigo-input, .ai-keigo-output {
  min-height:26px;
  width: 100%;
  min-height: 70px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  resize: vertical;
}
.ai-keigo-output { background: #fff; }
.ai-keigo-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ai-keigo-context { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.ai-keigo-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.attachment-card {
  font-size: 11px;
  padding: 4px 8px;
  background: var(--color-pane);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  display: flex; gap: 6px;
}

/* ============ 返信エリア ============ */
.reply-templates { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.reply-input {
  width: 100%;
  min-height: 60px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 8px;
  resize: vertical;
}
.reply-tools {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; margin-top: 6px;
}
.service-warn { color: var(--badge-unreplied); font-size: 12px; }

/* メモ */
.memo-label { font-size: 12px; color: var(--color-text-sub); }
.memo-box {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 4px;
  resize: vertical;
}

/* ============ 設定モーダル ============ */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: grid; place-items: center;
  z-index: 100;
}
/* hidden属性を display:grid より優先させる */
.modal[hidden] { display: none; }
.modal-card {
  background: var(--color-pane);
  border-radius: var(--radius);
  width: min(480px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--color-border);
}
.modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.modal-body label { display: flex; align-items: center; gap: 6px; }
.modal-body label:has(.modal-textarea), .modal-body label:has(textarea) {
  flex-direction: column; align-items: stretch;
}
.modal-textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  resize: vertical;
}
.modal-body input[type="text"], .modal-body input[type="email"], .modal-body input[type="datetime-local"] {
  flex: 1;
  padding: 8px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
}
.modal-body select { padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 6px; }
.task-edit-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.modal-body fieldset { border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 12px; }
.note { font-size: 12px; color: var(--color-text-sub); }

/* ============ タスクボード（タスク一覧タブ） ============ */
.task-board { padding: 16px; overflow-y: auto; background: var(--color-bg); }

@media (max-width: 768px) {
  .task-board{
    padding: 10px;
  }

}

.task-board[hidden] { display: none; }
.task-board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.task-board-head h2 { margin: 0; font-size: 18px; }
.task-board-tools { display: flex; gap: 8px; align-items: center; }
.task-counter { font-size: 12px; color: var(--color-text-sub); min-width: 36px; text-align: center; }

.sort-select{
  min-height:26px;
  border-radius:var(--radius-4);
}

.task-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  /* PC：3列 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1040px) {
  .task-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  /* iPhone：1列 */
  .task-card-list { grid-template-columns: 1fr; }
}
.task-card {
  background: var(--color-pane);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.task-card[data-source="email"]    {
  border-left-color: var(--color-svc-email);
  background: color-mix(in srgb, var(--color-svc-email) 7%, var(--color-pane));
}
.task-card[data-source="line"]     {
  border-left-color: var(--color-svc-line);
  background: color-mix(in srgb, var(--color-svc-line) 8%, var(--color-pane));
}
.task-card[data-source="chatwork"] {
  border-left-color: var(--color-svc-chatwork);
  background: color-mix(in srgb, var(--color-svc-chatwork) 9%, var(--color-pane));
}
.task-card[data-source="sms"] {
  border-left-color: var(--color-svc-sms);
  background: color-mix(in srgb, var(--color-svc-sms) 8%, var(--color-pane));
}
.task-card.is-done { opacity: 0.55; }
.task-card.is-done .task-card-title { text-decoration: line-through; }

.task-card-head {
  display: flex;
  min-height:auto;
  align-items:center;
  justify-content:space-between;
  padding: 0;
  background-color:transparent;
  border:transparent;
  aspect-ratio: auto;
  line-height: 1em;
}

.task-card-title {
    font-size: 15px;
    line-height: 1em;
  }


.task-card-title { font-weight: 600; }
.task-card-body {
  margin: 0;
  margin-top: 4px;
  font-size: var(--ft-11);
  line-height: 1.3em;
  color: var(--color-text-sub);
  white-space: pre-wrap;
  height: 58px;
  overflow: hidden;
  position: relative;
  transition: height 0.2s ease;
}
.task-card-body.is-expanded { height: auto; }
/* オーバーフローしてる時だけ下端にグラデーション + クリック可能 */
.task-card-body::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;                 /* 高さUP */
  pointer-events: none;
  display: none;
  /* 上の60%は透明のまま、下40%だけで一気にカード色へ */
  background: linear-gradient(to bottom, transparent 0%, transparent 60%, var(--color-pane) 100%);
}
.task-card-body.has-overflow         { cursor: pointer; }
.task-card-body.has-overflow::after  { display: block; }
.task-card-body.is-expanded::after   { display: none; }
/* カード背景に合わせたグラデーション色（color-mix で揃える） */
.task-card[data-source="email"]    .task-card-body::after {
  background: linear-gradient(to bottom, transparent 0%, transparent 60%, color-mix(in srgb, var(--color-svc-email) 7%, var(--color-pane)) 100%);
}
.task-card[data-source="line"]     .task-card-body::after {
  background: linear-gradient(to bottom, transparent 0%, transparent 60%, color-mix(in srgb, var(--color-svc-line) 8%, var(--color-pane)) 100%);
}
.task-card[data-source="chatwork"] .task-card-body::after {
  background: linear-gradient(to bottom, transparent 0%, transparent 60%, color-mix(in srgb, var(--color-svc-chatwork) 9%, var(--color-pane)) 100%);
}
.task-card[data-source="sms"]      .task-card-body::after {
  background: linear-gradient(to bottom, transparent 0%, transparent 60%, color-mix(in srgb, var(--color-svc-sms) 8%, var(--color-pane)) 100%);
}
.task-card-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-sub);
  flex-wrap: wrap;
}
/* 期限を左端、それ以降（ソース／削除／完了）を右端に寄せる */
.task-card-foot .task-card-deadline { margin-right: auto; }
.task-card-deadline.is-overdue { color: var(--badge-unread); font-weight: 600; }
/* 期限超過の段階別カラー */
.task-card-deadline[data-elapsed="late"]     { color: var(--elapsed-late);     font-weight: 600; }
.task-card-deadline[data-elapsed="warn"]     { color: var(--elapsed-warn);     font-weight: 600; }
.task-card-deadline[data-elapsed="soon"]     { color: var(--elapsed-soon);     font-weight: 600; }
.task-card-deadline[data-elapsed="normal-2"] { color: var(--elapsed-normal-2); font-weight: 600; }
/* ソース表示（カード右上、サービス別色） */
.task-card-source {
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.task-card[data-source="email"] .task-card-source    { color: var(--color-svc-email); }
.task-card[data-source="line"] .task-card-source     { color: var(--color-svc-line); }
.task-card[data-source="sms"] .task-card-source      { color: var(--color-svc-sms); }
/* Chatworkだけは目立つバッジ風 */
.task-card-source.is-chatwork-badge {
  padding: 4px 10px;
  background: var(--color-svc-chatwork);
  color: #fff;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 600;
}

/* Chatwork共有タスクの目印 */
.task-source-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 4px 10px;
  font-size: 10px;
  background: var(--color-svc-chatwork);
  color: #fff;
  border-radius: 50px;
  vertical-align: middle;
}

/* ============ Chatworkタスクパネル ============ */
.cw-task-panel {
  border-top: 1px solid var(--color-border);
  background: #fff8e6;
  padding: 8px 16px;
}
.cw-task-panel[hidden] { display: none; }
.cw-task-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-svc-chatwork);
  margin-bottom: 6px;
}
.cw-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cw-task-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-svc-chatwork);
  border-radius: 6px;
  font-size: 13px;
}
.cw-task-item.is-done .cw-task-body {
  text-decoration: line-through;
  color: var(--color-text-sub);
}
.cw-task-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-task-label { display: flex; gap: 6px; align-items: center; cursor: pointer; font-weight: 600; }
.cw-task-desc {
  margin: 0 0 0 22px; /* checkbox分インデント */
  font-size: 12px;
  color: var(--color-text-sub);
  white-space: pre-wrap;
  line-height: 1.4;
}
.cw-task-limit { font-size: 11px; color: var(--color-text-sub); align-self: center; }
.cw-task-limit.is-overdue { color: var(--badge-unread); font-weight: 600; }

/* 詳細ヘッダー */
.detail-title { font-weight: 700; font-size: 16px; }
.detail-meta  { font-size: 12px; color: var(--color-text-sub); margin-top: 2px; }
.detail-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }