/* ============================================================
   THEME VARIABLES
============================================================ */
:root {
  --claude-color: #f97316;
  --gpt-color:    #10b981;
  --gemini-color: #3b82f6;
  --user-color:   #a78bfa;
  --danger:  #ef4444;
  --warn:    #f59e0b;
  --success: #10b981;
  --claude-bg: rgba(249,115,22,0.10);
  --gpt-bg:    rgba(16,185,129,0.10);
  --gemini-bg: rgba(59,130,246,0.10);
  --user-bg:   rgba(167,139,250,0.10);
}

/* DARK */
[data-theme="dark"] {
  --bg:       #0a0c10;
  --bg2:      #0f1117;
  --surface:  #141720;
  --surface2: #1c1f2e;
  --border:   #252a3a;
  --text:     #e2e5f0;
  --text-dim: #7a80a0;
  --text-mid: #9499b0;
  --header-bg: #0f1117;
  --bubble-ai: #141720;
  --bubble-user: rgba(167,139,250,0.12);
  --bubble-border-user: rgba(167,139,250,0.25);
  --scrollbar: #252a3a;
}

/* LIGHT */
[data-theme="light"] {
  --bg:       #f0f2f8;
  --bg2:      #e8eaf2;
  --surface:  #ffffff;
  --surface2: #f5f6fa;
  --border:   #dde0ec;
  --text:     #1a1d2e;
  --text-dim: #8890b0;
  --text-mid: #5560808;
  --header-bg: #ffffff;
  --bubble-ai: #ffffff;
  --bubble-user: rgba(167,139,250,0.15);
  --bubble-border-user: rgba(124,106,247,0.3);
  --scrollbar: #dde0ec;
  --claude-bg: rgba(249,115,22,0.08);
  --gpt-bg:    rgba(16,185,129,0.08);
  --gemini-bg: rgba(59,130,246,0.08);
  --user-bg:   rgba(124,106,247,0.08);
}

/* LINE */
[data-theme="line"] {
  --bg:       #8CABD8;
  --bg2:      #7a9bc8;
  --surface:  #ffffff;
  --surface2: #f5f5f5;
  --border:   #d0d0d0;
  --text:     #1a1a1a;
  --text-dim: #666666;
  --text-mid: #444444;
  --header-bg: #00b900;
  --bubble-ai: #ffffff;
  --bubble-user: #9DE693;
  --bubble-border-user: transparent;
  --bubble-user-text: #1a1a1a;
  --scrollbar: #aaaaaa;
  --claude-color: #e05500;
  --gpt-color:    #007a3d;
  --gemini-color: #1a56c4;
  --user-color:   #1a1a1a;
  --claude-bg: rgba(224,85,0,0.08);
  --gpt-bg:    rgba(0,122,61,0.08);
  --gemini-bg: rgba(26,86,196,0.08);
  --user-bg:   rgba(200,245,160,0.5);
}

/* ============================================================
   BASE
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow: hidden;
  height: 100%;
  width: 100%;
  touch-action: pan-y;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background 0.3s, color 0.3s;
  touch-action: pan-y;
}

/* ============================================================
   HEADER
============================================================ */
header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 14px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 10px;
  transition: background 0.3s, border-color 0.3s;
}

/* AIBS Logo */
.aibs-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}

.logo-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 60%);
}

.logo-mark svg {
  width: 18px; height: 18px;
  fill: none; stroke: white; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-aibs {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.15em;
  color: var(--text);
  transition: color 0.3s;
}

[data-theme="line"] .logo-aibs { color: #ffffff; }

.logo-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  transition: color 0.3s;
}

[data-theme="line"] .logo-sub { color: rgba(255,255,255,0.7); }

/* Header right */
.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Login button */
.login-btn-style {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.login-btn-style:hover { border-color: var(--user-color); color: var(--user-color); }

.user-name-text {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-btn-style {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  text-decoration: none;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.2s;
  white-space: nowrap;
}
.logout-btn-style:hover { color: var(--danger); border-color: var(--danger); }

/* Theme switcher */
.theme-switcher {
  display: flex;
  gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}

.theme-btn {
  width: 26px; height: 22px;
  border: none; border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  transition: background 0.15s;
  line-height: 1;
}

.theme-btn.active { background: var(--border); }
.theme-btn:hover:not(.active) { background: rgba(255,255,255,0.06); }

/* Turn counter */
.turn-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  white-space: nowrap;
  transition: all 0.3s;
}
.turn-counter.warn   { color: var(--warn);    border-color: rgba(245,158,11,0.4); }
.turn-counter.danger { color: var(--danger);  border-color: rgba(239,68,68,0.4); }
.turn-counter.own-key{ color: var(--success); border-color: rgba(16,185,129,0.35); }

/* Mode toggle */
.mode-toggle { display: flex; gap: 3px; }

.toggle-btn {
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.toggle-btn.active {
  background: var(--user-bg);
  color: var(--user-color);
  border-color: rgba(167,139,250,0.4);
}

/* ============================================================
   TOOLBAR (model + topic)
============================================================ */
.toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}

.toolbar-row {
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.toolbar-row:last-child { border-bottom: none; }

.toolbar-label {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  letter-spacing: 0.08em;
}

.model-options { display: flex; gap: 5px; flex-wrap: wrap; }

.model-btn {
  padding: 2px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.model-btn:hover { border-color: var(--user-color); color: var(--text); }
.model-btn.active {
  background: var(--user-bg);
  color: var(--user-color);
  border-color: rgba(167,139,250,0.5);
}
.model-btn.locked { opacity: 0.32; cursor: not-allowed; }
.model-btn.locked::after { content: ' 🔒'; font-size: 8px; }

.upgrade-hint {
  font-size: 10px;
  color: var(--warn);
  font-family: 'JetBrains Mono', monospace;
  margin-left: auto;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex-shrink: 0;
}

#topic-input {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  flex: 1;
  outline: none;
}
#topic-input::placeholder { color: var(--text-dim); }

/* ============================================================
   CHAT
============================================================ */
#chat {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

#chat::-webkit-scrollbar { width: 4px; }
#chat::-webkit-scrollbar-track { background: transparent; }
#chat::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 2px; }

.message {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  animation: fadeSlide 0.25s ease forwards;
  opacity: 0;
}
@keyframes fadeSlide { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.message.user { flex-direction: row-reverse; }

/* LINE mode: no avatar for user */
[data-theme="line"] .message.user .avatar { display: none; }

.avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; font-weight: 700;
  flex-shrink: 0;
  transition: all 0.3s;
}
.avatar.claude { background: var(--claude-bg); color: var(--claude-color); border: 1px solid rgba(249,115,22,0.25); }
.avatar.gpt    { background: var(--gpt-bg);    color: var(--gpt-color);    border: 1px solid rgba(16,185,129,0.25); }
.avatar.gemini { background: var(--gemini-bg); color: var(--gemini-color); border: 1px solid rgba(59,130,246,0.25); }
.avatar.user   { background: var(--user-bg);   color: var(--user-color);   border: 1px solid rgba(167,139,250,0.25); }

/* LINE avatar circle */
[data-theme="line"] .avatar {
  border-radius: 50%;
  width: 34px; height: 34px;
}

.bubble-wrap { display: flex; flex-direction: column; gap: 2px; max-width: 74%; }
.message.user .bubble-wrap { align-items: flex-end; }

.message-delete-btn {
  display: none;
  width: 100%;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid var(--danger);
  background: var(--surface);
  color: var(--danger);
  font-size: 10px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  opacity: 0.8;
  transition: opacity 0.15s;
  text-align: center;
  margin-top: 2px;
}
.message-delete-btn:hover { opacity: 1; }
.message:hover .message-delete-btn { display: block; }

/* LINE: user bubble no name */
[data-theme="line"] .message.user .sender-name { display: none; }

.sender-name {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  padding-left: 2px;
}
.sender-name.claude { color: var(--claude-color); }
.sender-name.gpt    { color: var(--gpt-color); }
.sender-name.gemini { color: var(--gemini-color); }
.sender-name.user   { color: var(--user-color); }

.bubble {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  border: 1px solid var(--border);
  background: var(--bubble-ai);
  white-space: pre-wrap;
  word-break: break-word;
  transition: background 0.3s, border-color 0.3s;
}
.message.claude .bubble { border-color: rgba(249,115,22,0.18); }
.message.gpt    .bubble { border-color: rgba(16,185,129,0.18); }
.message.gemini .bubble { border-color: rgba(59,130,246,0.18); }
.message.user   .bubble {
  background: var(--bubble-user);
  border-color: var(--bubble-border-user);
}

/* LINE bubbles */
[data-theme="line"] .bubble {
  border-radius: 18px;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
[data-theme="line"] .message.user .bubble {
  border-radius: 18px 4px 18px 18px;
  color: var(--bubble-user-text, #1a1a1a);
}
[data-theme="line"] .message.claude .bubble,
[data-theme="line"] .message.gpt .bubble,
[data-theme="line"] .message.gemini .bubble {
  border-radius: 4px 18px 18px 18px;
}

/* Typing */
.typing-indicator { display: flex; gap: 8px; align-items: flex-end; }
.typing-dots {
  display: flex; gap: 4px;
  padding: 10px 14px;
  background: var(--bubble-ai);
  border: 1px solid var(--border);
  border-radius: 14px;
}
[data-theme="line"] .typing-dots { border: none; border-radius: 4px 18px 18px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; animation: bounce 1.2s ease-in-out infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,80%,100%{transform:translateY(0);opacity:0.4} 40%{transform:translateY(-5px);opacity:1} }

.system-msg {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 0;
}

[data-theme="line"] .system-msg {
  background: rgba(0,0,0,0.15);
  color: rgba(255,255,255,0.8);
  border-radius: 10px;
  padding: 4px 12px;
  font-size: 11px;
  align-self: center;
  width: fit-content;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ============================================================
   INPUT AREA
============================================================ */
.input-area {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}

/* Attachment preview */
.attachment-preview {
  display: none;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-dim);
  position: relative;
}
.attachment-preview.visible { display: flex; }

.attachment-thumb {
  width: 48px; height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.attachment-info { flex: 1; min-width: 0; }
.attachment-name {
  font-size: 12px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.attachment-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.attachment-remove {
  position: absolute;
  top: 6px; right: 8px;
  background: none; border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px;
  transition: color 0.15s;
}
.attachment-remove:hover { color: var(--danger); }

/* Upload / screenshot buttons */
.input-sub-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  width: 34px; height: 34px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.input-sub-btn:hover { border-color: var(--user-color); color: var(--user-color); }

/* Auto-speak + mention controls */
.controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.controls-label {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

/* Participant toggle buttons */
.participant-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.participant-label {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.ai-participant {
  display: flex;
  align-items: center;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  overflow: hidden;
  transition: all 0.2s;
  opacity: 0.45;
}

.ai-participant.active {
  opacity: 1;
}

.ai-participant.active.claude { border-color: rgba(249,115,22,0.45); background: var(--claude-bg); }
.ai-participant.active.gpt    { border-color: rgba(16,185,129,0.45);  background: var(--gpt-bg); }
.ai-participant.active.gemini { border-color: rgba(59,130,246,0.45);  background: var(--gemini-bg); }

/* Name toggle part */
.ai-name-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  user-select: none;
  border: none;
  background: transparent;
  transition: all 0.15s;
}
.ai-name-btn .p-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.ai-participant.active .p-dot { opacity: 1; animation: pulse 2s ease-in-out infinite; }

.ai-participant.claude .ai-name-btn { color: var(--claude-color); }
.ai-participant.gpt    .ai-name-btn { color: var(--gpt-color); }
.ai-participant.gemini .ai-name-btn { color: var(--gemini-color); }

/* Prompt button (↑) */
.ai-prompt-btn {
  width: 24px; height: 24px;
  border: none;
  border-left: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: all 0.15s;
  flex-shrink: 0;
}
.ai-prompt-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.ai-prompt-btn:active { transform: scale(0.9); }
.ai-participant.claude .ai-prompt-btn:hover { color: var(--claude-color); }
.ai-participant.gpt    .ai-prompt-btn:hover { color: var(--gpt-color); }
.ai-participant.gemini .ai-prompt-btn:hover { color: var(--gemini-color); }

.ai-participant.speaking { opacity: 0.5; pointer-events: none; }

/* Auto-speak toggle badge (UNUSED - kept for reference) */
.ai-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  user-select: none;
}
.ai-toggle .ai-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  transition: all 0.2s;
  opacity: 0.3;
}
.ai-toggle.on {
  border-color: currentColor;
  opacity: 1;
}
.ai-toggle.on .ai-dot { opacity: 1; animation: pulse 1.5s ease-in-out infinite; }

.ai-toggle.claude-toggle { color: var(--claude-color); }
.ai-toggle.gpt-toggle    { color: var(--gpt-color); }
.ai-toggle.gemini-toggle { color: var(--gemini-color); }

.ai-toggle.on.claude-toggle { background: var(--claude-bg); border-color: rgba(249,115,22,0.4); }
.ai-toggle.on.gpt-toggle    { background: var(--gpt-bg);    border-color: rgba(16,185,129,0.4); }
.ai-toggle.on.gemini-toggle { background: var(--gemini-bg); border-color: rgba(59,130,246,0.4); }

.divider-dot {
  color: var(--border);
  font-size: 14px;
  flex-shrink: 0;
}

/* Mention tags */
.mention-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid;
}
.mention-tag:hover { opacity: 0.75; }
.mention-tag.claude { background: var(--claude-bg); color: var(--claude-color); border-color: rgba(249,115,22,0.3); }
.mention-tag.gpt    { background: var(--gpt-bg);    color: var(--gpt-color);    border-color: rgba(16,185,129,0.3); }
.mention-tag.gemini { background: var(--gemini-bg); color: var(--gemini-color); border-color: rgba(59,130,246,0.3); }
.mention-tag.all    { background: var(--surface2);  color: var(--text-dim);     border-color: var(--border); }

/* Input row */
.input-row { display: flex; gap: 8px; align-items: flex-end; }

#msg-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 13px;
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  resize: none;
  outline: none;
  min-height: 42px;
  max-height: 120px;
  line-height: 1.5;
  transition: border-color 0.2s, background 0.3s;
}
#msg-input:focus { border-color: var(--user-color); }
#msg-input::placeholder { color: var(--text-dim); }

[data-theme="line"] #msg-input {
  border-radius: 22px;
  background: #ffffff;
  border-color: #ccc;
  color: #1a1a1a;
}
[data-theme="line"] #msg-input:focus { border-color: #00b900; }

.action-btns { display: flex; gap: 5px; align-items: flex-end; }

#send-btn {
  background: var(--user-color);
  border: none;
  border-radius: 11px;
  width: 42px; height: 42px;
  cursor: pointer;
  color: white;
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
#send-btn:hover { filter: brightness(1.15); transform: scale(1.05); }
#send-btn:active { transform: scale(0.95); }
#send-btn:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }

[data-theme="line"] #send-btn {
  background: #00b900;
  border-radius: 50%;
}

#minutes-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 11px;
  width: 42px; height: 42px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
#minutes-btn:hover { border-color: var(--warn); color: var(--warn); }

/* Own key panel */
.own-key-panel {
  display: none;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 8px;
  gap: 8px;
  align-items: center;
}
.own-key-panel.visible { display: flex; }
.own-key-panel input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 11px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}
.own-key-panel input:focus { border-color: var(--user-color); }
.own-key-panel input::placeholder { color: var(--text-dim); }
.own-key-panel button {
  background: var(--user-color);
  border: none;
  border-radius: 6px;
  padding: 6px 13px;
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s;
}
.own-key-panel button:hover { filter: brightness(1.15); }

/* Limit banner */
.limit-banner {
  display: none;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 9px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.limit-banner.visible { display: block; }
.limit-banner strong { color: var(--danger); }
.limit-banner a { color: var(--user-color); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   SETTINGS PANEL (drawer)
============================================================ */
.settings-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 300;
  display: none;
  backdrop-filter: blur(3px);
}
.settings-overlay.visible { display: block; }

.settings-panel {
  position: fixed;
  top: 0; right: 0;
  width: 300px; max-width: 90vw;
  height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}
.settings-panel.visible { transform: translateX(0); }

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
}
.settings-close {
  background: none; border: none;
  color: var(--text-dim);
  font-size: 20px; cursor: pointer;
  padding: 2px 6px;
  transition: color 0.15s;
}
.settings-close:hover { color: var(--text); }

.settings-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.settings-section:last-child { border-bottom: none; }

.settings-section-title {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ログイン情報 */
.settings-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.settings-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-user-info { flex: 1; min-width: 0; }
.settings-user-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-user-plan {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  margin-top: 2px;
}
.settings-action-btn {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  display: block;
  margin-top: 6px;
}
.settings-action-btn:hover { border-color: var(--user-color); color: var(--user-color); }
.settings-action-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.settings-action-btn.primary {
  background: var(--user-color);
  border-color: var(--user-color);
  color: white;
}
.settings-action-btn.primary:hover { filter: brightness(1.1); color: white; }

/* モデル選択 */
.settings-model-options { display: flex; flex-direction: column; gap: 6px; }
.settings-model-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  display: flex; align-items: center; justify-content: space-between;
}
.settings-model-btn.active {
  background: var(--user-bg);
  color: var(--user-color);
  border-color: rgba(167,139,250,0.5);
}
.settings-model-btn.locked { opacity: 0.35; cursor: not-allowed; }
.settings-model-btn.locked::after { content: '🔒'; }

/* 自前キー */
.settings-key-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  outline: none;
  margin-bottom: 6px;
  transition: border-color 0.2s;
}
.settings-key-input:focus { border-color: var(--user-color); }
.settings-key-input::placeholder { color: var(--text-dim); }

/* テーマ */
.settings-theme-btns {
  display: flex; gap: 8px;
}
.settings-theme-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.settings-theme-btn.active { border-color: var(--user-color); background: var(--user-bg); }
.settings-theme-btn:hover:not(.active) { border-color: var(--text-dim); }

/* ハンバーガーボタン */
.hamburger-btn {
  width: 34px; height: 34px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.hamburger-btn { color: var(--text-dim); }
.hamburger-btn:hover { border-color: var(--user-color); color: var(--user-color); }
.hamburger-btn span {
  display: block;
  width: 14px; height: 1.5px;
  background: var(--text-dim);
  border-radius: 2px;
  transition: background 0.2s;
  transform: none;
  -webkit-transform: none;
}
.hamburger-btn:hover span { background: var(--user-color); }

/* ============================================================
   UPGRADE MODAL
============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
  backdrop-filter: blur(6px);
}
.modal-overlay.visible { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  width: 380px;
  max-width: 92vw;
  transition: background 0.3s;
}
.modal h2 { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.1em; margin-bottom: 6px; }
.modal p  { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; line-height: 1.6; }

.plan-cards { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }

.plan-card {
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 13px 15px;
  cursor: pointer;
  transition: all 0.2s;
}
.plan-card:hover { border-color: var(--user-color); }
.plan-card.featured { border-color: rgba(167,139,250,0.5); background: var(--user-bg); }
.plan-card .plan-name { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; margin-bottom: 3px; color: var(--text-dim); }
.plan-card .plan-price { font-size: 22px; font-weight: 700; margin-bottom: 5px; }
.plan-card .plan-price span { font-size: 12px; color: var(--text-dim); font-weight: 400; }
.plan-card .plan-features { font-size: 12px; color: var(--text-dim); line-height: 1.75; }

.modal-close {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.modal-close:hover { border-color: var(--text-dim); color: var(--text); }
/* ============================================================
   MOBILE RESPONSIVE
============================================================ */
@media (max-width: 520px) {
  /* ヘッダー：2行レイアウト */
  header {
    padding: 4px 10px;
    height: auto;
    flex-wrap: wrap;
    gap: 4px;
  }
  .aibs-logo { flex-shrink: 0; }
  .logo-sub { display: none; }
  .logo-mark { width: 22px; height: 22px; }
  .logo-aibs { font-size: 14px; }
  /* 1行目：ロゴ ＋ ？ ＋ ハンバーガー */
  .hamburger-btn { order: 2; margin-left: auto; }
  .help-btn { margin-left: 0; }
  .header-btn-group { order: 2; margin-left: auto; }
  /* ログインボタン・ログイン済みボタンは1行目右側 */
  #header-login-btn { order: 1; font-size: 10px; padding: 3px 8px; }
  #header-loggedin-btns { order: 1; gap: 4px; }
  .header-upgrade-btn, .header-ownkey-btn { font-size: 10px; padding: 3px 8px; }
  /* ターンカウンターは2行目、幅いっぱい */
  .turn-counter { order: 3; width: 100%; text-align: center; font-size: 10px; padding: 2px 8px; }
  .header-right { flex-wrap: wrap; width: 100%; gap: 4px; }
  #user-name { display: none; }

  /* ツールバー */
  .toolbar-row { padding: 5px 8px; gap: 5px; flex-wrap: wrap; }
  .toolbar-label { font-size: 9px; }
  .model-btn { font-size: 9px; padding: 2px 7px; }
  .upgrade-hint { font-size: 9px; }
  #topic-input { font-size: 12px; min-width: 0; }

  /* チャット */
  #chat { padding: 8px; gap: 8px; }
  .bubble { font-size: 13px; padding: 8px 10px; line-height: 1.6; }
  .bubble-wrap { max-width: 86%; }
  .avatar { width: 28px; height: 28px; font-size: 8px; border-radius: 7px; }
  .sender-name { font-size: 9px; }
  .message { gap: 6px; }

  /* 入力エリア */
  .input-area { padding: 7px 8px; }

  /* 参加者行：横スクロール（折り返しなし） */
  .participant-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 5px;
    margin-bottom: 6px;
    padding-bottom: 2px;
  }
  .participant-row::-webkit-scrollbar { display: none; }
  .participant-label { flex-shrink: 0; font-size: 9px; }
  .ai-participant { flex-shrink: 0; }
  .ai-name-btn { font-size: 10px; padding: 4px 8px; }
  .ai-prompt-btn { width: 26px; height: 26px; font-size: 11px; }
  .participant-row > button { flex-shrink: 0; white-space: nowrap; }

  /* 入力行 */
  .input-row { gap: 5px; }
  #msg-input { font-size: 14px; padding: 10px 12px; min-height: 44px; }
  #send-btn { width: 44px; height: 44px; font-size: 17px; border-radius: 12px; flex-shrink: 0; }
  #minutes-btn { width: 36px; height: 36px; font-size: 14px; border-radius: 9px; flex-shrink: 0; }
  .input-sub-btn { width: 36px; height: 36px; font-size: 14px; flex-shrink: 0; }
  .action-btns { gap: 4px; }

  /* アタッチメント */
  .attachment-preview { padding: 8px; }
  .attachment-thumb { width: 36px; height: 36px; }

  /* モーダル */
  .modal { padding: 18px; border-radius: 14px; }
  .modal h2 { font-size: 17px; }
}

@media (max-width: 360px) {
  .theme-switcher { display: none; }
}

/* ===== ヘッダーログインボタン ===== */
.header-login-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.header-login-btn:hover {
  border-color: var(--user-color);
  color: var(--user-color);
}

/* ===== ヘッダーのログイン済みボタン ===== */
#header-loggedin-btns {
  display: none;
  gap: 6px;
  align-items: center;
}
.header-upgrade-btn, .header-ownkey-btn {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.header-upgrade-btn {
  background: var(--user-color);
  color: #fff;
  border: none;
}
.header-upgrade-btn:hover { opacity: 0.85; }
.header-ownkey-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.header-ownkey-btn:hover {
  border-color: var(--user-color);
  color: var(--user-color);
}

/* ===== プランボタン ===== */
.settings-plan-btn {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  margin-top: 6px;
}
.settings-plan-btn:hover {
  border-color: var(--user-color);
  color: var(--user-color);
}
.settings-plan-btn.active {
  background: var(--user-color);
  border-color: var(--user-color);
  color: white;
  cursor: default;
}
.settings-plan-btn.active:hover {
  filter: brightness(1.1);
  color: white;
}

/* ===== LINE時刻表示 ===== */
.line-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.line-bubble-row.user {
  flex-direction: row-reverse;
}
.line-time {
  font-size: 10px;
  color: rgba(0,0,0,0.45);
  white-space: nowrap;
  margin-bottom: 2px;
  flex-shrink: 0;
}

/* ===== LINEモード: ヘッダーボタン文字色 ===== */
[data-theme="line"] .header-login-btn,
[data-theme="line"] .header-ownkey-btn {
  color: #ffffff;
  border-color: rgba(255,255,255,0.6);
}
[data-theme="line"] .header-login-btn:hover,
[data-theme="line"] .header-ownkey-btn:hover {
  color: #ffffff;
  border-color: #ffffff;
}

/* ===== Dさん（デバッグ用） ===== */
.avatar.debug { background: rgba(100,100,100,0.15); color: #888; border: 1px dashed #555; }
.sender-name.debug { color: #888; }
.ai-participant.debug .p-dot { background: #666; }
.ai-participant.debug.active .p-dot { background: #aaa; }

/* ===== 操作ボタン（2行目） ===== */
.action-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.2s;
}
.save-btn:hover    { border-color: var(--success); color: var(--success); }
.summary-btn:hover { border-color: var(--user-color); color: var(--user-color); }
.reset-btn:hover   { border-color: var(--danger); color: var(--danger); }
/* ============================================================
   ペルソナ編集モーダル
============================================================ */
.persona-modal-inner {
  max-width: 420px;
  width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
}

.persona-section-label {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
}

.persona-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.persona-input:focus { border-color: var(--user-color); }
.persona-input::placeholder { color: var(--text-dim); }

.persona-select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 32px;
}
.persona-select:focus { border-color: var(--user-color); }
.persona-select option { background: var(--surface); color: var(--text); }

.persona-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  outline: none;
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
  transition: border-color 0.2s;
}
.persona-textarea:focus { border-color: var(--user-color); }
.persona-textarea::placeholder { color: var(--text-dim); }

.persona-locked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: var(--surface2);
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
}
.persona-locked-row:hover {
  border-color: var(--user-color);
  color: var(--user-color);
}

/* 発言バブルの職業バッジ */
.persona-job-badge {
  display: inline-block;
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
  font-weight: 400;
}

/* 名前ボタン内のテキスト */
.ai-name-text {
  pointer-events: none;
}

/* 長押しヒント（ツールチップ） */
.ai-name-btn[title]:active::after {
  content: '長押しで設定';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  color: var(--text-dim);
  pointer-events: none;
}

/* ペルソナロール選択ラジオ */
.persona-role-radio {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.persona-role-radio:hover { border-color: var(--user-color); color: var(--user-color); }
.persona-role-radio.active {
  background: var(--user-bg);
  border-color: rgba(167,139,250,0.6);
  color: var(--user-color);
}

/* 人物設定ボタン */
.persona-btn:hover { border-color: var(--user-color); color: var(--user-color); }

/* ============================================================
   ヘルプモーダル
============================================================ */
.help-toc-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  display: block;
}
.help-toc-btn:hover { border-color: var(--user-color); color: var(--user-color); }

.help-body {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
}
.help-body p { margin-bottom: 10px; }
.help-body ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.help-body li { line-height: 1.6; }
.help-body strong { color: var(--user-color); }

.help-nav-btn {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.help-nav-btn:hover { border-color: var(--user-color); color: var(--user-color); }
.help-nav-next { color: var(--user-color); border-color: rgba(167,139,250,0.4); }

/* ============================================================
   ヒントカード（初期表示）
============================================================ */
.hint-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin: 4px 0 8px;
}

.hint-card-title {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.hint-card-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hint-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hint-demo {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  width: 100px;
  justify-content: center;
}

.hint-participant-demo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  cursor: default;
}
.hint-participant-demo.active.claude { border-color: rgba(249,115,22,0.45); background: var(--claude-bg); color: var(--claude-color); }
.hint-participant-demo.active.gpt    { border-color: rgba(16,185,129,0.45);  background: var(--gpt-bg);    color: var(--gpt-color); }
.hint-participant-demo.active.gemini { border-color: rgba(59,130,246,0.45);  background: var(--gemini-bg); color: var(--gemini-color); }

.hint-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
  flex-shrink: 0;
}

.hint-prompt-btn {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: rgba(59,130,246,0.3);
  color: var(--gemini-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  margin-left: 2px;
}

.hint-persona-btn {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  cursor: default;
}

.hint-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  flex: 1;
}

.hint-disclaimer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.7;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ？ヘルプボタン */
.help-btn {
  font-size: 14px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
}
.help-btn:hover { border-color: var(--user-color); color: var(--user-color); }

/* ドロップゾーン */
body.drag-over::after {
  content: 'ファイルをドロップして添付';
  position: fixed;
  inset: 0;
  background: rgba(167,139,250,0.12);
  border: 2px dashed var(--user-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--user-color);
  font-family: 'JetBrains Mono', monospace;
  z-index: 1500;
  pointer-events: none;
}
/* ============================================================
   アバター・キャラクター管理
   ============================================================ */

/* キャラリスト横スクロール */
.char-list-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.char-list-scroll::-webkit-scrollbar { height: 4px; }
.char-list-scroll::-webkit-scrollbar-track { background: var(--border); border-radius: 2px; }
.char-list-scroll::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 2px; }

.char-card {
  flex-shrink: 0;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
}
.char-card-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.char-card:hover .char-card-avatar { border-color: var(--user-color); }
.char-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.char-card-name {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.char-card-delete {
  position: absolute;
  top: -4px; right: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--danger);
  color: white;
  font-size: 9px;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.char-card:hover .char-card-delete,
.char-card.selected .char-card-delete { display: flex; }

/* アバターアップロードボタン */
.avatar-upload-area {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.avatar-preview-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s;
}
.avatar-preview-circle:hover { border-color: var(--user-color); }
.avatar-preview-circle img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-btn {
  font-size: 12px;
  color: var(--user-color);
  background: transparent;
  border: 1px solid var(--user-color);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.15s;
}
.avatar-upload-btn:hover { background: var(--user-color); color: white; }

/* トリミングモーダル */
#avatar-crop-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 4000;
  align-items: center;
  justify-content: center;
}
#avatar-crop-modal.visible { display: flex; }
.avatar-crop-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  width: 320px;
  max-width: 92vw;
}
.avatar-crop-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', monospace;
}
.avatar-crop-canvas-wrap {
  width: 100%;
  aspect-ratio: 1;
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: move;
  user-select: none;
}
#avatar-crop-canvas {
  display: block;
  width: 100%; height: 100%;
}
.avatar-crop-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}
.avatar-crop-circle {
  position: absolute; inset: 10%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}
.avatar-crop-zoom {
  margin-top: 14px;
  width: 100%;
  accent-color: var(--user-color);
}
.avatar-crop-btns {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}