html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #ffffff; /* ★重要：文字色を明示 */
  height: 100%;
  overflow: hidden; /* ★OBS枠外に伸びて最新が消えるのを防ぐ */
}

#app {
  font-family: system-ui, "Yu Gothic", "Meiryo", sans-serif;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end; /* ★全体を下寄せ */
}

#messages {
  width: 100%;
  max-height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  overflow: hidden;          /* ★枠外に出さない */
  justify-content: flex-end;  /* ★最新が常に見える（下詰め） */
}

/* メッセージ本体 */
.msg {
  background: rgba(20, 20, 20, 0.75); /* 黒寄りに */
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Bot発言（少し強調） */
.msg.bot {
  background: rgba(0, 60, 120, 0.75); /* 青系 */
  border: 1px solid rgba(120, 180, 255, 0.6);
}

/* 発言者名 */
.author {
  font-size: 12px;
  font-weight: 600;
  color: #a8d8ff; /* 水色 */
  margin-bottom: 4px;
}

/* 本文 */
.content {
  font-size: 16px;
  color: #ffffff;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}

/* Embed */
.embed {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 4px solid #ffd36a; /* 黄色ライン */
  background: rgba(255, 211, 106, 0.15);
  border-radius: 8px;
}

.embed-title {
  font-weight: 700;
  color: #ffd36a;
  margin-bottom: 4px;
}

.embed-desc {
  color: #ffffff;
  opacity: 0.95;
  white-space: pre-wrap;
}


/* --- Portal page: allow scrolling --- */
html, body{
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* iOS/一部ブラウザでのスクロール改善（任意） */
body{
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   Overlay Discord-like layout (default)
   ========================================================= */

/* msg: avatar + body 横並び */
#messages .msg{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

/* avatar area fixed 40px */
#messages .msg .av{
  width:40px;
  height:40px;
  flex:0 0 40px;
  overflow:hidden;
}

/* avatar image */
#messages .msg .avimg{
  width:40px;
  height:40px;
  display:block;
  object-fit:cover;
}

/* placeholder */
#messages .msg .av .avph{
  width:40px;
  height:40px;
  background: rgba(255,255,255,.08);
}

/* text body */
#messages .msg .body{
  flex:1;
  min-width:0;
}

/* meta line: author + time */
#messages .msg .meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:4px; /* base.css の author margin と合わせる */
}

/* overlay-chat.js が出す .author は base.css の既存を活かす（色/サイズはそのまま） */
/* time */
#messages .msg .ts{
  font-size:12px;
  opacity:.75;
}

/* shape switch */
body[data-avatar-shape="circle"] #messages .msg .avimg,
body[data-avatar-shape="circle"] #messages .msg .av .avph{
  border-radius:50%;
}
body[data-avatar-shape="square"] #messages .msg .avimg,
body[data-avatar-shape="square"] #messages .msg .av .avph{
  border-radius:6px;
}




/* =========================================================
   Default Discord-like layout for overlay (OBS含む)
   ========================================================= */

#messages .msg{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

/* avatar */
#messages .msg .av{
  width:40px;
  height:40px;
  flex:0 0 40px;
  overflow:hidden;
}

#messages .msg .avimg{
  width:40px;
  height:40px;
  display:block;
  object-fit:cover;
}

/* placeholder */
#messages .msg .av .avph{
  width:40px;
  height:40px;
  background: rgba(255,255,255,.08);
}

/* meta (name + time in one row) */
#messages .msg .meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:4px; /* 既存 author margin と揃える */
}

/* timestamp */
#messages .msg .ts{
  font-size:12px;
  opacity:.75;
}

/* body */
#messages .msg .body{
  flex:1;
  min-width:0;
}

/* circle/square */
body[data-avatar-shape="circle"] #messages .msg .avimg,
body[data-avatar-shape="circle"] #messages .msg .av .avph{
  border-radius:50%;
}
body[data-avatar-shape="square"] #messages .msg .avimg,
body[data-avatar-shape="square"] #messages .msg .av .avph{
  border-radius:6px;
}