/* Show the WHO AM I rail tab in minimal mode. */ #kimodo-whoami-toggle { display: block !important; color: #ffd9f5; } #kimodo-whoami-toggle.active { background: #2a1840 !important; border-color: #c065e0 !important; color: #ffe6fb !important; } /* 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: ""; inherits: false; initial-value: #ffce6a; } #kimodo-whoami-toggle.kimodo-whoami-pulse { position: relative; color: var(--kw-pulse-c) !important; 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 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 !important; background: linear-gradient(135deg, #3a1d52 0%, #2a1840 100%) !important; border: 1px solid #7c5cdc !important; box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important; 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 !important; } @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 !important; } 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 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) !important; color: #ffe6fb !important; border: 1px solid #7c5cdc !important; font-size: 17px; cursor: pointer; box-shadow: none !important; } .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 !important; background: #2c2140 !important; border: 1px solid #6a4a9a !important; box-shadow: none !important; } .kw-speak:hover:not(.loading) { background: #3a2a55 !important; color: #e6c7ff !important; } .kw-speak.loading { opacity: .85; cursor: default; } .kw-speak.playing { background: #b79bff !important; color: #1a1320 !important; border-color: #cdb6ff !important; } /* 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 !important; background: #6b4fd0 !important; border: 1px solid #8266e0 !important; box-shadow: none !important; } .kw-chat-send:hover:not(:disabled) { background: #7a5ee0 !important; } .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 !important; font-style: italic; margin-top: 12px !important; }