body { background-color: #1a1d23; color: #d0d0d0; }
.talk-header h2 { font-weight: 700; color: #e0e0e0; }
.talk-header p { color: #999; }
.talk-form-card { border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.3); border: 1px solid #2a2d35; background: #22252b; }
.talk-form-card .card-body { background: #22252b; border-radius: 12px; }

/* ====== Search bar ====== */
.search-bar-wrap { max-width: 560px; margin: 0 auto 24px; }
.search-bar { display: flex; align-items: center; background: #22252b; border: 1px solid #3a3d45; border-radius: 50px; padding: 4px 6px 4px 16px; transition: border-color 0.25s, box-shadow 0.25s; }
.search-bar:focus-within { border-color: #5b9bd5; box-shadow: 0 0 0 3px rgba(91,155,213,0.15); }
.search-icon { font-size: 1.1em; color: #666; flex-shrink: 0; margin-right: 8px; }
.search-input { flex: 1; background: transparent; border: none; outline: none; color: #d0d0d0; font-size: 0.92em; padding: 8px 12px !important; }
.search-input::placeholder { color: #666; }
.search-clear { color: #888; font-size: 1.25em; text-decoration: none; padding: 0 10px; line-height: 1; transition: color 0.2s; }
.search-clear:hover { color: #e75480; }
.search-btn { background: linear-gradient(135deg, #5b9bd5, #4a8abf); color: #fff; border: none; border-radius: 50px; padding: 8px 22px; font-size: 0.85em; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.15s; flex-shrink: 0; margin-left: 8px; }
.search-btn:hover { background: linear-gradient(135deg, #6aaae0, #5b9bd5); transform: scale(1.03); }
.search-result-hint { text-align: center; margin-top: 12px; font-size: 0.85em; color: #888; }
.search-keyword { color: #5b9bd5; font-weight: 600; background: rgba(91,155,213,0.1); padding: 1px 8px; border-radius: 4px; }

/* ====== Single-column list timeline ====== */
.timeline-track { position: relative; padding: 20px 0 10px; }
.timeline-line { display: none; }
.timeline-scroll { display: flex; flex-direction: column; gap: 12px; padding: 0 10px 16px; position: relative; z-index: 1; }

.tl-card-wrap { width: 100%; }

.tl-card { cursor: pointer; transition: background 0.2s, box-shadow 0.2s; position: relative; }
.tl-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.tl-card:hover .tl-body { background: #282b32; }
.tl-card.active .tl-body { background: #282b32; box-shadow: 0 2px 16px rgba(91,155,213,0.2); }
.tl-dot { display: none; }
.tl-body { background: #22252b; border: 1px solid #2a2d35; border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 0 14px; align-items: center; padding: 12px 16px; }
.tl-head { grid-row: 1 / 3; grid-column: 1; padding: 0; display: flex; align-items: center; gap: 10px; }
.tl-avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #3a3d45; flex-shrink: 0; object-fit: cover; }
.tl-nick { font-weight: 600; color: #e0e0e0; font-size: 0.88em; }
.tl-date { font-size: 0.72em; color: #666; }
.tl-admin-info { font-size: 0.7em; color: #777; }
.tl-title { grid-row: 1; grid-column: 2; padding: 0; font-weight: 700; color: #f0f0f0; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-preview { grid-row: 2; grid-column: 2; padding: 0; color: #999; font-size: 0.82em; line-height: 1.5; max-height: 9em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; word-break: break-all; }
.tl-foot { grid-row: 1 / 3; grid-column: 3; padding: 0; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.tl-foot .btn { font-size: 0.72em; padding: 1px 10px; border-radius: 12px; }
.tl-reply-count { font-size: 0.8em; color: #5b9bd5; }

/* Expanded detail panel */
.tl-detail { display: none; background: #22252b; border: 1px solid #2a2d35; border-radius: 12px; margin-top: 16px; padding: 20px; animation: fadeSlideDown 0.3s ease; }
.tl-detail.show { display: block; }
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.tl-detail-content { color: #ddd; line-height: 1.75; word-wrap: break-word; word-break: break-all; margin-bottom: 12px; }
.tl-detail-actions { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tl-detail-actions .btn { font-size: 0.8em; padding: 2px 14px; border-radius: 12px; }

.tl-replies { border-top: 1px solid #2a2d35; padding-top: 12px; }
.tl-replies-title { font-size: 0.85em; color: #888; margin-bottom: 10px; }
.tl-reply { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.tl-reply + .tl-reply { border-top: 1px solid #2a2d35; }
.tl-reply-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #3a3d45; flex-shrink: 0; object-fit: cover; }
.tl-reply-bubble { flex: 1; min-width: 0; }
.tl-reply-content { background: #2e3138; border: 1px solid #383b42; border-radius: 4px 10px 10px 10px; padding: 10px 14px; color: #ccc; line-height: 1.65; word-wrap: break-word; word-break: break-all; }
.tl-reply-nick { font-weight: 600; color: #ddd; font-size: 0.85em; }
.tl-reply-date { font-size: 0.72em; color: #666; }
.tl-reply-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }

.btn-action { font-size: 0.8em; padding: 2px 10px; border-radius: 4px; }
.btn-pink { background-color: #e75480; border-color: #e75480; color: #fff; }
.btn-pink:hover { background-color: #d44370; border-color: #d44370; color: #fff; }
.form-error { color: #ff6b6b; font-size: 0.85em; margin-top: 4px; }
.form-control.is-invalid { border-color: #ff6b6b !important; box-shadow: 0 0 0 0.2rem rgba(255,107,107,0.2) !important; }
.captcha-hint { color: #ff6b6b; font-size: 0.85em; }
#gd_img { border-radius: 4px; cursor: pointer; }
.form-control { background-color: #2a2d35; border-color: #3a3d45; color: #d0d0d0; }
.form-control:focus { background-color: #32363e; border-color: #5b9bd5; color: #e0e0e0; box-shadow: 0 0 0 0.2rem rgba(91,155,213,0.25); }
.form-control::placeholder { color: #666; }
textarea.form-control { resize: vertical; }
.col-form-label { color: #bbb; }
.text-muted { color: #888 !important; }
hr { border-color: #3a3d45; opacity: 0.5; }
.btn-outline-secondary { color: #aaa; border-color: #555; }
.btn-outline-secondary:hover { background-color: #3a3d45; color: #ddd; border-color: #666; }
#btn_post { position: fixed; top: 80px; right: 24px; z-index: 1050; padding: 10px 20px; border-radius: 30px; font-size: 1em; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.talk-pager a, .talk-pager span { display: inline-block; padding: 4px 12px; margin: 0 2px; border-radius: 6px; font-size: 0.9em; }
.talk-pager a { background: #2a2d35; color: #aaa; text-decoration: none; border: 1px solid #3a3d45; }
.talk-pager a:hover { background: #3a3d45; color: #fff; }
.talk-pager .current, .talk-pager span.current { background: #5b9bd5; color: #fff; border: 1px solid #5b9bd5; }
@media (max-width: 576px) {
  .tl-body { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; padding: 10px 12px; gap: 4px 10px; }
  .tl-head { grid-row: 1; grid-column: 1 / 3; margin-bottom: 4px; }
  .tl-title { grid-row: 2; grid-column: 1 / 3; }
  .tl-preview { grid-row: 3; grid-column: 1 / 3; white-space: normal; max-height: 3em; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; }
  .tl-foot { grid-row: 4; grid-column: 1 / 3; margin-top: 6px; flex-wrap: wrap; }
  .tl-avatar { width: 34px; height: 34px; }
}