mineapple/Voxtral-Mini-Realtime

1@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');2 3body, .gradio-container {4    background-color: #FFFAEB !important;5    background-image: 6        linear-gradient(#E9E2CB 1px, transparent 1px), 7        linear-gradient(90deg, #E9E2CB 1px, transparent 1px) !important;8    background-size: 40px 40px !important;9    font-family: 'Inter', sans-serif !important;10}11 12@keyframes pulse {13    0%, 100% { opacity: 1; transform: scale(1); }14    50% { opacity: 0.5; transform: scale(0.8); }15}16 17@keyframes blink {18    0%, 100% { opacity: 1; }19    50% { opacity: 0; }20}21 22@keyframes bounce {23    0%, 100% { transform: translateY(0); }24    50% { transform: translateY(-8px); }25}26 27.header-card {28    background: linear-gradient(135deg, #FFFAEB 0%, #FFF0C3 100%);29    border: 2px solid #E9E2CB;30    border-top: 4px solid #FF8205;31    padding: 2rem;32    margin-bottom: 1.5rem;33    box-shadow: 0 4px 24px rgba(0,0,0,0.06);34}35 36.header-title {37    font-size: 2rem;38    font-weight: 700;39    color: #1E1E1E !important;40    margin: 0 0 0.5rem 0;41    letter-spacing: -0.02em;42    display: flex;43    align-items: center;44    gap: 0.75rem;45}46 47.header-logo {48    width: 40px;49    height: 40px;50    object-fit: contain;51}52 53.header-subtitle {54    color: #444444 !important;55    font-size: 1rem;56    margin: 0;57}58 59.transcription-card {60    background: #FFFAEB !important;61    border: 2px solid #E9E2CB;62    box-shadow: 0 8px 32px rgba(0,0,0,0.08);63    overflow: hidden;64    min-height: 350px;65}66 67.card-header {68    background: rgba(255,255,255,0.6) !important;69    border-bottom: 1px solid #E9E2CB;70    padding: 0.75rem 1rem;71    display: flex;72    align-items: center;73    justify-content: space-between;74}75 76.card-header-left {77    display: flex;78    align-items: center;79    gap: 0.75rem;80}81 82.card-header-right {83    display: flex;84    align-items: center;85    gap: 1rem;86}87 88.card-title {89    font-size: 0.65rem;90    font-weight: 700;91    color: #1E1E1E !important;92    text-transform: uppercase;93    letter-spacing: 0.1em;94    margin: 0;95}96 97.voxtral-icon {98    width: 24px;99    height: 24px;100    object-fit: contain;101}102 103.wpm-badge {104    display: inline-flex;105    align-items: center;106    gap: 0.4rem;107    padding: 0.25rem 0.6rem;108    font-size: 0.6rem;109    font-weight: 700;110    text-transform: uppercase;111    letter-spacing: 0.05em;112    border-radius: 2px;113    background: #FFF0C3;114    color: #1E1E1E !important;115    border: 1px solid #E9E2CB;116    font-family: 'JetBrains Mono', monospace;117}118 119.status-badge {120    display: inline-flex;121    align-items: center;122    gap: 0.5rem;123    padding: 0.25rem 0.75rem;124    font-size: 0.6rem;125    font-weight: 700;126    text-transform: uppercase;127    letter-spacing: 0.08em;128    border-radius: 2px;129}130 131.status-ready {132    background: #f5f5f5 !important;133    color: #555555 !important;134    border: 1px solid #E9E2CB;135}136 137.status-connecting, .status-warming {138    background: rgba(255, 130, 5, 0.15) !important;139    color: #CC6A04 !important;140    border: 1px solid #FF8205;141}142 143.status-listening {144    background: rgba(255, 130, 5, 0.2) !important;145    color: #CC6A04 !important;146    border: 1px solid #FF8205;147}148 149.status-timeout {150    background: rgba(225, 5, 0, 0.1) !important;151    color: #B30400 !important;152    border: 1px solid #E10500;153}154 155.status-error {156    background: rgba(225, 5, 0, 0.1) !important;157    color: #B30400 !important;158    border: 1px solid #E10500;159}160 161.status-dot {162    width: 6px;163    height: 6px;164    border-radius: 50%;165    background: currentColor !important;166}167 168.status-dot.animate {169    animation: pulse 1.5s ease-in-out infinite;170}171 172.status-dot.fast {173    animation: pulse 0.8s ease-in-out infinite;174}175 176.card-content {177    padding: 1.5rem;178    min-height: 250px;179    position: relative;180    background-color: #FFFAEB !important;181    background-image: 182        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px), 183        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);184    background-size: 20px 20px;185}186 187.transcript-text {188    font-family: 'JetBrains Mono', monospace !important;189    font-size: 1.1rem !important;190    line-height: 1.8 !important;191    color: #000000 !important;192    white-space: pre-wrap;193    word-break: break-word;194}195 196.transcript-cursor {197    display: inline-block;198    width: 10px;199    height: 20px;200    background: #FF8205 !important;201    margin-left: 4px;202    vertical-align: middle;203    animation: blink 1s step-end infinite;204}205 206.empty-state {207    display: flex;208    flex-direction: column;209    align-items: center;210    justify-content: center;211    height: 200px;212}213 214.empty-dots {215    display: flex;216    gap: 6px;217    margin-bottom: 1rem;218}219 220.empty-dot {221    width: 8px;222    height: 8px;223    border-radius: 50%;224    background: #FF8205 !important;225    animation: bounce 1s ease-in-out infinite;226}227 228.empty-dot:nth-child(2) { animation-delay: 0.1s; }229.empty-dot:nth-child(3) { animation-delay: 0.2s; }230 231.empty-text {232    font-family: 'JetBrains Mono', monospace !important;233    font-size: 0.875rem !important;234    color: #555555 !important;235    font-style: italic;236}237 238.card-footer {239    background: #fafafa !important;240    border-top: 1px solid #E9E2CB;241    padding: 0.5rem 1rem;242    display: flex;243    justify-content: space-between;244    font-family: 'JetBrains Mono', monospace;245    font-size: 0.65rem;246    color: #555555 !important;247}248 249/* Audio component styling - preserve Gradio defaults */250#audio-input {251    margin-top: 1rem;252}253 254#audio-input button {255    color: inherit !important;256}257 258#audio-input .controls button {259    background: var(--button-secondary-background-fill) !important;260    color: var(--button-secondary-text-color) !important;261}262 263.clear-btn {264    background: #E10500 !important;265    color: #FFFFFF !important;266    border: none !important;267    padding: 0.75rem 1.5rem !important;268    font-weight: 600 !important;269    text-transform: uppercase !important;270    letter-spacing: 0.05em !important;271    font-size: 0.75rem !important;272    cursor: pointer !important;273    transition: all 0.2s !important;274    border-radius: 0 !important;275    margin-top: 1rem !important;276}277 278.clear-btn:hover {279    background: #B30400 !important;280}281 282footer {283    display: none !important;284}285 286.gradio-container .prose {287    max-width: none !important;288}289 290.info-text {291    font-family: 'JetBrains Mono', monospace !important;292    font-size: 0.75rem !important;293    color: #888888 !important;294    font-style: italic;295    text-align: center;296    margin-top: 1rem;297}298