:root {
  --chat-v2-line: rgba(43, 147, 255, .3);
  --chat-v2-panel: rgba(4, 18, 38, .82);
}
.composer [hidden] { display: none !important; }
#imageGenerationButton, #voiceModeButton, #voiceMuteButton { display: none !important; }
#stopButton[hidden] { display: none !important; }
.realtime-voice-modal[hidden] { display: none !important; }
.realtime-voice-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(0,5,14,.78); backdrop-filter: blur(14px); }
.realtime-voice-card { width: min(430px, 100%); padding: 22px; border: 1px solid rgba(54,157,255,.38); border-radius: 30px; background: radial-gradient(circle at 50% 25%, rgba(15,91,159,.34), transparent 44%), #031126; box-shadow: 0 30px 90px rgba(0,0,0,.55); color: #f4f8ff; }
.realtime-voice-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.realtime-voice-head strong, .realtime-voice-head span { display: block; }
.realtime-voice-head strong { font-size: 20px; }
.realtime-voice-head span { margin-top: 3px; color: #8da6c6; font-size: 13px; }
.realtime-voice-head button { width: 40px; height: 40px; border: 1px solid rgba(109,176,244,.25); border-radius: 50%; background: rgba(9,37,70,.8); color: #dceeff; font-size: 24px; }
.realtime-voice-orb { width: 154px; height: 154px; margin: 28px auto 20px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(40,171,255,.48), rgba(0,86,206,.12) 55%, transparent 70%); }
.realtime-voice-orb span { width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6bd5ff, #0878ee 48%, #032458 75%); box-shadow: 0 0 48px rgba(26,154,255,.72); transition: transform .2s ease; }
.realtime-voice-modal[data-state="listening"] .realtime-voice-orb span { animation: realtime-listening 1.15s ease-in-out infinite; }
.realtime-voice-modal[data-state="speaking"] .realtime-voice-orb span { animation: realtime-speaking .65s ease-in-out infinite alternate; }
#realtimeVoiceStatus { min-height: 24px; margin: 0 0 22px; text-align: center; color: #cce6ff; }
.realtime-voice-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.realtime-voice-controls button { min-height: 46px; border: 1px solid rgba(73,158,239,.3); border-radius: 999px; background: rgba(7,35,68,.9); color: #e9f5ff; font-weight: 700; }
.realtime-voice-controls button[aria-pressed="true"] { background: #8b2635; border-color: #e35a70; }
#realtimeVoiceEnd { background: #163c6c; }
@keyframes realtime-listening { 50% { transform: scale(1.1); box-shadow: 0 0 62px rgba(26,154,255,.9); } }
@keyframes realtime-speaking { to { transform: scale(1.16); box-shadow: 0 0 76px rgba(67,193,255,.95); } }

body { background: radial-gradient(circle at 58% 20%, #071a35 0, #020817 42%, #01040b 100%); }
.app-shell { background: rgba(1, 8, 20, .88); border: 1px solid rgba(31, 132, 245, .24); box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.topbar { border-bottom: 1px solid rgba(33, 137, 242, .18); background: rgba(2, 10, 24, .72); }
.topbar .brand { gap: 16px; }
.topbar .avatar, .mira .message-mark { border: 2px solid #168cff; box-shadow: 0 0 24px rgba(0,139,255,.24); background-position: center 25%; }
.topbar .avatar { width: 64px; height: 64px; }
.brand-copy h1 { letter-spacing: .02em; }
.messages { background: radial-gradient(circle at 45% 5%, rgba(6,40,78,.22), transparent 38%); }
.conversation { max-width: 1120px; width: 100%; margin: 0 auto; padding: 34px 24px 150px; }
.message-row { align-items: flex-start; gap: 14px; }
.message-row.mira .bubble { background: linear-gradient(135deg, rgba(9,42,73,.94), rgba(4,26,51,.94)); border: 1px solid rgba(52,150,247,.16); border-radius: 12px 28px 28px 28px; box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.message-row.user .bubble { background: linear-gradient(135deg, #0f65b5, #087ed3); border-radius: 28px 12px 28px 28px; }
.bubble .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.generated-video-player { display: block; width: 100%; max-width: 560px; height: auto; max-height: 60vh; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 14px; background: #020b18; }
.generated-video-download { display: inline-flex; max-width: 100%; margin-top: 10px; overflow-wrap: anywhere; }
.composer { background: transparent; padding: 14px 28px 24px; }
.composer-inner { max-width: 1120px; margin: 0 auto; min-height: 72px; padding: 10px 12px; gap: 10px; border: 1px solid rgba(43,147,255,.46); border-radius: 30px; background: rgba(3,18,40,.9); box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 0 30px rgba(14,85,151,.08); }
.composer-tool { width: 46px; height: 46px; border-radius: 50%; background: rgba(10,43,80,.8); color: #31a8ff; border-color: rgba(42,137,231,.22); }
.input-wrap textarea { font-size: 18px; color: #f4f8ff; }
#sendButton { width: 54px; height: 54px; border-radius: 50%; padding: 0; font-size: 0; background: linear-gradient(145deg,#2aa8ff,#076ee9); box-shadow: 0 8px 24px rgba(0,119,255,.32); }
#sendButton::before { content: ""; width: 22px; height: 22px; display: block; margin: auto; background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); }
#stopButton:not([hidden]) { border-radius: 999px; }
@media (max-width: 720px) {
  :root { --header-height: 58px; --composer-height: 78px; }
  .main-menu { inset: 0 0 auto; width: 100%; height: 58px; padding: 6px 8px; display: block; overflow: hidden; border-right: 0; border-bottom: 1px solid rgba(43,147,255,.2); }
  .main-menu::after, .menu-title { display: none; }
  .menu-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .menu-list::-webkit-scrollbar { display: none; }
  .menu-list li { flex: 0 0 48px; }
  .menu-button { width: 48px; min-height: 46px; height: 46px; padding: 0; border-radius: 14px; }
  .menu-button span { display: none; }
  .menu-button svg { width: 20px; height: 20px; }
  .topbar { inset: 58px 0 auto 0; height: 58px; padding: 6px 12px; }
  .topbar .avatar { width: 48px; height: 48px; }
  .brand-copy p { display: none; }
  .messages { margin-left: 0; padding: 116px 10px 88px; }
  .content-section { margin-left: 0; padding: 130px 12px 24px; }
  .conversation { padding: 16px 2px 100px; }
  .generated-video-player { width: 100%; max-width: 100%; max-height: 60vh; }
  .message-row { gap: 8px; }
  .message-mark { width: 38px; height: 38px; flex: 0 0 38px; }
  .composer { inset: auto 0 0 0; padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); }
  .composer-inner { display: grid; grid-template-columns: 40px 40px minmax(0,1fr) 40px 44px; min-height: 60px; padding: 7px; gap: 5px; border-radius: 24px; }
  #emojiButton { grid-column: 1; grid-row: 1; }
  #attachButton { grid-column: 2; grid-row: 1; }
  .input-wrap { grid-column: 3; grid-row: 1; min-height: 44px; padding: 0 8px; }
  #micButton { grid-column: 4; grid-row: 1; }
  #sendButton { grid-column: 5; grid-row: 1; }
  #stopButton { grid-column: 4 / 6; grid-row: 1; }
  .composer-tool { width: 40px; height: 40px; }
  #sendButton { width: 44px; height: 44px; }
  .input-wrap textarea { font-size: 16px; }
  .realtime-voice-modal { padding: 10px; align-items: end; }
  .realtime-voice-card { border-radius: 28px 28px 18px 18px; padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }
  .realtime-voice-orb { width: 132px; height: 132px; margin: 20px auto 12px; }
}