/* fan-meeting.css - AIアイドル特典会UI */
:root {
  --fm-pink: #f472b6; --fm-purple: #c084fc;
  --fm-pink-dim: rgba(244,114,182,.15); --fm-purple-dim: rgba(192,132,252,.15);
  --fm-glow: rgba(244,114,182,.25); --fm-border: rgba(244,114,182,.25);
}

/* ===== ページ全体 ===== */
#fm-page { padding:16px; max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:14px; min-height:calc(100vh - 80px); }

/* ===== 状態別画面 ===== */
.fm-screen { display:none; flex-direction:column; gap:14px; }
.fm-screen.active { display:flex; }

/* ===== メインレイアウト（2カラム） ===== */
.fm-main-grid { display:grid; grid-template-columns:1fr 360px; gap:14px; }
@media (max-width: 760px) { .fm-main-grid { grid-template-columns:1fr; } }

/* ===== アバターエリア ===== */
#avatar-area {
  background:linear-gradient(135deg, #0d0a18 0%, #120d20 100%);
  border:1px solid var(--fm-border); border-radius:var(--radius);
  min-height:360px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
#avatar-area::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 80%, var(--fm-glow) 0%, transparent 65%);
  pointer-events:none;
}
#avatar-placeholder { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--text-muted); z-index:1; }
#avatar-placeholder .avatar-icon {
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg, var(--fm-pink-dim), var(--fm-purple-dim));
  border:2px solid var(--fm-border); display:flex; align-items:center; justify-content:center; font-size:36px;
}
#avatar-placeholder p { font-size:13px; color:var(--text-dim); }
.avatar-name-badge {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(10,5,20,.85); border:1px solid var(--fm-border); border-radius:20px;
  padding:5px 18px; font-size:14px; font-weight:bold; color:var(--fm-pink);
  white-space:nowrap; z-index:2; backdrop-filter:blur(8px);
}

/* ===== 右パネル ===== */
.fm-right-panel { display:flex; flex-direction:column; gap:12px; }

/* ===== カード共通 ===== */
.fm-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.fm-card-title { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }

/* ===== ファン名入力 ===== */
#name-input-card { border-color:var(--fm-border); }
#fan-name-input {
  width:100%; background:var(--card2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; color:var(--text); font-size:14px; outline:none; transition:border-color .15s; margin-bottom:10px;
}
#fan-name-input:focus { border-color:var(--fm-pink); }
#fan-name-input::placeholder { color:var(--text-dim); }
.btn-join {
  width:100%; padding:11px; background:linear-gradient(135deg, #be185d, #9333ea);
  color:#fff; border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:700;
  cursor:pointer; transition:opacity .15s, transform .1s;
}
.btn-join:hover { opacity:.88; transform:translateY(-1px); }
.btn-join:active { transform:translateY(0); }

/* ===== カメラプレビュー ===== */
#camera-preview-wrap {
  position:relative; width:100%; aspect-ratio:16/9; background:#0a0a14;
  border-radius:var(--radius-sm); overflow:hidden; display:flex; align-items:center; justify-content:center;
}
#camera-video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:none; }
#camera-video.active { display:block; }
#camera-off-msg { color:var(--text-dim); font-size:12px; display:flex; flex-direction:column; align-items:center; gap:6px; }
#camera-off-msg .cam-icon { font-size:28px; opacity:.5; }
.btn-camera {
  margin-top:8px; width:100%; padding:8px; background:var(--card2);
  border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted);
  font-size:12px; cursor:pointer; transition:border-color .15s, color .15s;
}
.btn-camera:hover { border-color:var(--fm-pink); color:var(--fm-pink); }

/* ===== タイマーバー ===== */
#timer-bar-wrap { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; }
.timer-row { display:flex; align-items:center; gap:12px; }
.timer-label { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.timer-track { flex:1; height:6px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; }
.timer-fill { height:100%; background:linear-gradient(90deg, var(--fm-pink), var(--fm-purple)); border-radius:3px; transition:width .9s linear; }
.timer-fill.warn { background:linear-gradient(90deg, #fb923c, #f43f5e); }
#timer-text { font-size:13px; font-weight:700; color:var(--fm-pink); white-space:nowrap; min-width:60px; text-align:right; }

/* ===== AIセリフ表示 ===== */
#speech-bubble {
  background:linear-gradient(135deg, #0d0820, #120a1e); border:1px solid var(--fm-border);
  border-radius:var(--radius); padding:14px 18px; min-height:60px; display:flex; align-items:center; gap:10px;
}
.speech-avatar-dot {
  width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, #be185d, #7c3aed);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px;
}
#speech-text { color:var(--text); font-size:14px; line-height:1.6; flex:1; }
#speech-text.typing::after { content:'▌'; animation:blink .7s step-end infinite; color:var(--fm-pink); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ===== 入力エリア ===== */
#input-area { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.input-row { display:flex; align-items:center; gap:8px; }
#user-text-input {
  flex:1; background:var(--card2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 12px; color:var(--text); font-size:14px; outline:none; transition:border-color .15s;
}
#user-text-input:focus { border-color:var(--fm-pink); }
#user-text-input::placeholder { color:var(--text-dim); }
#user-text-input:disabled { opacity:.4; cursor:not-allowed; }
.btn-send {
  padding:9px 18px; background:linear-gradient(135deg, #be185d, #9333ea); color:#fff;
  border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:700;
  cursor:pointer; transition:opacity .15s; white-space:nowrap;
}
.btn-send:disabled { opacity:.4; cursor:not-allowed; }
.btn-send:not(:disabled):hover { opacity:.85; }
.btn-mic {
  display:flex; align-items:center; gap:6px; padding:8px 14px; background:var(--card2);
  border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted);
  font-size:13px; cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.btn-mic:hover { border-color:var(--fm-pink); color:var(--fm-pink); }
.btn-mic.recording { border-color:var(--red); color:var(--red); background:rgba(239,68,68,.1); animation:mic-pulse 1.5s ease-in-out infinite; }
@keyframes mic-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)} 50%{box-shadow:0 0 0 6px rgba(239,68,68,0)} }
.btn-mic .mic-icon { font-size:16px; }
.btn-mic .mic-label { font-size:12px; }

/* ===== 待ち行列インジケーター ===== */
#queue-bar {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 16px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.queue-stat { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); }
.queue-stat strong { color:var(--fm-purple); font-size:14px; }
.queue-divider { color:var(--text-dim); }

/* ===== 待ち中画面 ===== */
#waiting-card { text-align:center; padding:40px 20px; border-color:var(--fm-border); }
.waiting-spinner {
  width:48px; height:48px; border:3px solid rgba(244,114,182,.2); border-top-color:var(--fm-pink);
  border-radius:50%; animation:spin .9s linear infinite; margin:0 auto 16px;
}
@keyframes spin { to{transform:rotate(360deg)} }
#waiting-position {
  font-size:36px; font-weight:900;
  background:linear-gradient(135deg, var(--fm-pink), var(--fm-purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1;
}
#waiting-label { font-size:13px; color:var(--text-muted); margin-top:6px; }
.btn-leave {
  margin-top:20px; padding:8px 24px; background:transparent;
  border:1px solid rgba(239,68,68,.4); border-radius:var(--radius-sm);
  color:var(--red); font-size:13px; cursor:pointer; transition:background .15s;
}
.btn-leave:hover { background:rgba(239,68,68,.1); }

/* ===== 終了画面 ===== */
#end-card { text-align:center; padding:40px 20px; border-color:var(--fm-border); }
.end-heart { font-size:48px; margin-bottom:12px; }
#end-title {
  font-size:20px; font-weight:900;
  background:linear-gradient(135deg, var(--fm-pink), var(--fm-purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
#end-message { font-size:13px; color:var(--text-muted); margin-top:8px; line-height:1.7; }
.btn-rejoin {
  margin-top:20px; padding:10px 30px; background:linear-gradient(135deg, #be185d, #9333ea);
  color:#fff; border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:700; cursor:pointer; transition:opacity .15s;
}
.btn-rejoin:hover { opacity:.85; }

/* ===== ローディングオーバーレイ ===== */
#fm-loading { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:999; align-items:center; justify-content:center; flex-direction:column; gap:12px; }
#fm-loading.visible { display:flex; }
#fm-loading .spinner { width:36px; height:36px; border:3px solid rgba(244,114,182,.2); border-top-color:var(--fm-pink); border-radius:50%; animation:spin .8s linear infinite; }
#fm-loading p { color:var(--text-muted); font-size:13px; }