/* =========================================
   LinkAI - Refined Business Chat UI
   Design: Modern, Sophisticated, Wave-inspired
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --primary: #0098d4;
  --primary-dark: #00689f;
  --primary-light: #e8f6fc;
  --primary-glow: rgba(0, 152, 212, 0.35);

  --accent: #B34700;
  --accent-light: #fff1e6;
  --accent-glow: rgba(179, 71, 0, 0.4);

  --bg: #f4f7fa;
  --bg-deep: #e8eef4;
  --surface: #ffffff;
  --surface-elevated: #ffffff;

  --side-bg: #C5E8F4;
  --side-bg-light: #DDEEF9;
  --side-bg-hover: rgba(0,152,212,0.10);
  --side-text: #003E5C;
  --side-text-dim: #4A6575;
  --side-border: #BAE4F7;
  --sidebar-divider: #8FCBE3;

  --text: #1a2332;
  --text-body: #334155;
  --text-mute: #64748b;
  --text-faint: #64748b;

  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
  --shadow-glow: 0 0 0 4px rgba(0, 152, 212, 0.12);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: 'Plus Jakarta Sans', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  margin: 0;
  height: 100vh;
  display: flex;
  background: var(--bg);
  color: var(--text-body);
  font-size: 14px;
  letter-spacing: -0.005em;
  overflow: hidden;
}

@keyframes wave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-3deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 2px 8px var(--accent-glow); }
  50% { box-shadow: 0 2px 16px var(--accent-glow), 0 0 0 4px rgba(255, 126, 41, 0.15); }
}

@keyframes pickerFadeIn {
  from { opacity: 0; transform: translateY(4px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes highlightFlash {
  0% { box-shadow: 0 0 0 0 transparent; }
  10%, 70% {
    box-shadow: 0 0 0 3px rgba(255, 126, 41, 0.35),
                0 0 24px rgba(255, 126, 41, 0.35);
  }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* =========================================
   SIDEBAR
========================================= */
.sidebar {
  width: 272px;
  background: var(--side-bg);
  color: var(--side-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  border-right: 1px solid var(--sidebar-divider);
}
.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,152,212,0.3) 50%, transparent 100%);
}

.sidebar-header {
  padding: 13px 12px 9px;
  border-bottom: 1px solid var(--side-border);
  position: relative;
}
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  background: white;
  border: 1px solid var(--side-border);
  border-radius: 8px;
}
.logo-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.logo-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--side-text);
  flex: 1;
  letter-spacing: -0.01em;
}
.logo-ai-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  background: #e0f4fd;
  color: #0077a8;
  border: 1px solid #b0dcf0;
  border-radius: 99px;
}

.user-info {
  padding: 14px 22px;
  border-bottom: 1px solid rgba(0,152,212,0.15);
  border-top: 1px solid rgba(0,152,212,0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,152,212,0.06);
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative;
}
.user-avatar::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--side-bg);
}
.user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--side-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.section-title {
  padding: 14px 22px 6px;
  font-size: 12px;
  color: var(--side-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.room-list {
  padding: 0 8px;
}
.room-item {
  padding: 9px 14px;
  margin-bottom: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition);
  color: var(--side-text);
  font-size: 17px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  position: relative;
}
.room-item:hover {
  background: var(--side-bg-hover);
  color: var(--side-text);
}
.room-item.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px var(--primary-glow);
}
.room-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--primary-glow);
}

.add-room-btn {
  margin: 8px 16px;
  padding: 7px 16px;
  background: transparent;
  color: var(--side-text-dim);
  border: 1.5px solid rgba(0,152,212,0.45);
  border-radius: 50px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition);
  letter-spacing: 0.02em;
  text-align: center;
  width: calc(100% - 32px);
}
.add-room-btn:hover {
  background: rgba(0, 152, 212, 0.12);
  border-color: var(--primary);
  border-style: solid;
  color: var(--side-text);
}

.user-list {
  padding: 0 8px 12px;
}
.user-list-item {
  padding: 8px 14px;
  margin-bottom: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: var(--transition);
  color: var(--side-text);
  font-size: 14px;
  border-radius: var(--radius-sm);
  position: relative;
}
.user-list-item:hover {
  background: var(--side-bg-hover);
  color: var(--side-text);
}
.user-list-item.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px var(--primary-glow);
}
.user-list-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--primary-glow);
}
.user-list-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}
.user-list-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.user-list-empty {
  padding: 10px 22px;
  font-size: 12px;
  color: var(--side-text-dim);
  font-style: italic;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 5px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* ROOM AVATARS */
.room-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.18);
  letter-spacing: -0.02em;
}
.room-item .room-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.room-item.active .room-avatar {
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.25);
}

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.18);
  letter-spacing: -0.02em;
}

/* =========================================
   MAIN AREA
========================================= */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
  position: relative;
}
.main::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 152, 212, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.header {
  background: var(--surface);
  color: var(--text);
  padding: 18px 28px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

/* MESSAGES */
#messages {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}
#messages li {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 420px !important;
  animation: fadeInUp 0.3s ease-out;
  position: relative;
}
#messages li.other {
  align-self: flex-start;
}
#messages li.self {
  align-self: flex-end;
  align-items: flex-end;
  max-width: 420px;
}

.name-label {
  font-size: 12px;
  margin-bottom: 5px;
  padding: 0 6px;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.bubble-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  position: relative;
}
#messages li.self .bubble-wrapper {
  flex-direction: row-reverse;
}

.bubble {
  padding: 8px 14px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;
  white-space: pre-wrap;
  line-height: 1.4;
  font-size: 14px;
  position: relative;
  letter-spacing: -0.003em;
}
.bubble br + br {
  display: none;
}
#messages li.other .bubble {
  background: var(--surface);
  color: var(--text);
  border-radius: 4px 16px 16px 16px;
  border: none;
  box-shadow: 0 1px 6px rgba(0, 100, 180, 0.10);
}
#messages li.self .bubble {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border-radius: 16px 4px 16px 16px;
  box-shadow: 0 4px 14px rgba(0, 152, 212, 0.22);
}

.time {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  margin-bottom: 2px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.empty-message {
  text-align: center;
  color: var(--text-mute);
  margin: 60px auto;
  font-size: 14px;
  padding: 24px 32px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  max-width: 320px;
  box-shadow: var(--shadow-sm);
}

/* FORM */
#form {
  background: var(--surface);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 10px 14px 14px;
  gap: 0;
  align-items: stretch;
}
/* J案: 入力欄全体を角丸ボックスで囲む */
#form > #mention-popup ~ textarea,
#input {
  border-radius: 10px 10px 0 0;
}
.form-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}
#form-inner-box {
  border: 1px solid #c0dced;
  border-radius: 10px;
  background: white;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s, box-shadow 0.18s;
  flex: 1;
  cursor: text;
}
#form-inner-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,152,212,0.08);
}
#input {
  flex: 1;
  padding: 9px 13px;
  border: none;
  border-radius: 0;
  font-size: 13px;
  outline: none;
  background: transparent;
  transition: var(--transition);
  font-family: inherit;
  letter-spacing: -0.003em;
  resize: none;
  min-height: 36px;
  overflow-y: hidden;
}
#input::placeholder {
  color: var(--text-faint);
}
#input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: var(--shadow-glow);
}
#input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.send-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  background: #f97316;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: var(--transition);
  font-family: inherit;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
button.send-btn:hover:not(:disabled) {
  background: var(--primary-dark);
}
button.send-btn:active:not(:disabled) {
  opacity: 0.9;
}
button.send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#messages::-webkit-scrollbar {
  width: 10px;
}
#messages::-webkit-scrollbar-track {
  background: transparent;
}
#messages::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.1);
  border-radius: 5px;
  border: 2px solid var(--bg);
}
#messages::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.2);
}

/* DELETE BUTTON */
.delete-btn {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition);
  font-weight: 600;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
}
#messages li:hover .delete-btn {
  opacity: 1;
}
.delete-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* MENTION */
.mention {
  background: linear-gradient(180deg, transparent 55%, #fff3b0 55%, #ffeb6e 100%);
  color: var(--primary-dark);
  padding: 0 4px;
  border-radius: 2px;
  font-weight: 700;
  display: inline-block;
  margin: 0 1px;
  font-size: 0.96em;
  letter-spacing: -0.01em;
  box-shadow: none;
}
#messages li.self .mention {
  background: linear-gradient(180deg, transparent 55%, rgba(255, 240, 150, 0.7) 55%, rgba(255, 230, 100, 0.85) 100%);
  color: white;
  box-shadow: none;
}

#messages li.mentioned .bubble {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe7d1 100%) !important;
  color: #7c4a1a !important;
  border: 2px solid var(--accent) !important;
  box-shadow: 0 4px 16px var(--accent-glow) !important;
}
#messages li.mentioned .name-label {
  color: var(--accent) !important;
}
#messages li.mentioned .name-label::after {
  content: " 🔔";
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

/* UNREAD BADGE */
.unread-badge {
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: auto;
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--accent-glow);
  letter-spacing: 0.02em;
  animation: badge-pulse 2s ease-in-out infinite;
}
.room-item.active .unread-badge,
.user-list-item.active .unread-badge {
  background: white;
  color: var(--accent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  animation: none;
}

/* =========================================
   REPLY (返信機能)
========================================= */

/* 返信ボタン */
.reply-btn {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition);
  font-weight: 600;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  margin-right: 4px;
}
#messages li:hover .reply-btn {
  opacity: 1;
}
.reply-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 8px var(--primary-glow);
}

/* 返信元の表示 - 控えめな縦線スタイル(LINE WORKS 風) */
.reply-quote {
  display: block;
  font-size: 12px;
  padding: 2px 0 4px 10px;
  margin: 0 0 8px;
  background: transparent;
  border-left: 3px solid rgba(0, 152, 212, 0.45);
  border-radius: 0;
  color: var(--text-mute);
  max-width: 100%;
  line-height: 1.4;
  cursor: pointer;
  transition: opacity 0.15s ease;
  position: relative;
  opacity: 0.75;
}
.reply-quote:hover {
  opacity: 1;
  background: transparent;
}
.reply-quote:active {
  opacity: 1;
}

/* 自分のメッセージ内の引用 */
#messages li.self .reply-quote {
  background: transparent;
  border-left-color: rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.85);
  opacity: 0.92;
}
#messages li.self .reply-quote:hover {
  opacity: 1;
  background: transparent;
}
#messages li.self .reply-quote:active {
  background: transparent;
}

.reply-quote-name {
  font-weight: 600;
  font-size: 11px;
  margin-bottom: 1px;
  letter-spacing: -0.005em;
  color: var(--primary-dark);
  opacity: 0.85;
}
#messages li.self .reply-quote-name {
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.95;
}

.reply-quote-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: -0.003em;
}

/* ジャンプ先メッセージのハイライト(3.5秒) */
#messages li.highlight-target .bubble {
  animation: highlightFlash 3.5s ease-in-out;
  position: relative;
  z-index: 2;
}

/* 入力欄上の返信先プレビュー */
.reply-preview {
  background: var(--primary-light);
  border-top: 1px solid var(--border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideDown 0.2s ease-out;
}
.reply-preview-content {
  flex: 1;
  min-width: 0;
  border-left: 3px solid var(--primary);
  padding: 4px 0 4px 10px;
}
.reply-preview-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}
.reply-preview-text {
  font-size: 13px;
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply-preview-text #reply-preview-name {
  font-weight: 600;
  color: var(--primary-dark);
}
.reply-cancel-btn {
  background: transparent;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 500;
  transition: var(--transition);
}
.reply-cancel-btn:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

/* =========================================
   REACTIONS
========================================= */
.reaction-btn {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 9px;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition);
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  margin-right: 4px;
  line-height: 1;
}
#messages li:hover .reaction-btn {
  opacity: 1;
}
.reaction-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 8px var(--primary-glow);
  transform: scale(1.05);
}

.reaction-picker {
  position: fixed;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18),
              0 2px 8px rgba(15, 23, 42, 0.06);
  display: flex;
  gap: 2px;
  animation: pickerFadeIn 0.15s ease-out;
}
.reaction-pick-btn {
  background: transparent;
  border: none;
  padding: 6px 8px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: var(--transition);
  line-height: 1;
}
.reaction-pick-btn:hover {
  background: var(--primary-light);
  transform: scale(1.2);
}
.reaction-pick-btn:active {
  transform: scale(1.1);
}

.reactions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding: 0 4px;
}
#messages li.self .reactions-bar {
  justify-content: flex-end;
}
.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
  color: var(--text-body);
  line-height: 1;
  user-select: none;
}
.reaction-chip:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.reaction-chip.self-reacted {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.reaction-chip-emoji {
  font-size: 14px;
}
.reaction-chip-count {
  font-size: 11px;
  font-weight: 700;
  min-width: 8px;
  text-align: center;
}

/* =========================================
   ATTACHMENT
========================================= */
.attach-btn {
  width: 42px;
  height: 42px;
  background: var(--bg);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  font-weight: 300;
  transition: var(--transition);
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}
.attach-btn:hover:not(:disabled) {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
  transform: rotate(90deg);
}
.attach-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.attachment-preview {
  background: var(--primary-light);
  border-top: 1px solid var(--border);
  padding: 12px 24px;
  animation: slideDown 0.2s ease-out;
}
.attachment-preview-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
.attachment-preview-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.attachment-preview-icon img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.attachment-preview-info {
  flex: 1;
  min-width: 0;
}
.attachment-preview-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-preview-size {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
}
.attachment-cancel-btn {
  background: transparent;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: var(--transition);
  flex-shrink: 0;
}
.attachment-cancel-btn:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

.message-attachment {
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
  max-width: 340px;
}
.message-attachment-image {
  display: block;
  max-width: 240px;
  max-height: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border);
}
.message-attachment-image:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.message-attachment-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: var(--transition);
  max-width: 320px;
}
.message-attachment-file:hover {
  background: rgba(0,152,212,0.08);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#messages li.self .message-attachment-file {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: white;
}
#messages li.self .message-attachment-file:hover {
  background: rgba(255,255,255,0.22);
}
.message-attachment-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}
.message-attachment-info {
  flex: 1;
  min-width: 0;
}
.message-attachment-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachment-size {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

.image-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: zoom-out;
  animation: modal-fade 0.2s ease-out;
}
.image-viewer img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  animation: modal-rise 0.3s ease-out;
}
.image-viewer-close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}
.image-viewer-close:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.08);
}

/* =========================================
   MODAL (ユーザー登録モーダル)
========================================= */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: modal-fade 0.3s ease-out;
}
.modal-content {
  background: var(--surface);
  padding: 44px 40px 36px;
  border-radius: 20px;
  width: 440px;
  max-width: 90%;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25),
              0 0 0 1px rgba(255,255,255,0.5) inset;
  text-align: center;
  animation: modal-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.modal-content::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}
.modal-content::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}
.modal-content > * {
  position: relative;
  z-index: 1;
}
.modal-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.modal-logo::before {
  content: '〰️';
  font-size: 28px;
  animation: wave 3s ease-in-out infinite;
}
.modal-content h2 {
  margin: 12px 0 6px;
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.modal-content p {
  color: var(--text-mute);
  margin: 6px 0 24px;
  font-size: 14px;
  line-height: 1.6;
}
.modal-content input {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  margin-bottom: 14px;
  outline: none;
  transition: var(--transition);
  font-family: inherit;
  background: var(--bg);
}
.modal-content input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: var(--shadow-glow);
}
.modal-content button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 6px 16px var(--primary-glow);
  font-family: inherit;
  letter-spacing: 0.01em;
}
.modal-content button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 152, 212, 0.4);
}
.modal-content button:active {
  transform: translateY(0);
}
.modal-note {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 18px;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* =========================================
   HAMBURGER MENU (スマホ用)
========================================= */
.hamburger-btn {
  display: none;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
  backdrop-filter: blur(2px);
  animation: modal-fade 0.2s ease-out;
}
.sidebar-overlay.visible {
  display: block;
}

/* =========================================
   RESPONSIVE - SMARTPHONE
========================================= */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
  
  .hamburger-btn {
    display: flex;
  }
  
  .sidebar {
    position: fixed;
    top: 0;
    left: -288px;
    height: 100vh;
    width: 280px;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    box-shadow: 4px 0 24px rgba(0,0,0,0.2);
  }
  .sidebar.open {
    left: 0;
  }
  
  .header {
    padding: 14px 16px;
    font-size: 16px;
    gap: 12px;
  }
  
  #messages {
    padding: 16px 12px;
    gap: 12px;
  }
  
  #messages li {
    max-width: 85%;
  }
  
  .bubble {
    font-size: 15px;
    padding: 11px 14px;
  }
  
  .reaction-btn,
  .reply-btn,
  .delete-btn {
    opacity: 0.7;
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .name-label {
    font-size: 13px;
  }
  
  #form {
    padding: 12px 12px 14px;
    gap: 8px;
  }
  #input {
    padding: 11px 16px;
    font-size: 15px;
  }
  button.send-btn {
    padding: 11px 20px;
    font-size: 14px;
  }
  .attach-btn {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  
  .modal-content {
    padding: 32px 24px 28px;
    width: 92%;
  }
  .modal-content h2 {
    font-size: 20px;
  }
  
  .reaction-pick-btn {
    padding: 10px 12px;
    font-size: 24px;
  }
  
  .reply-preview {
    padding: 8px 16px;
  }
  
  .attachment-preview {
    padding: 10px 12px;
  }
  
  .reaction-chip {
    padding: 5px 11px;
    font-size: 13px;
  }
}

/* タッチデバイス */
@media (hover: none) {
  .reaction-btn,
  .reply-btn,
  .delete-btn {
    opacity: 0.5;
  }
}

/* iPhone セーフエリア */
@supports (padding: max(0px)) {
  #form {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* =========================================
   THEME SWITCHER (テーマ切り替え機能)
========================================= */

/* ヘッダー右側のアクションエリア */
.header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* テーマ切り替えボタン */
.theme-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.theme-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: rotate(15deg);
}

/* テーマ選択メニュー */
.theme-menu {
  position: fixed;
  top: 70px;
  right: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18),
              0 4px 12px rgba(15, 23, 42, 0.08);
  z-index: 1000;
  min-width: 280px;
  animation: pickerFadeIn 0.18s ease-out;
}
.theme-menu-header {
  padding: 8px 12px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}
.theme-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  text-align: left;
}
.theme-option:hover {
  background: var(--bg);
}
.theme-option-preview {
  width: 44px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.theme-preview-line {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.theme-preview-line::after {
  content: '';
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 18px;
  height: 10px;
  background: white;
  border-radius: 3px 3px 3px 0;
}
.theme-preview-chatwork {
  background: #ffffff;
}
.theme-preview-chatwork::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 5px;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
}
.theme-preview-chatwork::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 7px;
  right: 4px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  box-shadow: 0 7px 0 var(--border-light);
}
.theme-option-info {
  flex: 1;
  min-width: 0;
}
.theme-option-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1px;
}
.theme-option-desc {
  font-size: 11px;
  color: var(--text-mute);
}
.theme-option-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.5);
  transition: var(--transition);
}
.theme-option.active .theme-option-check {
  opacity: 1;
  transform: scale(1);
}
.theme-option.active {
  background: var(--primary-light);
}

/* =========================================
   CHATWORK THEME (Chatwork風スタイル)
========================================= */

/* Chatwork テーマ時のメッセージレイアウト */


/* アバター(Chatwork は左に表示、message-sender-avatar を流用) */


/* 吹き出しを廃止、フラットなブロックに */

/* メッセージヘッダー(名前+時間) */

/* 吹き出しのスタイルを完全リセット */

/* 時間表示を名前の横へ */

/* 自分のメッセージも左寄せ(背景だけ違う) */

/* メンション(Chatwork 風の薄いハイライト) */

/* 引用ブロック - Chatwork 風 */

/* ボタン類(Chatwork は右上にコンパクトに) */

/* リアクションは下にチップ表示 */

/* 添付ファイル(画像も控えめに) */

/* メンション通知の見た目 */

/* テーマメニューのスマホ対応 */
@media (max-width: 768px) {
  .theme-menu {
    right: 12px;
    left: 12px;
    min-width: auto;
    top: 64px;
  }
    }

/* =========================================
   COLOR PRESETS (配色テーマ)
========================================= */

/* === Forest Green 🌿 === */
body.color-forest {
  --primary: #10b981;
  --primary-dark: #047857;
  --primary-light: #ecfdf5;
  --primary-glow: rgba(16, 185, 129, 0.35);
  --accent: #f59e0b;
  --accent-light: #fef3c7;
  --accent-glow: rgba(245, 158, 11, 0.4);
  --side-bg: #1c2e26;
  --side-bg-light: #2a4035;
  --side-bg-hover: #364f43;
}

/* === Sunset Orange 🌅 === */
body.color-sunset {
  --primary: #f97316;
  --primary-dark: #c2410c;
  --primary-light: #fff7ed;
  --primary-glow: rgba(249, 115, 22, 0.35);
  --accent: #8b5cf6;
  --accent-light: #f3f0ff;
  --accent-glow: rgba(139, 92, 246, 0.4);
  --side-bg: #2a1f1a;
  --side-bg-light: #3a2d25;
  --side-bg-hover: #4a3b30;
}

/* === Royal Purple 💜 === */
body.color-purple {
  --primary: #8b5cf6;
  --primary-dark: #6d28d9;
  --primary-light: #f5f3ff;
  --primary-glow: rgba(139, 92, 246, 0.35);
  --accent: #ec4899;
  --accent-light: #fdf2f8;
  --accent-glow: rgba(236, 72, 153, 0.4);
  --side-bg: #1f1a2e;
  --side-bg-light: #2d2640;
  --side-bg-hover: #3d3450;
}

/* === Midnight Dark 🌙 === */
body.color-midnight {
  --primary: #3b82f6;
  --primary-dark: #1d4ed8;
  --primary-light: #1e293b;
  --primary-glow: rgba(59, 130, 246, 0.45);
  --accent: #fbbf24;
  --accent-light: #422f00;
  --accent-glow: rgba(251, 191, 36, 0.5);
  --bg: #0f1117;
  --bg-deep: #060810;
  --surface: #1a1d2e;
  --surface-elevated: #232843;
  --side-bg: #0a0d14;
  --side-bg-light: #14182a;
  --side-bg-hover: #1c2237;
  --side-text: #e5e7eb;
  --side-text-dim: #94a3b8;
  --side-border: rgba(255,255,255,0.08);
  --text: #f1f5f9;
  --text-body: #cbd5e1;
  --text-mute: #94a3b8;
  --text-faint: #64748b;
  --border: #2d3548;
  --border-light: #232a3d;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Midnight 専用調整 */
body.color-midnight #messages li.other .bubble {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
body.color-midnight .header {
  background: var(--surface);
}
body.color-midnight #form {
  background: var(--surface);
}
body.color-midnight #input {
  background: var(--bg);
  color: var(--text);
}
body.color-midnight .modal-content {
  background: var(--surface);
}
body.color-midnight .modal-content h2 {
  color: var(--text);
}
body.color-midnight .modal-content input {
  background: var(--bg);
  color: var(--text);
}
body.color-midnight .reaction-picker,
body.color-midnight .theme-menu,
body.color-midnight .reaction-chip,
body.color-midnight .reaction-btn,
body.color-midnight .reply-btn,
body.color-midnight .delete-btn {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
body.color-midnight .reply-preview,
body.color-midnight .attachment-preview {
  background: var(--surface-elevated);
}
body.color-midnight .add-room-btn {
  color: var(--side-text-dim);
}
body.color-midnight .empty-message {
  background: var(--surface);
  color: var(--text-mute);
}
body.color-midnightbody.color-midnightbody.color-midnight
/* =========================================
   COLOR PRESET SELECTOR (色選択メニュー)
========================================= */

.theme-menu-section {
  border-top: 1px solid var(--border-light);
  margin-top: 6px;
  padding-top: 6px;
}

.color-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  text-align: left;
}
.color-option:hover {
  background: var(--bg);
}
.color-option.active {
  background: var(--primary-light);
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
}
.color-swatch.color-blue {
  background: linear-gradient(135deg, #0098d4 0%, #00689f 100%);
}
.color-swatch.color-forest {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}
.color-swatch.color-sunset {
  background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
}
.color-swatch.color-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}
.color-swatch.color-midnight {
  background: linear-gradient(135deg, #1a1d2e 0%, #0a0d14 100%);
  border: 1px solid #2d3548;
}
.color-swatch.color-midnight::after {
  content: '✨';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}

.color-option-info {
  flex: 1;
  min-width: 0;
}
.color-option-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1px;
}
.color-option-desc {
  font-size: 11px;
  color: var(--text-mute);
}
.color-option-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.5);
  transition: var(--transition);
}
.color-option.active .color-option-check {
  opacity: 1;
  transform: scale(1);
}

/* =========================================
   AI THINKING ANIMATION (考え中表示)
========================================= */
.ai-thinking-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px 16px 16px 16px;
  box-shadow: var(--shadow-sm);
}

.ai-thinking-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: thinkingPulse 1.4s ease-in-out infinite;
  opacity: 0.5;
}
.ai-thinking-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.ai-thinking-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes thinkingPulse {
  0%, 80%, 100% {
    transform: scale(0.7);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* AI が考え中のリストアイテム全体 */
#messages li.ai-thinking {
  align-self: flex-start;
  animation: fadeInUp 0.3s ease-out;
}
#messages li.ai-thinking .name-label {
  color: var(--primary);
}

/* Chatwork テーマでも対応 */

/* Midnight テーマでも対応 */
body.color-midnight .ai-thinking-bubble {
  background: var(--surface);
  border-color: var(--border);
}

/* =========================================
   READ RECEIPT (既読表示)
========================================= */

/* 既読数表示(自分のメッセージの下) */
.read-receipt {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
  padding: 0 8px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
  align-self: flex-end;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.read-receipt:hover {
  color: var(--primary);
}
.read-receipt-icon {
  font-size: 10px;
}

/* 自分のメッセージ用(右寄せ) */
#messages li.self .read-receipt {
  align-self: flex-end;
}

/* Chatwork テーマ用 */

/* DM での既読/未読表示 */
.read-receipt.dm-read {
  color: var(--primary);
}
.read-receipt.dm-unread {
  color: var(--text-faint);
}

/* =========================================
   READERS MODAL (既読者一覧)
========================================= */
.readers-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  animation: modal-fade 0.2s ease-out;
}
.readers-modal-content {
  background: var(--surface);
  border-radius: 16px;
  width: 380px;
  max-width: 92%;
  max-height: 70vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
  animation: modal-rise 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.readers-modal-header {
  padding: 18px 22px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
}
.readers-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.readers-modal-close {
  background: transparent;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 20px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: var(--transition);
}
.readers-modal-close:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}
.readers-modal-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.readers-section-title {
  padding: 12px 22px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.reader-item {
  padding: 8px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text);
}
.reader-item-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.reader-item-name {
  flex: 1;
  font-weight: 500;
}
.reader-item-status {
  font-size: 11px;
  color: var(--text-faint);
}
.reader-item.unread .reader-item-name {
  color: var(--text-faint);
}

/* =========================================
   AI STATUS INDICATOR (ヘッダーの状態表示)
========================================= */
.ai-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  cursor: default;
  transition: var(--transition);
}
.ai-status-indicator.online {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
.ai-status-indicator.offline {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

.ai-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  position: relative;
}
.ai-status-indicator.online .ai-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: ai-dot-pulse 2s ease-in-out infinite;
}
.ai-status-indicator.offline .ai-status-dot {
  background: #ef4444;
}
@keyframes ai-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.ai-status-text {
  letter-spacing: 0.02em;
}

/* =========================================
   AI TOGGLE SWITCH (設定メニュー内のスイッチ)
========================================= */
.ai-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.ai-toggle-info {
  flex: 1;
  min-width: 0;
}
.ai-toggle-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.ai-toggle-desc {
  font-size: 11px;
  color: var(--text-mute);
}
.ai-toggle-desc.enabled {
  color: #16a34a;
  font-weight: 600;
}
.ai-toggle-desc.disabled {
  color: #dc2626;
  font-weight: 600;
}

/* スイッチ本体 */
.ai-toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.ai-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ai-toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 26px;
  transition: var(--transition);
}
.ai-toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.ai-toggle-switch input:checked + .ai-toggle-slider {
  background: var(--primary);
}
.ai-toggle-switch input:checked + .ai-toggle-slider::before {
  transform: translateX(22px);
}

/* gchat-css-v1 */
.gchat-link-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}
.gchat-link-btn:hover {
  opacity: 0.85;
}
.gchat-link-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: gchat-banner-fade 5s ease forwards;
}
.gchat-link-banner.success {
  background: #16a34a;
}
.gchat-link-banner.failed {
  background: #dc2626;
}
@keyframes gchat-banner-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

.gchat-source-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  vertical-align: middle;
}

.ai-toggle-note {
  padding: 4px 12px 8px;
  font-size: 10px;
  color: var(--text-faint);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* AI停止中のメッセージ表示用 */
.ai-disabled-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 24px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-disabled-banner::before {
  content: '⚠️';
}

/* =========================================
   AI STATUS INDICATOR (ヘッダーの状態表示)
========================================= */

/* =========================================
   LOGOUT BUTTON
========================================= */
.logout-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--text-mute);
}
.logout-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

/* =========================================
   返信引用ブロック - コンパクト版(LINE WORKS 風)
   ※ 既存の .reply-quote を上書き
========================================= */
#messages .bubble .reply-quote {
  display: block;
  font-size: 11px;
  padding: 1px 0 1px 8px;
  margin: -2px 0 4px;
  background: transparent;
  border-left: 2px solid rgba(0, 152, 212, 0.5);
  border-radius: 0;
  color: var(--text-mute);
  max-width: 100%;
  line-height: 1.3;
  cursor: pointer;
  transition: opacity 0.15s ease;
  opacity: 0.75;
}
#messages .bubble .reply-quote:hover {
  opacity: 1;
}
#messages li.self .bubble .reply-quote {
  border-left-color: rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.85);
  opacity: 0.9;
}

#messages .bubble .reply-quote-name {
  font-weight: 600;
  font-size: 10.5px;
  margin-bottom: 0;
  line-height: 1.3;
  color: var(--primary-dark);
  opacity: 0.9;
  display: block;
}
#messages li.self .bubble .reply-quote-name {
  color: rgba(255, 255, 255, 0.95);
}

#messages .bubble .reply-quote-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  line-height: 1.3;
  display: block;
  max-width: 280px;
}

/* バブル本体のパディングも少し詰める(返信ありメッセージで効く) */
#messages li .bubble {
  padding: 9px 14px;
}

/* =========================================
   文字装飾(Markdown 風)
========================================= */
.msg-bold {
  font-weight: 700;
}
.msg-italic {
  font-style: italic;
}
.msg-strike {
  text-decoration: line-through;
  opacity: 0.75;
}
.msg-code {
  font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 0.88em;
  background: rgba(15, 23, 42, 0.08);
  color: #c7254e;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  word-break: break-all;
}
#messages li.self .msg-code {
  background: rgba(255, 255, 255, 0.18);
  color: #fff8dc;
  border-color: rgba(255, 255, 255, 0.25);
}
body.color-midnight .msg-code {
  background: rgba(255, 255, 255, 0.08);
  color: #f9a8d4;
  border-color: rgba(255, 255, 255, 0.1);
}

/* =========================================
   自動リンク
========================================= */
.msg-link {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: rgba(0, 152, 212, 0.4);
  text-underline-offset: 2px;
  word-break: break-all;
  transition: var(--transition);
}
.msg-link:hover {
  text-decoration-color: var(--primary);
  color: var(--primary-dark);
}
#messages li.self .msg-link {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}
#messages li.self .msg-link:hover {
  text-decoration-color: #ffffff;
  color: #ffffff;
  filter: brightness(1.1);
}

/* =========================================
   ハッシュタグ
========================================= */
.msg-hashtag {
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  padding: 0 1px;
  border-radius: 3px;
  transition: var(--transition);
}
.msg-hashtag:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}
#messages li.self .msg-hashtag {
  color: #ffffff;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}
#messages li.self .msg-hashtag:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
body.color-midnight .msg-hashtag:hover {
  background: rgba(59, 130, 246, 0.18);
}

/* =========================================
   返信枠の高さ問題の根本対策
   white-space: pre-wrap が引用ブロック前後の改行を空白化していたため、
   引用ブロックを inline-block 化せず、bubble の white-space を制御する
========================================= */

/* 返信引用ブロックを使う場合、bubble の white-space を normal に上書きしてから、
   本文だけを pre-wrap で囲む方式へ。ただし既存実装に影響しないよう、
   引用ブロック自体を改行スペースから隔離する */
#messages .bubble .reply-quote {
  display: block;
  margin: 0 0 4px;
  padding: 1px 0 1px 8px;
  border-left: 2px solid rgba(0, 152, 212, 0.5);
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-mute);
  opacity: 0.8;
  cursor: pointer;
  white-space: normal;  /* ← 重要:親の pre-wrap を打ち消す */
  max-width: 100%;
}
#messages .bubble .reply-quote:hover {
  opacity: 1;
}
#messages li.self .bubble .reply-quote {
  border-left-color: rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.88);
  opacity: 0.92;
}

#messages .bubble .reply-quote-name {
  display: block;
  font-weight: 600;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--primary-dark);
  margin: 0;
}
#messages li.self .bubble .reply-quote-name {
  color: rgba(255, 255, 255, 0.95);
}

#messages .bubble .reply-quote-text {
  display: block;
  font-size: 11.5px;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

/* =========================================
   日付セパレータ(中央配置・ピル型バッジ)
========================================= */
#messages li.date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center !important;
  max-width: 100% !important;
  width: 100%;
  margin: 8px 0 4px;
  padding: 0;
  animation: fadeInUp 0.3s ease-out;
  background: transparent;
  pointer-events: none; /* バッジ以外をクリックさせない */
}

#messages li.date-separator::before,
#messages li.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border) 30%,
    var(--border) 70%,
    transparent 100%
  );
}

.date-separator-label {
  display: inline-block;
  padding: 5px 16px;
  margin: 0 12px;
  background: var(--surface);
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
}

/* 「今日」の日付セパレータは少し強調 */
.date-separator-label.today {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: rgba(0, 152, 212, 0.25);
  font-weight: 700;
}

/* Chatwork テーマ用調整(li の padding が効いてしまうため上書き) */

/* Midnight テーマ用 */
body.color-midnight .date-separator-label {
  background: var(--surface-elevated);
  color: var(--text-mute);
  border-color: var(--border);
}
body.color-midnight .date-separator-label.today {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.3);
}

/* スマホ */
@media (max-width: 768px) {
  .date-separator-label {
    font-size: 11px;
    padding: 4px 14px;
  }
  #messages li.date-separator {
    margin: 6px 0 2px;
  }
}

/* =========================================
   アバター画像対応(Google プロフィール画像)
========================================= */

/* 画像入りアバターの共通処理 */
.has-image {
  position: relative;
  overflow: hidden;
}
.has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  display: block;
}
.has-image .avatar-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: white;
  font-weight: 700;
}
/* 画像読み込み失敗時(img が display:none になる)、頭文字を表示 */
.has-image img[style*="display: none"] + .avatar-initial,
.has-image img[style*="display:none"] + .avatar-initial {
  z-index: 3;
}

/* user-avatar(サイドバー左上、40px)で has-image の場合のサイズ */
.user-avatar.has-image .avatar-initial {
  font-size: 15px;
}

/* user-list-avatar(DM一覧、28px)用 */
.user-list-avatar.has-image .avatar-initial {
  font-size: 12px;
}

/* reader-item-avatar(既読モーダル、32px)用 */
.reader-item-avatar.has-image .avatar-initial {
  font-size: 13px;
}

/* =========================================
   メッセージ送信者の名前ヘッダー(アバター付き)
========================================= */
.message-sender-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 0 4px;
}

.message-sender-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.18);
  background-size: cover;
  background-position: center;
  letter-spacing: -0.02em;
  position: relative;
  overflow: hidden;
}

.message-sender-header .name-label {
  margin-bottom: 0;
  padding: 0;
}

/* =========================================
   グループ設定:管理者用⚙️ボタン
========================================= */
.room-settings-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition: var(--transition);
  margin-left: 4px;
}
.room-item:hover .room-settings-btn {
  opacity: 1;
}
.room-settings-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  transform: scale(1.1);
}

/* 非管理者には完全に非表示 */
body:not(.is-admin) .room-settings-btn {
  display: none !important;
}

/* ロビー(is-special)は特別マーキング(右に小さい★) */
.room-item.is-special .room-name::after {
  content: ' ★';
  font-size: 9px;
  color: rgba(255, 215, 0, 0.7);
  font-weight: 700;
}

/* =========================================
   グループ設定モーダル(メンバー管理)
========================================= */
.room-settings-modal,
.room-create-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  animation: modal-fade 0.2s ease-out;
}

.room-settings-content {
  background: var(--surface);
  border-radius: 16px;
  width: 480px;
  max-width: 92%;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
  animation: modal-rise 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.room-settings-header {
  padding: 18px 22px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
}
.room-settings-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.room-settings-close {
  background: transparent;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 20px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: var(--transition);
}
.room-settings-close:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}
.room-settings-body {
  overflow-y: auto;
  flex: 1;
  padding: 14px 22px 18px;
}

.settings-section {
  margin-bottom: 20px;
}
.settings-section:last-child {
  margin-bottom: 0;
}
.settings-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.add-member-search,
.create-room-search {
  margin-bottom: 8px;
}
.add-member-search input,
.create-room-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--bg);
  transition: var(--transition);
}
.add-member-search input:focus,
.create-room-search:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: var(--shadow-glow);
}

.members-list,
.add-member-list,
.create-members-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg);
}
.member-item,
.add-member-item,
.create-member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  cursor: default;
}
.member-item:last-child,
.add-member-item:last-child,
.create-member-item:last-child {
  border-bottom: none;
}
.create-member-item {
  cursor: pointer;
  transition: var(--transition);
}
.create-member-item:hover {
  background: var(--primary-light);
}
.create-member-check {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.member-item-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.member-item-info {
  flex: 1;
  min-width: 0;
}
.member-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.member-item-email {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-badge {
  background: var(--primary);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}
.member-self-mark {
  font-size: 11px;
  color: var(--text-mute);
  font-style: italic;
}
.member-remove-btn,
.member-add-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-mute);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  flex-shrink: 0;
  font-family: inherit;
}
.member-remove-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.member-add-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--primary-glow);
}
.member-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-mute);
  font-size: 12px;
  font-style: italic;
}

.create-room-name-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: var(--bg);
  transition: var(--transition);
}
.create-room-name-input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: var(--shadow-glow);
}

.create-room-submit-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 12px var(--primary-glow);
  font-family: inherit;
}
.create-room-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 152, 212, 0.35);
}

.settings-danger {
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
  margin-top: 8px;
}
.delete-room-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.delete-room-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.5);
}

/* 非管理者には新規グループ作成ボタンを非表示 */
body:not(.is-admin) .add-room-btn {
  display: none;
}

/* Midnight テーマ用 */
body.color-midnight .room-settings-content {
  background: var(--surface);
}
body.color-midnight .members-list,
body.color-midnight .add-member-list,
body.color-midnight .create-members-list {
  background: var(--bg);
  border-color: var(--border);
}
body.color-midnight .member-item-name {
  color: var(--text);
}
body.color-midnight .member-remove-btn,
body.color-midnight .create-room-name-input,
body.color-midnight .add-member-search input,
body.color-midnight .create-room-search {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}

@media (max-width: 768px) {
  .room-settings-content {
    width: 95%;
    max-height: 90vh;
  }
  .room-settings-body {
    padding: 12px 16px 16px;
  }
}

/* =========================================
   ヘッダーのルーム名 + 説明文(強化版)
   既存スタイルとの競合を避けるため詳細度を上げて上書き
========================================= */

/* room-title は flex で横に「アイコン + テキスト枠」を並べる */
.header #room-title,
header #room-title,
#room-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0;
  flex: 1;
}

/* テキスト枠は縦に「タイトル / 説明文」を並べる */
#room-title .room-title-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center;
  min-width: 0;
  gap: 2px;
  line-height: 1.2;
}

/* タイトル(大きく、太く) */
#room-title .room-title-name {
  display: block !important;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

/* 説明文(小さく、薄く、別の行に) */
#room-title .room-description {
  display: block !important;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-mute);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.3;
  margin-top: 1px;
}

/* スマホ */
@media (max-width: 768px) {
  #room-title .room-title-name {
    font-size: 15px;
  }
  #room-title .room-description {
    font-size: 11px;
  }
}

/* Midnight テーマ */
body.color-midnight #room-title .room-title-name {
  color: var(--text);
}
body.color-midnight #room-title .room-description {
  color: var(--text-mute);
}
/* === LINE風テーマ: 自分の発言ではアバター+名前を非表示(従来通り) === */
body.theme-line #messages li.self .message-sender-header {
  display: none;
}

/* === 引用ブロック === */
.msg-quote {
  margin: 6px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--border, #ddd);
  color: var(--text-mute, #777);
  background: rgba(0, 0, 0, 0.025);
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
}

/* === Markdown見出し === */
.msg-heading {
  margin: 10px 0 6px 0;
  font-weight: 700;
  line-height: 1.4;
}
.msg-heading-1 { font-size: 1.3em; }
.msg-heading-2 { font-size: 1.15em; }
.msg-heading-3 { font-size: 1.05em; }

/* === Markdown箇条書き === */
.msg-list {
  margin: 6px 0;
  padding-left: 1.4em;
}
.msg-list li {
  margin: 2px 0;
}



/* === コードブロック === */
.msg-codeblock {
  margin: 8px 0;
  padding: 10px 12px;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  max-width: 420px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
}
.msg-codeblock code {
  background: transparent;
  padding: 0;
  border: none;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
  display: block;
  color: #24292e;
}
.msg-codeblock-lang {
  display: block;
  font-size: 11px;
  color: #888;
  margin-bottom: 6px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  user-select: none;
}

/* === textarea (入力欄) の見た目 === */
#input {
  resize: none;
  font-family: inherit;
  line-height: 1.5;
  min-height: 38px;
  max-height: 40vh;
  vertical-align: middle;
  field-sizing: content;
  overflow-y: auto;
}

/* ========== ルームメンバー表示(ヘッダー内) ========== */
.room-members-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
  padding: 4px 10px;
  border-radius: 16px;
  background: var(--surface-muted, rgba(0,0,0,0.04));
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}
.room-members-display:hover {
  background: var(--surface-hover, rgba(0,0,0,0.08));
}
.room-members-avatars {
  display: flex;
  align-items: center;
}
.room-members-avatars .room-member-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bg-color, #fff);
  margin-left: -8px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
}
.room-members-avatars .room-member-avatar:first-child {
  margin-left: 0;
}
.room-members-count {
  font-size: 13px;
  color: var(--text-color, #333);
  font-weight: 500;
  white-space: nowrap;
}

/* モバイル時の調整 */
@media (max-width: 768px) {
  .room-members-display {
    padding: 4px 8px;
    margin-right: 8px;
  }
  .room-members-count {
    display: none; /* スマホでは人数表記を省略 */
  }
  .room-members-avatars .room-member-avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
}

/* メンバー一覧モーダル */
.members-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.members-modal-content {
  background: var(--bg-color, #fff);
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.members-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.members-modal-title {
  font-size: 16px;
  font-weight: 600;
}
.members-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-mute, #888);
  padding: 4px 8px;
}
.members-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.members-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
}
.members-modal-item:hover {
  background: var(--surface-hover, rgba(0,0,0,0.04));
}
.members-modal-item-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.members-modal-item-name {
  flex: 1;
  font-size: 14px;
}
.members-modal-item-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-color, #0098d4);
  color: #fff;
}

/* ========== メッセージ編集・削除表示 ========== */

/* 削除済みメッセージ(トゥームストーン) */
.bubble-deleted {
  color: var(--text-mute, #888);
  font-style: italic;
  background: var(--surface-muted, rgba(0,0,0,0.03));
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px dashed var(--border-subtle, rgba(0,0,0,0.1));
  user-select: none;
}
#messages li.deleted .msg-actions,
#messages li.deleted .reactions-bar,
#messages li.deleted .read-receipt {
  display: none !important;
}

/* edited-label は末尾のbubble-edited-rowセクションで定義 */

/* 返信引用元が削除済み */
.reply-quote-deleted .reply-quote-text {
  font-style: italic;
  color: var(--text-mute, #888);
  opacity: 0.7;
}

/* インライン編集モード */
.message-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  width: 100%;
}
.message-edit-textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 12px;
  border: 1px solid var(--accent-color, #0098d4);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  background: var(--bg-color, #fff);
  color: var(--text-color, #333);
}
.message-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.message-edit-actions button {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border-color, #ccc);
  background: var(--bg-color, #fff);
}
.message-edit-actions .message-edit-save {
  background: var(--accent-color, #0098d4);
  color: #fff;
  border-color: var(--accent-color, #0098d4);
}
.message-edit-actions button:hover {
  opacity: 0.85;
}
.message-edit-hint {
  font-size: 11px;
  color: var(--text-mute, #888);
}

/* ========== メッセージ編集・削除済み表示 ========== */

/* 編集ボタン(削除ボタンと同じスタイルに統一) */
.edit-btn {
  background: var(--surface);
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
}
li:hover .edit-btn,
li:focus-within .edit-btn {
  opacity: 1;
}
.edit-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* 削除済みメッセージ(トゥームストーン) */
.message-deleted .bubble {
  color: var(--text-mute, #888) !important;
  font-style: italic;
  background: var(--surface-muted, rgba(0,0,0,0.03)) !important;
  border: 1px dashed var(--border-light, rgba(0,0,0,0.1)) !important;
  background-image: none !important;
}
.message-deleted .bubble::before {
  content: "🗑 ";
  opacity: 0.5;
}
/* 削除済みメッセージは余計な装飾を全部消す */
.message-deleted .reply-quote,
.message-deleted .message-attachment,
.message-deleted .message-attachment-file,
.message-deleted .reactions-bar,
.message-deleted .msg-actions {
  display: none !important;
}

/* インライン編集中のUI */
.message-editing .bubble {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.message-editing-textarea {
  width: 100%;
  min-height: 64px;
  border: 1.5px solid #0098d4;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: none;
  background: white;
  color: #003E5C;
  box-sizing: border-box;
  box-shadow: 0 0 0 3px rgba(0,152,212,0.08);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.message-editing-textarea:focus {
  border-color: #0077a8;
  box-shadow: 0 0 0 3px rgba(0,152,212,0.14);
}
.message-editing-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  justify-content: flex-end;
  align-items: center;
}
.message-editing-save,
.message-editing-cancel {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: all 0.15s;
}
.message-editing-save {
  background: #0098d4;
  color: white;
  border-color: #0098d4;
}
.message-editing-save:hover {
  background: #0077a8;
  border-color: #0077a8;
}
.message-editing-cancel {
  background: white;
  color: #5A9AB8;
  border-color: #BAE4F7;
}
.message-editing-cancel:hover {
  background: #EBF7FD;
  color: #003E5C;
}
.message-editing-hint {
  font-size: 10px;
  color: #8ABFDA;
  margin-top: 3px;
  text-align: right;
}

/* ============================================================
   メンション補完ポップアップ(v3.9で追加)
   ============================================================ */
.mention-popup {
  position: absolute;
  bottom: 70px;
  left: 60px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 4px 0;
  z-index: 1000;
  overflow-y: auto;
  max-height: 240px;
}
.mention-popup[hidden] {
  display: none;
}
.mention-popup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 0.1s ease;
  font-size: 13px;
}
.mention-popup-item:hover {
  background: var(--primary-light);
}
.mention-popup-item.selected {
  background: var(--primary-light);
  font-weight: 600;
}
.mention-popup-item-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
}
.mention-popup-item-name {
  flex: 1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* @all メンション専用スタイル(v3.9で追加)*/
.mention-popup-item-avatar-all {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==== グループ名・サブタイトル変更モーダル(v3.11) ==== */
.rename-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: renameModalFade 0.15s ease-out;
}

@keyframes renameModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rename-modal-content {
  background: white;
  border-radius: 12px;
  padding: 0;
  width: 90%;
  max-width: 440px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.rename-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.rename-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.rename-modal-close {
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}

.rename-modal-close:hover {
  color: #333;
  background: #f0f0f0;
}

.rename-modal-body {
  padding: 20px;
}

.rename-modal-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
}

.rename-modal-label:not(:first-child) {
  margin-top: 16px;
}

.rename-modal-hint {
  font-weight: 400;
  color: #888;
  font-size: 11px;
}

.rename-modal-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.rename-modal-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 152, 212, 0.15);
}

.rename-modal-error {
  margin-top: 12px;
  padding: 8px 12px;
  background: #fdecec;
  color: #c2311d;
  border-radius: 6px;
  font-size: 13px;
}

.rename-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #eee;
  background: #fafafa;
}

.rename-modal-cancel,
.rename-modal-save {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.rename-modal-cancel {
  background: #f4f4f4;
  color: #555;
}

.rename-modal-cancel:hover {
  background: #e8e8e8;
}

.rename-modal-save {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
}

.rename-modal-save:hover:not(:disabled) {
  box-shadow: 0 4px 12px var(--primary-glow);
  transform: translateY(-1px);
}

.rename-modal-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==== ヘッダーの編集ボタン(グループ名の隣) ==== */
.room-edit-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #666;
  opacity: 0.6;
  transition: all 0.15s;
  flex-shrink: 0;
}

.room-edit-btn:hover {
  opacity: 1;
  background: #f0f0f0;
  color: var(--primary);
}

/* ============================================
   Composer Toolbar (v3.12 block 1: skeleton)
   ============================================ */

.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 7px;
  background: transparent;
  border-top: 1px solid #e8f4fb;
  min-height: 36px;
}
/* send-btn は .form-row 内に移動済み */

.composer-toolbar-placeholder {
  font-size: 12px;
  color: var(--text-muted, #888);
  opacity: 0.7;
  font-style: italic;
}

.composer-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-color, inherit);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s ease, transform 0.1s ease;
}

.composer-toolbar-btn:hover:not(:disabled) {
  background: var(--primary-glow, rgba(99, 102, 241, 0.12));
  transform: translateY(-1px);
}

.composer-toolbar-btn:active:not(:disabled) {
  transform: translateY(0);
}

.composer-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.composer-toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border-color, rgba(0, 0, 0, 0.15));
  margin: 0 4px;
}

@media (max-width: 600px) {
  .composer-toolbar {
    padding: 4px 8px;
    min-height: 32px;
  }
  .composer-toolbar-btn {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
}

/* ============================================
   Emoji Picker (v3.12 block 4)
   ============================================ */
.emoji-picker {
  position: fixed;
  z-index: 1000;
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  width: 280px;
  max-height: 240px;
  overflow-y: auto;
}
.emoji-pick-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, transform 0.1s ease;
}
.emoji-pick-btn:hover {
  background: var(--primary-glow, rgba(99, 102, 241, 0.12));
  transform: scale(1.15);
}
.emoji-pick-btn:active {
  transform: scale(1.0);
}
body.color-midnight .emoji-picker {
  background: var(--surface);
  border-color: var(--border);
}

/* ============================================ */
/* スタイル切替トグル(Phase A: ピル型・両環境統一) v3.15 */
/* ============================================ */
.style-toggle {
  display: flex;
  gap: 4px;
  margin: 8px 12px 6px;
  padding: 3px;
  background: var(--side-bg-light);
  border-radius: var(--radius-pill);
  align-items: center;
  flex-basis: 100%;
  width: 100%;
  box-sizing: border-box;
}

.style-toggle-btn {
  flex: 1;
  padding: 9px 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.style-toggle-btn:hover {
  color: rgba(255, 255, 255, 0.85);
}

.style-toggle-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px var(--accent-glow);
}

.style-toggle-btn.active:hover {
  color: #fff;
}

/* =========================================
   THEME OPTION - 準備中(disabled)状態
========================================= */
.theme-option-disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
  pointer-events: none;
  position: relative;
}
.theme-option-disabled .theme-option-name::after {
  content: '';
}
.theme-option-disabled:hover {
  background: transparent !important;
}

/* ===== C-3 トグル微調整(v3.16 バブル復元) ===== */
.style-toggle-btn {
  letter-spacing: 0.2px;
  font-size: 13px;
  font-weight: 500;
}
.style-toggle-caption {
  text-align: center;
  font-size: 9px;
  letter-spacing: 2px;
  color: #8a94a0;
  font-weight: 600;
  text-transform: uppercase;
  margin: 2px 12px 8px;
}

/* ===== C-3 ボタン均等幅修正(v3.16) ===== */
.style-toggle-btn {
  padding: 9px 4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  min-width: 0;
}

#messages li.self .bubble-wrapper {
  justify-content: flex-end;
}

/* 管理者のみ：アップロード上限設定UI */
body.is-admin #maxfilesize-section {
  display: block;
}

/* 管理者のみ：@LinkAI メンション設定UI */
body.is-admin #ai-mention-section {
  display: block;
}

/* ===== time-stack: 既読+時刻の縦積み ===== */
.time-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
#messages li.other .time-stack {
  align-items: flex-start;
}
.time-stack .read-receipt {
  margin: 0;
}
.time-stack .time {
  margin: 0;
}

/* ===== time-stack: 既読+時刻の縦積み ===== */
.time-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
#messages li.other .time-stack {
  align-items: flex-start;
}
.time-stack .read-receipt {
  margin: 0;
}
.time-stack .time {
  margin: 0;
}

/* ===== bubble-footer: msg-actions + reactions-bar + read-receipt 横並び ===== */
.bubble-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-height: 0;
  padding: 0 2px;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  box-sizing: border-box;
}
.bubble-footer .reactions-bar {
  margin-top: 0;
  flex: 1;
}
.bubble-footer .read-receipt {
  margin-top: 0;
  flex-shrink: 0;
  margin-left: auto;
}
#messages li.self .bubble-footer {
  flex-direction: row-reverse;
}
#messages li.self .bubble-footer .reactions-bar {
  justify-content: flex-end;
}

/* ===== ⋮ more-btn ===== */
.more-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-muted);
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
}
.more-btn:hover {
  background: var(--surface-hover, rgba(0,0,0,0.06));
}

/* ===== ⋮ ドロップダウンメニュー ===== */
.msg-dropdown {
  position: fixed;
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  min-width: 140px;
  overflow: hidden;
}
.msg-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  text-align: left;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.msg-dropdown-item:hover {
  background: var(--surface-muted, rgba(0,0,0,0.04));
}
.msg-dropdown-item.danger {
  color: #dc2626;
}
.msg-dropdown-item.disabled {
  color: var(--text-faint);
  cursor: default;
}

/* ===== リアクション誰が押したかモーダル ===== */
.reaction-who-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reaction-who-modal {
  background: var(--surface);
  border-radius: 14px;
  width: 340px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
}
.reaction-who-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.reaction-who-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.reaction-who-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 4px;
}
.reaction-who-close:hover { background: var(--surface-muted); }
.reaction-who-body {
  overflow-y: auto;
  padding: 8px 0;
}
.reaction-who-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
}
.reaction-who-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.reaction-who-name {
  flex: 1;
  font-size: 14px;
  color: var(--text);
}
.reaction-who-emoji {
  font-size: 20px;
}
.reaction-who-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}

/* ===== Enterで送信チェックボックス ===== */
.enter-send-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 8px 8px 8px;
  justify-content: flex-end;
  user-select: none;
}
.enter-send-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--primary);
}
.enter-send-label:hover {
  color: var(--text);
}

/* ===== コードブロック コピーボタン ===== */
.msg-codeblock {
  position: relative;
}
.codeblock-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--primary, #0098d4);
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.msg-codeblock:hover .codeblock-copy-btn {
  opacity: 1;
}
.codeblock-copy-btn:hover {
  background: var(--primary-dark, #0077a8);
  color: #fff;
}

/* ===== 編集済みラベル（バブル内右下）===== */
.bubble-edited-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.edited-label {
  font-size: 9.5px;
  color: rgba(255,255,255,0.55);
  cursor: default;
  position: relative;
}
#messages li.other .edited-label {
  color: #8ABFDA;
}
.edited-label:hover::after {
  content: attr(data-edited-time);
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  background: #003E5C;
  color: white;
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}
.edited-label:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  right: 8px;
  border: 4px solid transparent;
  border-top-color: #003E5C;
  z-index: 100;
  pointer-events: none;
}

/* ===== フローティングホバーボタン ===== */
#float-msg-actions .float-reaction-btn,
#float-msg-actions .float-more-btn {
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5A9AB8;
  padding: 0;
}
#float-msg-actions .float-reaction-btn:hover,
#float-msg-actions .float-more-btn:hover {
  background: #EBF7FD;
  color: #003E5C;
}

/* ===== time-stack内の既読を横1行に強制 ===== */
.time-stack .read-receipt {
  margin: 0;
  align-self: auto;
  white-space: nowrap;
}

/* ===== マイチャット ===== */
.mychat-item {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 4px;
}
.mychat-avatar {
  background: linear-gradient(135deg, #e8f4fd, #b3d9f5) !important;
  color: #1a7abf !important;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* マイチャット: 送信者名・アバター非表示 */
body.mychat-active .message-sender-header {
  display: none;
}

/* ユーザー情報：サイドバー最下部固定 */
.sidebar {
  display: flex;
  flex-direction: column;
}
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
}
#user-info {
  flex-shrink: 0;
  border-top: 1px solid rgba(0,152,212,0.2) !important;
  padding: 10px 12px;
  margin-top: 0;
}
.sidebar-header {
  border-bottom: none !important;
}
.section-title {
  border-top: 1px solid rgba(0,152,212,0.2) !important;
  margin-top: 4px;
  padding-top: 10px;
}

/* マイチャット: 背景枠をroom-itemと統一 */
.mychat-item {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* マイチャットアバター: room-avatarと同サイズに統一 */
.mychat-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 14px !important;
  border-radius: 50% !important;
}

/* マイチャットアバター: room-avatarと同サイズ(28px)に統一 */
.mychat-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 13px !important;
}

/* マイチャットアバター: 縦中央揃え強制 */
.mychat-item {
  align-items: center !important;
}
.mychat-avatar {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===== AIアップデート基盤 ===== */
.ai-update-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.12);
  z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ai-update-panel {
  background: rgba(255,255,255,0.92); border-radius: 14px;
  width: min(780px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 4px 32px rgba(0,0,0,0.18); border: 1px solid rgba(0,0,0,0.08);
}
.ai-update-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--color-border-tertiary);
}
.ai-update-title { font-size: 16px; font-weight: 500; color: var(--color-text-primary); }
.ai-update-close {
  background: none; border: none; cursor: pointer; font-size: 18px;
  color: var(--color-text-secondary); padding: 4px 8px; border-radius: 6px;
}
.ai-update-close:hover { background: var(--color-background-secondary); }
.ai-update-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
}
.ai-update-generate-row { display: flex; gap: 8px; align-items: center; }
.ai-update-select {
  padding: 6px 10px; border: 1px solid var(--color-border-secondary);
  border-radius: 8px; background: var(--color-background-primary);
  color: var(--color-text-primary); font-size: 13px;
}
.ai-update-btn-generate {
  padding: 6px 14px; background: #185FA5; color: #fff;
  border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500;
}
.ai-update-btn-generate:hover { background: #0c447c; }
.ai-update-btn-generate:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-update-btn-refresh {
  padding: 6px 12px; background: none; border: 1px solid var(--color-border-secondary);
  border-radius: 8px; cursor: pointer; color: var(--color-text-secondary); font-size: 13px;
}
.ai-update-btn-refresh:hover { background: var(--color-background-primary); }
.ai-update-list {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.ai-update-loading, .ai-update-empty, .ai-update-error {
  text-align: center; padding: 40px; color: var(--color-text-secondary); font-size: 14px;
}
.ai-update-error { color: var(--color-text-danger); }
.ai-update-card {
  border: 1px solid var(--color-border-tertiary); border-radius: 10px;
  padding: 14px 16px; background: var(--color-background-primary);
}
.ai-update-card.verdict-pass  { border-left: 3px solid #1D9E75; }
.ai-update-card.verdict-fail  { border-left: 3px solid #D85A30; }
.ai-update-card.verdict-error { border-left: 3px solid #E24B4A; }
.ai-update-card.verdict-analyzing { border-left: 3px solid #BA7517; }
.ai-update-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ai-update-file { font-weight: 500; font-size: 14px; color: var(--color-text-primary); font-family: var(--font-mono); }
.ai-update-verdict {
  font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 20px;
}
.ai-update-verdict.verdict-pass  { background: #E1F5EE; color: #0F6E56; }
.ai-update-verdict.verdict-fail  { background: #FAECE7; color: #993C1D; }
.ai-update-verdict.verdict-error { background: #FCEBEB; color: #A32D2D; }
.ai-update-verdict.verdict-analyzing { background: #FAEEDA; color: #854F0B; }
.ai-update-trigger { font-size: 11px; color: var(--color-text-tertiary); margin-left: auto; }
.ai-update-card-meta { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
.ai-update-card-date { font-size: 11px; color: var(--color-text-tertiary); margin-bottom: 10px; }
.ai-update-card-actions { display: flex; gap: 8px; align-items: center; }
.ai-update-btn-detail {
  padding: 4px 12px; background: none; border: 1px solid var(--color-border-secondary);
  border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--color-text-secondary);
}
.ai-update-btn-detail:hover { background: var(--color-background-primary); }
.ai-update-btn-approve1 {
  padding: 4px 12px; background: #185FA5; color: #fff;
  border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500;
}
.ai-update-btn-approve1:hover { background: #0c447c; }
.ai-update-btn-approve2 {
  padding: 4px 12px; background: #993C1D; color: #fff;
  border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500;
}
.ai-update-btn-approve2:hover { background: #712B13; }

.debate-event-body { padding: 16px 20px; flex: 1; overflow-y: auto; }
.debate-loading { color: var(--color-text-secondary); font-size: 13px; padding: 20px 0; text-align: center; }
.debate-field-row { display: flex; gap: 8px; margin-bottom: 14px; }
.debate-topic-input { flex: 2; padding: 6px 10px; border: 1px solid var(--color-border-secondary); border-radius: 8px; background: var(--color-background-primary); color: var(--color-text-primary); font-size: 13px; }
.debate-duration-input { flex: 1; padding: 6px 10px; border: 1px solid var(--color-border-secondary); border-radius: 8px; background: var(--color-background-primary); color: var(--color-text-primary); font-size: 13px; }

.debate-section-block {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #f8fafc;
}
.debate-section-label { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; }
#debate-persona-list { }
.debate-persona-row { background: var(--color-background-primary); border: 1px solid var(--color-border, #d8dee5); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-sizing: border-box; width: 100%; overflow: hidden; }
.debate-persona-top { flex-wrap: wrap; }
.debate-voice-select, .debate-model-select { max-width: 100%; min-width: 0; }
.debate-persona-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.debate-icon-select { width: 52px; padding: 4px; border: 1px solid var(--color-border-secondary); border-radius: 6px; background: var(--color-background-primary); font-size: 14px; }
.debate-nickname-input { flex: 1; padding: 6px 8px; border: 1px solid var(--color-border-secondary); border-radius: 6px; background: var(--color-background-primary); color: var(--color-text-primary); font-size: 13px; }
.debate-model-select { flex: 1.3; padding: 6px 8px; border: 1px solid var(--color-border-secondary); border-radius: 6px; background: var(--color-background-primary); color: var(--color-text-primary); font-size: 12px; }
.debate-reorder-btn { cursor: pointer; color: var(--color-text-secondary); font-size: 13px; padding: 2px 4px; }
.debate-reorder-btn:hover { color: var(--color-text-primary); }
.debate-delete-btn { cursor: pointer; font-size: 14px; padding: 2px 4px; }
.debate-system-prompt { width: 100%; padding: 6px 8px; border: 1px solid var(--color-border-secondary); border-radius: 6px; background: var(--color-background-primary); color: var(--color-text-primary); font-size: 12px; resize: vertical; box-sizing: border-box; }
.debate-status-box { background: var(--color-background-primary); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.debate-status-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-primary); }
.debate-status-row span:first-child { color: var(--color-text-secondary); }
.debate-btn-start { display: block; margin-top: 12px; padding: 8px 16px; background: #185FA5; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; }
.debate-btn-start:hover { background: #0c447c; }
.debate-btn-stop { padding: 8px 16px; background: #D85A30; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; }
.debate-btn-stop:hover { background: #993C1D; }

.debate-voice-controls { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
.debate-timer-display {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 3px 10px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  min-width: 160px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.debate-timer-display.timer-warning {
  color: #e53e3e;
  border-color: #e53e3e;
  background: #fff5f5;
}
.debate-voice-btn { background: none; border: 1px solid var(--color-border-secondary); border-radius: 8px; cursor: pointer; font-size: 14px; padding: 4px 8px; color: var(--color-text-secondary); }
.debate-voice-btn:hover { background: var(--color-background-secondary); }
.debate-voice-btn.active { background: #185FA5; color: #fff; border-color: #185FA5; }
.debate-voice-btn:active { background: var(--color-background-secondary); transform: scale(0.95); }
.debate-voice-select { flex: 0.9; padding: 6px 8px; border: 1px solid var(--color-border-secondary); border-radius: 6px; background: var(--color-background-primary); color: var(--color-text-primary); font-size: 12px; }

#input:disabled {
  background: var(--color-background-secondary);
  cursor: not-allowed;
  opacity: 0.7;
}
.ai-update-applied { font-size: 12px; color: #0F6E56; font-weight: 500; }
.ai-update-menu-btn {
  background: none; border: none; cursor: pointer; font-size: 16px;
  padding: 4px 6px; border-radius: 6px; color: var(--color-text-secondary);
  display: none;
}
.ai-update-menu-btn:hover { background: var(--color-background-tertiary); }
body.is-admin .ai-update-menu-btn { display: inline-flex; align-items: center; }

.ai-update-tabs { display: flex; gap: 4px; flex: 1; margin: 0 12px; }
.ai-update-tab { background: none; border: 1px solid var(--color-border-secondary); border-radius: 6px; padding: 4px 12px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.ai-update-tab.active { background: #185FA5; color: #fff; border-color: #185FA5; }
.ai-update-tab:hover:not(.active) { background: var(--color-background-secondary); }
.ai-model-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid var(--color-border-tertiary); }
.ai-model-label { font-size: 13px; color: var(--color-text-secondary); width: 90px; flex-shrink: 0; }

/* AI HTMLレンダリング */
.ai-html-wrapper { margin-top: 6px; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); }
.ai-html-frame { display: block; width: 100%; border: none; border-radius: 8px 8px 0 0; max-height: 400px; overflow: hidden; }
.ai-html-actions { display: flex; gap: 8px; padding: 6px 10px; background: var(--color-background-secondary); border-top: 1px solid var(--color-border); }
.ai-html-btn { font-size: 12px; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--color-border); background: var(--color-background-primary); cursor: pointer; }
.ai-html-btn:hover { background: var(--color-primary); color: #fff; }

/* AI HTMLツールバー */
.ai-html-toolbar { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; background:var(--color-background-secondary); border-bottom:1px solid var(--color-border); border-radius:8px 8px 0 0; }
.ai-html-label { font-size:12px; color:var(--color-text-secondary); font-weight:600; }
.ai-html-toolbar-btns { display:flex; gap:6px; }
.ai-html-btn { font-size:12px; padding:4px 12px; border-radius:4px; border:1px solid var(--color-border); background:var(--color-background-primary); cursor:pointer; text-decoration:none; color:var(--color-text-primary); }
.ai-html-btn:hover { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.ai-html-time { font-size:11px; color:var(--color-text-secondary); margin-left:6px; }
.ai-html-toolbar { flex-wrap: nowrap; gap: 4px; }
.ai-html-toolbar-btns { flex-shrink: 0; }
.ai-html-label { white-space: nowrap; }
.ai-html-time { white-space: nowrap; flex-shrink: 0; }

/* AI HTML ヘッダー（案A：🤖横に統合） */
.ai-html-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ai-html-badge { font-size:12px; font-weight:500; color:var(--color-text-secondary); background:var(--color-background-primary); border:0.5px solid var(--color-border-secondary); border-radius:4px; padding:2px 8px; white-space:nowrap; }
.ai-html-header .ai-html-time { font-size:11px; color:var(--color-text-secondary); white-space:nowrap; }
.ai-html-header-btns { margin-left:auto; display:flex; gap:6px; flex-shrink:0; }
.ai-html-header .ai-html-btn { font-size:11px; padding:2px 10px; border-radius:4px; border:0.5px solid var(--color-border-secondary); background:var(--color-background-primary); cursor:pointer; color:var(--color-text-primary); white-space:nowrap; }
.ai-html-header .ai-html-btn:hover { background:var(--color-primary,#0098d4); color:#fff; border-color:transparent; }

/* AI HTML 🤖マーク横ヘッダー */
.ai-html-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ai-icon { font-size:18px; flex-shrink:0; }
.ai-html-header { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }

/* セッション切れオーバーレイ */
#session-expired-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:99999; display:flex; align-items:center; justify-content:center; }
.session-expired-box { background:var(--color-background-primary); border-radius:var(--border-radius-lg); padding:2rem 2.5rem; text-align:center; max-width:320px; width:90%; }
.session-expired-icon { font-size:40px; margin-bottom:12px; }
.session-expired-title { font-size:18px; font-weight:500; color:var(--color-text-primary); margin-bottom:8px; }
.session-expired-msg { font-size:14px; color:var(--color-text-secondary); margin-bottom:20px; }
.session-expired-btn { background:var(--color-primary,#0098d4); color:#fff; border:none; border-radius:var(--border-radius-md); padding:10px 28px; font-size:14px; cursor:pointer; font-weight:500; }
.session-expired-btn:hover { opacity:0.9; }

/* HTMLプレビュー全画面モーダル */
.ai-html-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; }
.ai-html-modal-inner { background:#fff; border-radius:12px; width:100%; max-width:900px; height:88vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 40px rgba(0,0,0,0.3); }
.ai-html-modal-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#f5f5f5; border-bottom:1px solid #ddd; }
.ai-html-modal-title { font-size:14px; font-weight:600; color:#333; }
.ai-html-modal-close { font-size:20px; cursor:pointer; color:#666; background:none; border:none; padding:0 4px; line-height:1; }
.ai-html-modal-close:hover { color:#000; }
.ai-html-modal-frame { flex:1; width:100%; height:80vh; border:none; overflow:auto; }

/* GPU使用率メーター */
.gpu-meter { position:relative; display:flex; align-items:center; padding:4px 10px; background:var(--color-background-secondary); border-radius:6px; font-size:11px; cursor:pointer; }
.gpu-meter-label { color:var(--color-text-secondary); font-weight:600; white-space:nowrap; letter-spacing:0.5px; }
.gpu-meter-panel { display:none; position:absolute; top:calc(100% + 8px); right:0; background:var(--color-background-primary); border:1px solid var(--color-border); border-radius:8px; padding:12px 14px; box-shadow:0 4px 16px rgba(0,0,0,0.15); z-index:100; min-width:200px; cursor:default; }
.gpu-meter.gpu-open .gpu-meter-panel { display:block; }
.gpu-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.gpu-row:last-child { margin-bottom:0; }
.gpu-row-label { width:60px; font-size:10px; color:var(--color-text-secondary); font-weight:600; letter-spacing:0.5px; }
.gpu-row-bar { flex:1; height:8px; background:var(--color-border); border-radius:4px; overflow:hidden; }
.gpu-row-fill { height:100%; width:0%; background:#0098d4; transition:width 0.6s ease, background 0.6s ease; }
.gpu-row-fill.gpu-high { background:#ff6b6b; }
.gpu-row-fill.gpu-mid { background:#ffa94d; }
.gpu-row-text { width:40px; text-align:right; font-size:11px; color:var(--color-text-primary); font-weight:600; white-space:nowrap; }

/* GPUモニター専用サイドバー */
.gpu-sidebar { position:fixed; top:50%; right:12px; transform:translateY(-50%); width:130px; background:var(--color-background-primary); border:1px solid var(--color-border); border-radius:10px; padding:10px 12px; box-shadow:0 2px 10px rgba(0,0,0,0.12); z-index:50; font-size:11px; transition:transform 0.3s ease, right 0.3s ease; display:none; }
body.is-gpu-owner .gpu-sidebar { display:block; }
.gpu-sidebar.gpu-hidden { right:-130px; }
.gpu-sidebar-toggle { position:absolute; left:-22px; top:50%; transform:translateY(-50%); width:22px; height:40px; background:var(--color-background-primary); border:1px solid var(--color-border); border-right:none; border-radius:6px 0 0 6px; cursor:pointer; font-size:14px; color:var(--color-text-secondary); display:flex; align-items:center; justify-content:center; }
.gpu-sidebar.gpu-hidden .gpu-sidebar-toggle { transform:translateY(-50%) rotate(180deg); }

.gpu-sidebar-title { font-weight:700; color:var(--color-text-secondary); letter-spacing:1px; margin-bottom:8px; text-align:center; }
.gpu-sidebar-model { font-size:9px; color:var(--color-text-tertiary); text-align:center; margin-bottom:10px; word-break:break-all; line-height:1.4; padding:0 2px; }
.gpu-sidebar-row { margin-bottom:8px; }
.gpu-sidebar-row:last-child { margin-bottom:0; }
.gpu-sidebar-label { display:block; font-size:9px; color:var(--color-text-secondary); font-weight:600; letter-spacing:0.5px; margin-bottom:3px; }
.gpu-sidebar-bar { width:100%; height:7px; background:var(--color-border); border-radius:4px; overflow:hidden; margin-bottom:2px; }
.gpu-sidebar-fill { height:100%; width:0%; background:#0098d4; transition:width 0.6s ease, background 0.6s ease; }
.gpu-sidebar-fill.gpu-high { background:#ff6b6b; }
.gpu-sidebar-fill.gpu-mid { background:#ffa94d; }
.gpu-sidebar-text { display:block; text-align:right; font-size:10px; color:var(--color-text-primary); font-weight:600; }
@media (max-width: 768px) { .gpu-sidebar { display:none; } }


/* LINKAI_DEV_SYSTEM_MONITOR_CSS_REMOVED_V2 */

/* ===== 12章: ドキュメントゾーン(レイアウト動的切替) ===== */
body.doc-mode .sidebar {
  width: 64px;
  transition: width 0.32s cubic-bezier(0.4,0,0.2,1);
}
.sidebar {
  transition: width 0.32s cubic-bezier(0.4,0,0.2,1);
}
body.doc-mode .sidebar .logo-text,
body.doc-mode .sidebar .room-name,
body.doc-mode .sidebar .user-list-name {
  display: none;
}
.doc-zone {
  display: none;
  flex-direction: column;
  width: 0;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--sidebar-divider);
  overflow: hidden;
  transition: width 0.32s cubic-bezier(0.4,0,0.2,1);
}
body.doc-mode .doc-zone {
  display: flex;
  width: 38%;
  min-width: 360px;
}
.doc-zone-header {
  background: var(--side-bg);
  border-bottom: 1px solid var(--sidebar-divider);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-zone-header .dtitle {
  font-size: 13.5px;
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-zone-header .close-btn {
  border: none;
  background: var(--bg);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-mute, #6b7480);
}
.doc-zone-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  font-size: 13.5px;
  line-height: 1.8;
}
.doc-zone-footer {
  border-top: 1px solid var(--border);
  padding: 10px 18px;
  display: flex;
  gap: 8px;
}
.doc-zone-footer button {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #d8dee5);
  background: var(--bg);
  cursor: pointer;
}
body:not(.is-admin) .admin-only {
  display: none !important;
}
@media (max-width: 768px) {
  body.doc-mode .doc-zone { display: none; }
}

.doc-card {
  cursor: pointer;
  border: 2px solid var(--color-primary, #0098d4);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  padding: 10px 14px;
}
.doc-card:hover {
  border-color: #0098d4;
  box-shadow: 0 0 0 4px rgba(0,152,212,0.12);
}
.doc-card-badge {
  display: inline-block;
  background: rgba(0,152,212,0.12);
  color: #0098d4;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.doc-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doc-card-head .icon {
  font-size: 18px;
  margin-bottom: 2px;
}
.doc-card-head .meta .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1a2332);
  line-height: 1.4;
}
.doc-card-head .meta .sub {
  font-size: 12px;
  color: var(--text-secondary, #6b7a8d);
}
.doc-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.doc-card-head .open-label {
  font-size: 24px;
  color: #0098d4;
  line-height: 1;
  margin-left: 8px;
  flex-shrink: 0;
}

/* 討論まとめ切り替えアニメーション */
@keyframes summaryFlash {
  0%   { box-shadow: inset 0 0 0 3px rgba(255, 215, 0, 0.9); }
  50%  { box-shadow: inset 0 0 0 3px rgba(255, 215, 0, 0.9), 0 0 24px rgba(255, 215, 0, 0.4); }
  100% { box-shadow: none; }
}
.doc-zone.summary-flash {
  animation: summaryFlash 1.2s ease-out;
}

/* 討論フェーズ設定パネル */
.debate-phase-settings { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; padding: 10px 12px; background: var(--bg-secondary, #f5f5f5); border-radius: 8px; border: 1px solid var(--border-color, #ddd); }
.debate-phase-option { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.debate-phase-disabled { opacity: 0.45; cursor: not-allowed; }

/* 報告書生成ダイアログ */
.report-dialog-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.report-dialog {
  background: var(--bg-primary, #fff); border-radius: 12px;
  padding: 24px; width: 320px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.report-dialog h3 { margin: 0 0 8px; font-size: 15px; }
.report-dialog p { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary, #666); }
.report-dialog-btns { display: flex; flex-direction: column; gap: 8px; }
.report-dialog-btn {
  padding: 10px 16px; border: none; border-radius: 8px;
  font-size: 13px; font-weight: bold; cursor: pointer; text-align: left;
}
.report-dialog-btn.local {
  background: var(--bg-secondary, #f5f5f5); color: var(--text-primary, #333);
  border: 1px solid var(--border-color, #ddd);
}
.report-dialog-btn.local:hover { background: var(--bg-hover, #e8e8e8); }
.report-dialog-btn.cancel {
  background: transparent; color: var(--text-secondary, #666);
  font-weight: normal; text-align: center;
}
.report-dialog-btn.cancel:hover { background: var(--bg-secondary, #f5f5f5); }
.report-dialog-note {
  font-size: 11px; color: var(--text-secondary, #999);
  margin-top: 4px; padding-left: 4px;
}

/* doc-mode時にサイドバーの文字要素を非表示 */
body.doc-mode .logo-text,
body.doc-mode .logo-ai-badge,
body.doc-mode .section-title,
body.doc-mode .add-room-btn {
  display: none !important;
}

/* Ollamaアンロードボタンは管理者のみ表示 */
#ollama-unload-btn,
#ollama-unload-status {
  display: none !important;
}
body.is-admin #ollama-unload-btn,
body.is-admin #ollama-unload-status {
  display: block !important;
}

/* 送信ボタン：ツールバー右端に配置 */
.composer-toolbar {
  display: flex;
  align-items: center;
}
.composer-toolbar .send-btn {
  margin-left: auto;
}

/* AI機能セクション・ファイルアップロード上限は管理者のみ表示 */
#ai-features-section,
#maxfilesize-section {
  display: none !important;
}
body.is-admin #ai-features-section,
body.is-admin #maxfilesize-section {
  display: block !important;
}

/* 設定メニュー内ログアウトボタン */
.logout-btn-menu {
  display: block;
  width: calc(100% - 32px);
  margin: 4px 16px;
  padding: 10px 16px;
  background: transparent;
  color: #e53e3e;
  border: 1.5px solid #e53e3e;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.logout-btn-menu:hover {
  background: #e53e3e;
  color: white;
}


/* ===== LINKAI WORKSPACE SIDEBAR ===== */

.room-list {
  padding: 0 10px 14px;
}

.workspace-group-label {
  margin: 17px 4px 7px;
  padding-top: 13px;
  border-top: 1px solid rgba(50, 90, 120, .14);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .19em;
  font-weight: 750;
  color: rgba(28, 56, 82, .48);
}

.workspace-section {
  margin-bottom: 9px;
}

.workspace-section-label {
  position: relative;
  padding: 7px 10px 5px 18px;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .16em;
  font-weight: 750;
  color: rgba(39, 64, 87, .48);
}

.workspace-section-label::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(70, 100, 125, .38);
}

.workspace-section-market .workspace-section-label::before {
  background: #0f766e;
  box-shadow: 0 0 8px rgba(15, 118, 110, .28);
}

.workspace-section-business .workspace-section-label::before {
  background: #2563eb;
  box-shadow: 0 0 8px rgba(37, 99, 235, .24);
}

.workspace-section-general .workspace-section-label::before {
  background: #7c3aed;
  box-shadow: 0 0 8px rgba(124, 58, 237, .22);
}

.workspace-room-items {
  display: flex;
  flex-direction: column;
}

.workspace-room {
  min-height: 42px;
  margin-bottom: 2px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.workspace-room .room-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 11px;
  box-shadow: none;
}

.workspace-room:hover {
  background: rgba(255, 255, 255, .42);
  border-color: rgba(70, 100, 125, .08);
}

.workspace-room.active {
  color: #183247;
  box-shadow: none;
}

.workspace-room.active::before {
  display: none;
}

.workspace-room-market.active {
  background: rgba(15, 118, 110, .11);
  border-color: rgba(15, 118, 110, .22);
}

.workspace-room-business.active {
  background: rgba(37, 99, 235, .10);
  border-color: rgba(37, 99, 235, .18);
}

.workspace-room-general.active {
  background: rgba(124, 58, 237, .09);
  border-color: rgba(124, 58, 237, .16);
}

.workspace-room-chat.active {
  background: rgba(40, 92, 128, .09);
  border-color: rgba(40, 92, 128, .14);
}

.workspace-room.active .room-name {
  font-weight: 650;
}

.workspace-room-market .room-avatar {
  outline: 1px solid rgba(15, 118, 110, .20);
}

.workspace-room-business .room-avatar {
  outline: 1px solid rgba(37, 99, 235, .18);
}

.workspace-room-general .room-avatar {
  outline: 1px solid rgba(124, 58, 237, .16);
}


/* ===== LINKAI WORKSPACE IDENTITY ===== */

.workspace-room-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.workspace-room-identity .room-name {
  flex: none;
  width: 100%;
  font-size: 14px;
  line-height: 1.15;
}

.workspace-room-role {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  line-height: 1;
  letter-spacing: .12em;
  font-weight: 700;
  color: rgba(39, 64, 87, .38);
}

.workspace-room-market .workspace-room-role {
  color: rgba(15, 118, 110, .58);
}

.workspace-room-business .workspace-room-role {
  color: rgba(37, 99, 235, .54);
}

.workspace-room-general .workspace-room-role {
  color: rgba(124, 58, 237, .52);
}

.workspace-room.active .workspace-room-role {
  opacity: .88;
}

.workspace-room:has(.workspace-room-identity) {
  min-height: 48px;
}


/* =========================================================
   LINKAI COMMAND SIDEBAR v1
   Active only while LinkAI intelligence views are visible
========================================================= */

body.linkai-command-mode .sidebar {
  background:
    radial-gradient(circle at 20% 8%, rgba(57,169,255,.12), transparent 28%),
    linear-gradient(180deg, #0b1b2e 0%, #07111f 100%);
  color: #dcecff;
  border-right-color: rgba(57,169,255,.25);
}

body.linkai-command-mode .sidebar::after {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(57,169,255,.55),
    rgba(168,120,255,.30),
    transparent
  );
}

body.linkai-command-mode .sidebar-header {
  border-color: rgba(120,170,220,.14) !important;
}

body.linkai-command-mode .logo-wrap {
  background: rgba(8,24,42,.88);
  border-color: rgba(57,169,255,.28);
}

body.linkai-command-mode .logo-text {
  color: #eaf6ff;
}

body.linkai-command-mode .logo-ai-badge {
  background: rgba(57,169,255,.12);
  color: #6fc4ff;
  border-color: rgba(57,169,255,.28);
}

body.linkai-command-mode .section-title,
body.linkai-command-mode .workspace-group-label,
body.linkai-command-mode .workspace-section-label,
body.linkai-command-mode .user-list-empty {
  color: #6f8ca8;
}

body.linkai-command-mode .section-title,
body.linkai-command-mode .workspace-group-label,
body.linkai-command-mode #user-info {
  border-color: rgba(120,170,220,.14) !important;
}

body.linkai-command-mode .room-item,
body.linkai-command-mode .user-list-item,
body.linkai-command-mode .user-name {
  color: #bfd2e4;
}

body.linkai-command-mode .workspace-room:hover,
body.linkai-command-mode .room-item:hover,
body.linkai-command-mode .user-list-item:hover {
  background: rgba(57,169,255,.08);
  color: #f4faff;
  border-color: rgba(57,169,255,.14);
}

body.linkai-command-mode .workspace-room.active,
body.linkai-command-mode .room-item.active,
body.linkai-command-mode .user-list-item.active {
  color: #f4faff;
  background: rgba(57,169,255,.14);
  border-color: rgba(57,169,255,.34);
  box-shadow:
    inset 3px 0 0 #39a9ff,
    0 0 18px rgba(57,169,255,.08);
}

body.linkai-command-mode .workspace-section-market .workspace-section-label::before {
  box-shadow: 0 0 10px rgba(78,225,160,.65);
}

body.linkai-command-mode .workspace-section-business .workspace-section-label::before {
  box-shadow: 0 0 10px rgba(57,169,255,.70);
}

body.linkai-command-mode .workspace-section-general .workspace-section-label::before {
  box-shadow: 0 0 10px rgba(168,120,255,.70);
}

body.linkai-command-mode .add-room-btn {
  color: #8fa9c2;
  border-color: rgba(57,169,255,.30);
}

body.linkai-command-mode .add-room-btn:hover {
  color: #eaf6ff;
  background: rgba(57,169,255,.10);
  border-color: #39a9ff;
}

body.linkai-command-mode .sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(111,196,255,.18);
}

body.linkai-command-mode #user-info {
  background: rgba(8,24,42,.72);
}


/* =========================================================
   Room v2 create modal
   ========================================================= */
.room-kind-options {
  display: grid;
  gap: 10px;
}

.room-kind-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: #f8fbff;
  cursor: pointer;
}

.room-kind-option.selected {
  border-color: #0098d4;
  background: #eef9ff;
  box-shadow: 0 0 0 2px rgba(0, 152, 212, 0.12);
}

.room-kind-option.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.room-kind-option strong {
  display: block;
  color: #102033;
  font-size: 14px;
  margin-bottom: 3px;
}

.room-kind-option span {
  display: block;
  color: #52667a;
  font-size: 12px;
  line-height: 1.45;
}

.room-kind-option input {
  margin-top: 3px;
}

/* =========================================================
   Room v2 modal layout polish
   ========================================================= */
.room-create-modal .room-settings-content {
  width: min(520px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.room-create-modal .room-settings-header {
  flex: 0 0 auto;
}

.room-create-modal .room-settings-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: 0;
}

.room-create-modal .room-create-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 14px 0 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    #ffffff 22%,
    #ffffff 100%
  );
}

.room-create-modal .create-room-submit-btn {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  font-size: 15px;
}

.room-create-modal .create-members-list {
  max-height: 220px;
  overflow-y: auto;
  border-radius: 12px;
}

.room-create-modal .room-kind-option {
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.room-create-modal .room-kind-option:not(.disabled):hover {
  transform: translateY(-1px);
}

.room-create-modal .room-kind-option strong::before {
  display: inline-block;
  margin-right: 6px;
}

.room-create-modal .room-kind-option:nth-child(1) strong::before {
  content: '💬';
}

.room-create-modal .room-kind-option:nth-child(2) strong::before {
  content: ''; /* LINKAI_REMOVE_BOTTOM_LEGACY_ICONS_SOURCE_V2 */
}

.room-create-modal .room-kind-option:nth-child(3) strong::before {
  content: '🗂️';
}

@media (max-height: 760px) {
  .room-create-modal .room-settings-content {
    max-height: calc(100vh - 24px);
  }

  .room-create-modal .create-members-list {
    max-height: 170px;
  }
}


/* =========================================================
   Room v2 modal visual pass 02
   ========================================================= */
.room-create-modal .room-settings-content {
  width: min(560px, calc(100vw - 28px));
  border-radius: 18px;
}

.room-create-modal .room-settings-body {
  padding-right: 14px;
  scrollbar-width: thin;
}

.room-create-modal .room-kind-options {
  gap: 9px;
}

.room-create-modal .room-kind-option {
  min-height: 62px;
  align-items: center;
}

.room-create-modal .room-kind-option strong {
  font-size: 14.5px;
}

.room-create-modal .room-kind-option span {
  font-size: 12.5px;
}

.room-create-modal .room-kind-option:nth-child(1) strong::before {
  content: '💬';
}

.room-create-modal .room-kind-option:nth-child(2) strong::before {
  content: ''; /* LINKAI_REMOVE_BOTTOM_LEGACY_ICONS_SOURCE_V2 */
}

.room-create-modal .room-kind-option:nth-child(3) strong::before {
  content: '🗂️';
}

.room-create-modal .create-members-list {
  max-height: 190px;
}

.room-create-modal .create-member-item {
  min-height: 52px;
}

.room-create-modal .room-create-footer {
  padding-top: 12px;
}

.room-create-modal .create-room-submit-btn {
  box-shadow: 0 8px 18px rgba(0, 152, 212, 0.18);
}

@media (min-height: 860px) {
  .room-create-modal .create-members-list {
    max-height: 250px;
  }
}

@media (max-height: 760px) {
  .room-create-modal .room-kind-option {
    min-height: 56px;
  }

  .room-create-modal .create-members-list {
    max-height: 150px;
  }
}

/* =========================================================
   Room v2 debate controls
   ========================================================= */
.debate-voice-controls {
  gap: 6px;
  align-items: center;
}

.room-debate-start-btn,
.room-debate-stop-btn {
  min-width: 74px;
  padding-inline: 10px;
  font-weight: 700;
}

.room-debate-start-btn {
  background: linear-gradient(135deg, #0098d4, #06b6d4);
  color: #fff;
}

.room-debate-stop-btn {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
}

.room-debate-start-btn:disabled,
.room-debate-stop-btn:disabled {
  opacity: .65;
  cursor: wait;
}


/* =========================================================
   Message inline edit UI stability
   ========================================================= */
#messages li.message-editing {
  align-items: stretch;
}

#messages li.message-editing .bubble {
  width: min(720px, 78vw);
  max-width: min(720px, 78vw);
  padding: 10px;
  box-sizing: border-box;
}

#messages li.message-editing .message-editing-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 360px;
  box-sizing: border-box;
  resize: vertical;
  overflow: auto;
  border: 1px solid rgba(0, 152, 212, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  line-height: 1.6;
  outline: none;
  background: #fff;
}

#messages li.message-editing .message-editing-textarea:focus {
  border-color: rgba(0, 152, 212, 0.9);
  box-shadow: 0 0 0 3px rgba(0, 152, 212, 0.12);
}

#messages li.message-editing .message-editing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

#messages li.message-editing .message-editing-actions button {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  cursor: pointer;
}

#messages li.message-editing .message-editing-cancel {
  background: #eef2f7;
  color: #334155;
}

#messages li.message-editing .message-editing-save {
  background: var(--primary, #0098d4);
  color: #fff;
}

#messages li.message-editing .message-editing-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}


/* LINKAI_LEGACY_NAV_CLEANUP_V2 */
.gpu-sidebar,
[id*="gpu-sidebar"],
[class*="gpu-sidebar"],
[id*="gpu-server"],
[class*="gpu-server"],
#ollama-unload-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Chrome系では :has で親ごと潰す */
body div:has(#ollama-unload-btn),
body aside:has(#ollama-unload-btn),
body section:has(#ollama-unload-btn) {
  display: none !important;
}

/* 旧右モニター用の余白が残る場合の保険 */
body.linkai-command-mode .main {
  padding-right: 0 !important;
}

/* LINKAI_REMOVE_BOTTOM_LEGACY_ICONS_V1 */
[id*="voice-toggle"],
[class*="voice-toggle"],
[id*="speech-toggle"],
[class*="speech-toggle"],
[id*="model-select-toggle"],
[class*="model-select-toggle"],
[id*="preferred-model-toggle"],
[class*="preferred-model-toggle"] {
  display: none !important;
}


/* LINKAI_REMOVE_BOTTOM_LEGACY_ICONS_SOURCE_V2 */
#debate-event-btn,
#model-select-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* =========================================================
   LINKAI_CHAT_NEXT_PALETTE_V1
   LINKAI Next共通の明るい業務配色
   ========================================================= */

:root {
  --linkai-next-bg: #f4f6f8;
  --linkai-next-panel: #ffffff;
  --linkai-next-sub: #f9fafb;
  --linkai-next-line: #d9e0e7;
  --linkai-next-text: #172033;
  --linkai-next-muted: #667085;
  --linkai-next-blue: #175cd3;
  --linkai-next-blue-soft: #eff6ff;
  --linkai-next-blue-line: #bfdbfe;
  --linkai-next-green: #067647;
  --linkai-next-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
}

/* 画面全体 */
html,
body {
  background: var(--linkai-next-bg) !important;
  color: var(--linkai-next-text) !important;
}

/* 左サイドバー */
.sidebar {
  background: var(--linkai-next-panel) !important;
  border-right: 1px solid var(--linkai-next-line) !important;
  color: var(--linkai-next-text) !important;
}

.sidebar-header {
  background: var(--linkai-next-panel) !important;
  border-bottom: 1px solid var(--linkai-next-line) !important;
}

.sidebar-scroll {
  background: var(--linkai-next-panel) !important;
}

.sidebar-scroll::before,
.sidebar::before,
.sidebar::after {
  box-shadow: none !important;
}

/* サイドバー見出し */
.workspace-group-label,
.sidebar-section-title,
.group-title,
.direct-message-title {
  color: var(--linkai-next-muted) !important;
}

/* ルーム・ユーザー */
.room-item,
.user-list-item {
  color: var(--linkai-next-text) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.room-item:hover,
.user-list-item:hover {
  background: var(--linkai-next-sub) !important;
  border-color: var(--linkai-next-line) !important;
}

.room-item.active,
.user-list-item.active {
  background: var(--linkai-next-blue-soft) !important;
  border-color: var(--linkai-next-blue-line) !important;
  color: var(--linkai-next-blue) !important;
  box-shadow: none !important;
}

.room-item.active::before,
.user-list-item.active::before {
  background: var(--linkai-next-blue) !important;
}

.room-item .room-name,
.user-list-name {
  color: inherit !important;
}

/* 新規ルーム作成 */
.create-room-btn,
.new-room-btn,
button[class*="room-create"] {
  background: var(--linkai-next-panel) !important;
  border-color: var(--linkai-next-blue-line) !important;
  color: var(--linkai-next-blue) !important;
  box-shadow: none !important;
}

.create-room-btn:hover,
.new-room-btn:hover,
button[class*="room-create"]:hover {
  background: var(--linkai-next-blue-soft) !important;
}

/* メイン領域 */
.main {
  background: var(--linkai-next-bg) !important;
  color: var(--linkai-next-text) !important;
}

.main::before {
  background: none !important;
}

/* チャット上部 */
.chat-header,
.main-header,
.room-header,
header.chat-header {
  background: var(--linkai-next-panel) !important;
  border-bottom: 1px solid var(--linkai-next-line) !important;
  color: var(--linkai-next-text) !important;
  box-shadow: none !important;
}

/* メッセージ領域 */
#messages {
  background: var(--linkai-next-bg) !important;
}

/* 相手側メッセージ */
#messages li.other .bubble {
  background: var(--linkai-next-panel) !important;
  border: 1px solid var(--linkai-next-line) !important;
  color: var(--linkai-next-text) !important;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.05) !important;
}

/* 自分側メッセージ */
#messages li.self .bubble {
  background: var(--linkai-next-blue) !important;
  border: 1px solid var(--linkai-next-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(23, 92, 211, 0.16) !important;
}

/* 日付区切り等 */
.date-separator,
.message-date,
.message-time,
.edited-label,
.empty-message {
  color: var(--linkai-next-muted) !important;
}

/* 入力エリア */
#form,
.message-form,
.composer,
.composer-container,
.input-container {
  background: var(--linkai-next-panel) !important;
  border-color: var(--linkai-next-line) !important;
  box-shadow: none !important;
}

#input {
  background: var(--linkai-next-panel) !important;
  color: var(--linkai-next-text) !important;
  border-color: var(--linkai-next-line) !important;
  box-shadow: none !important;
}

#input::placeholder {
  color: #98a2b3 !important;
}

#input:focus {
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(23, 92, 211, 0.10) !important;
}

/* 送信ボタン */
button.send-btn {
  background: var(--linkai-next-blue) !important;
  border-color: var(--linkai-next-blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

button.send-btn:hover:not(:disabled) {
  background: #1849a9 !important;
  border-color: #1849a9 !important;
}

button.send-btn:disabled {
  background: #d0d5dd !important;
  border-color: #d0d5dd !important;
  color: #ffffff !important;
}

/* 入力ツールバー */
.composer-toolbar,
.composer-toolbar-btn {
  background: var(--linkai-next-panel) !important;
  color: var(--linkai-next-text) !important;
  border-color: var(--linkai-next-line) !important;
}

.composer-toolbar-btn:hover:not(:disabled) {
  background: var(--linkai-next-blue-soft) !important;
  color: var(--linkai-next-blue) !important;
}

/* スクロールバー */
.sidebar-scroll::-webkit-scrollbar-thumb,
#messages::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover,
#messages::-webkit-scrollbar-thumb:hover {
  background: #98a2b3 !important;
}

/* モーダル類 */
.modal,
.modal-content,
.room-settings-content,
.room-create-modal {
  background: var(--linkai-next-panel) !important;
  color: var(--linkai-next-text) !important;
  border-color: var(--linkai-next-line) !important;
  box-shadow: var(--linkai-next-shadow) !important;
}



/* =========================================================
   LINKAI_CHAT_SIDEBAR_CLEAN_V1
   サイドバーのタイトル・ラベル・アカウント表示整理
   ========================================================= */

/* タイトル */
.sidebar-header {
  min-height: 58px !important;
  padding: 10px 12px !important;
  border-bottom: 0 !important;
}

.logo-wrap {
  width: 100% !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.logo-mark {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  background: var(--linkai-next-blue, #175cd3) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.logo-text {
  color: var(--linkai-next-text, #172033) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.logo-ai-badge {
  display: none !important;
}

/* 不要な英字ナビゲーション */
.workspace-group-label,
.workspace-section-label {
  display: none !important;
}

/* モデル名表示 */
.ai-engine-mini {
  display: none !important;
}

/* サイドバー内の不要な横線 */
.sidebar-scroll {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.sidebar-scroll::before,
.sidebar-scroll::after {
  display: none !important;
}

.section-title {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.room-list,
.user-list,
.workspace-section,
.workspace-room-items {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.add-room-btn {
  box-shadow: none !important;
}

/* ログインユーザーを通常のアカウント行として表示 */
.user-info {
  min-height: 64px !important;
  display: none;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--linkai-next-panel, #ffffff) !important;
  color: var(--linkai-next-text, #172033) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.user-info:hover {
  background: var(--linkai-next-blue-soft, #eff6ff) !important;
}

.user-info .user-avatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.user-account-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.user-info .user-name {
  overflow: hidden !important;
  color: var(--linkai-next-text, #172033) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.user-account-note {
  color: var(--linkai-next-muted, #667085) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.user-account-arrow {
  flex: 0 0 auto !important;
  color: #98a2b3 !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.user-info:hover .user-account-arrow {
  color: var(--linkai-next-blue, #175cd3) !important;
}

/* ドキュメントモード等でもタイトルと本人表示を維持 */
body.doc-mode .sidebar .logo-text,
body.doc-mode .sidebar .user-name {
  display: block !important;
}



/* =========================================================
   LINKAI_DOC_SPLIT_LAYOUT_V1
   チャット＋資料の左右表示を整理
   ========================================================= */

/* 資料カード */
.doc-card {
  width: min(100%, 360px) !important;
  padding: 14px 16px !important;
  border: 1px solid var(--linkai-next-blue-line, #bfdbfe) !important;
  border-radius: 10px !important;
  background: var(--linkai-next-panel, #ffffff) !important;
  color: var(--linkai-next-text, #172033) !important;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06) !important;
  cursor: pointer !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

.doc-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--linkai-next-blue, #175cd3) !important;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.10) !important;
}

.doc-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--linkai-next-blue-soft, #eff6ff) !important;
  color: var(--linkai-next-blue, #175cd3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.doc-card-head {
  align-items: flex-end !important;
  gap: 14px !important;
}

.doc-card .title {
  color: var(--linkai-next-text, #172033) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.doc-card .sub {
  margin-top: 3px !important;
  color: var(--linkai-next-muted, #667085) !important;
  font-size: 11px !important;
}

.doc-card .open-label {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--linkai-next-blue-line, #bfdbfe) !important;
  border-radius: 7px !important;
  background: var(--linkai-next-blue-soft, #eff6ff) !important;
  color: var(--linkai-next-blue, #175cd3) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.doc-card:hover .open-label {
  border-color: var(--linkai-next-blue, #175cd3) !important;
  background: var(--linkai-next-blue, #175cd3) !important;
  color: #ffffff !important;
}

.open-label-arrow {
  font-size: 14px !important;
}

/* 資料展開時は左サイドバーを完全収納 */
body.doc-mode .sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* チャット領域 */
body.doc-mode .main {
  flex: 1 1 58% !important;
  width: auto !important;
  min-width: 520px !important;
  max-width: none !important;
}

/* 資料パネル */
body.doc-mode .doc-zone {
  display: flex !important;
  flex: 0 1 42% !important;
  width: 42% !important;
  min-width: 430px !important;
  max-width: 760px !important;
  height: 100vh !important;
  margin: 0 !important;
  border-left: 1px solid var(--linkai-next-line, #d9e0e7) !important;
  background: var(--linkai-next-panel, #ffffff) !important;
  box-shadow: -8px 0 24px rgba(16, 24, 40, 0.06) !important;
}

/* 資料ヘッダー */
.doc-zone-header {
  min-height: 66px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--linkai-next-line, #d9e0e7) !important;
  background: var(--linkai-next-panel, #ffffff) !important;
}

.doc-zone-header .dtitle {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  color: var(--linkai-next-text, #172033) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.doc-zone-header .close-btn {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--linkai-next-line, #d9e0e7) !important;
  border-radius: 8px !important;
  background: var(--linkai-next-panel, #ffffff) !important;
  color: var(--linkai-next-muted, #667085) !important;
  font-size: 18px !important;
  cursor: pointer !important;
}

.doc-zone-header .close-btn:hover {
  border-color: var(--linkai-next-blue-line, #bfdbfe) !important;
  background: var(--linkai-next-blue-soft, #eff6ff) !important;
  color: var(--linkai-next-blue, #175cd3) !important;
}

/* 資料本文 */
.doc-zone-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 24px 28px !important;
  background: var(--linkai-next-panel, #ffffff) !important;
  color: var(--linkai-next-text, #172033) !important;
  line-height: 1.8 !important;
}

/* 資料下部操作 */
.doc-zone-footer {
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 10px 14px !important;
  border-top: 1px solid var(--linkai-next-line, #d9e0e7) !important;
  background: var(--linkai-next-sub, #f9fafb) !important;
}

.doc-zone-footer button {
  min-height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid var(--linkai-next-line, #d9e0e7) !important;
  border-radius: 7px !important;
  background: var(--linkai-next-panel, #ffffff) !important;
  color: var(--linkai-next-text, #172033) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.doc-zone-footer button:hover {
  border-color: var(--linkai-next-blue-line, #bfdbfe) !important;
  background: var(--linkai-next-blue-soft, #eff6ff) !important;
  color: var(--linkai-next-blue, #175cd3) !important;
}

#doc-zone-back {
  margin-right: auto !important;
  border-color: var(--linkai-next-blue-line, #bfdbfe) !important;
  color: var(--linkai-next-blue, #175cd3) !important;
}

/* 展開中もチャット入力欄を維持 */
body.doc-mode .main #form {
  width: 100% !important;
}

body.doc-mode .main #messages {
  min-width: 0 !important;
}

/* 狭い画面では資料を全面表示 */
@media (max-width: 1050px) {
  body.doc-mode .main {
    display: none !important;
  }

  body.doc-mode .doc-zone {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 620px) {
  .doc-zone-body {
    padding: 18px 16px !important;
  }

  .doc-zone-footer {
    align-items: stretch !important;
  }

  .doc-zone-footer button {
    flex: 1 1 calc(50% - 8px) !important;
  }

  #doc-zone-back {
    flex-basis: 100% !important;
    margin-right: 0 !important;
  }
}



/* === ILINK_DELETED_MESSAGE_VISIBILITY_V1 START === */

li.deleted,
li.message-deleted {
  opacity: 0.42;
}

li.deleted .bubble-deleted,
li.message-deleted .bubble {
  color: #9aa1aa !important;
  background: rgba(148, 163, 184, 0.08) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: none !important;
}

.ilink-display-settings-entry {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 10px 12px;
  font: inherit;
  border-radius: 8px;
}

.ilink-display-settings-entry:hover {
  background: rgba(148, 163, 184, 0.10);
}

.ilink-display-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.34);
}

.ilink-display-settings-card {
  width: min(520px, 100%);
  background: #fff;
  color: #1f2937;
  border: 1px solid #dfe3e8;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
  padding: 18px;
}

.ilink-display-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ilink-display-settings-title {
  font-size: 18px;
  font-weight: 700;
}

.ilink-display-settings-sub,
.ilink-display-settings-desc {
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
}

.ilink-display-settings-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: inherit;
}

.ilink-display-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.ilink-display-settings-label {
  font-size: 14px;
  font-weight: 600;
}

#ilink-show-deleted-messages {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.ilink-display-settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

#ilink-display-settings-save {
  border: 0;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
}

/* === ILINK_DELETED_MESSAGE_VISIBILITY_V1 END === */

/* ILINK_CHAT_HOME_HEADER_STYLE_V1 */
.chat-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 8px;
  color: var(--text-main, #1f2937);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
}

.chat-home-link:hover {
  background: var(--bg-hover, rgba(15, 23, 42, .05));
}