@charset "UTF-8";
/* ============================================================================
 * views/message.css
 * COLAVIA v1.006.0000
 *
 *   メッセージ（§5.4 / §5.4-2）。
 *
 *   ＜左に一覧、右に会話の2ペイン＞
 *   高さは画面に合わせて固定し、中だけをスクロールさせる。
 *   ページ全体が伸びると、入力欄が画面の外へ出てしまう。
 *
 *   ＜狭い画面では切り替える＞
 *   並べるとどちらも読めない幅になる。
 *   .msg.is-detail が付いている間は会話だけを出す。
 *
 *   ＜自分の発言は右、相手は左（§5.4-2）＞
 *   時刻は吹き出しの外、下端にそろえる。
 *   吹き出しの中に入れると、本文の折り返しに巻き込まれる。
 *
 *   サイズの指定は px より rem / vh / vw を優先する（§2.2）。
 *   :has() は使わない（§2.2）。
 * ========================================================================== */

/* ==========================================================================
   2ペイン
   ========================================================================== */

.msg {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);

  /* ヘッダと見出しの分を引いて、画面の高さに収める */
  height: calc(100vh - var(--h-header) - 9rem);
  min-height: 24rem;

  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* ==========================================================================
   スレッド一覧
   ========================================================================== */

/* min-height: 0 … グリッドの子も既定では中身より小さくならない。
   外さないと、中でスクロールさせるつもりの箱が枠を突き抜ける */

.msg-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--c-hairline);
  background: var(--c-surface-sunken);
}

.msg-list__head {
  display: flex;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-hairline);
}

.msg-list__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.thread {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-separator);
  text-align: left;
  color: var(--c-text);
}

.thread:hover { background: var(--c-fill); }

.thread.is-active { background: var(--c-accent-soft); }

.thread__main { flex: 1 1 auto; min-width: 0; }

.thread__top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.thread__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 未読があるスレッドは太字にする。
   バッジだけだと、一覧を流し読みしたときに気づきにくい */

.thread.is-unread .thread__name { font-weight: 700; }

.thread__when {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
}

.thread__preview {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread__badge {
  flex: 0 0 auto;
  min-width: 1.25rem;
  padding: 0.05rem 0.35rem;
  border-radius: var(--r-full);
  background: var(--c-accent);
  color: var(--c-text-on-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}

.thread__mute { color: var(--c-text-tertiary); font-size: var(--fs-xs); }

/* グループのアイコン。1対1は相手のアバターを出す */

.avatar--group { background: var(--c-fill-hover); color: var(--c-text-secondary); }

/* ==========================================================================
   会話
   ========================================================================== */

.msg-talk {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.talk-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-hairline);
}

/* 戻るボタンは狭い画面でだけ出す */

.talk-head__back { display: none; }

.talk-head__main { flex: 1 1 auto; min-width: 0; }

.talk-head__name {
  display: block;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talk-head__sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
}

.talk-head__tools { display: flex; gap: var(--sp-1); flex: 0 0 auto; }

/* --- 発言の並び --- */

/* ＜min-height: 0 が要る＞
   flex の子は既定で「中身より小さくならない」。
   これを外さないと、発言が増えたときに縮まず、
   見出しと入力欄を枠の外へ押し出してしまう */

.talk-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
}

/* 発言が少ないうちは下端に寄せる。
   上に貼り付くと、入力欄との間が大きく空いて会話に見えない。
   最初の要素に margin-top: auto を入れるだけなので、
   増えたときのスクロールは壊れない */

.talk-body > *:first-child { margin-top: auto; }

/* 日付の区切り（§5.4-2） */

.talk-day {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-2);
  color: var(--c-text-tertiary);
  font-size: var(--fs-xs);
}

.talk-day::before,
.talk-day::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-separator);
}

/* ==========================================================================
   吹き出し（§5.4-2）
   ========================================================================== */

.bubble {
  display: flex;
  gap: var(--sp-2);
  max-width: 100%;
}

/* 自分の発言は右寄せ（§5.4-2） */

.bubble.is-mine { flex-direction: row-reverse; }

/* アバターの幅は、続けての発言でも空けておく。
   空けないと、同じ人の発言が左右にずれて階段状になる */

.bubble__avatar { flex: 0 0 1.625rem; }

.bubble__main {
  position: relative;
  min-width: 0;
  max-width: min(34rem, 78%);
}

.bubble__name {
  display: block;
  margin-bottom: 0.15rem;
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
}

/* 本文と、時刻・既読を横に並べる。
   時刻は吹き出しの外の下端にそろえる（§5.4-2） */

.bubble__row { display: flex; align-items: flex-end; gap: var(--sp-2); }

.bubble.is-mine .bubble__row { flex-direction: row-reverse; }

.bubble__body {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--c-fill);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.bubble.is-mine .bubble__body {
  background: var(--c-accent);
  color: var(--c-text-on-accent);
}

.bubble.is-mine .bubble__body a { color: inherit; text-decoration: underline; }

/* 取り消された発言。消さずに跡を残す（§5.4-1） */

.bubble.is-gone .bubble__body {
  background: none;
  border: 1px dashed var(--c-hairline);
  color: var(--c-text-tertiary);
  font-style: normal;
}

.bubble__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
  line-height: 1.4;
}

.bubble.is-mine .bubble__side { align-items: flex-start; }

.bubble__read.is-clickable { cursor: pointer; text-decoration: underline dotted; }

.bubble__edited { font-size: var(--fs-xs); }

/* --- 添付 --- */

.bubble__files {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.bubble__img img {
  max-width: 14rem;
  max-height: 14rem;
  border-radius: var(--r-sm);
}

.bubble__file {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-xs);
  text-decoration: none;
}

.bubble__file:hover { background: var(--c-fill-hover); }

.bubble__size { margin-left: auto; color: var(--c-text-secondary); }

/* --- リアクション（§5.4-4） --- */

.bubble__reactions {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.bubble.is-mine .bubble__reactions { justify-content: flex-end; }

.react {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-full);
  background: var(--c-surface);
  font-size: var(--fs-xs);
}

.react:hover { background: var(--c-fill); }

/* 自分が押したものは色を変えて区別する（§5.4-4） */

.react.is-mine {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 700;
}

/* --- 操作（ホバーで出す。§5.4-4） --- */

/* ＜吹き出しの外へは出さない＞
   吹き出しの上にはみ出させると、その位置は .bubble__main の外側になる。
   すると「見えているのに、そこへ触れても hover が始まらない」状態になり、
   押せない。吹き出しの**横**に置き、.bubble 全体を hover の受け皿にする。 */

.bubble__tools {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  gap: 0.1rem;
  padding: 0.1rem;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-full);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}

.bubble:hover .bubble__tools { opacity: 1; pointer-events: auto; }

/* 相手の発言は吹き出しの右、自分の発言は左に置く。
   いずれも会話の中央側に出して、画面の外へ出ないようにする */

.bubble .bubble__tools { left: 100%; margin-left: var(--sp-2); }
.bubble.is-mine .bubble__tools { left: auto; right: 100%; margin: 0 var(--sp-2) 0 0; }

.bubble__react { position: relative; }

/* リアクションの選び場。Popover が開閉を受け持つ */

/* 共通の .popover は使わない（開くときに画面の右端から位置を測るため）。
   ここだけ自前で開け閉めする */

.react-pick {
  display: none;
  position: absolute;
  z-index: 210;
  bottom: 2rem;
  right: 0;
  padding: 0.2rem;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-popup);
  white-space: nowrap;
}

.react-pick.is-open { display: block; }

.react-pick button {
  padding: 0.2rem 0.35rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
}

.react-pick button:hover { background: var(--c-fill); }

/* ＜細かいホバーが使えない端末では常時出す（§5.4-4）＞
   横に置いたままだと画面の外へ出るため、吹き出しの下へ回す */

@media (hover: none), (max-width: 52rem) {

  .bubble__tools {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    align-self: flex-start;
    margin: 0.15rem 0 0;
    width: max-content;
  }

  .bubble.is-mine .bubble__tools { align-self: flex-end; margin: 0.15rem 0 0; }
  .bubble .bubble__tools { margin-left: 0; }

  /* 発言ごとに帯が並ぶので、控えめな大きさにする */
  .bubble__tools .icon-btn { width: 1.5rem; height: 1.5rem; font-size: var(--fs-xs); }

  .bubble__main { display: flex; flex-direction: column; }
  .bubble.is-mine .bubble__main { align-items: flex-end; }
}

/* ==========================================================================
   入力欄（§5.4-2）
   ========================================================================== */

.talk-form {
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-hairline);
  background: var(--c-surface);
}

.talk-form__files { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }

.talk-form__row { display: flex; align-items: flex-end; gap: var(--sp-2); }

/* 内容に応じて高さが伸びる（高さは JS が測って入れる） */

.talk-form__input {
  flex: 1 1 auto;
  min-height: 2.25rem;
  max-height: 10rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  background: var(--c-surface-sunken);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.6;
  resize: none;
  overflow-y: auto;
}

.talk-form__input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 0.1875rem var(--c-focus-ring);
}

/* ==========================================================================
   狭い画面
   ========================================================================== */

@media (max-width: 52rem) {

  /* 一覧と会話を切り替える（§5.4-2）。
     並べると、どちらも読めない幅になる */

  .msg {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100vh - var(--h-header) - 11rem);
  }

  .msg-talk { display: none; }
  .msg.is-detail .msg-list { display: none; }
  .msg.is-detail .msg-talk { display: flex; }

  .talk-head__back { display: grid; }

  .bubble__main { max-width: 88%; }
  .talk-body { padding: var(--sp-3); }
}