/* =========================================================================
   timeline.css · 双人聊天时间线（设计书 §4.5 / §5）
   气泡颜色只来自 --role-*（由 data-theme 决定），左右对齐不代表身份。
   ========================================================================= */

.timeline-layout {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px var(--gutter) 40px;
}
.timeline { min-width: 0; }
.timeline__aside { display: none; }

/* 巴黎日期分隔条（公共芝士黄） */
.day-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 10px;
  color: var(--cheese-text);
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
}
.day-divider::before, .day-divider::after { content: ""; flex: 1; height: 1px; background: var(--cheese-border); }
.day-divider span {
  padding: 3px 14px;
  border: 1px solid var(--cheese-border); border-radius: var(--radius-pill);
  background: var(--cheese-bg);
  white-space: nowrap;
}

/* 系统说明（公共，不伪装成任何一方） */
.sys-note {
  width: fit-content; max-width: 92%;
  margin: 18px auto 6px;
  padding: 6px 14px;
  border: 1px solid var(--cheese-border); border-radius: 14px;
  background: var(--cheese-bg); color: var(--cheese-text);
  font-size: 13px; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere;
  scroll-margin-top: calc(var(--datebar-h) + 24px);
}
.sys-note--unknown { border-style: dashed; border-color: var(--unknown-border); background: var(--unknown-bg); color: var(--text-sub); }

/* ---- 单条消息 ---- */
.msg {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 8px;
  margin-top: 14px;
  scroll-margin-top: calc(var(--datebar-h) + 24px);
  scroll-margin-bottom: calc(var(--nav-h) + 24px);
}
.msg:focus { outline: none; }
.msg--continued { margin-top: 6px; }
.msg[data-align="right"] { grid-template-columns: minmax(0, 1fr) 40px; }
.msg[data-align="right"] .msg__avatar { grid-column: 2; grid-row: 1; }
.msg[data-align="right"] .msg__main { grid-column: 1; grid-row: 1; justify-items: end; }

.msg__avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 2px solid var(--role-main); border-radius: 50%;
  background: var(--role-bg);
  font-size: 22px; line-height: 1;
}
.msg--continued .msg__avatar { visibility: hidden; }

.msg__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: start; min-width: 0; }


/* ---- 气泡：韩语原文在上、中文译文在下，同一张角色色卡片 ---- */
.bubble {
  max-width: min(100%, 540px);
  padding: 10px 14px;
  border: 1px solid var(--role-border); border-radius: 18px;
  background: var(--role-bg); color: var(--text-main);
  overflow-wrap: anywhere;
}
.msg[data-align="left"] .bubble { border-top-left-radius: 6px; }
.msg[data-align="right"] .bubble { border-top-right-radius: 6px; }
.msg.is-highlighted .bubble { outline: 3px solid var(--cheese-main); outline-offset: 3px; box-shadow: 0 0 0 7px var(--cheese-bg); }

.bubble__ko, .bubble__zh { white-space: pre-wrap; }
.bubble__ko { font-size: 16px; word-break: keep-all; }
.bubble__divider { margin: 7px 0; border: 0; border-top: 1px dashed var(--role-border); }
.bubble__zh { font-size: 15px; }
.bubble__missing {
  display: inline-block;
  padding: 0 10px;
  border: 1px dashed var(--unknown-border); border-radius: var(--radius-pill);
  background: var(--unknown-bg); color: var(--text-sub);
  font-size: 12px; font-style: italic; white-space: nowrap;
}
.bubble__emoji { font-size: 34px; line-height: 1.25; }
.bubble__voice { font-size: 14px; color: var(--role-text); }

/* 文字显示模式（设置中切换，不重建 DOM） */
.timeline[data-text-mode="ko"] .bubble__zh:not(.is-sole),
.timeline[data-text-mode="ko"] .bubble__divider,
.timeline[data-text-mode="zh"] .bubble__ko:not(.is-sole),
.timeline[data-text-mode="zh"] .bubble__divider { display: none; }

/* 含媒体的消息：外框/底色跟随发送者，照片本身不加色彩蒙版 */
.bubble--media { padding: 6px; }
.bubble--media .bubble__text { padding: 6px 8px 4px; }
.bubble--media .bubble__place { margin: 4px 6px 4px; }
.bubble__place { margin-top: 8px; }

.msg-media {
  display: grid; gap: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(64vw, 320px);
  max-width: 100%;
}
/* 单张：宽度按照片比例收窄，竖图最高约 380px，气泡不留空白 */
.msg-media--n1 { grid-template-columns: 1fr; width: min(64vw, 320px, calc(380px * var(--ar, 4 / 3))); }
.msg-media--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.msg-media__item {
  position: relative;
  display: block; aspect-ratio: 1;
  padding: 0; overflow: hidden;
  border: 0; border-radius: 12px;
  background: var(--bg-card);
}
.msg-media--n1 .msg-media__item { aspect-ratio: var(--ar, 4 / 3); }
.msg-media__item img { width: 100%; height: 100%; object-fit: cover; }
.msg-media__missing {
  display: grid; place-items: center; height: 100%;
  color: var(--text-sub); font-size: 12px; background: var(--unknown-bg);
}

/* 视频播放标识：高对比中性样式 */
.play-icon {
  position: absolute; inset: 0; margin: auto;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: #2B2724;
  font-size: 16px; padding-left: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.play-badge {
  position: absolute; left: 8px; bottom: 8px;
  padding: 1px 8px; border-radius: var(--radius-pill);
  background: rgba(30, 27, 24, .78); color: #FFFFFF;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* 气泡 + 三地发送时间（时间放在气泡外侧，左侧消息在右、右侧消息在左） */
.msg__line {
  --times-w: 86px;
  display: flex; align-items: flex-end; gap: 6px;
  width: 100%;
}
.msg[data-align="right"] .msg__line { flex-direction: row-reverse; }
.msg__line > .bubble { min-width: 0; max-width: min(calc(100% - var(--times-w) - 6px), 540px); }
.msg__times {
  flex: none; display: grid; gap: 1px;
  width: var(--times-w);
  padding-bottom: 2px;
  color: var(--text-sub);
  font-size: 11px; line-height: 1.35; font-variant-numeric: tabular-nums;
}
.msg__t { display: flex; gap: 4px; white-space: nowrap; }
.msg[data-align="right"] .msg__t { justify-content: flex-end; }
.msg__t.is-primary { color: var(--role-text); font-weight: 700; }
.msg__t-date { font-size: 10px; }
.msg__times--unknown { font-style: italic; }

/* 很窄的屏幕：时间换到气泡下方横排 */
@media (max-width: 359px) {
  .msg__line { flex-direction: column; align-items: flex-start; }
  .msg[data-align="right"] .msg__line { flex-direction: column; align-items: flex-end; }
  .msg__line > .bubble { max-width: 100%; }
  .msg__times { width: auto; display: flex; flex-wrap: wrap; gap: 0 8px; }
}

/* ---- 电脑：左聊天 + 右侧 sticky 小地图 ---- */
@media (min-width: 768px) {
  .msg-media { width: 360px; }
  .msg-media--n1 { width: min(360px, calc(380px * var(--ar, 4 / 3))); }
}
@media (min-width: 1024px) {
  .timeline-layout {
    max-width: 1240px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 32px; align-items: start;
    padding-top: 20px;
  }
  .timeline__aside {
    position: sticky; top: calc(var(--header-h) + var(--datebar-h) + 20px);
    display: grid; gap: 10px;
  }
  .mini-map {
    height: calc(100vh - var(--header-h) - var(--datebar-h) - 150px);
    min-height: 320px;
    overflow: hidden;
    border: 1px solid var(--cheese-border); border-radius: var(--radius-lg);
    background: var(--unknown-bg);
  }
  .aside-caption {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--cheese-border); border-radius: var(--radius-pill);
    background: var(--cheese-bg); color: var(--cheese-text);
    font-size: 14px; font-weight: 700;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .aside-hint { color: var(--text-sub); font-size: 12px; }
  .msg { scroll-margin-top: calc(var(--header-h) + var(--datebar-h) + 24px); }
}

/* 贴纸：人物色浅底，保留贴纸原貌 */
.bubble--sticker { padding: 8px 10px; }
.bubble__sticker { display: block; width: 128px; height: auto; }
.bubble__sticker-text { margin-top: 2px; color: var(--role-text); font-size: 13px; }

/* 语音消息 */
.voice { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.voice__btn {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--role-border); border-radius: 50%;
  background: var(--bg-card); color: var(--role-text);
  font-size: 12px; line-height: 1;
}
.voice__btn::after { content: ""; position: absolute; inset: -4px; }
.voice__btn[aria-pressed="true"] { background: var(--role-main); }
.voice__bar { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--bg-card); }
.voice__fill { display: block; width: 0; height: 100%; background: var(--role-text); transition: width .25s linear; }
.voice__time { min-width: 2.6em; color: var(--role-text); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }

/* 机上发送的消息 */
.msg__air { margin-top: 2px; color: var(--role-text); font-size: 11px; font-weight: 700; white-space: nowrap; }
.msg[data-align="right"] .msg__air { text-align: right; }

/* 航班起飞 / 降落卡：登机牌式白底 + 乘客色虚线框，对齐方向跟随乘客 */
.flight-event { display: flex; margin: 18px 0 8px; scroll-margin-top: calc(var(--datebar-h) + 24px); }
.flight-event:focus { outline: none; }
.flight-event[data-align="right"] { justify-content: flex-end; }
.flight-event__card {
  display: grid; gap: 4px;
  max-width: min(100%, 400px);
  padding: 10px 14px 10px 16px;
  border: 1px dashed var(--role-border); border-left: 4px solid var(--role-main);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-1);
}
.flight-event__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-main); font-size: 14px; }
.flight-event__icon { font-size: 18px; line-height: 1; }
.flight-event__airline { color: var(--text-sub); font-size: 12px; }
.flight-event__route { font-size: 14px; color: var(--text-main); }
.flight-event__times { display: flex; flex-wrap: wrap; gap: 0 10px; color: var(--text-sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.flight-event__times .is-primary { color: var(--role-text); font-weight: 700; }
.flight-event__plan { color: var(--text-sub); font-size: 12px; }
@media (min-width: 1024px) {
  .flight-event { scroll-margin-top: calc(var(--header-h) + var(--datebar-h) + 24px); }
}