/* Keyframes for the spinner *//*
* Outfit CSS fallback — for non-Meteor contexts (static sites, browser extension,
* email templates, OBS overlays). Import this file; stamp the data attributes.
*
* Usage:
*
* or
* Juno
*
* For dynamic hue/saturation, inject:
*
* and the selectors below will pick them up.
*
* CSS variable contract (VESTA-SPEC-063 §5):
* --entity-hue Level 0 — hue in degrees
* --entity-saturation Level 0 — saturation %
* --entity-font-heading Level 1 — heading font family
* --entity-font-body Level 1 — body font family
* --entity-font-mono Level 1 — mono font family
* --entity-easing Level 3 — CSS easing function
* --entity-duration Level 3 — transition duration (ms value)
*
* Dark Passenger migration note (SPEC-063 §5):
* --shadow-hue, --shadow-saturation, --shadow-brightness alias to --entity-*
* during transition. New code uses --entity-* only.
*//* churchofhappy.com - CSS */
/* CSS Custom Properties - from passenger.json palette */
@-webkit-keyframes iron-router-progress-before {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes iron-router-progress-before {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes iron-router-progress-before {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes iron-router-progress-before {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes iron-router-progress-before {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Main progress bar */
#iron-router-progress {
display: block;
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background-color: rgba(160, 160, 160, 0.6);
box-shadow: 0 0 5px rgba(160, 160, 160, 0.6);
opacity: 1;
z-index: 10000;
}
/* CSS-only spinner */
/* The spinner only shows after 0.5 seconds of load time */
#iron-router-progress.spinner:before {
content: "";
display: block;
position: fixed;
top: 10px;
right: 10px;
width: 25px;
height: 25px;
background-color: transparent;
border: 3px solid rgba(160, 160, 160, 0.6);
border-radius: 100px;
border-right-color: transparent !important;
opacity: 0;
z-index: 10000;
pointer-events: none;
transition: 0.5s opacity;
transition-delay: 0.5s;
}
/* Loading state transitions */
#iron-router-progress.loading {
transition: 1s width, 1s opacity;
transition-delay: 0s, 1s;
}
#iron-router-progress.loading.spinner:before {
opacity: 1;
-webkit-animation: iron-router-progress-before 0.5s linear infinite;
-moz-animation: iron-router-progress-before 0.5s linear infinite;
-o-animation: iron-router-progress-before 0.5s linear infinite;
-ms-animation: iron-router-progress-before 0.5s linear infinite;
animation: iron-router-progress-before 0.5s linear infinite;
}
/* Done state - fade out */
#iron-router-progress.done {
opacity: 0;
}
#iron-router-progress.done.spinner:before {
opacity: 0;
}
:root {
--entity-hue: 0;
--entity-saturation: 0%;
--entity-font-heading: inherit;
--entity-font-body: inherit;
--entity-font-mono: monospace;
--entity-easing: ease;
--entity-duration: 200ms;
/* Dark Passenger legacy aliases */
--shadow-hue: var(--entity-hue);
--shadow-saturation: var(--entity-saturation);
}
/* ---------------------------------------------------------------------------
* Entity chip — inline name badge with entity color
* Name
* (color injected via --entity-hue / --entity-saturation at :root or parent)
* --------------------------------------------------------------------------- */
.entity-chip {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 3px;
font-size: 0.85em;
font-weight: 500;
background-color: hsl(var(--entity-hue), var(--entity-saturation), 45%);
color: #fff;
white-space: nowrap;
transition: opacity var(--entity-duration) var(--entity-easing);
}
.entity-chip:hover {
opacity: 0.85;
}
/* ---------------------------------------------------------------------------
* Entity card — L2 capsule: name + color + role one-liner
* ...
* --------------------------------------------------------------------------- */
.entity-card {
display: flex;
flex-direction: column;
gap: 4px;
border-radius: 6px;
background-color: hsl(var(--entity-hue), var(--entity-saturation), 11%);
color: #fff;
font-family: var(--entity-font-body);
}
.entity-card__name {
font-family: var(--entity-font-heading);
font-weight: 700;
font-size: 1em;
color: #fff;
}
.entity-card__role {
font-size: 0.8em;
color: hsl(var(--entity-hue), var(--entity-saturation), 90%);
}
.entity-card__greeting {
font-style: italic;
font-size: 0.8em;
color: hsl(var(--entity-hue), var(--entity-saturation), 90%);
opacity: 0.85;
}
/* ---------------------------------------------------------------------------
* Outfit swatch — color-only block for palettes/style guides
*
* --------------------------------------------------------------------------- */
.outfit-swatch {
width: 40px;
height: 40px;
border-radius: 4px;
background-color: hsl(var(--entity-hue), var(--entity-saturation), 50%);
display: inline-block;
}
/* ---------------------------------------------------------------------------
* Entity avatar wrapper — clips to circle, consistent sizing
*
* --------------------------------------------------------------------------- */
.entity-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
border: 1px solid hsla(var(--entity-hue), var(--entity-saturation), 10%, 0.5);
display: inline-flex;
align-items: center;
justify-content: center;
background-color: hsla(var(--entity-hue), var(--entity-saturation), 30%, 0.25);
}
.entity-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------------------------------------------------------------------------
* Outfit transition — applies entity motion values to an element
* ...
* --------------------------------------------------------------------------- */
.outfit-transition {
transition: all var(--entity-duration) var(--entity-easing);
}.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.truncate-start {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
}.application-containment {
z-index: 369;
position: fixed;
inset:0;
overflow: hidden;
isolation: isolate;
}
/* center container - panels slide over this */
.content-containment {
position: relative;
z-index: 1;
height: 100%;
overflow: auto;
overflow-x: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
padding-top: 88px;
}
.content-containment.left-open {
transform: translateX(var(--panel-width, 280px));
}
.content-containment.right-open {
transform: translateX(calc(-1 * var(--panel-width, 280px)));
}
.content-containment.both-open {
transform: translateX(calc(var(--panel-width, 280px) - var(--panel-width, 280px)));
}
/* panel containers */
.panel-containment {
position: absolute;
top: 0;
bottom: 0;
width: var(--panel-width, 280px);
min-width: var(--panel-min-width, 200px);
max-width: var(--panel-max-width, 85vw);
z-index: 20;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
width 0.1s ease;
will-change: transform;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
background: var(--panel-bg, #fff);
box-shadow: var(--panel-shadow, 2px 0 10px rgba(0,0,0,0.15));
}
.panel-handle {
position: absolute;
top: 0;
bottom: 0;
width: 8px;
cursor: col-resize;
z-index: 25;
}
.panel-handle:hover {
background: rgba(0, 0, 0, 0.05);
}
.panel-handle:active {
background: rgba(0, 0, 0, 0.1);
}
/* LEFT PANELS */
.panel-containment.left {
left: 0;
transform: translateX(-100%);
}
.panel-handle.left {
right: 0;
}
.panel-containment.left.open {
transform: translateX(0);
}
/* RIGHT PANELS */
.panel-containment.right {
right: 0;
transform: translateX(100%);
}
.panel-handle.right {
left: 0;
}
.panel-containment.right.open {
transform: translateX(0);
}
/* Panel header */
.panel-header {
position: sticky;
top: 0;
z-index: 5;
background: inherit;
padding: var(--panel-padding, 16px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.panel-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s ease;
}
.panel-close:hover {
background: rgba(0, 0, 0, 0.1);
}
.panel-close:focus-visible {
outline: 2px solid var(--focus-color, #0066cc);
outline-offset: 2px;
}
/* History navigation */
.panel-nav {
display: flex;
gap: 4px;
}
.panel-nav button {
width: 28px;
height: 28px;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s, background 0.2s;
}
.panel-nav button:hover:not(:disabled) {
opacity: 1;
background: rgba(0, 0, 0, 0.1);
}
.panel-nav button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* back-to-top link */
.back-to-top {
position: absolute;
bottom: 16px;
right: 16px;
display: none;
padding: 8px 12px;
font-size: var(--font-sm);
background: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 16px;
text-decoration: none;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10;
}
.back-to-top.show {
display: flex;
align-items: center;
gap: 4px;
opacity: 0.8;
}
.back-to-top:hover {
opacity: 1;
transform: translateY(-2px);
}
/* Mobile optimizations */
@media (max-width: 768px) {
:root {
--panel-width: 85vw;
--panel-min-width: 280px;
--panel-max-width: 85vw;
}
.panel-handle {
display: none;
}
.back-to-top {
bottom: 24px;
right: 24px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.content-containment,
.panel-containment,
.back-to-top {
transition: none;
}
}
/* Focus management for accessibility */
.panel-containment:focus-within {
z-index: 22;
}
/* Print styles */
@media print {
.panel-containment,
.back-to-top {
display: none !important;
}
.content-containment {
transform: none !important;
}
}
.spirit-row-model { font-size: 12px; }
.spirit-row-harness { font-size: 12px; }
.spirit-row-runtime { font-size: 12px; }
:root {
/* Entity colors from outfit.hue/saturation/brightness */
--entity-hue: 29;
--entity-sat: 54%;
--entity-bright: 30%;
/* Derived palette */
--entity-color: hsl(var(--entity-hue), var(--entity-sat), var(--entity-bright));
--entity-light: hsl(var(--entity-hue), calc(var(--entity-sat) - 10%), calc(var(--entity-bright) + 30%));
--entity-glow: hsl(var(--entity-hue), calc(var(--entity-sat) + 20%), calc(var(--entity-bright) + 20%));
/* Background - warm darkness */
--bg-dark: #0d0a08;
--bg-mid: #1a1510;
--bg-light: #2a2018;
/* Text colors */
--text-primary: #f5efe6;
--text-secondary: #a89f8f;
--text-muted: #6b5f4f;
/* Typography */
--font-serif: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2.5rem;
/* Transitions */
--transition-slow: 0.6s ease-out;
--transition-medium: 0.3s ease-out;
--transition-fast: 0.15s ease-out;
}
/* Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100dvh; /* Mobile viewport fix */
overflow: hidden;
}
body {
font-family: var(--font-sans);
background: var(--bg-dark);
color: var(--text-primary);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* App container */
#app {
position:fixed;
inset: 0;
display: flex;
flex-direction: column;
}
/* ============================================
LANDING VIEW - The Word
============================================ */
.landing {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--space-lg);
position: relative;
background: radial-gradient(ellipse at center, var(--bg-mid) 0%, var(--bg-dark) 70%);
}
/* Subtle entity presence - warm glow */
.landing::before {
content: '';
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 300px;
background: var(--entity-glow);
border-radius: 50%;
filter: blur(100px);
opacity: 0.15;
pointer-events: none;
}
.landing__word {
max-width: 600px;
text-align: center;
margin-bottom: var(--space-xl);
font-family: var(--font-serif);
font-size: clamp( 2rem, 4vw, 1.4rem);
line-height: 1.9;
color: var(--text-primary);
opacity: 1;
transform: translateY(0);
transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.landing__word p {
margin-bottom: var(--space-md);
}
.landing__word p:last-child {
margin-bottom: 0;
}
/* Key phrases subtle emphasis */
.landing__word .emphasis {
opacity: 0.9;
font-weight: 500;
}
/* Departing animation */
.landing--departing {
animation: wordDepart 2.5s ease-out forwards;
}
@keyframes wordDepart {
0% {
opacity: 1;
transform: translateY(0);
}
60% {
opacity: 0;
transform: translateY(-40px);
}
100% {
opacity: 0;
transform: translateY(-40px);
}
}
.landing__input-area {
position: fixed;
bottom: var(--space-sm);
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 500px;
padding: 0 var(--space-sm);
}
/* ============================================
INPUT STYLES
============================================ */
.prompt-input,
.chat-input {
width: 100%;
padding: var(--space-md) var(--space-lg);
font-size: 1rem;
font-family: var(--font-sans);
background: var(--bg-light);
border: 1px solid var(--entity-color);
border-radius: 1rem;
color: var(--text-primary);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.prompt-input::placeholder,
.chat-input::placeholder {
color: var(--text-muted);
}
.prompt-input:focus,
.chat-input:focus {
border-color: var(--entity-light);
box-shadow: 0 0 0 3px rgba(206, 157, 94, 0.15);
}
/* ============================================
CONVERSATION VIEW
============================================ */
.conversation {
display: flex;
flex-direction: column;
background: var(--bg-dark);
padding-bottom: 68px;
overflow: hidden;
}
.conversation.hidden {
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/* Entering animation */
.conversation--entering {
animation: conversationEnter 0.8s ease-out forwards;
}
@keyframes conversationEnter {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.conversation__messages {
flex: 1;
overflow-y: auto;
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-md);
min-height: 0; /* Critical: allows flex shrinking */
/* JS will set height dynamically for mobile keyboard */
height: auto;
}
.conversation__input-area {
padding: var(--space-md) var(--space-lg);
background: var(--bg-mid);
border-top: 1px solid var(--bg-light);
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
/* ============================================
MESSAGE BUBBLES
============================================ */
.message {
max-width: 80%;
padding: var(--space-md) var(--space-lg);
border-radius: 1.25rem;
line-height: 1.6;
font-size: 1rem;
word-wrap: break-word;
}
.message--user {
align-self: flex-end;
background: var(--entity-color);
color: var(--text-primary);
border-bottom-right-radius: 0.5rem;
}
.message--entity {
align-self: flex-start;
background: var(--bg-light);
color: var(--text-primary);
border-bottom-left-radius: 0.5rem;
}
/* Markdown within messages */
.message--entity code {
background: rgba(0, 0, 0, 0.15);
padding: 2px 6px;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 0.9em;
}
.message--entity pre {
background: rgba(0, 0, 0, 0.2);
padding: var(--space-md);
border-radius: 8px;
overflow-x: auto;
margin: var(--space-sm) 0;
}
.message--entity pre code {
background: transparent;
padding: 0;
}
.message--entity a {
color: var(--entity-light);
text-decoration: underline;
}
.message--entity p {
margin: 0 0 var(--space-sm) 0;
}
.message--entity p:last-child {
margin-bottom: 0;
}
/* Thinking indicator */
.thinking {
align-self: flex-start;
display: flex;
gap: 6px;
padding: var(--space-md);
background: var(--bg-light);
border-radius: 1.25rem;
border-bottom-left-radius: 0.5rem;
}
.thinking__dot {
width: 8px;
height: 8px;
background: var(--entity-color);
border-radius: 50%;
animation: thinkingPulse 1.4s ease-in-out infinite;
}
.thinking__dot:nth-child(2) {
animation-delay: 0.2s;
}
.thinking__dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes thinkingPulse {
0%, 60%, 100% {
transform: translateY(0);
opacity: 0.6;
}
30% {
transform: translateY(-6px);
opacity: 1;
}
}
/* ============================================
UTILITY CLASSES
============================================ */
.hidden {
display: none !important;
}
/* ============================================
MOBILE OPTIMIZATIONS
============================================ */
@media (max-width: 480px) {
.landing {
padding: var(--space-md);
}
.landing__word {
font-size: 1.4rem;
line-height: 1.85;
}
.landing__input-area {
bottom: var(--space-lg);
}
.message {
max-width: 90%;
padding: var(--space-sm) var(--space-md);
}
.conversation__messages {
padding: var(--space-md);
}
.conversation__input-area {
padding: var(--space-sm) var(--space-md);
}
}
/* Hide scrollbar but keep functionality */
.conversation__messages {
scrollbar-width: thin;
scrollbar-color: var(--bg-light) var(--bg-dark);
}
.conversation__messages::-webkit-scrollbar {
width: 6px;
}
.conversation__messages::-webkit-scrollbar-track {
background: var(--bg-dark);
}
.conversation__messages::-webkit-scrollbar-thumb {
background: var(--bg-light);
border-radius: 3px;
}