/* 共通部品（CMP）。数値は Figma の部品エリア「todo lion components」から取る。
 * 色・角丸・文字はトークン、部品の内側の余白と枠線の太さは Figma の値そのまま（P3、DEV-003 判断依頼 A） */

/* CMP-001 TL Segmented（Figma 429:242）。Input / List の切り替え */
.tl-segmented {
  display: inline-flex;
  align-items: flex-start;
  padding: 3px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
}

.tl-segmented-item {
  margin: 0;
  padding: 5px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-tertiary);
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-segmented-item[aria-pressed="true"] {
  background: var(--color-bg-raised);
  color: var(--color-text-primary);
}

/* CMP-002 TL HeaderButton（Figma 436:512）。右上のアイコン。36×36 の中央に 22 のアイコン */
.tl-header-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-header-button.is-active {
  color: var(--color-accent-text);
}

/* Filter active の青い点（Figma の badge：8×8、左 25・上 4） */
.tl-header-button-badge {
  position: absolute;
  top: 4px;
  left: 25px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-default);
}

/* CMP-004 TL IconButton（Figma 429:252）。入力欄のボタン。36×36 の円の中央に 20 のアイコン */
.tl-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill); /* Figma は 18（36 の半分）。pill と同じ形（P3） */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-icon-button.is-mic {
  background: var(--color-bg-raised);
  color: var(--color-text-secondary);
}

.tl-icon-button.is-send {
  background: var(--color-bg-inverse);
  color: var(--color-accent-default);
}

/* CMP-019 TL Toggle（Figma 449:841）。設定のスイッチ。51×31、つまみは 27 の白い円（Off は左 2、On は左 22） */
.tl-toggle {
  position: relative;
  display: inline-block;
  flex: none;
  width: 51px;
  height: 31px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill); /* Figma は 16。高さ 31 なので pill と同じ形（P3） */
  background: var(--color-bg-raised);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-toggle[aria-checked="true"] {
  background: var(--color-accent-default);
}

.tl-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-inverse); /* Figma は変数なしの #FFFFFF。同じ値のトークン */
}

.tl-toggle[aria-checked="true"] .tl-toggle-knob {
  left: 22px;
}

/* CMP-003 TL Chip（Figma 429:231）。入力欄の上のチップ。
 * 通常：枠線 1、余白 上下7・左12・右14、高さ 34。選択中：枠なし、accent/subtle の背景、余白 右8、高さ 32、値の右に × 。
 * 余白も押せるように、チップの余白は中の2つのボタン（本体・×）に持たせる（見た目は Figma の余白と同じ） */
.tl-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
  white-space: nowrap;
}

.tl-chip.is-selected {
  border: 0;
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
}

.tl-chip-main,
.tl-chip-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-chip-main {
  padding: 7px 14px 7px 12px;
  border-radius: var(--radius-pill);
}

/* 選択中：本体の右の余白 6 は文字と × の間（Figma の gap 6）、× の右の余白 8。
 * 本体と × の境目に押せない角ができないよう、本体の右側は角を丸めない */
.tl-chip.is-selected .tl-chip-main {
  padding-right: 6px;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.tl-chip-clear {
  padding: 7px 8px 7px 0;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* CMP-010 TL Pill（Figma 431:235）。シート内の選択肢。
 * Default：枠線 1、余白 上下7・左右14、高さ 34。Selected：枠なし、accent/subtle の背景、高さ 32 */
.tl-pill {
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-pill[aria-pressed="true"] {
  border: 0;
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
}

/* CMP-009 TL FilterChip（Figma 436:513）。かかっている絞り込み条件。余白 上下6・左12・右8、間 4、× は 14。
 * 解除は × だけ（P2 FN-008）。× のボタンは文字との間 4 と右の余白 8、上下の余白まで含めて押せる範囲にする */
.tl-filter-chip {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-pill);
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
  white-space: nowrap;
}

.tl-filter-chip-label {
  padding: 6px 0 6px 12px;
}

.tl-filter-chip-remove {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 8px 6px 4px;
  border: 0;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* CMP-011 TL Button/Primary（Figma 431:236）・CMP-012 TL Button/Secondary（Figma 439:634）。高さ 48、文字は中央。
 * Primary は親の幅いっぱい（Figma の画面ではすべて FILL）、Secondary は幅 120 */
.tl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-button.is-primary {
  flex: 1 1 auto;
  width: 100%;
  background: var(--color-accent-default);
  color: var(--color-bg-inverse);
}

.tl-button.is-secondary {
  flex: none;
  width: 120px;
  background: var(--color-bg-raised);
  color: var(--color-text-primary);
}

/* 空状態のボタン（DES-007・008 の Figma 450:1290 などで 160×40） */
.tl-button.is-compact {
  width: 160px;
  height: 40px;
}

/* CMP-013 TL DayCell（Figma 431:250）。カレンダーの日付。44×44 の中央に 36 の円、数字は 15 */
.tl-day-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-day-cell-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill); /* Figma は 18（36 の半分）。pill と同じ形（P3） */
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
}

.tl-day-cell.is-today .tl-day-cell-circle {
  border: 1px solid var(--color-accent-default);
  color: var(--color-accent-text);
  font-weight: var(--font-weight-medium);
}

.tl-day-cell.is-selected .tl-day-cell-circle {
  background: var(--color-accent-default);
  color: var(--color-bg-inverse);
  font-weight: var(--font-weight-medium);
}

.tl-day-cell.is-past .tl-day-cell-circle {
  color: var(--color-text-tertiary);
}

/* CMP-014 TL LabelRow（Figma 431:267）。Label シートの行。高さ 48、余白 左右4、間 12。
 * 左に hash 20（secondary）、ラベル名 15 Regular、選択中は右に check 20（accent/default） */
.tl-label-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-label-row-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
}

.tl-label-row .tl-icon-check {
  color: var(--color-accent-default);
}

/* CMP-008 TL SectionHeader（Figma 434:404）。リストのセクション見出し。余白 上下6、間 8。
 * 見出し 15 Medium・件数 13 Regular tertiary。Danger は左に 8×8 の赤いランプ。開閉できるときは右端に down 18（tertiary） */
.tl-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font-family: inherit;
  text-align: left;
}

button.tl-section-header {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-section-header-lamp {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-status-danger);
}

.tl-section-header-title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
}

.tl-section-header-count {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
}

/* Figma の spacer。残りの幅を埋めて矢印を右端に寄せる */
.tl-section-header-spacer {
  flex: 1 1 auto;
}

.tl-section-header .tl-icon-down {
  color: var(--color-text-tertiary);
}

/* 閉じているときは右向き（down を -90° 回す。DEV-010 判断依頼 A） */
.tl-section-header[aria-expanded="false"] .tl-icon-down {
  transform: rotate(-90deg);
}

/* CMP-015 TL SheetRow（Figma 439:624）。Edit シートの行。高さ 52、余白 左右4、間 12。
 * 左に cal / hash 20（secondary）、項目名 15 primary、値 15 secondary、右端に cr 18（tertiary） */
.tl-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-sheet-row-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-primary);
}

.tl-sheet-row-value {
  flex: none;
  white-space: nowrap;
}

.tl-sheet-row .tl-icon-cr {
  color: var(--color-text-tertiary);
}

/* CMP-016 TL TextField（Figma 439:636）。入力フィールド。370×52 の枠（線 1、radius/m）、余白 左右16、文字 15 Regular。
 * 幅は親いっぱい。プレースホルダーは tertiary（P3） */
.tl-text-field {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-m);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  -webkit-appearance: none;
  appearance: none;
}

.tl-text-field::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

/* CMP-017 TL ArchiveRow（Figma 439:625）。アーカイブの行。余白 上下10・左4、間 12。
 * 左にタスク名 15 secondary と補足 12 tertiary（間 2）、右に Restore（raised の丸いボタン、undo 16＋13 Medium） */
.tl-archive-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0 10px 4px;
}

.tl-archive-row-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* タスク名は取り消し線（Figma の textDecoration：STRIKETHROUGH） */
.tl-archive-row-title {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
}

.tl-archive-row-meta {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
}

.tl-archive-row-restore {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-bg-raised);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* CMP-020 TL SettingsRow（Figma 449:853）。設定の行。高さ 52、余白 左16・右12、間 12、文字 15 Regular。
 * Link：項目名・値（secondary）・cr 18（tertiary）。Toggle：項目名・TL Toggle。Danger：項目名だけで status/danger */
.tl-settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 12px 0 16px;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  text-align: left;
}

button.tl-settings-row {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-settings-row-label {
  flex: 1 1 auto;
  min-width: 0;
}

.tl-settings-row-value {
  flex: none;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.tl-settings-row .tl-icon-cr {
  color: var(--color-text-tertiary);
}

.tl-settings-row.is-danger {
  color: var(--color-status-danger);
}

/* CMP-018 TL Toast（Figma 449:836）。raised の背景に枠線 1、角丸 12（P3 の例外、DEV-007 判断依頼 A）、
 * 余白 上下12・左16・右12、間 10。文 13 Regular primary、操作 13 Medium accent/text。Error は左に alert 18（danger） */
.tl-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-bg-raised);
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-default);
}

.tl-toast .tl-icon-alert {
  color: var(--color-status-danger);
}

.tl-toast-message {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--font-weight-regular);
}

.tl-toast-action {
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-text);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--font-weight-medium);
  line-height: inherit;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* CMP-005 TL UserBubble（Figma 449:854）。入力画面のユーザーの吹き出し。accent/subtle の背景、余白 上下10・左右14、
 * 角丸 18（右下だけ 4。P3 の例外、DEV-007 判断依頼 A）、文字 15 Regular primary。右寄せ（QA-007-01） */
.tl-user-bubble {
  display: block;
  width: fit-content;
  margin-left: auto;
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  background: var(--color-accent-subtle);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
}

/* CMP-007 TL TaskCard（Figma 436:490）。1行は［丸（TL Checkbox）］［カード］、間 12、縦中央。丸はカードの外の左横（20×20）で、
 * カードは残りの幅（370 のとき 338）。カード：bg/card、枠 border/subtle 1、radius/m、余白 上下12・左16・右12、間 12。
 * 1行目はタスク名 15 Regular（2行まで、それ以上は「…」EDG-036）、2行目は #ラベル（tertiary）・時間か日付（secondary）・ベル 16、間 8（間 2）。
 * Overdue：日付が status/danger。選んでも（Selected=On）カードの見た目は変わらず、変わるのは丸だけ（2026-10-22 の複数選択。旧 Completing・Expanded は廃止） */
.tl-task-card {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  width: 100%;
}

.tl-task-card-card {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-m);
  background: var(--color-bg-card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-task-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tl-task-card-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  overflow-wrap: anywhere; /* 区切りのない長い英単語・URL も2行で「…」にする（EDG-036） */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tl-task-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
}

.tl-task-card-label {
  color: var(--color-text-tertiary);
}

.tl-task-card-when {
  color: var(--color-text-secondary);
}

.tl-task-card.is-overdue .tl-task-card-when {
  color: var(--color-status-danger);
}

.tl-task-card-meta .tl-icon-bell {
  color: var(--color-text-tertiary);
}

/* CMP-022 TL Checkbox（Figma 508:1591）。複数選択の丸 20×20。Off：枠 text/tertiary 1.5（内側、box-shadow）。On：status/success の塗りに、白い（bg/inverse）チェック 14×14。
 * 押せる範囲は 44×44pt（P2 FN-007）。見た目の大きさは変えず、::before で外に 12 ずつ広げる（右はカードとの間の 12 までで、カードには重ならない） */
.tl-checkbox {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--color-text-tertiary); /* 枠 1.5 を内側に（border は 1.5 が端末の画素に丸められるので使わない） */
  color: var(--color-bg-inverse);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-checkbox::before {
  content: '';
  position: absolute;
  inset: -12px;
}

.tl-checkbox.is-on {
  background: var(--color-status-success);
  box-shadow: none;
}

/* CMP-023 TL SelectionBar（Figma 508:1592）。370×36、左に「N selected」（15 Medium primary、行の高さは Figma の auto で 18）と Cancel（15 Medium、
 * color/accent/text、間 16）、右に ✓ とゴミ箱（36×36、間 2、アイコン 20）。✓ は text/primary、ゴミ箱は status/danger。
 * Cancel は文字だけの見た目のまま、押せる範囲は高さ 44（::before で上下に広げる。P2 EDG-109） */
.tl-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
}

.tl-selection-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tl-selection-bar-count {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 18px;
}

.tl-selection-bar-cancel {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-text);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-selection-bar-cancel::before {
  content: '';
  position: absolute;
  inset: -13px -8px; /* 高さ 18 + 26 = 44 */
}

.tl-selection-bar-actions {
  display: flex;
  gap: 2px;
}

.tl-selection-bar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-selection-bar-action.is-delete {
  color: var(--color-status-danger);
}

/* CMP-024 TL Dialog（Figma 508:1617、DES-024・025）。幅 320、bg/surface、枠 border/default 1、radius/l、余白 上24・左右下20、間 20、中央揃え。
 * タイトル 17 Medium 中央（行の高さは Figma の auto で 20）、下に Cancel（Secondary）と OK（Primary、Delete は status/danger）を半分ずつ（133×48、間 12）。
 * 幕は画面全体の color/scrim。ダイアログは画面の真ん中 */
.tl-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tl-dialog-scrim {
  position: absolute;
  inset: 0;
  background: var(--color-scrim);
}

.tl-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  width: 320px;
  padding: 24px 20px 20px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-l);
  background: var(--color-bg-surface);
}

.tl-dialog-title {
  width: 100%;
  color: var(--color-text-primary);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  text-align: center;
}

.tl-dialog-buttons {
  display: flex;
  gap: var(--space-m);
  width: 100%;
}

.tl-dialog-buttons .tl-button {
  flex: 1 1 0;
  width: auto;
}

.tl-dialog-buttons .tl-button.is-danger {
  background: var(--color-status-danger);
}

/* CMP-025 TL Avatar（Figma 522:2060）。28×28 の丸（bg/raised）、中央に白いトド 18×18（既存のマスコットの画像） */
.tl-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-raised);
}

.tl-avatar-mascot {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* CMP-006 TL AICard の1行：［アバター］［カード］、間 8、上揃え（アバターはカードの左上）。以下の .tl-ai-card がカード */
.tl-ai-row {
  display: flex;
  width: fit-content; /* Figma の行は中身の幅（Thinking 249、Result 346 など） */
  align-items: flex-start;
  gap: var(--space-s);
}

/* CMP-006 TL AICard（Figma 449:909）。AI の確認カード（文言は日本語）。bg/card、枠 border/subtle 1、radius/m。
 * Result・Editing・Failed は幅 310（画面でも FIXED）、余白 上下14・左右16、縦に間 8。Thinking・Added は中身の幅。
 * ボタン・Failed の文・Added の文は 14（P3 の例外、DEV-007 判断依頼 A） */
.tl-ai-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 310px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-m);
  background: var(--color-bg-card);
}

.tl-ai-card-heading {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
}

/* Thinking：3つの点（6×6、1つめ secondary・2つめと3つめ tertiary）と文、間 6 */
.tl-ai-card.is-thinking {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: auto;
  align-self: flex-start;
}

.tl-ai-card-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-text-tertiary);
}

.tl-ai-card-dot:first-child {
  background: var(--color-text-secondary);
}

.tl-ai-card-items {
  display: flex;
  flex-direction: column;
}

.tl-ai-card-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.tl-ai-card-item-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
}

.tl-ai-card-item-meta {
  flex: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-default);
  white-space: nowrap;
}

/* Editing の日付・ラベルのチップ：枠 border/default 1、余白 上下2・左8・右4、間 2、文字 12 secondary、chevron 14 tertiary */
.tl-ai-card-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-ai-card-chip .tl-icon-chevron,
.tl-ai-card-remove {
  color: var(--color-text-tertiary);
}

.tl-ai-card-remove {
  display: inline-flex;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-ai-card-message {
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  white-space: pre-line;
}

/* ボタンの並び：上に 4 足して本文との間を 12 に。ボタンは余白 上下9・左右16、文字 14 Medium */
.tl-ai-card-buttons {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.tl-ai-card-button {
  margin: 0;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-ai-card-button.is-primary {
  background: var(--color-accent-default);
  color: var(--color-bg-inverse);
}

.tl-ai-card-button.is-secondary {
  background: var(--color-bg-raised);
  color: var(--color-text-primary);
}

/* Added：左に check 18（status/success）、「N件を追加しました」14 Medium と振り分け先 12 tertiary（間 2）。余白 上下12・左16・右12、間 10 */
.tl-ai-card.is-added {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: auto;
  align-self: flex-start;
  padding: 12px 12px 12px 16px;
}

.tl-ai-card.is-added .tl-icon-check {
  color: var(--color-status-success);
}

.tl-ai-card-added {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tl-ai-card-added-title {
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
}

.tl-ai-card-added-detail {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-default);
  white-space: nowrap;
}

/* CMP-021 シートの共通枠（Figma 各シートの sheet フレーム。例：SCR-101 432:247）。
 * 背景 bg/surface、上の角 radius/l、余白 上8・左右16・下34、縦に間 16。取っ手 36×5（tertiary）、
 * 見出し 17 Medium と閉じる × 24（secondary）を左右に。中身は各シートが入れる */
.tl-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 8px 16px 34px;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--color-bg-surface);
}

.tl-sheet-handle {
  flex: none;
  width: 36px;
  height: 5px;
  border-radius: var(--radius-pill); /* Figma は 3。高さ 5 なので pill と同じ形 */
  background: var(--color-text-tertiary);
}

.tl-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tl-sheet-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-default);
}

/* Figma の見出しの行は高さ 24（× のアイコンの高さ）。文字 17×1.4＝23.8 は × に揃えて中央 */
.tl-sheet-close {
  display: inline-flex;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tl-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* 開いているシートの層：画面全体に幕（color/scrim）を敷き、シートを下端に置く */
.tl-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tl-sheet-scrim {
  position: absolute;
  inset: 0;
  background: var(--color-scrim);
}

.tl-sheet-layer .tl-sheet {
  position: relative;
}

/* シートの開閉（P3、DEV-022 判断依頼 A）：開く 0.3 秒（減速）、閉じる 0.25 秒。幕は透明から color/scrim へ */
.tl-sheet-layer .tl-sheet {
  transform: translateY(100%);
  transition: transform 0.25s ease-in;
}

.tl-sheet-layer .tl-sheet-scrim {
  opacity: 0;
  transition: opacity 0.25s ease-in;
}

.tl-sheet-layer.is-open .tl-sheet {
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}

.tl-sheet-layer.is-open .tl-sheet-scrim {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

/* 下へのスワイプ（P8 QA-022-02）。取っ手と見出しの行から始める。指で動かしている間は動きを止めて指に合わせる */
.tl-sheet-handle,
.tl-sheet-header {
  touch-action: none;
}

.tl-sheet-layer.is-dragging .tl-sheet,
.tl-sheet-layer.is-dragging .tl-sheet-scrim {
  transition: none;
}