/* =============================================================================
* eChan companion — 1.3.2 stylesheet
* =============================================================================
*
* Changes vs 1c:
* - Mobile dialog height: 180 → 150px. Avatar: 120 → 104px. Tighter
* fit for small viewports.
* - Text body scroll restored — overflow:auto with edge fade-masks
* (top + bottom) so long messages stay readable on any viewport.
* iOS gets -webkit-overflow-scrolling: touch for momentum. Page dots
* and advance indicator remain absolute-positioned siblings, untouched
* by the mask.
* - Breathing animation removed. The `.echan-avatar.breathing` rule and
* its keyframe are gone. Idle visual life is provided entirely by
* message-driven glitch transitions now; ambient pose-flips were
* competing with real emotion changes and producing jumpy results.
*
* Invariants unchanged: external file, outside CSP hash, z-index 60,
* name is ALWAYS "eChan" mixed case.
* ===========================================================================*/
.echan-root {
--ec-rail-w-shown: 22px;
--ec-rail-w-hidden: 14px;
--ec-body-h-desktop: 170px;
--ec-body-h-mobile: 150px; /* was 180 — tighter for small screens */
--ec-body-w-desktop: 540px;
--ec-avatar-d: 140px;
--ec-avatar-d-mobile: 104px; /* was 120 — proportional shrink */
--ec-glow: var(--cyan, #01a0e0);
--ec-glow-soft: rgba(1, 160, 224, 0.22);
--ec-glow-strong: rgba(1, 160, 224, 0.50);
--ec-bg: var(--bg-2, #0e121c);
--ec-line: var(--line, rgba(255, 255, 255, 0.08));
--ec-line-cyan: rgba(1, 160, 224, 0.30);
--ec-text: var(--text, #d8e2f0);
--ec-text-dim: var(--text-2, #98a4b8);
--ec-text-faint: var(--text-3, #5e6a7e);
--ec-amber: var(--amber, #ffb020);
--ec-magenta: var(--magenta, #ff3da3);
--ec-anim-slide: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
--ec-anim-fade: 200ms ease-out;
--ec-anim-pos: 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* =============================================================================
* ROOT
* ===========================================================================*/
.echan-root {
position: fixed;
left: 0;
bottom: calc(var(--ec-footer-actual, var(--footer-h, 44px)) + 220px);
width: var(--ec-body-w-desktop);
height: var(--ec-body-h-desktop);
z-index: 60;
font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
display: flex;
flex-direction: row;
align-items: stretch;
pointer-events: none;
transition: bottom var(--ec-anim-pos);
}
.echan-root.echan-deskpos-footer {
bottom: var(--ec-footer-actual, var(--footer-h, 44px));
}
/* ---- Media-center coordination (driven by window.__echan; see echan.js) ----
* elevated: sit ABOVE the media-center dim (z 9000/9100) while a lesson runs so
* she stays visible and narrates; mc-hidden: fully gone during video.
* postoggle-locked: the up-toggle is disabled while pinned to footer. */
.echan-root.echan-mc-elevated { z-index: 9200; }
.echan-root.echan-mc-hidden {
opacity: 0;
pointer-events: none;
transition: opacity var(--ec-anim-fade);
}
.echan-rail-postoggle.echan-postoggle-locked {
opacity: 0.3;
pointer-events: none;
}
/* Mobile lesson: pin her over the footer to reclaim vertical space (req #11).
* After the deskpos-footer rule (same specificity) so this `bottom` wins. */
.echan-root.echan-mc-lesson-mobile { bottom: 0; }
/* =============================================================================
* RAIL
* ===========================================================================*/
.echan-rail {
flex: 0 0 var(--ec-rail-w-hidden);
width: var(--ec-rail-w-hidden);
background: var(--ec-bg);
border-top: 1px solid var(--ec-line);
border-right: 1px solid var(--ec-line);
border-bottom: 1px solid var(--ec-line);
box-shadow:
inset 1px 0 0 rgba(1, 160, 224, 0.18),
inset -1px 0 4px rgba(1, 160, 224, 0.10);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 0;
gap: 10px;
cursor: pointer;
pointer-events: auto;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition:
flex-basis var(--ec-anim-slide),
width var(--ec-anim-slide),
box-shadow 220ms ease,
background 220ms ease,
border-color 220ms ease;
position: relative;
z-index: 2;
}
.echan-root.echan-shown .echan-rail {
flex-basis: var(--ec-rail-w-shown);
width: var(--ec-rail-w-shown);
justify-content: space-between;
box-shadow:
inset 1px 0 0 var(--ec-line-cyan),
inset -1px 0 6px rgba(1, 160, 224, 0.16);
}
.echan-rail:hover,
.echan-rail:focus-visible {
outline: none;
background: rgba(14, 18, 28, 1);
box-shadow:
inset 1px 0 0 var(--ec-glow),
inset -1px 0 8px var(--ec-glow-strong);
}
.echan-rail-chev {
width: 12px;
height: 12px;
position: relative;
flex-shrink: 0;
transition: transform var(--ec-anim-slide);
}
.echan-rail-chev::before,
.echan-rail-chev::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 2px;
background: var(--ec-text-dim);
border-radius: 1px;
transform-origin: center;
transition: background 180ms ease, box-shadow 180ms ease;
}
.echan-rail-chev::before { transform: translate(-50%, -50%) translateX(-2px) translateY(-2.5px) rotate( 42deg); }
.echan-rail-chev::after { transform: translate(-50%, -50%) translateX(-2px) translateY( 2.5px) rotate(-42deg); }
.echan-rail:hover .echan-rail-chev::before,
.echan-rail:hover .echan-rail-chev::after {
background: var(--ec-glow);
box-shadow: 0 0 4px var(--ec-glow-soft);
}
.echan-root.echan-shown .echan-rail-chev { transform: rotate(180deg); }
.echan-rail-gear {
width: 13px;
height: 13px;
color: var(--ec-glow);
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease 60ms, color 180ms ease, transform 220ms ease;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
background-color: currentColor;
flex-shrink: 0;
}
.echan-root.echan-shown .echan-rail-gear {
opacity: 0.85;
pointer-events: auto;
}
.echan-rail-gear:hover { opacity: 1; transform: rotate(50deg); }
/* =============================================================================
* POSITION TOGGLE
* ===========================================================================*/
.echan-rail-postoggle {
width: 11px;
height: 11px;
position: relative;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease 100ms, transform var(--ec-anim-slide);
flex-shrink: 0;
cursor: pointer;
}
.echan-rail-postoggle::before,
.echan-rail-postoggle::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 7px;
height: 1.8px;
background: var(--ec-text-dim);
border-radius: 1px;
transform-origin: center;
transition: background 180ms ease, box-shadow 180ms ease;
}
.echan-rail-postoggle::before { transform: translate(-50%, -50%) translateX(-1.8px) translateY(-1px) rotate( 42deg); }
.echan-rail-postoggle::after { transform: translate(-50%, -50%) translateX( 1.8px) translateY(-1px) rotate(-42deg); }
.echan-root.echan-shown .echan-rail-postoggle {
opacity: 0.7;
pointer-events: auto;
}
.echan-rail-postoggle:hover { opacity: 1; }
.echan-rail-postoggle:hover::before,
.echan-rail-postoggle:hover::after {
background: var(--ec-glow);
box-shadow: 0 0 4px var(--ec-glow-soft);
}
.echan-root.echan-deskpos-footer .echan-rail-postoggle { transform: rotate(180deg); }
.echan-rail-chev { order: 2; }
.echan-rail-gear { order: 1; }
.echan-rail-postoggle { order: 3; }
.echan-root.echan-deskpos-footer .echan-rail-gear { order: 3; }
.echan-root.echan-deskpos-footer .echan-rail-postoggle { order: 1; }
/* =============================================================================
* NOTIFICATION PULSE
* ===========================================================================*/
@keyframes echan-rail-pulse {
0%, 100% {
box-shadow:
inset 1px 0 0 rgba(255, 176, 32, 0.50),
inset -1px 0 6px rgba(255, 176, 32, 0.20);
border-color: rgba(255, 176, 32, 0.35);
}
50% {
box-shadow:
inset 1px 0 0 rgba(255, 176, 32, 1.00),
inset -1px 0 14px rgba(255, 176, 32, 0.60),
0 0 12px rgba(255, 176, 32, 0.32);
border-color: rgba(255, 176, 32, 0.70);
}
}
.echan-rail.echan-rail-pulse-on {
animation: echan-rail-pulse 2.4s ease-in-out infinite;
}
/* =============================================================================
* BODY
* ===========================================================================*/
.echan-body {
flex: 1 1 auto;
position: relative;
background: var(--ec-bg);
border-top: 1px solid var(--ec-line);
border-right: 1px solid var(--ec-line);
border-bottom: 1px solid var(--ec-line);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.03),
0 -4px 14px rgba(0, 0, 0, 0.32);
display: grid;
grid-template-columns: auto 1fr;
overflow: hidden;
pointer-events: auto;
transform: translateX(-100%);
opacity: 0;
transition:
transform var(--ec-anim-slide),
opacity var(--ec-anim-fade);
z-index: 1;
}
.echan-root.echan-shown .echan-body {
transform: translateX(0);
opacity: 1;
}
.echan-body::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 56px;
height: 2px;
background: linear-gradient(90deg, var(--ec-glow), transparent);
pointer-events: none;
opacity: 0.85;
}
/* =============================================================================
* AVATAR — breathing removed; sprites stay still between emotion changes.
*
* Idle visual life now comes entirely from message-driven glitch
* transitions. The "breathing" pose-cycle was producing flickery results
* when message-driven emotions arrived mid-cycle. Cleaner to keep one
* sprite per dialogue segment, glitch on transition.
* ===========================================================================*/
.echan-avatar {
width: var(--ec-avatar-d);
height: var(--ec-avatar-d);
position: relative;
align-self: center;
justify-self: start;
margin: 14px 10px 14px 14px;
flex-shrink: 0;
border-radius: 12px;
overflow: hidden;
background: #0a0d18;
box-shadow:
inset 0 0 0 1px var(--ec-line-cyan),
inset 0 0 12px rgba(1, 160, 224, 0.10),
0 0 10px rgba(1, 160, 224, 0.10),
0 2px 10px rgba(0, 0, 0, 0.45);
transition: box-shadow 320ms ease;
isolation: isolate;
cursor: pointer;
}
.echan-avatar:hover {
box-shadow:
inset 0 0 0 1px var(--ec-glow),
inset 0 0 14px rgba(1, 160, 224, 0.18),
0 0 14px rgba(1, 160, 224, 0.20),
0 2px 10px rgba(0, 0, 0, 0.45);
}
.echan-avatar::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 110% 90% at 50% 45%, transparent 50%, rgba(0,0,0,0.38) 100%);
pointer-events: none;
z-index: 2;
}
.echan-avatar img.echan-sprite {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 220ms ease, filter 420ms ease;
pointer-events: none;
z-index: 1;
}
.echan-avatar img.echan-sprite.active { opacity: 1; }
.echan-avatar img.echan-sprite[data-emotion="sleepy"].active {
filter: brightness(0.78) saturate(0.6) hue-rotate(-6deg);
}
/* =============================================================================
* CRT GLITCH TRANSITION
* ===========================================================================*/
@keyframes echan-glitch-distort {
0%, 100% { filter: none; transform: translate(0, 0); }
10% { filter: hue-rotate(-25deg) brightness(1.35) saturate(1.6) contrast(1.1); transform: translate(-3px, 0); }
22% { filter: hue-rotate(40deg) brightness(0.78) saturate(1.4) contrast(1.4); transform: translate(2px, 1px); }
34% { filter: hue-rotate(-15deg) brightness(1.2) saturate(2.0); transform: translate(-1px, 0); }
46% { filter: hue-rotate(30deg) brightness(0.9); transform: translate(2px, -1px); }
55% { filter: brightness(1.5) contrast(1.8) saturate(0.3); transform: translate(-2px, 0); }
68% { filter: hue-rotate(-30deg) brightness(0.95); transform: translate(1px, 1px); }
80% { filter: hue-rotate(12deg) brightness(1.08); transform: translate(-1px, 0); }
92% { filter: brightness(1.04); transform: translate(0.5px, 0); }
}
@keyframes echan-glitch-scanline {
0%, 100% { opacity: 0; transform: translateY(0); }
15% { opacity: 1; transform: translateY(-3px); }
35% { opacity: 0.85; transform: translateY(2px); }
55% { opacity: 1; transform: translateY(-1px); }
75% { opacity: 0.55; transform: translateY(2px); }
90% { opacity: 0.25; }
}
@keyframes echan-glitch-jitter {
0%, 100% { /* reserved for future independent transform tuning */ }
}
.echan-avatar.echan-glitching {
animation:
echan-glitch-distort 320ms steps(10, end),
echan-glitch-jitter 320ms steps(10, end);
}
.echan-avatar.echan-glitching::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: repeating-linear-gradient(
0deg,
rgba(0, 240, 255, 0.10) 0px,
rgba(0, 240, 255, 0.10) 1px,
transparent 1px,
transparent 2px
);
mix-blend-mode: screen;
animation: echan-glitch-scanline 320ms steps(10, end);
}
.echan-root.echan-pri-3 .echan-avatar {
box-shadow:
inset 0 0 0 1px rgba(255, 176, 32, 0.6),
inset 0 0 16px rgba(255, 176, 32, 0.22),
0 0 18px rgba(255, 176, 32, 0.28),
0 2px 12px rgba(0, 0, 0, 0.5);
}
.echan-root.echan-pri-owner .echan-avatar {
box-shadow:
inset 0 0 0 1px rgba(255, 61, 163, 0.55),
inset 0 0 16px rgba(255, 61, 163, 0.22),
0 0 18px rgba(255, 61, 163, 0.28),
0 2px 12px rgba(0, 0, 0, 0.5);
}
/* =============================================================================
* QUICK-ACTIONS POPOVER
* ===========================================================================*/
.echan-quickactions {
position: absolute;
left: calc(14px + var(--ec-avatar-d) + 6px);
top: 50%;
transform: translateY(-50%);
background: var(--ec-bg);
border: 1px solid var(--ec-line);
border-radius: 5px;
padding: 5px;
display: none;
flex-direction: column;
gap: 2px;
pointer-events: auto;
z-index: 4;
box-shadow:
0 0 14px rgba(1, 160, 224, 0.16),
0 6px 22px rgba(0, 0, 0, 0.55);
min-width: 150px;
}
.echan-root.echan-quickactions-open .echan-quickactions { display: flex; }
.echan-qa-btn {
appearance: none;
background: transparent;
border: 0;
color: var(--ec-text-dim);
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 12px;
font-weight: 500;
padding: 7px 11px;
border-radius: 3px;
cursor: pointer;
text-align: left;
transition: background 160ms ease, color 160ms ease;
white-space: nowrap;
text-transform: none;
}
.echan-qa-btn:hover,
.echan-qa-btn:focus-visible {
background: rgba(1, 160, 224, 0.12);
color: #fff;
outline: none;
}
.echan-qa-btn:disabled {
color: var(--ec-text-faint);
cursor: not-allowed;
opacity: 0.55;
}
.echan-qa-btn::before {
content: "·";
display: inline-block;
margin-right: 6px;
color: var(--ec-glow);
opacity: 0.75;
font-weight: 700;
}
/* =============================================================================
* TEXT PANE
* ===========================================================================*/
.echan-text {
position: relative;
display: flex;
flex-direction: column;
padding: 14px 18px 18px 8px;
min-width: 0;
overflow: hidden;
}
.echan-text-head {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
font-family: 'Fira Code', 'SF Mono', Monaco, monospace;
font-size: 10.5px;
color: var(--ec-glow);
text-shadow: 0 0 5px var(--ec-glow-soft);
user-select: none;
flex-shrink: 0;
text-transform: none;
}
.echan-text-head .echan-name {
font-weight: 600;
text-transform: none !important; /* never "ECHAN" */
letter-spacing: 0;
}
.echan-text-head .echan-chev {
font-weight: 700;
opacity: 0.7;
}
.echan-text-head .echan-cat {
font-size: 9px;
color: var(--ec-text-faint);
letter-spacing: 0.20em;
text-transform: uppercase;
margin-left: auto;
text-shadow: none;
}
/* Text body — scrollable on overflow with edge fade-masks.
*
* Why fade-masks instead of a visible scrollbar:
* - Standard scrollbars compete visually with eChan's HUD frame
* - The fade-out at top + bottom is a known affordance for "more content
* above/below" without committing pixels to a permanent indicator
* - When content fits (most messages), the fade just creates a subtle
* edge that doesn't hurt the design
* - When content overflows, the same fade naturally indicates more text
*
* iOS gets -webkit-overflow-scrolling:touch for momentum scroll. Modern
* iOS supports CSS overflow:auto natively but the legacy flag is harmless.
* Page dots + advance indicator are absolute-positioned OUTSIDE
* .echan-text-body so they don't get masked. */
.echan-text-body {
flex: 1 1 auto;
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: var(--ec-text);
word-break: break-word;
overflow-wrap: anywhere;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(
180deg,
transparent 0,
black 6px,
black calc(100% - 6px),
transparent 100%
);
-webkit-mask-image: linear-gradient(
180deg,
transparent 0,
black 6px,
black calc(100% - 6px),
transparent 100%
);
/* Thin custom scrollbar — only visible during active scroll on most
* platforms; styled to match the cyan line palette so even when shown
* it feels native to the dialog. */
scrollbar-width: thin;
scrollbar-color: var(--ec-line-cyan) transparent;
}
.echan-text-body::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.echan-text-body::-webkit-scrollbar-thumb {
background: var(--ec-line-cyan);
border-radius: 2px;
}
.echan-text-body::-webkit-scrollbar-track {
background: transparent;
}
.echan-text-advance {
position: absolute;
right: 14px;
bottom: 8px;
font-size: 11px;
color: var(--ec-glow);
text-shadow: 0 0 6px var(--ec-glow-soft);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
}
.echan-text-advance.visible {
opacity: 0.85;
animation: echan-advance-pulse 1.4s ease-in-out infinite;
}
@keyframes echan-advance-pulse {
0%, 100% { transform: translateX(0); opacity: 0.7; }
50% { transform: translateX(2px); opacity: 1; }
}
/* =============================================================================
* PAGE DOTS
* ===========================================================================*/
.echan-pages {
position: absolute;
left: 0;
right: 0;
bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease;
}
.echan-pages.visible { opacity: 1; }
.echan-page-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--ec-text-faint);
transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.echan-page-dot.active {
background: var(--ec-glow);
border-color: var(--ec-glow);
box-shadow: 0 0 4px var(--ec-glow-soft);
}
.echan-pages-more {
font-family: 'Fira Code', monospace;
font-size: 9px;
color: var(--ec-text-faint);
letter-spacing: -0.02em;
margin-left: 3px;
line-height: 1;
}
/* =============================================================================
* SETTINGS POPOVER
* ===========================================================================*/
.echan-settings {
position: absolute;
left: calc(var(--ec-rail-w-shown) + 6px);
bottom: 8px;
width: 210px;
background: var(--ec-bg);
border: 1px solid var(--ec-line);
border-radius: 5px;
padding: 11px 13px;
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 12.5px;
color: var(--ec-text);
box-shadow:
0 0 14px rgba(1, 160, 224, 0.16),
0 6px 22px rgba(0, 0, 0, 0.55);
pointer-events: auto;
z-index: 5;
display: none;
}
.echan-root.echan-settings-open .echan-settings { display: block; }
.echan-settings-title {
font-family: 'Fira Code', monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ec-glow);
text-shadow: 0 0 5px var(--ec-glow-soft);
margin-bottom: 9px;
}
.echan-settings-row {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 9px;
}
.echan-settings-row:last-child { margin-bottom: 0; }
.echan-settings-row .echan-settings-label {
font-family: 'Fira Code', monospace;
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ec-text-faint);
}
.echan-settings-modes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--ec-line);
border-radius: 4px;
padding: 3px;
}
.echan-settings-modes button {
appearance: none;
background: transparent;
border: 0;
color: var(--ec-text-dim);
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 11.5px;
font-weight: 500;
padding: 6px 4px;
border-radius: 3px;
cursor: pointer;
transition: background 160ms ease, color 160ms ease;
text-transform: none;
}
.echan-settings-modes button:hover { color: var(--ec-text); }
.echan-settings-modes button.active {
background: linear-gradient(180deg, rgba(1, 160, 224, 0.38), rgba(1, 160, 224, 0.18));
color: #fff;
text-shadow: 0 0 5px var(--ec-glow-soft);
}
/* =============================================================================
* CHATTINESS HELP (v1.3.1) — "?" toggle + inline mode descriptions
*
* Label row holds the CHATTINESS label + a small circular "?" button.
* Clicking toggles .echan-modehelp-open on the settings popover, which
* reveals one name+description row per mode. Collapsed by default and
* not persisted — it's a momentary "what do these mean" affordance, not
* a setting.
* ===========================================================================*/
.echan-settings-labelrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.echan-settings-help-btn {
appearance: none;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--ec-line);
color: var(--ec-text-faint);
font-family: 'Fira Code', monospace;
font-size: 9px;
font-weight: 700;
width: 15px;
height: 15px;
line-height: 1;
border-radius: 50%;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 160ms ease, border-color 160ms ease;
flex-shrink: 0;
}
.echan-settings-help-btn:hover {
color: var(--ec-glow);
border-color: var(--ec-line-cyan);
}
.echan-settings.echan-modehelp-open .echan-settings-help-btn {
color: var(--ec-glow);
border-color: var(--ec-line-cyan);
}
.echan-settings-help {
display: none;
flex-direction: column;
gap: 5px;
margin-top: 6px;
padding: 7px 8px;
background: rgba(0, 0, 0, 0.30);
border: 1px solid var(--ec-line);
border-radius: 4px;
}
.echan-settings.echan-modehelp-open .echan-settings-help { display: flex; }
.echan-settings-help-row {
display: flex;
flex-direction: column;
gap: 1px;
}
.echan-settings-help-name {
font-family: 'Fira Code', monospace;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ec-glow);
}
.echan-settings-help-desc {
font-size: 11px;
line-height: 1.4;
color: var(--ec-text-dim);
text-transform: none;
}
/* Sound toggle */
.echan-settings-row.echan-settings-row-inline {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}.echan-settings-soundbtn {
appearance: none;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--ec-line);
color: var(--ec-text-dim);
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
padding: 4px 12px;
border-radius: 3px;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
text-transform: none;
min-width: 44px;
}
.echan-settings-soundbtn:hover {
color: var(--ec-text);
border-color: var(--ec-line-cyan);
}
.echan-settings-soundbtn[aria-pressed="true"] {
background: linear-gradient(180deg, rgba(1, 160, 224, 0.38), rgba(1, 160, 224, 0.18));
color: #fff;
border-color: var(--ec-line-cyan);
text-shadow: 0 0 5px var(--ec-glow-soft);
}
/* =============================================================================
* MOBILE
*
* Smaller dialog (150px) for tighter fit on phones. Avatar shrinks
* proportionally to 104px. Text scales down to 12.5px to compensate for
* the reduced vertical room; line-height keeps multi-line messages
* readable. The scroll/fade-mask combo on .echan-text-body applies the
* same as desktop so long messages remain accessible.
* ===========================================================================*/
@media (max-width: 939px) {
.echan-root {
width: 100vw;
height: var(--ec-body-h-mobile);
bottom: var(--ec-footer-actual, var(--footer-h, 44px));
}
.echan-rail-postoggle { display: none; }
.echan-root.echan-shown .echan-rail {
justify-content: center;
gap: 16px;
}
.echan-rail {
flex-basis: 18px;
width: 18px;
}
.echan-root.echan-shown .echan-rail {
flex-basis: 26px;
width: 26px;
}
.echan-rail-chev { width: 14px; height: 14px; }
.echan-rail-chev::before,
.echan-rail-chev::after { width: 10px; height: 2px; }
.echan-rail-gear { width: 15px; height: 15px; }
.echan-avatar {
width: var(--ec-avatar-d-mobile);
height: var(--ec-avatar-d-mobile);
margin: 10px 8px 10px 10px;
border-radius: 9px;
}
.echan-text { padding: 10px 14px 18px 6px; }
.echan-text-body { font-size: 12.5px; line-height: 1.45; }
.echan-text-head { font-size: 9.5px; margin-bottom: 4px; }
.echan-settings {
left: calc(26px + 6px);
width: 196px;
}
.echan-quickactions {
left: calc(10px + var(--ec-avatar-d-mobile) + 6px);
min-width: 140px;
padding: 4px;
}
.echan-qa-btn { font-size: 11.5px; padding: 6px 10px; }
}
/* =============================================================================
* REDUCED MOTION
* ===========================================================================*/
@media (prefers-reduced-motion: reduce) {
.echan-root,
.echan-body,
.echan-rail,
.echan-rail-chev,
.echan-rail-postoggle,
.echan-rail-gear { transition: none; }
.echan-text-advance.visible { animation: none; }
.echan-rail.echan-rail-pulse-on { animation: none; }
.echan-avatar.echan-glitching { animation: none; }
.echan-avatar.echan-glitching::before { animation: none; opacity: 0; }
}
/* =============================================================================
* SPOTLIGHT (v1.3.1) — glow for dashboard cards eChan is talking about
*
* GLOBAL selectors by design: applied by echan.js to the dashboard's own
* cards (.tx-row, .block-card, .msg-card), not to eChan's DOM.
*
* v2 (stronger): the original outline-only pulse was too easy to miss on
* a dark dashboard. This version layers outline + box-shadow glow +
* background tint + brightness. Specificity note: block cards carry
* state-dependent box-shadows from higher-specificity rules — but
* properties set inside a running ANIMATION override normal author
* declarations regardless of specificity (CSS cascade origin order), so
* the glow reliably wins for its 5s lifetime and the card's own shadow
* returns untouched afterwards. Class removed by JS after ~5.3s.
* ===========================================================================*/
@keyframes echan-spotlight-pulse {
0% {
outline-color: rgba(1, 160, 224, 0);
box-shadow: 0 0 0 0 rgba(1, 160, 224, 0), 0 0 0 rgba(1, 160, 224, 0);
background-color: rgba(1, 160, 224, 0);
filter: brightness(1.00);
}
6% {
/* hard flash — impossible to miss */
outline-color: rgba(1, 160, 224, 1);
box-shadow: 0 0 0 3px rgba(1, 160, 224, 0.55), 0 0 26px rgba(1, 160, 224, 0.90);
background-color: rgba(1, 160, 224, 0.24);
filter: brightness(1.45);
}
22% {
outline-color: rgba(1, 160, 224, 0.45);
box-shadow: 0 0 0 2px rgba(1, 160, 224, 0.25), 0 0 12px rgba(1, 160, 224, 0.40);
background-color: rgba(1, 160, 224, 0.10);
filter: brightness(1.10);
}
38% {
outline-color: rgba(1, 160, 224, 0.95);
box-shadow: 0 0 0 3px rgba(1, 160, 224, 0.45), 0 0 20px rgba(1, 160, 224, 0.75);
background-color: rgba(1, 160, 224, 0.18);
filter: brightness(1.30);
}
56% {
outline-color: rgba(1, 160, 224, 0.40);
box-shadow: 0 0 0 2px rgba(1, 160, 224, 0.20), 0 0 10px rgba(1, 160, 224, 0.35);
background-color: rgba(1, 160, 224, 0.08);
filter: brightness(1.08);
}
72% {
outline-color: rgba(1, 160, 224, 0.80);
box-shadow: 0 0 0 2px rgba(1, 160, 224, 0.35), 0 0 16px rgba(1, 160, 224, 0.55);
background-color: rgba(1, 160, 224, 0.13);
filter: brightness(1.18);
}
100% {
outline-color: rgba(1, 160, 224, 0);
box-shadow: 0 0 0 0 rgba(1, 160, 224, 0), 0 0 0 rgba(1, 160, 224, 0);
background-color: rgba(1, 160, 224, 0);
filter: brightness(1.00);
}
}
.echan-spotlight {
outline: 2px solid rgba(1, 160, 224, 0);
outline-offset: -1px;
animation: echan-spotlight-pulse 5s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
.echan-spotlight {
animation: none;
outline: 2px solid rgba(1, 160, 224, 0.85); /* strong static highlight */
box-shadow: 0 0 0 3px rgba(1, 160, 224, 0.30);
}
}
/* Mobile tab glow — companion to .echan-spotlight. On phones the panels
* stack behind the .mobile-tab strip, so when eChan mentions an event in
* a non-active panel the card glow is invisible; the owning section's tab
* pulses instead, telling the user where to look. Same animation-origin
* cascade trick: these keyframes override .mobile-tab.active styling for
* the 5s lifetime, then it returns untouched. */
@keyframes echan-spotlight-tab-pulse {
0% {
box-shadow: 0 0 0 0 rgba(1, 160, 224, 0);
background-color: rgba(1, 160, 224, 0);
color: inherit;
}
6% {
box-shadow: 0 0 0 2px rgba(1, 160, 224, 0.85), 0 0 14px rgba(1, 160, 224, 0.80);
background-color: rgba(1, 160, 224, 0.30);
color: #fff;
}
25% {
box-shadow: 0 0 0 1px rgba(1, 160, 224, 0.35), 0 0 6px rgba(1, 160, 224, 0.30);
background-color: rgba(1, 160, 224, 0.12);
color: #fff;
}
42% {
box-shadow: 0 0 0 2px rgba(1, 160, 224, 0.70), 0 0 12px rgba(1, 160, 224, 0.65);
background-color: rgba(1, 160, 224, 0.24);
color: #fff;
}
62% {
box-shadow: 0 0 0 1px rgba(1, 160, 224, 0.30), 0 0 5px rgba(1, 160, 224, 0.25);
background-color: rgba(1, 160, 224, 0.10);
color: #fff;
}
78% {
box-shadow: 0 0 0 2px rgba(1, 160, 224, 0.55), 0 0 10px rgba(1, 160, 224, 0.50);
background-color: rgba(1, 160, 224, 0.18);
color: #fff;
}
100% {
box-shadow: 0 0 0 0 rgba(1, 160, 224, 0);
background-color: rgba(1, 160, 224, 0);
color: inherit;
}
}
.echan-spotlight-tab {
animation: echan-spotlight-tab-pulse 5s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
.echan-spotlight-tab {
animation: none;
box-shadow: 0 0 0 2px rgba(1, 160, 224, 0.70);
background-color: rgba(1, 160, 224, 0.18);
}
}
/* =============================================================================
* DEBUG ESCAPE HATCH
* ===========================================================================*/
body.echan-debug .echan-body { transform: translateX(0) !important; opacity: 1 !important; }
body.echan-debug .echan-avatar,
body.echan-debug .echan-text,
body.echan-debug .echan-rail { outline: 1px dashed magenta; }
/* =============================================================================
* v1.3.2 — GUIDE TOUR, CHIPS, LANGUAGE SELECTOR
* ===========================================================================*/
/* The legacy GUIDE ctrl-bar button is retired — eChan owns onboarding now.
* The modal it opened stays in the codebase (devtools-reachable); only
* the entry point is hidden. The 🌐 language button is injected by
* echan.js into the same ctrl bar. */
#btn-guide { display: none !important; }
/* ---- Persistent tour spotlight ----
* Steady glow held for the whole step (vs. the 5s one-shot pulse of
* .echan-spotlight). Slow breathe keeps it alive without being strobing;
* animation-origin cascade beats the cards' own shadows, restored on
* class removal at step change/exit. */
@keyframes echan-spotlight-hold-breathe {
0%, 100% {
outline-color: rgba(1, 160, 224, 0.95);
box-shadow: 0 0 0 3px rgba(1, 160, 224, 0.40), 0 0 22px rgba(1, 160, 224, 0.70);
background-color: rgba(1, 160, 224, 0.14);
}
50% {
outline-color: rgba(1, 160, 224, 0.55);
box-shadow: 0 0 0 2px rgba(1, 160, 224, 0.22), 0 0 10px rgba(1, 160, 224, 0.35);
background-color: rgba(1, 160, 224, 0.07);
}
}
.echan-spotlight-hold {
outline: 2px solid rgba(1, 160, 224, 0.95);
outline-offset: -1px;
animation: echan-spotlight-hold-breathe 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.echan-spotlight-hold {
animation: none;
outline: 2px solid rgba(1, 160, 224, 0.9);
box-shadow: 0 0 0 3px rgba(1, 160, 224, 0.35);
}
}
/* ---- Chips — tappable inline choices in the dialog ---- */
.echan-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.echan-chip {
appearance: none;
font-family: 'Fira Code', monospace;
font-size: 10px;
letter-spacing: 0.06em;
padding: 5px 10px;
border-radius: 4px;
border: 1px solid var(--ec-line-cyan);
background: rgba(1, 160, 224, 0.10);
color: var(--ec-glow);
cursor: pointer;
text-transform: none;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.echan-chip:hover {
background: rgba(1, 160, 224, 0.22);
}
.echan-chip.primary {
background: rgba(1, 160, 224, 0.28);
color: #eaf7ff;
font-weight: 700;
}
.echan-chip.primary:hover {
background: rgba(1, 160, 224, 0.40);
}
/* ---- Language ctrl-bar button (injected) ---- */
.echan-lang-ctrl .echan-lang-globe { font-size: 12px; line-height: 1; }
.echan-lang-ctrl .echan-lang-code {
font-family: 'Fira Code', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
margin-left: 4px;
}
/* ---- Language popover ----
* Fixed-position, anchored above the 🌐 button by echan.js. Sits in the
* eChan z-band (60). Scrolls if the viewport is short. */
.echan-langpop {
position: fixed;
z-index: 60;
display: flex;
flex-direction: column;
gap: 1px;
padding: 6px;
max-height: min(60vh, 420px);
overflow-y: auto;
background: rgba(10, 16, 22, 0.97);
border: 1px solid var(--ec-line-cyan);
border-radius: 6px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 14px rgba(1, 160, 224, 0.18);
text-transform: none;
}
.echan-langpop-row {
appearance: none;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 9px;
background: transparent;
border: 0;
border-radius: 4px;
color: var(--ec-text-dim);
cursor: pointer;
text-align: left;
transition: background 120ms ease, color 120ms ease;
}
.echan-langpop-row:hover {
background: rgba(1, 160, 224, 0.14);
color: #eaf7ff;
}
.echan-langpop-row.active {
color: var(--ec-glow);
background: rgba(1, 160, 224, 0.10);
}
.echan-langpop-row.active::after {
content: '✓';
margin-left: auto;
font-size: 10px;
}
.echan-langpop-code {
font-family: 'Fira Code', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
min-width: 38px;
color: var(--ec-glow);
}
.echan-langpop-native {
font-size: 12px;
line-height: 1.2;
}
/* =============================================================================
* v1.3.2b — ATTRACT, TOUR AVATAR RING, FRAMED LANG BUTTON
* ===========================================================================*/
/* ---- ATTRACT — first-visit high-visibility dialog ----
* Never expires on its own; removed only when the user makes the guide
* decision. Strong glow + gentle scale breathe on the text pane, plus a
* soft ring radiating from the whole companion cluster. */
/* v1.3.3: pure border glow — the scale breathe made the dialog feel
* wobbly; a bright pulsing frame draws the eye without moving content. */
@keyframes echan-attract-pulse {
0%, 100% {
border-color: #01e0ff;
box-shadow: 0 0 0 2px rgba(1, 224, 255, 0.9), 0 0 22px rgba(1, 224, 255, 0.7),
0 0 52px rgba(1, 160, 224, 0.35);
}
50% {
border-color: rgba(1, 224, 255, 0.45);
box-shadow: 0 0 0 1px rgba(1, 224, 255, 0.4), 0 0 10px rgba(1, 224, 255, 0.25),
0 0 24px rgba(1, 160, 224, 0.12);
}
}
.echan-root.echan-attract .echan-text {
animation: echan-attract-pulse 1.6s ease-in-out infinite;
}
@keyframes echan-attract-avatar {
0%, 100% { filter: drop-shadow(0 0 6px rgba(1, 160, 224, 0.75)); }
50% { filter: drop-shadow(0 0 18px rgba(1, 160, 224, 0.95)); }
}
.echan-root.echan-attract .echan-avatar {
animation: echan-attract-avatar 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.echan-root.echan-attract .echan-text {
animation: none;
border-color: #01e0ff;
box-shadow: 0 0 0 2px rgba(1, 224, 255, 0.9), 0 0 22px rgba(1, 224, 255, 0.55);
}
.echan-root.echan-attract .echan-avatar { animation: none; }
}
/* ---- Tour avatar ring — "tap me to continue" affordance ----
* Moderate by design (the page is already spotlighting panels); a slow
* cyan halo that reads as "I'm the button". */
@keyframes echan-avatar-tour-ring {
0%, 100% { filter: drop-shadow(0 0 4px rgba(1, 160, 224, 0.55)); }
50% { filter: drop-shadow(0 0 12px rgba(1, 160, 224, 0.85)); }
}
.echan-avatar.echan-avatar-tour {
animation: echan-avatar-tour-ring 1.8s ease-in-out infinite;
cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.echan-avatar.echan-avatar-tour {
animation: none;
filter: drop-shadow(0 0 8px rgba(1, 160, 224, 0.7));
}
}
/* ---- Framed language button ----
* The dashboard's .ctrl-btn family is borderless; the 🌐 control reads
* better boxed like the filter chips, per design feedback. */
.ctrl-btn.echan-lang-ctrl {
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.03);
border-radius: 4px;
}
.ctrl-btn.echan-lang-ctrl:hover {
border-color: var(--ec-line-cyan);
background: rgba(1, 160, 224, 0.08);
}
/* 16 language chips wrap tall — cap and scroll inside the dialog. */
.echan-chips {
max-height: 132px;
overflow-y: auto;
}
/* =============================================================================
* LANGUAGE PICKER OVERLAY (v1.3.3 fix)
* Covers the text frame only — the avatar stays visible. Solid --ec-bg so
* the welcome copy never bleeds through; the original welcome chips sit
* untouched underneath and reappear when the panel closes.
* ===========================================================================*/
.echan-lang-panel {
position: absolute;
inset: 0;
z-index: 6;
background: var(--ec-bg);
display: flex;
flex-direction: column;
padding: 8px 10px 10px;
overflow: hidden;
}
.echan-lang-panel.busy {
pointer-events: none;
opacity: 0.65;
}
.echan-lang-panel-close {
position: absolute;
top: 6px;
right: 8px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--ec-line);
border-radius: 5px;
color: var(--ec-text-dim);
font-size: 11px;
line-height: 1;
cursor: pointer;
transition: color 150ms ease, border-color 150ms ease;
}
.echan-lang-panel-close:hover {
color: var(--ec-glow);
border-color: var(--ec-glow);
}
.echan-lang-panel-grid {
margin-top: 26px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-content: flex-start;
padding-right: 4px;
}