/* realtime-groq-components.css — Groq リアルタイムページ スタイル Part 2: チャット・コントロール */

.chat-log-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.chat-log-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; }
.clear-btn { font-size: 11px; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: color 0.2s; }
.clear-btn:hover { color: var(--text-muted); }
.chat-log { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
.chat-msg { display: flex; flex-direction: column; max-width: 88%; }
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.ai { align-self: flex-start; align-items: flex-start; }
.chat-msg.system { align-self: center; align-items: center; max-width: 100%; }
.chat-bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-break: break-all; }
.chat-msg.user .chat-bubble { background: rgba(59,130,246,0.18); border: 1px solid rgba(59,130,246,0.3); color: #93c5fd; border-bottom-right-radius: 4px; }
.chat-msg.ai .chat-bubble { background: var(--groq-dim); border: 1px solid var(--groq-border); color: var(--text); border-bottom-left-radius: 4px; }
.chat-msg.system .chat-bubble { background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.3); color: var(--yellow); font-size: 12px; border-radius: var(--radius-sm); }
.chat-meta { font-size: 10px; color: var(--text-dim); margin-top: 3px; padding: 0 4px; }
.chat-empty { text-align: center; color: var(--text-dim); font-size: 13px; padding: 24px 16px; }
.stt-backend-wrap { display: flex; align-items: center; gap: 8px; }
.stt-backend-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; user-select: none; }
.stt-backend-select { background: var(--card2); color: var(--text); border: 1px solid var(--groq-border); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-family: inherit; cursor: pointer; outline: none; min-width: 130px; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23f55036'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; }
.stt-backend-select:focus { border-color: var(--groq); box-shadow: 0 0 0 2px var(--groq-dim); }
.stt-backend-select option { background: #1a1a2e; color: var(--text); }
.stt-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; }
.stt-status-dot.ok { background: var(--green); }
.stt-status-dot.ng { background: var(--red); }
.footer-space { height: 40px; }
button, a { min-height: 44px; }
.sample-voice-btn { padding: 8px 16px; background: var(--card2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; cursor: pointer; min-height: 36px; }
.sample-voice-btn:active { background: var(--groq-dim); border-color: var(--groq-border); }
.sample-voice-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.piapi-btn { border-color: rgba(99,102,241,0.4); color: #a5b4fc; }
.piapi-btn:active { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.7); }
@media (max-width: 400px) { .main { padding: 14px 12px; } .timing-grid { grid-template-columns: repeat(3,1fr); gap: 6px; } .timing-value { font-size: 15px; } }