/* =============================================================
   botchitter — 詳細画面・スレッド・編集・前後送り (detail.css)
============================================================= */

.view-detail {
  display: none;
  flex-direction: column;
  padding-top: 16px;
  animation: fadeInTweet 0.25s var(--ease-out);
}
.view-detail.active {
  display: flex;
}

.detail-focus-card {
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.detail-meta {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

.detail-text {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 16px;
}

.detail-section-title {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.detail-section-title svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* 詳細画面のコメント投稿フォーム */
.detail-composer {
  padding: 16px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  position: relative;
}

.detail-composer-textarea {
  width: 100%;
  min-height: 56px;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  resize: none;
  padding: 0;
  box-sizing: border-box;
  overflow-y: hidden;
  field-sizing: content;
}
.detail-composer-textarea::placeholder {
  color: var(--text-tertiary);
  font-size: 16px;
}

.detail-composer-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;
}

.detail-focus-card .quoted-card {
  margin-bottom: 16px;
}

.detail-focus-card .tweet-footer {
  margin-top: 10px;
}

.view-detail .replies-thread {
  margin-bottom: 24px;
}

.detail-missing {
  padding: 40px 0;
  color: var(--text-tertiary);
}

/* 編集（詳細画面だけ）と編集済みの印・前の版 */
.edited-mark {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: -1px;
}
.edited-mark svg,
.edit-history svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.edit-history {
  margin: -8px 0 14px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.reply-item .edit-history {
  margin: 2px 0 0;
}
.edit-history summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
}
.edit-history summary::-webkit-details-marker {
  display: none;
}
.edit-history summary:hover {
  color: var(--text-secondary);
}

.history-item {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 1.5px solid var(--line);
}
.history-meta {
  margin-bottom: 2px;
}
.history-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.edit-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.reply-item .edit-box {
  margin: 4px 0 2px;
}
.edit-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.edit-actions .mood-control {
  margin-right: auto;
}

/* 本文中のリンクとリンクカード */
.link {
  color: var(--tag);
  text-decoration: none;
}
.link:hover {
  text-decoration: underline;
}

.link-card {
  display: block;
  margin: 4px 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s;
}
.link-card:hover {
  background: var(--hover-overlay);
}
.reply-item .link-card {
  margin: 2px 0;
}

.link-card-title {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-card-site {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* このポストを引用した未来のポストたち（線の可視化） */
.detail-quote-children {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.quote-child-card {
  background: var(--quote-bg);
  border-radius: 8px;
  padding: 12px 14px;
  border-left: 2px solid var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
  contain: layout style;
}
.quote-child-card:hover {
  background: var(--quote-hover);
}

.quote-child-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.quote-child-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

/* 詳細画面の最下部の前後ナビゲーション */
.detail-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 36px 0 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.btn-detail-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.btn-detail-nav:hover {
  color: var(--text-primary);
  background: var(--hover-overlay);
}
.btn-detail-nav svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.detail-nav-placeholder {
  width: 1px;
  height: 1px;
}