| """Shared CSS for the Gradio/Hugging Face Space interface.""" |
| AIKO_CSS = r""" |
| :root { |
| --aiko-bg: #080810; |
| --aiko-text: #dacdff; |
| --aiko-muted: #8c7ab6; |
| --aiko-accent: #b68cff; |
| --aiko-user: #9be8ff; |
| --aiko-bot: #d8c8ff; |
| } |
| html, body, .gradio-container, main, footer { |
| background: radial-gradient(circle at top, #1b1432 0, var(--aiko-bg) 44%, #050509 100%) !important; |
| color: var(--aiko-text) !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| } |
| .gradio-container *, .gradio-container .prose, .gradio-container label { |
| color: var(--aiko-text); |
| } |
| #aiko-shell { max-width: 1180px; margin: 0 auto; padding: 0 12px 12px; } |
| /* ── Title header ──────────────────────────────────────────────────── */ |
| #aiko-title { |
| display: block; |
| font-size: 1.4rem; |
| font-weight: 600; |
| letter-spacing: .08em; |
| color: #ecdeff; |
| text-shadow: 0 0 18px rgba(155, 124, 255, .55); |
| padding: 10px 8px 10px; |
| text-align: left; |
| } |
| /* Avatar card is the relative anchor for all overlays */ |
| #aiko-avatar-card { |
| position: relative; |
| border-radius: 22px; |
| overflow: visible; |
| border: 1px solid rgba(155,127,212,0.34); |
| background: #080810; |
| box-shadow: 0 22px 80px rgba(0,0,0,0.42); |
| } |
| #aiko-vrm-frame { |
| display: block; |
| width: 100%; |
| height: min(78vh, 760px); |
| min-height: 480px; |
| border: 0; |
| background: #080810; |
| } |
| /* Audio: rendered but invisible so autoplay isn't blocked */ |
| #aiko-audio { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| opacity: 0; |
| overflow: hidden; |
| pointer-events: none; |
| } |
| #aiko-audio * { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| } |
| #aiko-tts-text { display: none !important; } |
| /* ── Emotion label (top-left of avatar card) ──────────────────────── */ |
| #aiko-emotion-label { |
| position: absolute; |
| top: 10px; |
| left: 14px; |
| z-index: 10; |
| font-size: 0.68rem; |
| font-weight: 600; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| color: rgba(220, 200, 255, 0.75); |
| text-shadow: 0 0 8px rgba(150,100,255,0.6); |
| pointer-events: none; |
| transition: opacity 0.4s ease; |
| } |
| #aiko-emotion-label ~ #aiko-emotion-label, |
| body > #aiko-emotion-label, |
| .gradio-container > #aiko-emotion-label { |
| display: none !important; |
| } |
| /* ── Hide Gradio message action buttons ── */ |
| #aiko-chatbot .message-buttons, |
| #aiko-chatbot .icon-button, |
| #aiko-chatbot [data-testid="like"], |
| #aiko-chatbot [data-testid="dislike"], |
| #aiko-chatbot [data-testid="copy"], |
| #aiko-chatbot [data-testid="edit"], |
| #aiko-chatbot button.copy, |
| #aiko-chatbot button.edit, |
| #aiko-chatbot .action-button, |
| #aiko-chatbot [class*="action"], |
| #aiko-chatbot [class*="button-row"], |
| #aiko-chatbot [class*="buttons"] { |
| display: none !important; |
| } |
| /* ── Chat overlay: right side, borderless ─────────────────────────── */ |
| #aiko-chat-overlay { |
| position: absolute; |
| top: 48px; |
| right: 80px; |
| bottom: 76px; |
| width: 44%; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-end; |
| gap: 0; |
| pointer-events: auto; |
| z-index: 5; |
| overflow: hidden; |
| } |
| #aiko-chatbot, |
| #aiko-chatbot * { |
| pointer-events: auto !important; |
| } |
| /* Kill every background/border Gradio injects on chatbot */ |
| #aiko-chatbot, |
| #aiko-chatbot > div, |
| #aiko-chatbot > div > div, |
| #aiko-chatbot .wrap, |
| #aiko-chatbot .bubble-wrap, |
| #aiko-chatbot .message-wrap, |
| #aiko-chatbot .message-wrap > div, |
| #aiko-chatbot .message-row, |
| #aiko-chatbot .message-row > div, |
| #aiko-chatbot .message-row .prose, |
| #aiko-chatbot .chat-message, |
| #aiko-chatbot [data-testid="bot"], |
| #aiko-chatbot [data-testid="user"], |
| #aiko-chatbot [data-testid="bot"] *, |
| #aiko-chatbot [data-testid="user"] *, |
| #aiko-chatbot .md, |
| #aiko-chatbot .md > *, |
| #aiko-chatbot [class*="message"], |
| #aiko-chatbot [class*="bubble"], |
| #aiko-chatbot [class*="wrap"], |
| #aiko-chatbot [class*="chat"] { |
| background: transparent !important; |
| background-color: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| } |
| #aiko-chatbot.block, |
| #aiko-chatbot .block, |
| div:has(> #aiko-chatbot) { |
| background: transparent !important; |
| background-color: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| } |
| /* Scrollable chatbot */ |
| #aiko-chatbot { |
| overflow-y: auto !important; |
| scrollbar-width: thin; |
| scrollbar-color: rgba(182,140,255,0.35) transparent; |
| height: 100% !important; |
| max-height: 100% !important; |
| padding: 0 4px 0 0 !important; |
| } |
| #aiko-chatbot::-webkit-scrollbar { width: 4px; } |
| #aiko-chatbot::-webkit-scrollbar-track { background: transparent; } |
| #aiko-chatbot::-webkit-scrollbar-thumb { |
| background: rgba(182,140,255,0.35); |
| border-radius: 4px; |
| } |
| /* Caption-style text */ |
| #aiko-chatbot .message, |
| #aiko-chatbot .bubble, |
| #aiko-chatbot [data-testid="bot"], |
| #aiko-chatbot [data-testid="user"] { |
| padding: 1px 0 !important; |
| margin: 0 !important; |
| font-size: 0.66rem !important; |
| line-height: 1.25 !important; |
| text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 16px rgba(100,60,180,0.45); |
| max-width: 100% !important; |
| } |
| #aiko-chatbot p, |
| #aiko-chatbot .md p { |
| margin: 0 0 2px 0 !important; |
| } |
| #aiko-chatbot .message-row, |
| #aiko-chatbot [class*="message-row"] { |
| margin-bottom: 2px !important; |
| padding: 0 !important; |
| } |
| #aiko-chatbot [data-testid="user"], |
| #aiko-chatbot [data-testid="user"] * { |
| color: var(--aiko-user) !important; |
| text-align: right; |
| } |
| #aiko-chatbot [data-testid="bot"], |
| #aiko-chatbot [data-testid="bot"] * { |
| color: var(--aiko-bot) !important; |
| } |
| /* ── Input row ───────────────────────────────────────────────────── */ |
| #aiko-input-row { |
| position: absolute !important; |
| left: 16px !important; |
| right: 16px !important; |
| bottom: 16px !important; |
| z-index: 7 !important; |
| display: flex !important; |
| gap: 6px !important; |
| align-items: center !important; |
| flex-wrap: nowrap !important; |
| } |
| /* Flatten Gradio's wrapper divs so they don't break flex layout */ |
| #aiko-input-row > div { |
| display: contents !important; |
| } |
| #aiko-msg { |
| flex: 1 1 auto; |
| min-width: 0; |
| } |
| /* Remove Gradio textbox wrapper backgrounds */ |
| #aiko-msg, |
| #aiko-msg > div, |
| #aiko-msg .wrap, |
| #aiko-msg .container { |
| background: transparent !important; |
| background-color: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| min-width: 0 !important; |
| flex: 1 1 auto !important; |
| } |
| /* Actual textarea */ |
| #aiko-msg textarea, |
| #aiko-msg input { |
| background: rgba(8, 8, 16, 0.80) !important; |
| background-color: rgba(8, 8, 16, 0.80) !important; |
| backdrop-filter: blur(6px) !important; |
| -webkit-backdrop-filter: blur(6px) !important; |
| color: var(--aiko-accent) !important; |
| border: 1px solid rgba(182,140,255,0.55) !important; |
| border-radius: 10px !important; |
| box-shadow: none !important; |
| min-height: 42px !important; |
| width: 100% !important; |
| } |
| textarea::placeholder, input::placeholder { color: var(--aiko-muted) !important; } |
| /* Mic + cam + send buttons — fixed square size, never shrink */ |
| #aiko-mic-btn, |
| #aiko-mic-btn button, |
| #aiko-cam-btn, |
| #aiko-cam-btn button, |
| #aiko-send, |
| #aiko-send button { |
| width: 42px !important; |
| min-width: 42px !important; |
| max-width: 42px !important; |
| height: 42px !important; |
| min-height: 42px !important; |
| padding: 0 !important; |
| border-radius: 10px !important; |
| display: flex !important; |
| align-items: center !important; |
| justify-content: center !important; |
| flex-shrink: 0 !important; |
| flex-grow: 0 !important; |
| } |
| |
| #aiko-cam-btn, |
| #aiko-cam-btn button, |
| #aiko-send, |
| #aiko-send button { |
| margin-right: 36px !important; |
| } |
| |
| #aiko-mic-btn, |
| #aiko-mic-btn button { |
| margin-right: 6px !important; |
| } |
| |
| /* Send button */ |
| #aiko-send, |
| #aiko-send button { |
| background: linear-gradient(135deg, #7652d6, #bd7cff) !important; |
| border: 0 !important; |
| color: #fff !important; |
| } |
| |
| /* Mic + Cam buttons */ |
| #aiko-mic-btn, |
| #aiko-mic-btn button, |
| #aiko-cam-btn, |
| #aiko-cam-btn button { |
| background: rgba(118, 82, 214, 0.25) !important; |
| border: 1px solid rgba(182, 140, 255, 0.6) !important; |
| box-shadow: none !important; |
| font-size: 1.2rem !important; |
| color: var(--aiko-accent) !important; |
| } |
| /* Hidden recorder — rendered in DOM but zero visual footprint */ |
| #aiko-audio-b64, |
| #aiko-vision-b64 { |
| display: none !important; |
| } |
| #aiko-mic-audio { |
| position: absolute !important; |
| width: 1px !important; |
| height: 1px !important; |
| opacity: 0 !important; |
| pointer-events: none !important; |
| overflow: hidden !important; |
| left: -9999px !important; |
| top: -9999px !important; |
| } |
| #aiko-note { display: none; } |
| .gradio-container footer { display: none !important; } |
| .hide { display: none !important; } |
| |
| /* ── Custom Webcam Modal ─────────────────────────────────────────── */ |
| .aiko-modal-overlay { |
| position: fixed !important; |
| inset: 0; |
| z-index: 10000; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: rgba(5, 5, 9, 0.85); |
| backdrop-filter: blur(6px); |
| } |
| .aiko-modal-card { |
| width: min(420px, 90vw); |
| border-radius: 18px; |
| background: radial-gradient(circle at top, #1b1432 0, #080810 70%); |
| border: 1px solid rgba(155,127,212,0.4); |
| box-shadow: 0 22px 80px rgba(0,0,0,0.55); |
| padding: 18px 22px; |
| text-align: center; |
| } |
| .aiko-modal-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 14px; |
| } |
| .aiko-modal-header h3 { |
| margin: 0; |
| font-size: 1.15rem; |
| color: #ecdeff; |
| text-shadow: 0 0 10px rgba(155, 124, 255, 0.45); |
| } |
| .aiko-modal-close { |
| background: none; |
| border: none; |
| font-size: 1.6rem; |
| color: var(--aiko-muted); |
| cursor: pointer; |
| padding: 0 4px; |
| line-height: 1; |
| } |
| .aiko-modal-close:hover { |
| color: var(--aiko-accent); |
| } |
| .aiko-modal-body { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| .aiko-btn { |
| padding: 10px 16px; |
| border-radius: 10px; |
| border: 1px solid rgba(182, 140, 255, 0.4); |
| background: rgba(118, 82, 214, 0.12); |
| color: var(--aiko-accent); |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| width: 100%; |
| margin-bottom: 8px; |
| box-sizing: border-box; |
| } |
| .aiko-btn:hover { |
| background: rgba(182, 140, 255, 0.25); |
| border-color: rgba(182, 140, 255, 0.7); |
| } |
| .aiko-btn.primary { |
| background: linear-gradient(135deg, #7652d6, #bd7cff) !important; |
| border: 0 !important; |
| color: #fff !important; |
| } |
| .aiko-btn.primary:hover { |
| opacity: 0.9; |
| } |
| #aiko-webcam-video { |
| width: 100%; |
| border-radius: 12px; |
| border: 1px solid rgba(155, 127, 212, 0.4); |
| margin-bottom: 12px; |
| transform: scaleX(-1); |
| aspect-ratio: 4/3; |
| object-fit: cover; |
| background: #000; |
| } |
| .aiko-webcam-controls { |
| display: flex; |
| gap: 10px; |
| width: 100%; |
| } |
| """ |
| AIKO_CSS += r""" |
| /* ── Login modal overlay ──────────────────────────────────────────── */ |
| #aiko-login-overlay { |
| position: fixed !important; |
| inset: 0; |
| z-index: 9999; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: rgba(5, 5, 9, 0.78); |
| backdrop-filter: blur(6px); |
| } |
| #aiko-login-overlay > div { |
| position: static !important; |
| inset: auto !important; |
| } |
| #aiko-login-card { |
| width: min(380px, 90vw); |
| max-height: 50vh; |
| overflow-y: auto; |
| padding: 20px 24px; |
| border-radius: 18px; |
| background: radial-gradient(circle at top, #1b1432 0, #080810 70%); |
| border: 1px solid rgba(155,127,212,0.4); |
| box-shadow: 0 22px 80px rgba(0,0,0,0.55); |
| text-align: center; |
| } |
| #aiko-login-card h1 { |
| color: #ecdeff; |
| text-shadow: 0 0 18px rgba(155, 124, 255, .55); |
| margin: 0 0 8px; |
| font-size: 1.4rem; |
| letter-spacing: .06em; |
| } |
| .aiko-subtitle { |
| color: var(--aiko-muted); |
| margin: 0 0 16px; |
| font-size: 0.85rem; |
| } |
| .aiko-disclaimer { |
| color: var(--aiko-muted); |
| font-size: 0.85rem; |
| line-height: 1.4; |
| text-align: left; |
| margin: 0 0 16px; |
| padding: 10px 12px; |
| border: 1px solid rgba(182,140,255,0.25); |
| border-radius: 10px; |
| background: rgba(118, 82, 214, 0.08); |
| } |
| #aiko-login-card button { |
| background: linear-gradient(135deg, #7652d6, #bd7cff) !important; |
| border: 0 !important; |
| border-radius: 10px !important; |
| color: #fff !important; |
| width: 100% !important; |
| padding: 10px !important; |
| font-weight: 600 !important; |
| } |
| """ |
| AIKO_CSS += r""" |
| /* ── Info / "About Aiko" modal overlay (shown once after login) ───── */ |
| #aiko-info-overlay { |
| position: fixed !important; |
| inset: 0; |
| z-index: 9998; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: rgba(5, 5, 9, 0.78); |
| backdrop-filter: blur(6px); |
| } |
| #aiko-info-overlay > div { |
| position: static !important; |
| inset: auto !important; |
| } |
| #aiko-info-card { |
| width: min(600px, 200vw); |
| max-height: 80vh; |
| overflow-y: auto; |
| padding: 24px 28px; |
| border-radius: 18px; |
| background: radial-gradient(circle at top, #1b1432 0, #080810 70%); |
| border: 1px solid rgba(155,127,212,0.4); |
| box-shadow: 0 22px 80px rgba(0,0,0,0.55); |
| } |
| #aiko-info-card h2 { |
| color: #ecdeff; |
| text-shadow: 0 0 18px rgba(155, 124, 255, .55); |
| margin: 0 0 12px; |
| font-size: 1.25rem; |
| letter-spacing: .04em; |
| } |
| #aiko-info-card p { |
| color: var(--aiko-text); |
| font-size: 0.88rem; |
| line-height: 1.6; |
| margin: 0 0 10px; |
| } |
| #aiko-info-card ul { |
| margin: 4px 0 14px; |
| padding-left: 20px; |
| } |
| #aiko-info-card li { |
| color: var(--aiko-text); |
| font-size: 0.85rem; |
| line-height: 1.6; |
| margin-bottom: 4px; |
| } |
| #aiko-info-card strong { |
| color: #ecdeff; |
| } |
| #aiko-info-ok-btn, |
| #aiko-info-ok-btn button { |
| background: linear-gradient(135deg, #7652d6, #bd7cff) !important; |
| border: 0 !important; |
| border-radius: 10px !important; |
| color: #fff !important; |
| width: 100% !important; |
| padding: 10px !important; |
| font-weight: 600 !important; |
| margin-top: 8px !important; |
| } |
| """ |
