:root {
  --bg: #ffffff;
  --bg-sidebar: #f4f5f7;
  --bg-hover: #e8eaee;
  --bg-active: #2f6fed;
  --fg: #1d2129;
  --fg-muted: #6b7280;
  --fg-on-active: #ffffff;
  --border: #e2e5ea;
  --accent: #2f6fed;
  --danger: #d0342c;
  --online: #22a55a;
  --offline: #b4b9c1;
  --ai: #7c4dff;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1d22;
    --bg-sidebar: #15171b;
    --bg-hover: #262a31;
    --bg-active: #3b73e8;
    --fg: #e6e8eb;
    --fg-muted: #9aa1ad;
    --border: #2b2f36;
    --accent: #6d9bff;
    --danger: #ff6b61;
    --ai: #b39dff;
    --offline: #5b616b;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-size: 15px; }
button, input, textarea { font: inherit; color: inherit; }

.layout { display: grid; grid-template-columns: 260px 1fr auto; height: 100dvh; }

/* サイドバー */
.sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); overflow-y: auto; padding-bottom: 16px; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; font-size: 17px; }
.sidebar-header { flex-wrap: wrap; }
.account { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
.me { font-size: 13px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me { flex: 1; min-width: 0; }
.logout { text-decoration: none; }
.logout { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; color: var(--fg-muted); white-space: nowrap; }
.logout:hover { background: var(--bg-hover); }
.sidebar h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); margin: 20px 16px 6px; }
.count { font-weight: 400; }
.channel-list, .member-status-list { list-style: none; margin: 0; padding: 0 8px; }
.channel-list button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: none; text-align: left; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.channel-list button:hover { background: var(--bg-hover); }
.channel-list button[aria-current="true"] { background: var(--bg-active); color: var(--fg-on-active); }
.channel-list .unread { font-weight: 700; }
.channel-list .channel-label { display: grid; min-width: 0; }
.channel-list .channel-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-list .partner { font-size: 11px; font-weight: 400; color: var(--fg-muted); padding-left: 1.4em; }
.channel-list button[aria-current="true"] .partner { color: inherit; opacity: .8; }
.badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; min-width: 18px; text-align: center; }
.channel-form { padding: 4px 8px; }
.channel-form button { width: 100%; border: 1px dashed var(--border); background: transparent; border-radius: 6px; padding: 6px 8px; text-align: left; cursor: pointer; color: var(--fg-muted); }
.channel-form button:hover { background: var(--bg-hover); color: var(--fg); }
.channel-list .not-joined:not([aria-current="true"]) { color: var(--fg-muted); }
.member-status-list li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.member-status-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--online); flex: none; }
.member-status-list li.offline { color: var(--fg-muted); }
.member-status-list li.offline::before { background: var(--offline); }
.member-status-list .member-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-actions { flex: none; border: 0; background: none; border-radius: 4px; padding: 0 6px; font-size: 16px; line-height: 20px; cursor: pointer; color: var(--fg-muted); }
.member-actions:hover, .member-actions[aria-expanded="true"] { background: var(--bg-hover); color: var(--fg); }
.member-menu { position: fixed; right: auto; width: max-content; }

/* チャット */
.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.chat-header h1 { font-size: 17px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.menu { display: none; border: 0; background: none; font-size: 20px; cursor: pointer; padding: 0 4px; }
.status { margin-left: auto; font-size: 12px; color: var(--danger); }
/* メッセージの検索（チャンネル名の横の検索ボックスと、検索中にメッセージ欄の上に出す案内） */
.search-form { flex: 0 1 220px; min-width: 0; display: flex; gap: 4px; }
.search-form:has(.search-mode:not([hidden])) { flex-basis: 300px; }
.search-mode { flex: none; border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; font: inherit; font-size: 13px; background: var(--bg); color: var(--fg); }
.search-form input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; background: var(--bg); color: var(--fg); }
.search-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search-bar { display: flex; align-items: center; gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--border); background: var(--bg-sidebar); font-size: 13px; }
.search-summary { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--fg-muted); }
.search-clear { flex: none; border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 4px 14px; font-size: 13px; cursor: pointer; color: var(--fg); }
.search-clear:hover { background: var(--bg-hover); }
.search-match { background: color-mix(in srgb, #ffd43b 55%, transparent); color: inherit; border-radius: 2px; }
/* 類似メッセージの検索で見つかったメッセージ（スレッドのほかのメッセージと区別する） */
.message.similar-match { box-shadow: inset 3px 0 0 color-mix(in srgb, #ffd43b 80%, transparent); background: color-mix(in srgb, #ffd43b 12%, transparent); }
.messages { flex: 1; overflow-y: auto; padding: 12px 0; }
.load-older { display: block; margin: 0 auto 12px; border: 1px solid var(--border); background: none; border-radius: 999px; padding: 4px 14px; font-size: 13px; cursor: pointer; color: var(--fg-muted); }
.message-list { list-style: none; margin: 0; padding: 0; }
.message { padding: 2px 20px; }
.message:hover { background: var(--bg-hover); }
.message.first { margin-top: 10px; }
.message-meta { display: flex; align-items: baseline; gap: 8px; }
.author { font-weight: 700; }
/* 投稿者のアバター（名前の前に表示する） */
.avatar { flex: none; align-self: center; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.time { font-size: 12px; color: var(--fg-muted); }
.body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.day-divider { display: flex; align-items: center; gap: 12px; margin: 16px 20px 4px; font-size: 12px; color: var(--fg-muted); }
.day-divider::before, .day-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.empty { text-align: center; color: var(--fg-muted); padding: 40px 20px; }

/* メンション（@ログイン ID）。自分へのメンションと、自分をメンションしたメッセージは目立たせる */
.mention { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 4px; padding: 0 2px; }
.mention.me { font-weight: 600; background: color-mix(in srgb, var(--accent) 24%, transparent); }
/* エマージェンシーメンション（!@ログイン ID。通知を受け取る時間帯の外でも通知する） */
.mention.emergency { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); font-weight: 600; }
.message.mentioned { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 3px 0 var(--accent); }
.message.mentioned:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* AI チャット（AI へのメンション・AI の返信・作成中の表示・AI を使えるチャンネルの表示） */
.mention.ai { color: var(--ai); background: color-mix(in srgb, var(--ai) 12%, transparent); }
.ai-label { font-size: 11px; font-weight: 600; color: var(--ai); border: 1px solid var(--ai); border-radius: 4px; padding: 0 4px; }
.message.ai .author { color: var(--ai); }
/* 入力中の表示（スレッドの返信を入力中なら、スレッドの末尾に字下げして表示する） */
.typing { padding: 6px 20px; font-size: 13px; color: var(--fg-muted); }
.ai-typing, .typing.in-thread { position: relative; padding: 6px 20px 6px 56px; font-size: 13px; color: var(--fg-muted); }
.ai-typing::before, .typing.in-thread::before { content: ""; position: absolute; left: 32px; top: 0; bottom: 0; border-left: 2px solid var(--border); }
.ai-option, .read-option { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0 !important; color: var(--fg) !important; cursor: pointer; }
.ai-option input, .read-option input { margin-top: 3px; }
.ai-option > span, .read-option > span { display: grid; gap: 2px; }

/* スレッド（返信は親メッセージの下に字下げして表示する） */
.message { position: relative; }
.message-actions { position: absolute; top: -12px; right: 20px; display: none; }
.message:hover .message-actions, .message:focus-within .message-actions { display: flex; gap: 4px; }
.message.first .message-actions { top: 0; }
.reply-button { border: 1px solid var(--border); background: var(--bg); border-radius: 6px; padding: 2px 10px; font-size: 12px; cursor: pointer; color: var(--fg-muted); }
.reply-button:hover { color: var(--fg); }
.message.reply, .reply-form-item { padding-left: 56px; }
.message.reply::before, .reply-form-item::before { content: ""; position: absolute; left: 32px; top: 0; bottom: 0; border-left: 2px solid var(--border); }
.message.reply.first { margin-top: 0; padding-top: 6px; } /* margin だと縦線が途切れる */
.reply-form-item { position: relative; padding-top: 6px; padding-bottom: 8px; padding-right: 20px; }
.reply-composer { display: flex; gap: 8px; align-items: flex-end; }
.reply-composer > button { flex: none; border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 600; background: var(--accent); color: #fff; }
.reply-composer > button.cancel { background: none; color: var(--fg-muted); font-weight: 400; padding: 8px 6px; }
.reply-composer > button:disabled { opacity: .5; cursor: default; }

/* 絵文字だけのメッセージは大きく表示する */
.body.emoji-only { font-size: 32px; line-height: 1.3; }
.message-list.bubble .message > .body.emoji-only { background: none; border-color: transparent; padding: 0 4px; }

/* リアクション（メッセージの下に、絵文字とリアクションした人数を並べる。自分がリアクションした絵文字は強調する） */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.reaction { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--fg-muted); font-size: 12px; cursor: pointer; }
.reaction:hover { border-color: var(--fg-muted); }
.reaction[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--accent); font-weight: 600; }
.reaction[aria-disabled="true"] { cursor: default; }
.reaction[aria-disabled="true"]:hover { border-color: var(--border); }
.reaction-emoji { font-size: 15px; line-height: 1; }
.reaction.add-reaction { padding: 0 8px; font-size: 13px; }
.message-list.bubble .message.mine .reactions { justify-content: flex-end; }

/* 既読（自分以外のメンバーが最後に読んだメッセージの右下に、アバターかイニシャルを小さく並べる） */
.read-receipts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 2px; margin: 2px 0; }
.message-list.bubble .message > .read-receipts { align-self: stretch; }
.read-receipt { flex: none; width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.read-receipt.initial { display: grid; place-items: center; background: var(--border); color: var(--fg-muted); font-size: 10px; font-weight: 600; line-height: 1; }

/* 編集（本文の位置に入力欄を表示する） */
.edited { margin-left: 4px; font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.edit-composer { padding: 4px 0 6px; }
/* 削除したメッセージ（本文の代わりに「削除されました」と表示する） */
.message.deleted > .deleted-body { color: var(--fg-muted); font-style: italic; }
.delete-button:hover { color: var(--danger); }

/* 吹き出しの表示（個人設定）。自分のメッセージを右側、ほかの人のメッセージを左側に表示し、本文を吹き出しで囲む */
.message-list.bubble .message { display: flex; flex-direction: column; align-items: flex-start; }
.message-list.bubble .message.mine { align-items: flex-end; }
.message-list.bubble .message.mine .author, .message-list.bubble .message.mine .avatar { display: none; } /* 自分の名前・アバターは省いて時刻だけ表示する */
.message-list.bubble .message > .body { max-width: min(80%, 640px); margin: 2px 0; padding: 6px 12px; border-radius: 16px; background: var(--bg-sidebar); border: 1px solid var(--border); }
.message-list.bubble .message.mine > .body { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); border-color: transparent; }
.message-list.bubble .message.mine .attachments { justify-content: flex-end; }
.message-list.bubble .message > .edit-composer { align-self: stretch; }
.message-list.bubble .message.mine .message-actions { right: auto; left: 20px; } /* 吹き出しと重ならないよう左側に表示する */
/* 自分をメンションしたメッセージは、行全体ではなく吹き出しを強調する */
.message-list.bubble .message.mentioned { background: none; box-shadow: none; }
.message-list.bubble .message.mentioned:hover { background: var(--bg-hover); }
.message-list.bubble .message.mentioned > .body { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); border: 2px solid var(--accent); padding: 5px 11px; }

/* 参加していないチャンネルでは、入力欄の代わりに参加の案内を表示する */
.join-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px 16px; border-top: 1px solid var(--border); background: var(--bg-sidebar); }
.join-bar p { margin: 0; color: var(--fg-muted); font-size: 14px; }
.join-bar button { border: 0; background: var(--accent); color: #fff; border-radius: 8px; padding: 8px 18px; cursor: pointer; font-weight: 600; }

.composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.login-form button { border: 0; background: var(--accent); color: #fff; border-radius: 8px; padding: 0 18px; cursor: pointer; font-weight: 600; }

/* 入力欄（Markdown を WYSIWYG で編集する。書式のツールバー付き） */
.md-editor { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.md-editor:focus-within { outline: 2px solid var(--accent); border-color: transparent; }
.md-toolbar { display: flex; gap: 2px; padding: 3px 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.md-tool { flex: none; min-width: 28px; height: 26px; border: 0; border-radius: 4px; background: none; padding: 0 6px; font-size: 13px; color: var(--fg-muted); cursor: pointer; }
.md-tool:nth-child(2) { font-weight: 700; } /* 1 つ目は絵文字 */
.md-tool:nth-child(3) { font-style: italic; font-family: Georgia, serif; }
.md-tool:nth-child(4) { text-decoration: line-through; }
.md-tool:nth-child(5), .md-tool:nth-child(10) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.md-tool:hover { background: var(--bg-hover); color: var(--fg); }
.md-tool[aria-pressed="true"] { background: var(--bg-hover); color: var(--accent); }
.md-input { padding: 8px 12px; max-height: 200px; overflow-y: auto; line-height: 1.5; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-composer .md-input { max-height: 160px; padding: 6px 10px; }
.md-input p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--fg-muted); pointer-events: none; }

/* Markdown の本文（メッセージ・入力欄・要約で共通） */
:is(.body, .md-input, .summary-body) > :first-child { margin-top: 0; }
:is(.body, .md-input, .summary-body) > :last-child { margin-bottom: 0; }
:is(.body, .md-input, .summary-body) :is(p, ul, ol, blockquote, pre, h1, h2, h3) { margin: 0 0 4px; }
:is(.body, .md-input, .summary-body) :is(ul, ol) { padding-left: 1.5em; }
:is(.body, .md-input, .summary-body) ul { list-style-type: disc; } /* メッセージ一覧（ol）の中なので、指定しないと入れ子のリストの記号になる */
:is(.body, .md-input, .summary-body) ul ul { list-style-type: circle; }
:is(.body, .md-input, .summary-body) ul ul ul { list-style-type: square; }
:is(.body, .md-input, .summary-body) li > :is(p, ul, ol) { margin: 0; }
:is(.body, .md-input, .summary-body) :is(h1, h2, h3) { line-height: 1.3; margin-top: 8px; }
:is(.body, .md-input, .summary-body) h1 { font-size: 1.3em; }
:is(.body, .md-input, .summary-body) h2 { font-size: 1.15em; }
:is(.body, .md-input, .summary-body) h3 { font-size: 1em; }
:is(.body, .md-input, .summary-body) blockquote { padding-left: 10px; border-left: 3px solid var(--border); color: var(--fg-muted); }
:is(.body, .md-input, .summary-body) code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; padding: 1px 4px; border-radius: 4px; background: var(--bg-sidebar); border: 1px solid var(--border); }
:is(.body, .md-input, .summary-body) pre { padding: 8px 10px; border-radius: 6px; background: var(--bg-sidebar); border: 1px solid var(--border); overflow-x: auto; white-space: pre; }
:is(.body, .md-input, .summary-body) pre code { padding: 0; border: 0; background: none; font-size: .88em; }
:is(.body, .md-input, .summary-body) a { color: var(--accent); }
:is(.body, .md-input, .summary-body) hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }
.error { margin: 0 20px 12px; color: var(--danger); font-size: 13px; }

/* チャンネルのメニュー（チャンネル上部の右端: AI・メンバー・アーカイブ） */
.channel-menu-list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: grid; min-width: 200px; max-width: calc(100vw - 32px); padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / .15); }
.channel-menu-list button { border: 0; background: none; border-radius: 4px; padding: 8px 10px; text-align: left; font-size: 14px; cursor: pointer; color: var(--fg); }
.channel-menu-list button:hover, .channel-menu-list button:focus-visible { background: var(--bg-hover); }
.channel-menu-list button.danger { color: var(--danger); }
.ai-badge { margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--ai); }
.ai-badge small { display: block; margin-top: 2px; color: var(--fg-muted); }

/* 要約（画面右のパネル） */
.panel-button { flex: none; border: 0; background: none; border-radius: 6px; font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer; color: var(--fg); }
.panel-button:hover, .panel-button[aria-expanded="true"] { background: var(--bg-hover); }
/* 右ペイン（要約・チャンネル情報のタブ） */
.side-panel { width: 360px; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--bg-sidebar); }
.side-panel-header { display: flex; align-items: flex-end; gap: 8px; padding: 8px 16px 0; border-bottom: 1px solid var(--border); }
.side-panel-tabs { flex: 1; display: flex; gap: 4px; min-width: 0; }
.side-panel-tabs button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 8px 10px; font-size: 14px; cursor: pointer; color: var(--fg-muted); }
.side-panel-tabs button:hover { color: var(--fg); }
.side-panel-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--fg); font-weight: 600; }
.side-panel-close { align-self: center; border: 0; background: none; font-size: 20px; line-height: 1; padding: 0 4px; cursor: pointer; color: var(--fg-muted); }
.side-panel-close:hover { color: var(--fg); }
.side-panel-content { flex: 1; overflow-y: auto; padding: 16px; }
.summary-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.summary-refresh { border: 0; background: var(--accent); color: #fff; border-radius: 8px; padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.summary-refresh:disabled { opacity: .5; cursor: default; }
.summary-empty { margin: 0 0 12px; color: var(--fg-muted); font-size: 13px; }
.summary-stale { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--accent); color: var(--accent); font-size: 13px; }
.summary-loading { margin: 0 0 12px; color: var(--fg-muted); font-size: 13px; }
.summary-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 14px; }
.summary-body h2 { font-size: 1.05em; }
.summary-meta { margin: 16px 0 0; color: var(--fg-muted); font-size: 12px; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.file-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: var(--fg); text-decoration: none; }
.file-item:hover { background: var(--bg-hover); }
.file-thumb { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.file-thumb-image { position: relative; display: block; line-height: 0; }
.file-thumb-image img { display: block; max-width: 44px; max-height: 44px; }
.file-thumb-image .drawing-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.file-thumb.attachment-icon { font-size: 22px; }
.file-text { display: grid; min-width: 0; font-size: 14px; }
.file-meta { font-size: 12px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-more { display: block; margin: 12px auto 0; border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 8px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.files-more:disabled { opacity: .5; cursor: default; }

/* ログイン */
.login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--bg-sidebar); }
.login-form { display: grid; gap: 10px; width: min(360px, 100%); border: 1px solid var(--border); border-radius: 12px; padding: 28px; background: var(--bg); }
.login-form h1 { margin: 0 0 8px; font-size: 20px; }
.login-form label { font-size: 13px; color: var(--fg-muted); }
.login-form input { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.login-form input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.login-form button { padding: 10px; margin-top: 6px; }
.login-form button:disabled { opacity: .5; cursor: default; }
.login-error { margin: 0; color: var(--danger); font-size: 13px; }
.google-login { display: grid; gap: 10px; }
.google-login[hidden] { display: none; }
.google-login .divider { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--fg-muted); }
.google-login .divider::before, .google-login .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.google-login a { display: block; text-align: center; padding: 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--fg); text-decoration: none; font-weight: 600; }
.google-login a:hover { background: var(--bg-hover); }

/* 設定 */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button.primary { border: 0; background: var(--accent); color: #fff; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
button.primary:disabled { opacity: .5; cursor: default; }
.settings-layout { grid-template-columns: 260px 1fr; }
#category-nav { margin-top: 12px; }
.settings-close { flex: none; font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 6px; color: var(--fg-muted); text-decoration: none; }
.settings-close:hover { background: var(--bg-hover); color: var(--fg); }
.category-list a { display: block; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; }
.category-list a:hover { background: var(--bg-hover); }
.category-list a[aria-current="true"] { background: var(--bg-active); color: var(--fg-on-active); }
/* iOS Safari では中身が収まっていても横にスクロールできてしまうことがあるため、横方向はスクロールさせない（表は .table-wrap の中で横にスクロールする） */
.settings-content { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 20px 20px 40px; }
.settings-content > * { max-width: 960px; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-header .primary { flex: none; white-space: nowrap; }
.settings-content .error { margin: 0 0 12px; }
/* position: relative で表の中の visually-hidden（position: absolute）の基準にし、横スクロールの中に収める（ページが横にはみ出さないようにする） */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.user-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.user-table th, .user-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.user-table th { font-size: 12px; font-weight: 600; color: var(--fg-muted); background: var(--bg-sidebar); }
.user-table tbody tr:last-child td { border-bottom: 0; }
.user-table .login { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.user-table .you { color: var(--fg-muted); font-size: 12px; }
.user-table .actions { text-align: right; }
.user-table .actions button { border: 1px solid var(--border); background: none; border-radius: 999px; padding: 2px 12px; font-size: 12px; cursor: pointer; margin-left: 6px; }
.user-table .actions button:hover:not(:disabled) { background: var(--bg-hover); }
.user-table .actions button:disabled { opacity: .4; cursor: default; }
.user-table .actions .danger { color: var(--danger); }
.auth { display: inline-block; border-radius: 999px; padding: 0 8px; font-size: 12px; border: 1px solid var(--border); }
.auth-admin { border-color: var(--accent); color: var(--accent); }
.section-hint { margin-bottom: 16px; }
.channel-table .number { text-align: right; font-variant-numeric: tabular-nums; }
.channel-table th:nth-child(5) { text-align: right; }
.channel-table .members { color: var(--fg-muted); }
.visibility-private { border-color: var(--accent); color: var(--accent); }
.channel-table .channel-active { font-size: 12px; color: var(--fg-muted); }
.channel-table .channel-ai { font-size: 12px; color: var(--ai); }
.channel-table tr.archived .channel-name { color: var(--fg-muted); }
.user-dialog { border: 1px solid var(--border); border-radius: 12px; padding: 0; width: min(400px, calc(100% - 32px)); background: var(--bg); color: var(--fg); }
.user-dialog::backdrop { background: rgb(0 0 0 / .35); }
.user-dialog form { display: grid; gap: 8px; padding: 24px; }
.user-dialog h2 { margin: 0 0 8px; font-size: 18px; }
.user-dialog label { font-size: 13px; color: var(--fg-muted); margin-top: 4px; }
.user-dialog input, .user-dialog select { font: inherit; color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--bg); }
.user-dialog input:focus, .user-dialog select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.user-dialog select:disabled { opacity: .6; }
.hint { margin: 0; font-size: 12px; color: var(--fg-muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.settings-form { display: grid; gap: 8px; max-width: 520px; }
.settings-form .hint { margin-bottom: 4px; }
.settings-form label { font-size: 13px; color: var(--fg-muted); margin-top: 4px; }
.settings-form input, .settings-form select { font: inherit; color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--bg); }
.settings-form input:focus, .settings-form select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.settings-form input[readonly] { color: var(--fg-muted); }
.settings-form select { min-width: 0; } /* 選択肢の文字列が長くてもフォームの幅に収める */
/* 設定の項目のまとまり（個人設定のプロフィール・時間の表示など）。見出しを付けて区切る */
.settings-group { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-group + .settings-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.settings-group legend { float: left; width: 100%; padding: 0; font-size: 15px; font-weight: 700; } /* float にすると grid の項目として並ぶ */
.key-status { margin-left: 6px; font-size: 12px; }
/* AI の設定で、使う AI に応じて出し分ける項目のまとまり（中身はフォームのグリッドにそのまま並べる） */
.ai-fields { display: contents; }
.key-status.registered { color: var(--online); }
/* 設定画面のチェックボックスの項目 */
.settings-form .check-option { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--fg); font-size: 14px; cursor: pointer; }
.settings-form .check-option input { padding: 0; accent-color: var(--accent); }
.similar-index { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.similar-index button { border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.similar-index button:hover:not(:disabled) { background: var(--bg-hover); }
.similar-index button:disabled { cursor: default; opacity: .6; }
/* 個人設定の通知（この端末の通知の状態・受け取る時間帯。時間指定では 0〜23 時台を選ぶ） */
.notify-options { display: grid; gap: 8px; min-width: 0; }
.notify-options[hidden], .notify-hours-options[hidden] { display: none; }
.notify-device { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.notify-device button { border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.notify-device button:hover:not(:disabled) { background: var(--bg-hover); }
.notify-device button:disabled { cursor: default; opacity: .6; }
.settings-form .field-label { font-size: 13px; color: var(--fg-muted); margin-top: 8px; }
.notify-schedule { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.notify-schedule .check-option { margin-top: 0; }
.notify-hours-options { display: grid; gap: 8px; min-width: 0; }
.notify-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 4px; }
.settings-form .notify-hours label { position: relative; margin: 0; }
.notify-hours input { position: absolute; opacity: 0; pointer-events: none; }
.notify-hours span { display: block; border: 1px solid var(--border); border-radius: 6px; padding: 4px 0; text-align: center; font-size: 13px; color: var(--fg-muted); cursor: pointer; user-select: none; }
.notify-hours span:hover { background: var(--bg-hover); }
.notify-hours input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--fg-on-active); }
.notify-hours input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 個人設定のアバター（画像か「なし」と、選ぶ・削除のボタン） */
.avatar-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.avatar-preview { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.avatar-preview[hidden], .avatar-field button[hidden] { display: none; }
.avatar-none { display: grid; place-items: center; border: 1px dashed var(--border); font-size: 12px; color: var(--fg-muted); }
.avatar-field button { border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.avatar-field button:hover:not(:disabled) { background: var(--bg-hover); }
.avatar-field button:disabled { cursor: default; opacity: .6; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }
.form-actions .hint { margin-right: auto; }
button.danger-outline { border: 1px solid var(--border); background: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; color: var(--danger); }
button.danger-outline:disabled { opacity: .5; cursor: default; }
/* チャンネルの作成・設定ダイアログ */
.channel-dialog { width: min(460px, calc(100% - 32px)); }
.visibility-options { display: grid; gap: 6px; border: 0; margin: 4px 0 0; padding: 0; }
.visibility-options legend, .members-label { font-size: 13px; color: var(--fg-muted); margin: 4px 0 4px; padding: 0; }
.visibility-option { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; cursor: pointer; margin: 0 !important; color: var(--fg) !important; }
.visibility-option:has(input:checked) { border-color: var(--accent); }
.visibility-option input { margin-top: 3px; }
.visibility-option > span { display: grid; gap: 2px; }
.member-list { list-style: none; margin: 0; padding: 4px 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.member-list label { display: flex; align-items: center; gap: 8px; padding: 4px 12px; margin: 0 !important; color: var(--fg) !important; font-size: 14px; cursor: pointer; }
.member-list label:hover { background: var(--bg-hover); }
.member-list .member-login { color: var(--fg-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-list .you { color: var(--fg-muted); font-size: 12px; }
.member-list:empty::after { content: "該当するユーザーがいません"; display: block; padding: 8px 12px; color: var(--fg-muted); font-size: 13px; }
.channel-settings .leave-button { margin-right: auto; }
/* 設定画面の「外部連携」 */
.bot-table .bot-channels { white-space: normal; min-width: 160px; color: var(--fg-muted); }
.bot-table .bot-tokens { white-space: normal; }
.bot-tokens ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bot-tokens li { display: flex; align-items: center; gap: 8px; }
.bot-tokens code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: nowrap; }
.bot-tokens .hint { white-space: nowrap; }
.bot-tokens button { flex: none; white-space: nowrap; border: 1px solid var(--border); background: none; border-radius: 999px; padding: 0 10px; font-size: 12px; cursor: pointer; color: var(--danger); }
.bot-tokens button:hover:not(:disabled) { background: var(--bg-hover); }
.bot-table .empty { color: var(--fg-muted); text-align: center; }
.usage-dialog { width: min(560px, calc(100% - 32px)); }
.usage-dialog #usage-hint { margin: 0; font-size: 14px; }
.usage-dialog pre { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-sidebar); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-x: auto; }
.bot-dialog { width: min(460px, calc(100% - 32px)); }
.bot-channel-field, .bot-ai-field { display: grid; gap: 8px; }
.bot-ai-field textarea { font: inherit; color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--bg); resize: vertical; }
.bot-ai-field textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.bot-ai-field .members-label { margin-bottom: 0; }
.token-dialog { width: min(520px, calc(100% - 32px)); }
.token-warning { color: var(--danger); }
/* 読み取り専用の値とコピーのボタン（API トークン） */
.copy-field { display: flex; gap: 6px; }
.copy-field input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 13px !important; }
.copy-field button { flex: none; border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.copy-field button:hover { background: var(--bg-hover); }
.channel-settings input:is([type="checkbox"], [type="radio"]) { padding: 0; accent-color: var(--accent); }
/* 右ペインの「チャンネル情報」（ダイアログと同じ入力欄を右ペインの幅で表示する） */
#channel-info .channel-settings { display: grid; gap: 8px; }
#channel-info label { font-size: 13px; color: var(--fg-muted); margin-top: 4px; }
#channel-info input:not([type="checkbox"], [type="radio"]) { font: inherit; color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--bg); }
#channel-info input:focus { outline: 2px solid var(--accent); border-color: transparent; }
#channel-info .member-list { max-height: none; background: var(--bg); }
/* 退出・アーカイブは右ペインの下に寄せ、幅いっぱいに広げる（どちらも表示しなければ区切りの線も出さない） */
#info-tabpanel { display: flex; flex-direction: column; }
#channel-info { margin-bottom: 20px; }
.panel-actions { display: grid; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.panel-actions:not(:has(> :not([hidden]))) { display: none; }
.panel-actions button { width: 100%; }
.archive-section { display: grid; gap: 6px; }
.dialog-actions button:not(.primary) { border: 1px solid var(--border); background: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; }

/* モバイル */
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); z-index: 10; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .35); }
  .menu { display: block; }
  .side-panel { position: fixed; inset: 0 0 0 auto; width: min(360px, 90vw); z-index: 10; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .35); }
  .chat-header, .composer, .search-bar { padding-left: 16px; padding-right: 16px; }
  .chat-header { gap: 8px; }
  .search-form { flex-basis: 140px; }
  .search-form:has(.search-mode:not([hidden])) { flex-basis: 200px; }
  .message { padding: 2px 16px; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-content { padding: 16px 16px 32px; }
  /* iOS は 16px 未満の入力欄をタップすると画面を拡大し、そのまま横にスクロールできてしまうため、設定画面の入力欄は 16px にする */
  .settings-form :is(input, select), .user-dialog :is(input, select, textarea) { font-size: 16px; }
  .message-actions { right: 16px; }
  .message.reply, .reply-form-item { padding-left: 40px; }
  .message.reply::before, .reply-form-item::before { left: 22px; }
  .reply-form-item { padding-right: 16px; }
  .message-list.bubble .message.mine .message-actions { left: 16px; }
}

@media (hover: none) {
  /* タッチ端末ではホバーできないので返信ボタンを常に表示する */
  .message-actions { position: static; display: flex; gap: 12px; margin-top: 2px; }
  .reply-button { padding: 0; border: 0; background: none; }
  /* 返信の返信ボタンは親と同じスレッドに返信するだけなので省く */
  .message.reply .message-actions .reply-button:not(.edit-button, .delete-button, .reaction-button) { display: none; }
}

/* メンション・絵文字のサジェスト（入力欄で「@」「:」を入力すると出る） */
.suggest { position: absolute; z-index: 20; list-style: none; margin: 0; padding: 4px; min-width: 200px; max-width: min(360px, calc(100vw - 16px)); max-height: 240px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / .15); }
.suggest li { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.suggest li:hover { background: var(--bg-hover); }
.suggest li[aria-selected="true"] { background: var(--bg-active); color: var(--fg-on-active); }
.suggest-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-sub { font-size: 12px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest li[aria-selected="true"] .suggest-sub { color: inherit; opacity: .85; }
.suggest-emoji { flex: none; width: 1.4em; font-size: 18px; line-height: 1; text-align: center; }
.emoji-suggest li { align-items: center; }

/* 絵文字のピッカー（入力欄のツールバーの 😀・リアクションのボタンで開く） */
.md-tool.md-emoji { font-size: 15px; }
.emoji-picker { position: fixed; z-index: 30; display: flex; flex-direction: column; width: min(344px, calc(100vw - 16px)); height: min(380px, calc(100vh - 16px)); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 24px rgb(0 0 0 / .2); overflow: hidden; }
.emoji-search { margin: 8px 8px 4px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; }
.emoji-search:focus { outline: 2px solid var(--accent); border-color: transparent; }
.emoji-tabs { display: flex; justify-content: space-between; padding: 0 6px 4px; border-bottom: 1px solid var(--border); }
.emoji-tab { border: 0; background: none; border-radius: 6px; padding: 2px 4px; font-size: 18px; line-height: 1.3; cursor: pointer; }
.emoji-tab:hover { background: var(--bg-hover); }
.emoji-list { flex: 1; overflow-y: auto; padding: 0 6px 6px; overscroll-behavior: contain; }
.emoji-section h3 { position: sticky; top: 0; margin: 0; padding: 6px 4px 4px; font-size: 12px; font-weight: 600; color: var(--fg-muted); background: var(--bg); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.emoji-option { border: 0; background: none; border-radius: 6px; height: 36px; padding: 0; font-size: 22px; line-height: 1; cursor: pointer; }
.emoji-option:hover, .emoji-option:focus-visible { background: var(--bg-hover); outline: none; }
.emoji-message { margin: 24px 0; text-align: center; font-size: 13px; color: var(--fg-muted); }
.emoji-preview { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--fg-muted); }
.emoji-preview-emoji { font-size: 24px; line-height: 1; }
.emoji-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 添付ファイル（メッセージの画像・ファイルと、入力欄で添付するファイルの一覧） */
.attachments { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; padding: 0; }
/* お絵描きを重ねるため、リンクの大きさを画像に合わせる（幅の上限を % にすると、リンクの幅が画像より広くなる） */
.attachment-image { position: relative; display: block; line-height: 0; }
.attachment-image img { display: block; max-width: 240px; max-height: 160px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-sidebar); object-fit: contain; }
/* サムネイルに重ねるお絵描き（画像の枠線の内側に広げる） */
.attachment-image .drawing-layer { position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 7px; pointer-events: none; }
.drawing-layer path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* 文字は反対の色の縁取りを文字の下に描く */
.drawing-layer text { font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; font-weight: 700; paint-order: stroke; stroke-linejoin: round; white-space: pre; }
.attachment-video { display: block; line-height: 0; }
.attachment-video video { display: block; max-width: min(360px, 70vw); max-height: 240px; border-radius: 8px; border: 1px solid var(--border); background: #000; }
.attachment-file { display: flex; align-items: center; gap: 8px; max-width: min(360px, 100%); padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); text-decoration: none; }
.attachment-file:hover { background: var(--bg-sidebar); }
.attachment-icon { flex: none; font-size: 18px; }
.attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-size { flex: none; font-size: 12px; color: var(--fg-muted); }
/* 入力欄の枠（書式のツールバー・入力欄・添付ファイルの一覧・操作パネルをまとめて囲む） */
.composer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.composer-main:focus-within { outline: 2px solid var(--accent); border-color: transparent; }
.composer-main > .md-editor { border: 0; background: none; }
.composer-main > .md-editor:focus-within { outline: none; }
.composer-main > .attachment-tray { padding: 2px 8px 6px; }
/* 操作パネル（入力欄の下。左にファイルの添付、右に送信） */
.composer-actions { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border-top: 1px solid var(--border); }
.composer-actions-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.composer-actions .cancel { border: 0; background: none; color: var(--fg-muted); padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.composer-actions .cancel:hover { background: var(--bg-hover); color: var(--fg); }
/* 紙飛行機のアイコンの送信ボタン（下の入力欄・スレッドの返信） */
.send-button { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; padding: 4px 12px; background: var(--accent); color: #fff; cursor: pointer; }
.send-button:disabled { opacity: .5; cursor: default; }
.send-button svg { display: block; width: 18px; height: 18px; }
.attach { flex: none; display: flex; }
.attach-button { border: 0; background: none; font-size: 16px; padding: 4px 6px; cursor: pointer; border-radius: 6px; line-height: 1; }
.attach-button:hover { background: var(--bg-hover); }
.attachment-tray { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.attachment-chip { display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 4px 4px 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-sidebar); font-size: 13px; }
.attachment-chip img { flex: none; width: 32px; height: 32px; object-fit: cover; border-radius: 4px; }
.attachment-chip-text { display: grid; min-width: 0; }
.attachment-chip.uploading { opacity: .7; }
.attachment-chip.error { border-color: var(--danger); }
.attachment-chip.error .attachment-size { color: var(--danger); }
.attachment-remove { flex: none; border: 0; background: none; color: var(--fg-muted); font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px; cursor: pointer; }
.attachment-remove:hover { background: var(--bg-hover); color: var(--fg); }
/* 画像を画面いっぱいに表示するビューア（お絵描きの編集もここで行う） */
.image-viewer { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: rgb(0 0 0 / .88); color: #fff; outline: none; -webkit-tap-highlight-color: transparent; }
.viewer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; background: rgb(0 0 0 / .4); }
.viewer-title { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.viewer-tools, .viewer-actions, .viewer-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.viewer-tools { gap: 6px 14px; }
.viewer-button { border: 1px solid rgb(255 255 255 / .35); background: none; color: #fff; border-radius: 8px; padding: 5px 12px; font-size: 14px; line-height: 1.3; cursor: pointer; text-decoration: none; white-space: nowrap; }
.viewer-button:hover:not(:disabled) { background: rgb(255 255 255 / .15); }
.viewer-button:disabled { opacity: .45; cursor: default; }
.viewer-button.primary { background: var(--accent); border-color: var(--accent); }
.viewer-button.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); }
.viewer-button[aria-pressed="true"], .viewer-button[aria-pressed="true"]:hover:not(:disabled) { background: #fff; color: #000; }
.viewer-close { padding: 2px 10px; font-size: 20px; }
.viewer-color { width: 26px; height: 26px; padding: 0; border: 2px solid rgb(255 255 255 / .5); border-radius: 50%; background: var(--pen); cursor: pointer; }
.viewer-color[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 2px; }
.viewer-color:disabled { opacity: .3; cursor: default; }
.viewer-color:disabled[aria-pressed="true"] { outline: none; }
/* 画像は縦横比を保って、ツールバーの下の領域いっぱいに広げる（--ratio は画像の幅 / 高さ） */
.viewer-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px; container-type: size; }
.viewer-canvas { position: relative; width: min(100cqw, 100cqh * var(--ratio, 1)); aspect-ratio: var(--ratio, 1); }
.viewer-canvas.loading { visibility: hidden; }
.viewer-canvas img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.viewer-canvas .drawing-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.viewer-canvas .drawing-layer.editing { pointer-events: auto; cursor: crosshair; touch-action: none; }
.viewer-canvas .drawing-layer.editing[data-tool="eraser"] { cursor: cell; }
.viewer-canvas .drawing-layer.editing[data-tool="text"] { cursor: text; }
/* 押したところに出す文字の入力欄（左上が文字の位置） */
.viewer-text-input { position: absolute; z-index: 1; width: min(16em, 90vw); max-width: calc(100% - var(--x, 0px)); margin: 0; padding: 0; border: 0; outline: 2px dashed rgb(255 255 255 / .8); outline-offset: 2px; background: rgb(0 0 0 / .25); font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1; }
.viewer-text-input::placeholder { color: rgb(255 255 255 / .6); }
.image-viewer.editing .viewer-canvas { outline: 2px dashed rgb(255 255 255 / .5); outline-offset: 4px; }
.viewer-error { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 14px; }

/* ファイルをドラッグしている間、ドロップできる場所を示す */
.dropping { outline: 2px dashed var(--accent); outline-offset: -4px; }