/* ========================================================================== IKI — Guest Companion styles (static/companion.css) Loaded after styles.css. Reuses the app design tokens (--brand-*, --sand, --radius-*, --shadow-*). All motion is gated behind prefers-reduced-motion and a document-hidden pause class. ========================================================================== */ /* --- Host + floating anchor ---------------------------------------------- */ :root { /* The detail sheet mounts directly under , outside .iki-host. Keep these tokens global so the same green mascot renders in both places. */ --iki-green: var(--brand-700); --iki-green-deep: var(--brand-900); --iki-green-tint: var(--brand-100); } .iki-host { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 45; /* above bottom nav (40), below app drawer/modal (90+) */ display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: min(70vw, 340px); pointer-events: none; /* children re-enable; empty gaps stay click-through */ } .iki-host[hidden] { display: none; } .iki-anchor { pointer-events: auto; width: 64px; height: 64px; min-width: 44px; min-height: 44px; border: none; border-radius: 50%; padding: 0; display: grid; place-items: center; background: radial-gradient( circle at 50% 38%, color-mix(in srgb, var(--iki-green) 78%, #fff 22%), var(--iki-green) ); box-shadow: var(--shadow-md); cursor: pointer; align-self: flex-end; transition: transform 180ms ease, box-shadow 180ms ease; } .iki-anchor:hover { transform: translateY(-2px); } .iki-anchor:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 3px; } /* Unseen-suggestion dot while minimized */ .iki-anchor--dot::after { content: ""; position: absolute; transform: translate(22px, -22px); width: 12px; height: 12px; border-radius: 50%; background: var(--brand-900); border: 2px solid var(--paper); } /* --- Mascot artwork ------------------------------------------------------- */ .iki-mascot { display: inline-grid; place-items: center; width: 52px; height: 52px; } .iki-mascot--sm { width: 40px; height: 40px; flex: none; } .iki-mascot__svg { width: 100%; height: 100%; overflow: visible; } .iki-mascot__body { fill: var(--iki-green); stroke: var(--iki-green-deep); stroke-width: 1.4; } .iki-mascot__belly { fill: color-mix(in srgb, var(--iki-green-tint) 72%, #fff 28%); } .iki-mascot__eye { fill: var(--ink); } .iki-mascot__eye-happy { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; display: none; } .iki-mascot__cheek { fill: color-mix(in srgb, var(--iki-green-deep) 28%, transparent); } .iki-mascot__mouth { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; } .iki-mascot__sprout path { fill: var(--brand-700); } .iki-mascot__stem { fill: var(--brand-900); } /* Accessories: hidden by default; the state modifier reveals exactly one. */ .iki-mascot__acc { display: none; fill: var(--brand-900); stroke: var(--brand-900); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; } .iki-mascot__acc--reminder { fill: none; } .iki-mascot__acc--weather { fill: none; stroke: var(--brand-700); } .iki-mascot__acc--discover { fill: var(--iki-green-deep); stroke: none; } .iki-mascot__acc--helpful { fill: var(--iki-green-deep); stroke: none; } .iki-mascot__acc--celebrate { fill: var(--brand-700); stroke: none; } .iki-mascot--reminder .iki-mascot__acc--reminder, .iki-mascot--weather .iki-mascot__acc--weather, .iki-mascot--discover .iki-mascot__acc--discover, .iki-mascot--helpful .iki-mascot__acc--helpful, .iki-mascot--celebrate .iki-mascot__acc--celebrate { display: block; } .iki-mascot--helpful .iki-mascot__eye, .iki-mascot--celebrate .iki-mascot__eye { display: none; } .iki-mascot--helpful .iki-mascot__eye-happy, .iki-mascot--celebrate .iki-mascot__eye-happy { display: block; } /* --- Speech bubble -------------------------------------------------------- */ .iki-bubble { pointer-events: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 12px 14px; max-width: 100%; color: var(--ink); } .iki-bubble[hidden] { display: none; } .iki-bubble--high { border-color: var(--iki-green); box-shadow: var(--shadow-md), 0 0 0 3px var(--iki-green-tint); } .iki-bubble__row { display: flex; align-items: flex-start; gap: 8px; } .iki-bubble__teaser { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); flex: 1; } .iki-bubble__icon { flex: none; width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; } .iki-bubble__icon:hover { background: var(--sand); } .iki-bubble__icon:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 1px; } .iki-bubble__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .iki-bubble__cta { border: none; background: var(--brand-900); color: var(--white); font-weight: 600; font-size: 13px; padding: 9px 16px; min-height: 40px; border-radius: 999px; cursor: pointer; } .iki-bubble__cta:hover { background: var(--brand-700); } .iki-bubble__cta:focus-visible, .iki-bubble__link:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; } .iki-bubble__link { border: none; background: transparent; color: var(--ink-soft); font-size: 12px; padding: 8px 6px; min-height: 36px; cursor: pointer; text-decoration: underline; } .iki-bubble__link:hover { color: var(--ink); } /* --- Detail sheet (bottom sheet on mobile, side drawer on desktop) -------- */ .iki-sheet-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(10, 30, 24, 0.42); opacity: 0; transition: opacity 200ms ease; } .iki-sheet-backdrop.is-open { opacity: 1; } .iki-sheet-backdrop[hidden] { display: none; } body.iki-has-sheet { overflow: hidden; } .iki-sheet { position: fixed; z-index: 105; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); /* Mobile default: bottom sheet */ left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(100%); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); padding-bottom: env(safe-area-inset-bottom); } .iki-sheet.is-open { transform: translateY(0); } .iki-sheet[hidden] { display: none; } .iki-sheet__head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 8px; border-bottom: 1px solid var(--line-soft); } .iki-sheet__title { margin: 0; flex: 1; font-size: 18px; line-height: 1.35; color: var(--ink); } .iki-sheet__close { flex: none; width: 40px; height: 40px; border: none; background: var(--sand); border-radius: 50%; color: var(--ink); cursor: pointer; display: grid; place-items: center; } .iki-sheet__close:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; } .iki-sheet__body { padding: 16px 18px 22px; overflow-y: auto; overscroll-behavior: contain; } .iki-sheet__text { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--ink); } .iki-sheet__why { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); background: var(--brand-50); border-radius: var(--radius-sm); padding: 10px 12px; } .iki-sheet__why .eyebrow { display: block; margin-bottom: 2px; color: var(--brand-700); } .iki-sheet__provenance { margin: 0 0 14px; font-size: 12px; color: var(--ink-soft); } .iki-sheet__actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .iki-sheet__action { justify-content: center; } /* Feedback bar */ .iki-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .iki-feedback__q { font-size: 13px; color: var(--ink-soft); flex-basis: 100%; } .iki-feedback__btn { border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 13px; padding: 8px 14px; min-height: 40px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .iki-feedback__btn:hover { border-color: var(--brand-700); } .iki-feedback__btn:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; } .iki-feedback__thanks { font-size: 13px; color: var(--success); font-weight: 600; } /* --- Companion settings card (on the profile screen) --------------------- */ .iki-settings__explain { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); } .iki-settings__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); } .iki-settings__row strong { display: block; font-size: 14px; color: var(--ink); } .iki-settings__row small { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; } /* --- Desktop: dock the sheet as a right-side drawer ---------------------- */ @media (min-width: 681px) { .iki-sheet { left: auto; right: 0; top: 0; bottom: 0; width: min(460px, 100%); max-height: none; border-radius: 0; transform: translateX(100%); } .iki-sheet.is-open { transform: translateX(0); } } /* --- Motion -------------------------------------------------------------- */ @keyframes iki-enter { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes iki-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Entrance: transform + opacity only. Bubble fades/rises in. */ .iki-host[data-iki-fsm="Appearing"] .iki-bubble, .iki-host[data-iki-fsm="Teaser"] .iki-bubble { animation: iki-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both; } /* Idle bob: exactly two cycles, then rest (no infinite loop). */ .iki-host[data-iki-fsm="Teaser"] .iki-mascot, .iki-host[data-iki-fsm="Minimized"] .iki-mascot { animation: iki-bob 1200ms ease-in-out 2; } .iki-host--paused .iki-mascot { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .iki-host .iki-bubble, .iki-host .iki-mascot { animation: none !important; } .iki-sheet, .iki-sheet-backdrop { transition: none !important; } .iki-anchor { transition: none !important; } } .iki-host--static .iki-bubble, .iki-host--static .iki-mascot { animation: none !important; }