:root { --primary: #5b5fc7; --bg: #ffffff; --item-hover: #f3f3f3; --text-main: #242424; --text-sub: #616161; --sidebar-bg: #33344a; }
body { font-family: sans-serif; margin: 0; background: var(--bg); height: -webkit-fill-available; height: 100dvh; overflow: hidden; position: fixed; width: 100%; color: var(--text-main); }
#loginScreen { position: fixed; inset: 0; background: #f0f2f5; z-index: 5000; display: flex; align-items: center; justify-content: center; padding-top: env(safe-area-inset-top); box-sizing: border-box; }
#loginBox { width: 90%; max-width: 350px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
#chatScreen { display: none; height: 100%; width: 100%; overflow: hidden; touch-action: pan-y; }
#mainContainer { display: flex; height: 100%; width: 100%; position: relative; overflow: hidden; touch-action: pan-y; }
#leftPane { width: 280px; background: var(--sidebar-bg); color: white; display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.3s ease, transform 0.3s ease; z-index: 2000; padding-top: env(safe-area-inset-top); }
#centerPane { flex: 1; display: flex; flex-direction: column; background: white; min-width: 0; position: relative; z-index: 100; }
#rightPane { width: 280px; background: #fafafa; border-left: 1px solid #e0e0e0; transition: width 0.3s ease, transform 0.3s ease; z-index: 2000; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
.header { padding: env(safe-area-inset-top) 15px 0; border-bottom: 1px solid #eee; display: flex; align-items: center; background: #fff; height: 55px; position: relative; z-index: 1500; }
.mobile-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: #444; padding: 10px; z-index: 1600; }
@media (max-width: 768px) { #leftPane { position: absolute; left: 0; top: 0; height: 100%; transform: translateX(-100%); width: 85%; z-index: 3000; box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom); } #rightPane { position: absolute; right: 0; top: 0; height: 100%; transform: translateX(100%); width: 85%; z-index: 3000; box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom); } #leftPane.open, #rightPane.open { transform: translateX(0); box-shadow: 0 0 30px rgba(0,0,0,0.4); } .mobile-btn { display: block; } }
.pane-tabs { display: flex; border-bottom: 1px solid #e0e0e0; background: #eee; }
.pane-tab { flex: 1; padding: 12px 2px; text-align: center; cursor: pointer; font-size: 1rem; filter: grayscale(1); transition: 0.2s; position: relative; }
.pane-tab.active { background: #fafafa; filter: grayscale(0); border-bottom: 2px solid var(--primary); }
.pane-content { flex: 1; overflow-y: auto; padding: 15px; display: none; }
/* #tab-threadは#threadMessages自身が内部スクロール(flex:1; overflow-y:auto)を持つため、
   外側の.pane-content側の縦スクロールは不要。外側にもスクロールバーが出ると、その分だけ
   #threadInputAreaの右ブリードが短くなり右端が揃わなくなる(本来は#threadMessagesだけが
   スクロールすべき)。 */
#tab-thread { overflow-y: hidden; }
.pane-content.active { display: flex; flex-direction: column; }
.side-item { padding: 12px 15px; display: flex; align-items: center; gap: 12px; cursor: pointer; color: #eee; border-radius: 4px; margin: 2px 10px; position: relative; justify-content: flex-start; }
.side-item.active { background: rgba(255,255,255,0.15); }
.group-icon-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #555; }
.unread-badge { background: #e74c3c; color: white; font-size: 0.7rem; font-weight: bold; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; margin-left: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.2); flex-shrink: 0; }
/* 左ペインのチーム一覧で「未読のスレッド返信がある」ことを示す合図(LayChat-2x9)。
   当初🧵の赤丸バッジにしていたが「意味が分かりにくい・ごちゃごちゃする」との指摘で
   右ペインの#threadTabBadgeと同じ単純な赤い点に変更した(絵文字・件数は出さず印のみ)。
   .side-item自体がgap:12pxのflexなので、他バッジとの間隔はそれに任せて良い。 */
.thread-unread-sign { width: 10px; height: 10px; border-radius: 50%; background: #e74c3c; flex-shrink: 0; }

/* 浮動ボタン(#returnToLatestBtn/#jumpToUnreadBtn/#returnToSearchBtn)は#inputContainerの
   上に固定位置で浮くため、メッセージ一覧の下端ぎりぎりまでスクロールした際、内容(特に
   #unreadSeparator)にボタンが重なって見える問題があった(画面が狭いiPhoneで顕著)。
   ただし常に100pxの余白を確保すると、ボタンが1つも表示されていない通常時(最新まで
   読み終わった状態)にも最後のメッセージの下に無駄な空白ができてしまうため、
   いずれかのボタンが表示されている間だけ.has-floating-btnをJS(repositionFloatingButtons)
   で付与し、余白を広げる方式に変更。 */
#messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 15px 0 15px; touch-action: pan-y; }
#messages.has-floating-btn { padding-bottom: 100px; }

/* メッセージ内の画像・ファイルを長押し(主にiOS/iPadOS)でドラッグすると、ブラウザが
   ネイティブのドラッグ操作として画像を実ファイル化してしまい、ウィンドウ全体の
   ファイルドロップ投稿機能(main.jsのwindow "drop"リスナー、外部ファイルをドラッグ
   して投稿する想定)に誤って渡り、同じ添付が重複投稿されてしまう不具合があった。
   既に投稿済みの添付を再送したい場合は「転送」機能が正規の手段としてあるため、
   この誤操作経路は塞ぐ。アバター・スタンプ・OGPプレビュー画像やギャラリーの
   サムネイルも対象に含める(LayChat-20e 対応)。 */
#messages img, #messages a[download],
#threadMessages img, #threadMessages a[download],
#lightboxImage, #lightboxDownloadBtn,
.gallery-thumb {
    -webkit-user-drag: none;
    user-drag: none;
}

.message-item { display: flex; gap: 12px; padding: 8px 20px; cursor: pointer; border-left: 4px solid transparent; transition: background 0.1s; position: relative; }
/* flex子要素はデフォルトmin-width:auto=コンテンツ幅で親を伸ばす → コードブロック等が横に膨張して
   pre自体のoverflow-x:autoが効かなくなる問題があるため、明示的に min-width:0 に矯正 */
.message-item > div { min-width: 0; }
.message-item:hover { background: var(--item-hover); }
.message-item.highlight { animation: fadeHighlight 4s ease-out forwards; }
body.dark-mode .message-item.highlight { animation: fadeHighlightDark 2.5s ease-out forwards; }
@keyframes fadeHighlight { 0% { background: #fff3cd; } 100% { background: transparent; } }
@keyframes fadeHighlightDark { 0% { background: rgba(143, 163, 255, 0.4); } 100% { background: transparent; } }
.message-item.mention-me { background: #fff0f0; border-left: 4px solid #e74c3c; }
body.dark-mode .message-item.mention-me { background: #3a2020; border-left: 4px solid #e05555; }
/* スレッド返信のメンション: 既存レイアウト崩さないよう padding + border-radius で軽く囲う */
.thread-msg.mention-me { background: #fff0f0; border-left: 3px solid #e74c3c; padding: 6px 10px; border-radius: 6px; }
body.dark-mode .thread-msg.mention-me { background: #3a2020; border-left: 3px solid #e05555; }
/* スレッド返信もflex子要素にmin-width:0を強制(コードブロック横スクロール対策) */
.thread-msg > div { min-width: 0; }
.all-mention-badge { display: inline-flex; align-items: center; background: #e74c3c; color: #fff; font-size: 0.7rem; font-weight: bold; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.02em; }
body.dark-mode .all-mention-badge { background: #c0392b; color: #ffe5e5; }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #ddd; flex-shrink: 0; }
.msg-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; line-height: 1; }
.msg-username { font-weight: bold; font-size: 0.9rem; }
.read-info-inline { display: flex; align-items: center; gap: 4px; }
.read-badge { display: inline-flex; align-items: center; position: relative; cursor: pointer; padding: 1px 4px; border-radius: 4px; transition: 0.2s; user-select: none; opacity: 0.4; font-size: 0.7rem; font-weight: bold; }
.read-badge.active { opacity: 1; }
.tooltip { visibility: hidden; position: absolute; bottom: 130%; background: #333; color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 1.1em; white-space: nowrap; opacity: 0; transition: 0.2s; z-index: 100; left: 50%; transform: translateX(-50%); pointer-events: none; }
.read-badge:hover .tooltip { visibility: visible; opacity: 1; }
.message-text { font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.parent-quote { background: #f0f0f0; border-left: 3px solid var(--primary); padding: 5px 10px; margin-bottom: 8px; font-size: 0.8rem; color: #666; border-radius: 4px; cursor: pointer; }
.parent-quote-user { font-weight: bold; color: var(--primary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parent-quote-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.reaction-container { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.reaction-badge { position: relative; background: #f0f0f0; border: 1px solid #ddd; border-radius: 12px; padding: 2px 8px; font-size: 0.75rem; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.reaction-badge.active { background: #e8ebfa; border-color: var(--primary); }
.reaction-badge:hover .tooltip { visibility: visible; opacity: 1; }
/* リアクションはメッセージ下部にあり、通常の.tooltip(上方向)だと短いメッセージでは
   上にある既読アイコン(ヘッダー部)に重なって見えなくなることがあった。リアクションの
   ツールチップだけ下方向に表示先を変えて重なりを避ける(次のメッセージとの間の余白を使う)。 */
.reaction-badge .tooltip { bottom: auto; top: 130%; }
.bottom-sheet { position: fixed; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(calc(100% + env(safe-area-inset-bottom) + 30px)); width: 95%; max-width: 500px; background: white; border-radius: 20px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 4000; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.bottom-sheet.open { transform: translateX(-50%) translateY(0); }
.reaction-bar { display: flex; justify-content: space-around; padding: 15px; border-bottom: 1px solid #eee; background: #fafafa; border-radius: 20px 20px 0 0; }
.reaction-btn { font-size: 1.6rem; cursor: pointer; transition: transform 0.1s; }
.menu-item { padding: 16px 24px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; font-size: 1rem; user-select: none; color: #333; }
.menu-item:hover { background: #f8f9fa; }
.menu-item:last-child { border-bottom: none; border-radius: 0 0 20px 20px; }
/* メイン/スレッド共通の入力エリアの箱型(.chat-input-areaクラス)。両者で縦位置がズレないよう
   padding関連は必ずこのクラス1箇所にまとめ、#inputContainer/#threadInputArea個別には
   書かない(既存の重複定義による位置ズレの再発防止)。 */
.chat-input-area { padding: 8px 12px; padding-bottom: max(5px, calc(env(safe-area-inset-bottom) - 30px)); background: #f8f9fa; box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.04); position: relative; z-index: 1000; width: 100%; box-sizing: border-box; flex-shrink: 0; }
body.dark-mode .chat-input-area { background: #1e1e1e; }
#inputContainer { width: 100%; box-sizing: border-box; }
@media (max-width: 768px) { .chat-input-area { padding-left: 0; padding-right: 0; } .chat-input-area .thread-input-box { border-radius: 0 !important; border-left: none !important; border-right: none !important; box-shadow: none !important; } }
.input-row { display: flex; align-items: flex-end; padding: 10px 15px 5px 15px !important; box-sizing: border-box; gap: 8px; }
textarea { flex: 1; border: 1px solid #ddd; border-radius: 12px; padding: 10px 12px; font-size: 16px; resize: none; background: #f8f8f8; line-height: 1.4; min-height: 44px; max-height: 150px; }
.file-btn { background: #ffffff; border: 1px solid #ddd; color: #555; width: 44px; height: 44px; border-radius: 50%; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: 0.2s; }
.send-btn { background: var(--primary); color: white; height: 44px; padding: 0 20px; border: none; border-radius: 22px; font-weight: bold; cursor: pointer; flex-shrink: 0; }
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 2500; backdrop-filter: blur(2px); }
.overlay.show { display: block; }
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 4500; align-items: center; justify-content: center; }
.modal-content { background: white; padding: 25px; border-radius: 16px; width: 90%; max-width: 450px; -webkit-overflow-scrolling: touch; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; }
.gallery-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; cursor: pointer; background: #eee; transition: 0.2s; }
.search-fixed-header { padding: 15px; background: #fff; border-bottom: 1px solid #eee; flex-shrink: 0; }
#searchResults { flex: 1; overflow-y: auto; padding: 10px 15px; }
.search-input-wrapper { display: flex; gap: 5px; background: #f0f0f0; border-radius: 8px; padding: 5px 10px; align-items: center; }
.search-input-wrapper input { flex: 1; border: none; background: transparent; padding: 8px; font-size: 0.9rem; outline: none; }
.clear-search-btn { cursor: pointer; color: #999; font-size: 1.2rem; padding: 0 5px; }
#mentionSuggest { position: absolute; bottom: 100%; left: 0; width: 100%; background: white; border: 1px solid #ddd; border-radius: 8px; display: none; flex-direction: column; z-index: 2000; box-shadow: 0 -5px 20px rgba(0,0,0,0.1); color: #333; }
.suggest-item { padding: 12px; cursor: pointer; border-bottom: 1px solid #eee; }
.suggest-item.selected { background: #e8ebfa; }
.reply-preview-box { background: #f0f0f0; color: #333; }
.reply-preview-label { font-weight: bold; color: #555; }
@media (min-width: 769px) { #rightPane { position: relative !important; flex-shrink: 0; } #leftPane.collapsed, #rightPane.collapsed { width: 0 !important; overflow: hidden; } }
.resize-handle { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 2100; background: transparent; touch-action: none; }
.resize-handle:hover { background: var(--primary); opacity: 0.5; }
/* タッチ操作時は指での把持が難しいため、見た目(background:transparent)は変えず当たり判定だけ広げる */
@media (pointer: coarse) { .resize-handle { left: -9px; width: 18px; } }
@media (max-width: 768px) { .resize-handle { display: none; } #rightPane { position: absolute !important; width: 85% !important; } }
.read-group { display: inline-flex; align-items: center; cursor: pointer; padding: 2px 6px; border-radius: 12px; background: #f0f2f5; transition: 0.2s; min-height: 20px; border: 1px solid transparent; user-select: none; }
.read-group:hover { background: #e4e6e9; border-color: #ddd; }
.read-label { font-size: 0.65rem; color: #666; font-weight: bold; margin-right: 4px; }
.avatar-container { display: flex; align-items: center; }
.mini-avatar { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #fff; object-fit: cover; background: #ccc; transition: transform 0.1s; }
.mini-avatar:hover { transform: scale(1.3); z-index: 10; position: relative; }
/* 既読アイコンのユーザー名表示(.tooltip)は.reaction-badgeと同じ方式。ネイティブtitle属性の
   表示遅延(1秒前後)を避けるため、position:relativeな親(.mini-avatar-wrap)を挟んで
   .tooltipを乗せる(imgは子要素を持てないため) */
/* .tooltipはfont-size:1.1em(親基準)のため、.reaction-badge(font-size:0.75rem)と
   同じ基準フォントサイズをここでも明示し、表示サイズを揃える */
.mini-avatar-wrap { display: inline-block; position: relative; font-size: 0.75rem; }
.mini-avatar-wrap:hover .tooltip { visibility: visible; opacity: 1; }
.mini-avatar-wrap:hover .mini-avatar { transform: scale(1.3); z-index: 10; position: relative; }
.more-avatar-count { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #fff; background: #ddd; color: #555; font-size: 0.55rem; font-weight: bold; display: flex; align-items: center; justify-content: center; z-index: 5; position: relative; cursor: pointer; }
.more-avatar-count:hover { background: #ccc; }
.more-avatar-count-wrap { display: inline-block; position: relative; font-size: 0.75rem; }
.more-avatar-count-wrap:hover .tooltip { visibility: visible; opacity: 1; }
.teams-action-menu { position: absolute; top: -16px; right: 16px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 10; display: inline-flex; align-items: center; background-color: #ffffff; border: 1px solid #edebe9; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 2px 4px; gap: 4px; }
.message-item:hover .teams-action-menu { opacity: 1; visibility: visible; }
/* スレッド内メッセージ(.thread-msg)にもリアクション/削除メニューをホバー表示する(LayChat-szh/LayChat-c1c) */
.thread-msg { position: relative; }
.thread-msg:hover .teams-action-menu { opacity: 1; visibility: visible; }
/* ユーザー名・時刻・既読アイコンが並ぶヘッダー部(.msg-header)をホバーしている間は
   .teams-action-menu(top:-16pxで右上に浮く)を出さない。ヘッダー部と操作メニューの
   浮き出し範囲が近く、既読アイコンのツールチップがメニューと競合していたため、
   そもそも「ヘッダーをホバー中はメニューを出さない」ことで競合自体を無くす。 */
.message-item:has(.msg-header:hover) .teams-action-menu,
.thread-msg:has(.msg-header:hover) .teams-action-menu { opacity: 0 !important; visibility: hidden !important; }
@media (max-width: 768px) { .teams-action-menu { display: none !important; } }
.reaction-group, .action-group { display: flex; align-items: center; gap: 2px; }
.divider { width: 1px; height: 20px; background-color: #e0e0e0; margin: 0 4px; }
.teams-action-menu button { background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 4px; color: #424242; transition: all 0.2s ease; font-size: 14px; position: relative; }
.teams-action-menu button:hover { background-color: #f5f5f5; }
.teams-action-menu .reaction-btn:hover { transform: scale(1.2); }
.teams-tooltip { visibility: hidden; position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; transition: opacity 0.15s ease, visibility 0.15s ease; pointer-events: none; z-index: 20; }
.teams-action-menu button:hover .teams-tooltip { visibility: visible; opacity: 1; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
/* #threadInputAreaは#tab-thread(.pane-content、15pxパディング持ち)の外、#rightPane直下に
   移設した(index.html参照)。これによりメイン側(#inputContainer、#centerPane直下で
   余白の無い親に接する)と全く同じ親子構造になり、負のmarginで親のpaddingを打ち消すような
   環境依存の調整が不要になった。表示/非表示はswitchTab()が'active'クラスで制御する。 */
#threadInputArea { display: none; }
#threadInputArea.active { display: block; }
.thread-input-toolbar { padding-bottom: 4px !important; }
textarea { transition: all 0.2s ease; }
textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 95, 199, 0.15); background: #ffffff; }

.file-btn:hover { background: #f0f2f5; color: var(--primary); transform: scale(1.05); }

.send-btn { width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.send-btn:hover { background: #4a4eb0; transform: scale(1.1); box-shadow: 0 4px 12px rgba(91, 95, 199, 0.3); }
.send-btn:active { transform: scale(0.95); }
@keyframes fadeInOverlay { from { background: rgba(0, 0, 0, 0); } to { background: rgba(0, 0, 0, 0.6); } }
.modal { animation: fadeInOverlay 0.25s ease-out forwards; }
@keyframes slideUpModal { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-content { animation: slideUpModal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 20px; color: #999; text-align: center; grid-column: 1 / -1; }
.empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; filter: grayscale(100%); }
.empty-text { font-size: 0.9rem; font-weight: bold; color: #777; }
.return-btn { display: none; position: absolute; bottom: calc(100% + 15px); right: 20px; background: var(--primary); color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1500; transition: transform 0.2s, background 0.2s; }
.return-btn:hover { transform: scale(1.05); background: #4a4eb0; }
.new-msg-badge { display: none; position: absolute; top: -4px; right: -4px; background: #e74c3c; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; }
.stamp-btn { background: #ffffff; border: 1px solid #ddd; color: #555; width: 44px; height: 44px; border-radius: 50%; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: 0.2s; }
.stamp-btn:hover { background: #f0f2f5; transform: scale(1.05); }

/* スタンプ・絵文字 統合パネル */
.media-panel { display: none; position: fixed; bottom: calc(80px + env(safe-area-inset-bottom)); right: calc(20px + env(safe-area-inset-right)); width: 320px; background: white; border: 1px solid #ddd; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 9998; flex-direction: column; overflow: hidden; }
.media-panel.show { display: flex; }
.mp-header { display: flex; align-items: center; padding: 8px 10px 0; border-bottom: 1px solid #eee; gap: 4px; }
.mp-tab-bar { display: flex; flex: 1; gap: 2px; }
.mp-tab-btn { flex: 1; padding: 7px 0; border: none; background: none; font-size: 0.88rem; font-weight: 600; color: #888; cursor: pointer; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.mp-tab-btn:hover { color: #555; background: #f5f5f5; }
.mp-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: none; }
.mp-close-btn { width: 26px; height: 26px; border: none; background: rgba(0,0,0,0.06); font-size: 0.8rem; cursor: pointer; color: #888; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; flex-shrink: 0; margin-bottom: 4px; }
.mp-close-btn:hover { background: rgba(0,0,0,0.12); color: #333; }
.mp-content { display: flex; flex-direction: column; overflow: hidden; }

.stamp-grid { padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-height: 220px; overflow-y: auto; background: #fff; }

.stamp-tabs { display: flex; background: #f0f2f5; border-top: 1px solid #e4e6eb; padding: 8px 12px; gap: 8px; overflow-x: auto; }

.stamp-tab { padding: 6px 8px; cursor: pointer; border-radius: 8px; font-size: 1.2rem; transition: 0.2s; filter: grayscale(100%); opacity: 0.4; display: flex; align-items: center; justify-content: center; min-width: 44px; }

.stamp-tab:hover { background: #e4e6eb; opacity: 0.8; }
.stamp-tab.active { filter: grayscale(0%); opacity: 1; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.08); }

.stamp-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; cursor: pointer; border-radius: 8px; transition: transform 0.1s; }
.stamp-img:hover { transform: scale(1.1); background: #f9f9f9; }

.message-stamp { max-width: 140px; max-height: 140px; object-fit: contain; margin-top: 8px; border-radius: 8px; display: block; }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; border-radius: 6px; font-size: 1.2rem; cursor: pointer; transition: 0.2s; color: #555; }
.icon-btn:hover { background: #e4e6eb; }
.send-btn-small { display: flex; align-items: center; gap: 6px; background: var(--primary); color: white; border: none; border-radius: 6px; padding: 6px 14px; font-weight: bold; cursor: pointer; font-size: 0.85rem; transition: 0.2s; }
.send-btn-small:hover { background: #4a4eb0; }

#lightboxCard { background: #fff; }
#lightboxFilename { color: #333; }
#lightboxImageArea { background: #f5f5f5; }
#lightboxFooter { color: #666; }
body.dark-mode #lightboxCard { background: #262626; }
body.dark-mode #lightboxHeader, body.dark-mode #lightboxFooter { border-color: #444; }
body.dark-mode #lightboxFilename { color: #e0e0e0; }
body.dark-mode #lightboxImageArea { background: #1a1a1a; }
body.dark-mode #lightboxFooter { color: #999; }

body.dark-mode .icon-btn { color: #aaa; }
body.dark-mode .icon-btn:hover { background: #3a3a3a; }
body.dark-mode .thread-input-box { background: #1e1e1e !important; border-color: #444 !important; }
body.dark-mode .thread-input-toolbar { background: #2a2a2a !important; border-color: #444 !important; }
body.dark-mode { --bg: #1e1e1e; --text-main: #e0e0e0; --text-sub: #aaaaaa; --sidebar-bg: #1e1e2d; --item-hover: #2a2a35; }
body.dark-mode #centerPane, body.dark-mode #rightPane, body.dark-mode .header, body.dark-mode #inputContainer, body.dark-mode .modal-content, body.dark-mode .bottom-sheet, body.dark-mode .media-panel { background: #1e1e1e; color: #e0e0e0; border-color: #333; }
body.dark-mode .mp-header { border-color: #444; }
body.dark-mode .mp-tab-btn:hover { background: #2a2a2a; color: #ccc; }
body.dark-mode .mp-close-btn { background: rgba(255,255,255,0.08); color: #aaa; }
body.dark-mode .mp-close-btn:hover { background: rgba(255,255,255,0.15); color: #e0e0e0; }
body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background: #2a2a2a; color: #e0e0e0; border-color: #444; }
body.dark-mode .pane-tabs, body.dark-mode .search-fixed-header { background: #121212; border-color: #333; }
body.dark-mode .pane-tab.active { background: #1e1e1e; color: #fff; border-bottom-color: var(--primary); }
body.dark-mode .reaction-badge { background: #2a2a2a; border-color: #444; }
body.dark-mode .parent-quote { background: #2a2a2a; color: #ccc; border-left-color: var(--primary); }
body.dark-mode .parent-quote-user { color: var(--primary); }
.thread-parent-box { background: #f8f9fa; border: 1px solid #eee; color: #333; }
body.dark-mode .thread-parent-box { background: #2a2a2a; border-color: #444; color: #ccc; }
body.dark-mode #mentionSuggest { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.dark-mode .suggest-item { border-bottom-color: #3a3a3a; }
body.dark-mode .suggest-item.selected { background: #333350; }
body.dark-mode .reply-preview-box { background: #2a2a2a; color: #ccc; }
body.dark-mode .reply-preview-label { color: #aaa; }
body.dark-mode .teams-action-menu { background: #2a2a2a; border-color: #444; }
body.dark-mode .teams-action-menu button { color: #e0e0e0; }
body.dark-mode .teams-action-menu button:hover { background-color: #3a3a3a; }
body.dark-mode .read-group { background: #2a2a2a; }
body.dark-mode .read-group:hover { background: #3a3a3a; border-color: #555; }
body.dark-mode .stamp-btn, body.dark-mode .file-btn { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.dark-mode .menu-item { color: #e0e0e0; border-bottom-color: #333; }
body.dark-mode .menu-item:hover { background: #2a2a2a; }
body.dark-mode .reaction-bar { background: #2a2a2a; border-bottom-color: #444; }
body.dark-mode #searchFilterPanel, body.dark-mode .search-input-wrapper { background: #2a2a2a; border-color: #444; }
body.dark-mode .empty-state { color: #888; }
.left-search-box { display:flex; align-items:center; background:rgba(0,0,0,0.2); border-radius:6px; padding:6px 10px; border:1px solid rgba(255,255,255,0.1); transition:0.2s; position:relative; }
.left-search-box:focus-within { border-color: var(--primary) !important; }
body.dark-mode #searchFilterPanel { background: #2a2a2a !important; border-color: #444 !important; }
body.dark-mode #searchFilterPanel label, body.dark-mode #searchFilterPanel select { color: #ccc !important; background: #1e1e1e !important; border-color: #444 !important; }
#pinnedArea { background: #fffdf5; border-bottom: 1px solid #ffeeba; padding: 10px 15px; font-size: 0.85rem; display: none; max-height: 120px; overflow-y: auto; z-index: 1400; position: relative; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.pinned-msg { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; cursor: pointer; transition: 0.2s; padding: 4px; border-radius: 4px; }
.pinned-msg:hover { background: rgba(0,0,0,0.05); }
.pinned-msg:last-child { margin-bottom: 0; }
.pinned-icon { color: #856404; flex-shrink: 0; font-size: 0.9rem; }
.pinned-content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #856404; }
body.dark-mode #pinnedArea { background: #2c2a20; border-bottom-color: #4a452a; }
body.dark-mode .pinned-content, body.dark-mode .pinned-icon { color: #d4c585; }
body.dark-mode .pinned-msg:hover { background: rgba(255,255,255,0.05); }
#typingIndicator { position: absolute; bottom: calc(100% + 5px); left: 15px; font-size: 0.8rem; color: #888; font-weight: bold; display: none; align-items: center; gap: 6px; z-index: 1000; pointer-events: none; }
.typing-dots { display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.typing-dots span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #888; animation: typingBounce 1.4s infinite ease-in-out both; }
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }
body.dark-mode #typingIndicator { color: #aaa; }
body.dark-mode .typing-dots span { background-color: #aaa; }
.ogp-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin-top: 8px; max-width: 400px; background: #fff; transition: box-shadow 0.2s; cursor: pointer; }
.ogp-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.ogp-image { width: 100%; height: 160px; object-fit: cover; background: #f9f9f9; border-bottom: 1px solid #eee; }
.ogp-content { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.ogp-title { font-weight: bold; font-size: 0.9rem; color: var(--primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ogp-desc { font-size: 0.8rem; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.ogp-site { font-size: 0.7rem; color: #999; text-transform: uppercase; margin-top: 4px; }
body.dark-mode .ogp-card { background: #2a2a2a; border-color: #444; }
body.dark-mode .ogp-image { border-bottom-color: #444; background: #333; }
body.dark-mode .ogp-desc { color: #aaa; }
body.dark-mode .ogp-title { color: #8fa3ff; }
@media (min-width: 769px) { #dragOverlay { position: absolute !important; inset: auto !important; top: 60px !important; left: 260px !important; width: calc(100% - 260px - 300px) !important; height: calc(100% - 60px - 70px) !important; border-radius: 8px; } }
.thread-count-badge { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--primary); font-size: 0.8rem; font-weight: bold; margin-top: 6px; padding: 4px 10px; background: #f0f2f5; border-radius: 12px; transition: 0.2s; position: relative; }
.thread-count-badge:hover { background: #e4e6e9; }
body.dark-mode .thread-count-badge { background: #2a2a2a; color: #8fa3ff; }
body.dark-mode .thread-count-badge:hover { background: #3a3a3a; }
/* スレッドに未読の返信が残っていることを示す赤丸(LayChat-2x9)。#pendingBadge/.new-msg-badgeと
   同じ見た目に揃えている。 */
.thread-unread-dot { display: none; position: absolute; top: -4px; right: -4px; background: #e74c3c; width: 10px; height: 10px; border-radius: 50%; border: 2px solid white; }
.thread-list-item { padding: 12px; border-bottom: 1px solid #eee; cursor: pointer; transition: 0.2s; border-left: 3px solid transparent; }
.thread-list-item:hover { background: #f8f9fa; }
.thread-list-item.has-unread { border-left-color: #e74c3c; background: rgba(231,76,60,0.06); }
body.dark-mode .thread-list-item { border-bottom-color: #333; }
body.dark-mode .thread-list-item:hover { background: #2a2a2a; }
body.dark-mode .thread-list-item.has-unread { background: rgba(231,76,60,0.12); }
/* スレッドタイトル機能(ユーザー要望2026-10-21)。🧵バッジ内のタイトルは長文で
   バッジが崩れないよう省略表示にする。パネルヘッダーの未設定時プレースホルダーは
   薄字でクリックを誘導する。 */
.thread-title-label { max-width: 160px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.thread-title-placeholder { color: #999; font-style: italic; font-weight: normal; }
body.dark-mode .thread-title-placeholder { color: #777; }
.read-detail-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-bottom: 1px solid #eee; }
.read-detail-item:last-child { border-bottom: none; }
body.dark-mode .read-detail-item { border-bottom-color: #333; }
.markdown-body { font-size: 0.95rem; line-height: 1.6; word-wrap: break-word; }
.markdown-body p { margin: 0 0 8px 0; }
.markdown-body p:last-child { margin: 0; }
.markdown-body pre { margin: 8px 0; border-radius: 6px; overflow-x: auto; font-size: 0.85rem; max-width: 100%; }
.markdown-body pre code.hljs { border-radius: 6px; font-size: 0.85rem; padding: 12px 14px; display: block; }
/* hr が親を伸ばさないよう max-width で制約(コードブロックと同じ理由) */
.markdown-body hr { max-width: 100%; border: none; border-top: 1px solid #ddd; margin: 12px 0; }
body.dark-mode .markdown-body hr { border-top-color: #444; }
.markdown-body code:not(.hljs) { background: #f0f2f5; padding: 2px 5px; border-radius: 4px; font-family: monospace; font-size: 0.85rem; color: #d63384; }
.markdown-body blockquote { margin: 8px 0; padding-left: 10px; border-left: 4px solid #ddd; color: #666; }
.markdown-body ul, .markdown-body ol { margin: 8px 0; padding-left: 20px; }
.markdown-body a { color: var(--primary); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
body.dark-mode .markdown-body code:not(.hljs) { background: #2a2a2a; color: #ff85c0; }
body.dark-mode .markdown-body blockquote { border-left-color: #555; color: #aaa; }
body.dark-mode .markdown-body blockquote { border-left-color: #555; color: #aaa; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 12px 0 6px 0; line-height: 1.3; }
.markdown-body h1 { font-size: 1.3em; }
.markdown-body h2 { font-size: 1.2em; }
.markdown-body h3 { font-size: 1.1em; }
.markdown-body p { margin: 0 0 6px 0; }
.markdown-body ul, .markdown-body ol { margin: 4px 0 8px 0; padding-left: 22px; }
.markdown-body li { margin-bottom: 2px; }
.markdown-body input[type="checkbox"] { margin-right: 6px; cursor: pointer; transform: scale(1.1); }
.markdown-body li:has(> input[type="checkbox"]) { list-style: none; margin-left: -20px; }
.message-text.markdown-body { white-space: normal !important; }
.markdown-body table { border-collapse: collapse; margin: 8px 0; font-size: 0.9em; display: block; overflow-x: auto; max-width: 100%; }
.markdown-body th, .markdown-body td { border: 1px solid #ddd; padding: 6px 12px; text-align: left; vertical-align: top; }
.markdown-body th { background: #f4f6f8; font-weight: bold; color: #333; }
.markdown-body tbody tr:nth-child(even) td { background: #fafbfc; }
body.dark-mode .markdown-body th { background: #2a2a2a; color: #e0e0e0; border-color: #444; }
body.dark-mode .markdown-body td { border-color: #444; }
body.dark-mode .markdown-body tbody tr:nth-child(even) td { background: #252525; }
.markdown-body p { margin: 0 0 6px 0; }
.markdown-body p:last-child { margin: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 16px 0 6px 0; line-height: 1.3; }
.markdown-body h1:first-child, .markdown-body h2:first-child, .markdown-body h3:first-child, .markdown-body h4:first-child { margin-top: 0; }
.markdown-body ul, .markdown-body ol { margin: 4px 0 8px 0; padding-left: 24px; }
.markdown-body li { margin-bottom: 4px; }
.markdown-body input[type="checkbox"] { margin-right: 6px; cursor: pointer; transform: scale(1.1); }
.mobile-pane-header { display: none; text-align: right; padding: 5px 15px; flex-shrink: 0; }
.mobile-pane-header button { background: none; border: none; font-size: 1.8rem; cursor: pointer; padding: 5px; transition: 0.2s; }
.mobile-pane-header button:active { transform: scale(0.9); }
@media (max-width: 768px) { .mobile-pane-header { display: block; } }
/* スマホ専用: iOSの入力フォーカス時の自動ズームを防ぐ (font-size < 16px でズームが発生する) */
/* !important を外してユーザー設定のフォントサイズ（JSインライン指定）が反映されるようにする */
@media (max-width: 768px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea,
  select { font-size: 16px; }
  /* スタンプパネルをスマホ幅に収める */
  .media-panel { width: calc(100% - 20px); left: 10px; right: 10px; }
}
body.dark-mode div[style*="background:#f8f9fa"], body.dark-mode div[style*="background: #f8f9fa"], body.dark-mode div[style*="background:#f9f9f9"], body.dark-mode div[style*="background: #f9f9f9"] { background: #2a2a2a !important; border-color: #444 !important; }
body.dark-mode label, body.dark-mode p[style*="color"], body.dark-mode span[style*="color:#666"], body.dark-mode span[style*="color:#999"], body.dark-mode div[style*="color:#666"] { color: #ccc !important; }
body.dark-mode h4[style*="color:var(--primary)"] { color: #8fa3ff !important; }
body.dark-mode button[style*="background:#e8ebfa"] { background: #2a2a35 !important; border-color: #4a4eb0 !important; color: #8fa3ff !important; }
body.dark-mode div[style*="color:#444"] { color: #ccc !important; }
body.dark-mode button[style*="background:#fff"] { background: #2a2a2a !important; border-color: #444 !important; color: #e0e0e0 !important; }
body.dark-mode #searchResults > div:hover { background: #2a2a2a !important; }
body.dark-mode .message-item.highlight { animation: fadeHighlightDark 4s ease-out forwards !important; }
@media (max-width: 768px) { #dashCustomStampSection { display: none !important; } }
/* 絵文字ピッカー */
#emojiPickerContainer { filter: drop-shadow(0 4px 20px rgba(0,0,0,0.2)); }
#emojiPicker { width: 320px; background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.ep-search { padding: 8px 8px 6px; border-bottom: 1px solid #eee; }
.ep-search input { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.85rem; outline: none; background: #fafafa; }
.ep-search input:focus { border-color: var(--primary); background: #fff; }
.ep-tabs { display: flex; padding: 4px 6px 6px; gap: 2px; border-bottom: 1px solid #eee; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #ccc transparent; }
.ep-tabs::-webkit-scrollbar { height: 6px; }
.ep-tabs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.ep-tabs::-webkit-scrollbar-track { background: transparent; }
body.dark-mode .ep-tabs { scrollbar-color: #555 transparent; }
body.dark-mode .ep-tabs::-webkit-scrollbar-thumb { background: #555; }
.ep-tab { border: none; background: none; padding: 5px 6px; font-size: 1.05rem; cursor: pointer; border-radius: 6px; flex-shrink: 0; line-height: 1; }
.ep-tab:hover { background: #f0f0f0; }
.ep-tab.active { background: #e8f0fe; }
.ep-grid { padding: 6px; display: flex; flex-wrap: wrap; max-height: 272px; overflow-y: auto; gap: 1px; }
.ep-emoji { border: none; background: none; font-size: 1.4rem; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; padding: 0; line-height: 1; }
.ep-emoji:hover { background: #f0f0f0; }
.ep-empty { width: 100%; padding: 24px 8px; text-align: center; color: #999; font-size: 0.82rem; }
body.dark-mode #emojiPicker { background: #2a2a2a; }
body.dark-mode .ep-search { border-color: #444; }
body.dark-mode .ep-search input { background: #333; border-color: #555; color: #e0e0e0; }
body.dark-mode .ep-search input:focus { border-color: var(--primary); background: #3a3a3a; }
body.dark-mode .ep-tabs { border-color: #444; }
body.dark-mode .ep-tab:hover { background: #3a3a3a; }
body.dark-mode .ep-tab.active { background: #2d3a5c; }
body.dark-mode .ep-emoji:hover { background: #3a3a3a; }
body.dark-mode .ep-empty { color: #888; }
/* 1件目のメッセージのツールチップが天井で切れないように余白を作る
   (#historySentinelがmessages内の先頭要素になるため:first-of-typeに加えて
   センチネル直後のケースも指定する。LayChat-8np) */
#messages > .message-item:first-of-type,
#messages > #historySentinel + .message-item {
    margin-top: 35px;
}
/* OAuth ボタン */
.oauth-btn { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; background: #fff; cursor: pointer; font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; transition: background 0.15s, border-color 0.15s; color: #333; }
.oauth-btn:hover { background: #f5f5f5; border-color: #bbb; }
.oauth-divider { text-align: center; margin: 16px 0 14px; position: relative; }
.oauth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e0e0e0; }
.oauth-divider span { background: white; padding: 0 12px; position: relative; color: #aaa; font-size: 0.78rem; }
body.dark-mode .oauth-btn { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.dark-mode .oauth-btn:hover { background: #333; }
body.dark-mode .oauth-divider::before { background: #444; }
body.dark-mode .oauth-divider span { background: #1e1e2e; color: #888; }
.apple-btn { background: #000 !important; border-color: #000 !important; color: #fff !important; }
.apple-btn:hover { background: #222 !important; border-color: #222 !important; }
body.dark-mode .apple-btn { background: #fff !important; border-color: #fff !important; color: #000 !important; }
body.dark-mode .apple-btn:hover { background: #e0e0e0 !important; border-color: #e0e0e0 !important; }

/* 通知設定インジケーター（表示専用）・ドロップダウン */
.side-item { position: relative; }
.side-item .group-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-indicator { font-size: 0.85rem; flex-shrink: 0; line-height: 1; pointer-events: none; }
body.dark-mode .notif-menu { background: #2a2a2a; border-color: #444; }
body.dark-mode .notif-menu-item { color: #e0e0e0; }
body.dark-mode .notif-menu-item:hover { background: #333; }
body.dark-mode .notif-menu-item.active { background: #2a2a35; color: #8fa3ff; }

/* ── WebRTC 通話UI ─────────────────────────────────────────── */
.call-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  z-index: 9995; align-items: center; justify-content: center;
}
.call-modal-box {
  background: #1a1a2e; color: #fff; border-radius: 24px;
  padding: 40px 32px; text-align: center; width: 300px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.call-avatar {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(255,255,255,0.3); margin-bottom: 16px;
}
.call-name { font-size: 1.4rem; font-weight: bold; margin: 0 0 8px; }
.call-status { color: #aaa; margin: 0 0 32px; font-size: 0.9rem; }
.call-btn-row { display: flex; gap: 24px; justify-content: center; }
.call-btn {
  border: none; color: #fff; width: 64px; height: 64px;
  border-radius: 50%; font-size: 1.6rem; cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.call-btn:hover { transform: scale(1.1); }
.call-btn-accept { background: #2ecc71; }
.call-btn-end    { background: #e74c3c; }
#callBtn:hover { background: rgba(0,0,0,0.06); }
#activeCallModal { display: flex; flex-direction: column; }
.active-call-controls {
  background: #1a1a2e; padding: 20px 24px;
  display: flex; gap: 20px; justify-content: center; align-items: center;
}
.call-ctrl-btn {
  border: none; color: #fff; width: 52px; height: 52px;
  border-radius: 50%; font-size: 1.3rem; cursor: pointer;
  background: #444; transition: background 0.2s, transform 0.15s;
}
.call-ctrl-btn:hover { transform: scale(1.08); }
.call-ctrl-btn.call-btn-end { background: #e74c3c; width: 64px; height: 64px; font-size: 1.6rem; }
.call-ctrl-off { background: #666 !important; opacity: 0.7; }

/* キーボードショートカット表示用キーキャップ */
kbd.kbd {
  display: inline-block; min-width: 20px; text-align: center;
  padding: 2px 6px; margin: 0 1px;
  font-family: 'SF Mono', 'Consolas', monospace; font-size: 0.78rem;
  background: #f3f3f8; color: var(--text-main); border: 1px solid #d5d5e0;
  border-radius: 5px; box-shadow: 0 1px 0 #c8c8d8;
}
.quick-switch-item.active, .quick-switch-item:hover { background: var(--item-hover); }