Spaces:
Running on Zero
Running on Zero
| /* Show the WHO AM I rail tab in minimal mode. */ | |
| #kimodo-whoami-toggle { | |
| display: block ; | |
| color: #ffd9f5; | |
| } | |
| #kimodo-whoami-toggle.active { | |
| background: #2a1840 ; | |
| border-color: #c065e0 ; | |
| color: #ffe6fb ; | |
| } | |
| /* Tutorial step 1: a vaporwave glow pulse to draw the eye on first start. Cycles the | |
| classic cyan -> magenta neon. Removed once the user opens the tab (or restarted from | |
| the account drawer). */ | |
| /* The base .kimodo-left-tab sets `box-shadow/border/color` with !important, and !important | |
| author rules beat animation keyframes — so the glow CANNOT live on the button, and the | |
| text color can't animate directly. Glow goes on a ::after pseudo (unaffected by those | |
| rules); the text color animates through a registered custom property whose !important | |
| declaration on the higher-specificity #id.class selector wins. Colors cycle the INTRO | |
| title play button's sunset palette (sun-yellow -> orange -> magenta). Subtle by design. */ | |
| @property --kw-pulse-c { syntax: "<color>"; inherits: false; initial-value: #ffce6a; } | |
| #kimodo-whoami-toggle.kimodo-whoami-pulse { | |
| position: relative; | |
| color: var(--kw-pulse-c) ; | |
| animation: kimodo-whoami-scale 2s ease-in-out infinite, kimodo-whoami-text 2s ease-in-out infinite; | |
| will-change: transform; | |
| } | |
| #kimodo-whoami-toggle.kimodo-whoami-pulse::after { | |
| content: ""; position: absolute; inset: 0; | |
| border-radius: 0 8px 8px 0; pointer-events: none; | |
| animation: kimodo-whoami-glow 2s ease-in-out infinite; | |
| } | |
| @keyframes kimodo-whoami-scale { 0%, 100% { transform: scale(1.00); } 50% { transform: scale(1.04); } } | |
| @keyframes kimodo-whoami-text { | |
| 0% { --kw-pulse-c: #ffe96c; } /* sun yellow */ | |
| 35% { --kw-pulse-c: #ff9b2f; } /* orange */ | |
| 70% { --kw-pulse-c: #ef2a7a; } /* magenta */ | |
| 100% { --kw-pulse-c: #ffe96c; } | |
| } | |
| @keyframes kimodo-whoami-glow { | |
| 0% { box-shadow: 0 0 7px 1px rgba(255,233,108,0.45); } /* sun yellow */ | |
| 35% { box-shadow: 0 0 11px 3px rgba(255,155,47,0.52); } /* orange */ | |
| 70% { box-shadow: 0 0 14px 4px rgba(239,42,122,0.58); } /* magenta */ | |
| 100% { box-shadow: 0 0 7px 1px rgba(255,233,108,0.45); } | |
| } | |
| /* Who Am I panel content */ | |
| /* Hero portrait of Karate Wiener + the welcome play/stop button to its right. */ | |
| .kimodo-whoami-herorow { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 12px; } | |
| .kimodo-whoami-hero-img { | |
| display: block; width: 56%; max-width: 200px; margin: 0; | |
| border-radius: 14px; border: 1px solid #5a3a7a; | |
| background: linear-gradient(135deg, #2a1840 0%, #3a1d52 50%, #122a4a 100%); | |
| box-shadow: 0 6px 18px rgba(0,0,0,0.45); | |
| } | |
| .kimodo-whoami-wspeak { flex: 0 0 auto; align-self: center; width: 44px; height: 44px; font-size: 16px; } | |
| .kimodo-whoami-lead { font-size: 15px; font-weight: 600; color: #ffe6fb; margin: 8px 0; line-height: 1.45; } | |
| /* Swipable testimonial strip: horizontal scroll-snap, tap a panel to open the lightbox. */ | |
| .kimodo-whoami-gallery { | |
| display: flex; gap: 9px; margin: 10px 0 14px; padding-bottom: 6px; | |
| overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; | |
| -webkit-overflow-scrolling: touch; scrollbar-width: thin; | |
| } | |
| .kimodo-whoami-gallery::-webkit-scrollbar { height: 6px; } | |
| .kimodo-whoami-gallery::-webkit-scrollbar-thumb { background: #5a3a7a; border-radius: 3px; } | |
| .kimodo-whoami-gallery img { | |
| flex: 0 0 auto; width: 150px; height: auto; border-radius: 10px; cursor: zoom-in; | |
| scroll-snap-align: start; border: 1px solid #5a3a7a; background: #1a1322; | |
| transition: transform .12s ease, border-color .12s ease; | |
| } | |
| .kimodo-whoami-gallery img:hover { transform: translateY(-2px); border-color: #c065e0; } | |
| /* Full-screen lightbox (appended to <body> by the tab JS). */ | |
| .kimodo-whoami-lightbox { | |
| position: fixed; inset: 0; z-index: 100050; display: none; place-items: center; | |
| background: rgba(8,4,14,0.92); cursor: zoom-out; padding: 18px; box-sizing: border-box; | |
| opacity: 0; transition: opacity .18s ease; | |
| } | |
| .kimodo-whoami-lightbox.open { display: grid; opacity: 1; } | |
| .kimodo-whoami-lightbox img { max-width: 96vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.7); } | |
| .kimodo-whoami-lightbox .kimodo-whoami-lbclose { | |
| position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%; | |
| background: rgba(40,24,64,0.9); color: #ffe6fb; border: 1px solid #c065e0; font-size: 20px; | |
| line-height: 1; cursor: pointer; display: grid; place-items: center; | |
| } | |
| /* Prev / next arrows (also swipe on touch). */ | |
| .kimodo-whoami-lightbox .kimodo-whoami-lbnav { | |
| position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; | |
| background: rgba(40,24,64,0.85); color: #ffe6fb; border: 1px solid #7c5cdc; font-size: 26px; line-height: 1; | |
| cursor: pointer; display: grid; place-items: center; | |
| } | |
| .kimodo-whoami-lightbox .kw-prev { left: 12px; } | |
| .kimodo-whoami-lightbox .kw-next { right: 12px; } | |
| /* ---- Chat trigger button (end of the panel) ---- */ | |
| .kimodo-whoami-chatbtn { | |
| display: flex; align-items: center; gap: 11px; width: 100%; margin: 14px 0 4px; | |
| padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: left; | |
| color: #f0e6f8 ; | |
| background: linear-gradient(135deg, #3a1d52 0%, #2a1840 100%) ; | |
| border: 1px solid #7c5cdc ; box-shadow: 0 4px 14px rgba(0,0,0,0.4) ; | |
| transition: transform .12s ease, border-color .12s ease; | |
| animation: kw-chatbtn-attn 2.6s ease-in-out infinite; /* subtle pulse + sway so it's noticed */ | |
| will-change: transform; | |
| } | |
| /* Pause the attention animation on hover so the hover lift reads cleanly. */ | |
| .kimodo-whoami-chatbtn:hover { animation-play-state: paused; transform: translateY(-1px); border-color: #c065e0 ; } | |
| @keyframes kw-chatbtn-attn { | |
| 0%, 100% { transform: translateY(0) scale(1) rotate(0deg); } | |
| 25% { transform: translateY(-2px) scale(1.025) rotate(-0.7deg); } | |
| 50% { transform: translateY(0) scale(1.04) rotate(0deg); } | |
| 75% { transform: translateY(-2px) scale(1.025) rotate(0.7deg); } | |
| } | |
| /* Top-right "tap to chat" shortcut (beside the music mute button at right:14px). */ | |
| .kw-topchat { | |
| position: fixed; top: 14px; right: 62px; z-index: 100000; | |
| width: 40px; height: 40px; padding: 0; border-radius: 10px; | |
| border: 1px solid #4a3a60; background: rgba(20,16,28,.82); color: #e6c7ff; | |
| font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; | |
| line-height: 1; overflow: hidden; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); | |
| } | |
| .kw-topchat:hover { background: rgba(58,42,85,.92); border-color: #7c5cdc; } | |
| .kw-topchat .kw-topchat-ic { transition: opacity .2s ease; } | |
| /* Generating overlay (reply/voice) — shimmer like the dojo "generating" state. */ | |
| .kw-topchat.loading { pointer-events: none; } | |
| .kw-topchat.loading .kw-topchat-ic { opacity: .25; } | |
| .kw-topchat.loading::after { | |
| content: ''; position: absolute; inset: 0; border-radius: inherit; | |
| background: rgba(34, 211, 238, 0.5); /* cyan tint */ | |
| animation: kw-topchat-pulse 1.8s ease-in-out infinite; /* slow, seamless opacity loop */ | |
| } | |
| @keyframes kw-topchat-pulse { 0%, 100% { opacity: .12; } 50% { opacity: .62; } } | |
| /* On *.hf.space, drop the floating buttons below HF's top-right header (like/community/links). */ | |
| html.kw-on-space #kw-music-mute { top: 66px ; } | |
| html.kw-on-space .kw-topchat { top: 66px; } | |
| .kimodo-whoami-chatav { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; object-fit: cover; | |
| background: #1a1322; border: 2px solid #7c5cdc; } | |
| .kimodo-whoami-chatcap { font-size: 12.5px; line-height: 1.4; color: #e6dcf2; } | |
| .kimodo-whoami-chatcap b { color: #ffd9f5; } | |
| /* ---- Phone-style chat modal (appended to <body> by the tab JS) ---- | |
| Mobile-first: the modal FILLS the screen (uses dynamic viewport height so the iOS | |
| address bar never pushes the input off-screen). On larger screens it floats as a | |
| centered card (the @media block below). */ | |
| .kimodo-wiener-chat { | |
| position: fixed; left: 0; right: 0; top: 0; z-index: 100060; display: none; | |
| height: 100vh; height: 100dvh; background: rgba(8,4,14,0.86); | |
| opacity: 0; transition: opacity .18s ease; | |
| } | |
| .kimodo-wiener-chat.open { display: block; opacity: 1; } | |
| .kw-chat-frame { | |
| position: absolute; inset: 0; display: flex; flex-direction: column; | |
| background: #161019; overflow: hidden; | |
| } | |
| @media (min-width: 480px) and (min-height: 560px) { | |
| .kimodo-wiener-chat.open { display: grid; place-items: center; padding: 16px; box-sizing: border-box; } | |
| .kw-chat-frame { | |
| position: relative; inset: auto; width: 100%; max-width: 420px; height: 88vh; max-height: 720px; | |
| border: 1px solid #5a3a7a; border-radius: 18px; box-shadow: 0 16px 50px rgba(0,0,0,0.6); | |
| } | |
| } | |
| .kw-chat-head { | |
| display: flex; align-items: center; gap: 10px; padding: 11px 12px; flex: 0 0 auto; | |
| background: linear-gradient(135deg, #2a1840, #3a1d52); border-bottom: 1px solid #5a3a7a; | |
| } | |
| .kw-chat-head img { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #c065e0; background: #1a1322; object-fit: cover; } | |
| .kw-chat-head .kw-name { flex: 1; font-size: 14px; font-weight: 700; color: #ffe6fb; } | |
| .kw-chat-head .kw-sub { font-size: 10.5px; color: #b39ddb; font-weight: 400; display: block; } | |
| .kw-chat-close { width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.25) ; | |
| color: #ffe6fb ; border: 1px solid #7c5cdc ; font-size: 17px; cursor: pointer; box-shadow: none ; } | |
| .kw-chat-msgs { | |
| flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; | |
| background: #100b16; touch-action: pan-y; | |
| } | |
| .kw-msg { display: flex; gap: 8px; max-width: 86%; } | |
| .kw-msg.kw-wiener { align-self: flex-start; } | |
| .kw-msg.kw-user { align-self: flex-end; flex-direction: row-reverse; } | |
| .kw-msg.kw-wiener { align-items: flex-end; } | |
| .kw-msg img.kw-msgav { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; align-self: flex-end; background: #1a1322; border: 1px solid #5a3a7a; } | |
| .kw-bubble { padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; min-width: 0; } | |
| .kw-wiener .kw-bubble { background: #261a33; color: #efe6ff; border: 1px solid #4a3a60; border-bottom-left-radius: 5px; } | |
| .kw-user .kw-bubble { background: #6b4fd0; color: #fff; border-bottom-right-radius: 5px; } | |
| /* Per-message voice control: a small round play(▶)/stop(■) icon, right of the avatar. */ | |
| .kw-speak { flex: 0 0 auto; align-self: flex-end; width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer; | |
| display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; | |
| color: #cbb6ff ; background: #2c2140 ; border: 1px solid #6a4a9a ; box-shadow: none ; } | |
| .kw-speak:hover:not(.loading) { background: #3a2a55 ; color: #e6c7ff ; } | |
| .kw-speak.loading { opacity: .85; cursor: default; } | |
| .kw-speak.playing { background: #b79bff ; color: #1a1320 ; border-color: #cdb6ff ; } | |
| /* Loading ring shown on the speak button while the voice buffers / generates. */ | |
| .kw-speak .kw-ld { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; | |
| border: 2px solid rgba(203,182,255,0.32); border-top-color: #cbb6ff; display: inline-block; animation: kw-spin .8s linear infinite; } | |
| @keyframes kw-spin { to { transform: rotate(360deg); } } | |
| .kw-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 14px; background: #261a33; border: 1px solid #4a3a60; border-radius: 14px; border-bottom-left-radius: 5px; } | |
| .kw-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9a8ab0; animation: kw-typing 1s infinite; } | |
| .kw-typing span:nth-child(2) { animation-delay: .15s; } | |
| .kw-typing span:nth-child(3) { animation-delay: .3s; } | |
| @keyframes kw-typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } | |
| .kw-chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px; flex: 0 0 auto; background: #16101d; border-top: 1px solid #5a3a7a; } | |
| .kw-chat-input textarea { flex: 1; resize: none; max-height: 96px; min-height: 22px; padding: 9px 11px; font: inherit; font-size: 13px; | |
| color: #f2e6ff; background: #1c1622; border: 1px solid #4a3a60; border-radius: 12px; } | |
| .kw-chat-input textarea:focus { outline: none; border-color: #a86fe0; } | |
| .kw-chat-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 17px; | |
| color: #fff ; background: #6b4fd0 ; border: 1px solid #8266e0 ; box-shadow: none ; } | |
| .kw-chat-send:hover:not(:disabled) { background: #7a5ee0 ; } | |
| .kw-chat-send:disabled { opacity: .5; cursor: default; } | |
| #kimodo-whoami-drawer p { font-size: 12.5px; color: #c9c2d4; line-height: 1.5; margin: 8px 0; } | |
| #kimodo-whoami-drawer h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #c065e0; margin: 14px 0 6px; } | |
| .kimodo-whoami-list { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 7px; } | |
| .kimodo-whoami-list li { | |
| font-size: 12.5px; color: #d8d2e2; line-height: 1.4; | |
| padding: 8px 10px; border-radius: 8px; | |
| background: rgba(124, 92, 220, 0.10); border: 1px solid rgba(124, 92, 220, 0.30); | |
| } | |
| .kimodo-whoami-list li b { color: #efe6ff; } | |
| .kimodo-whoami-foot { color: #9aa0aa ; font-style: italic; margin-top: 12px ; } | |