/* ========================================================================== 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-surface: color-mix(in srgb, var(--iki-green-tint) 48%, var(--paper) 52%); /* The floating avatar needs a lighter field than IKI's green body, so the character reads clearly at a glance rather than blending into its dock. */ --iki-anchor-surface: color-mix(in srgb, var(--iki-green-tint) 76%, var(--paper) 24%); --iki-anchor-highlight: color-mix(in srgb, var(--iki-green-tint) 42%, #fff 58%); --iki-outline: var(--brand-950); --iki-sprout: #8ed65c; --iki-sprout-deep: #2f7a1f; /* Keep the companion comfortably inside the viewport rather than visually touching an edge or a curved device safe area. */ --iki-edge-gutter: max(20px, env(safe-area-inset-right)); } .iki-host { position: fixed; right: var(--iki-edge-gutter); /* A dedicated lane above the bottom navigation and Back-to-top control. */ bottom: calc(166px + 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; /* A fixed width gives the bubble and mascot one predictable, safe lane. max-width alone lets a flex item make the host appear edge-aligned. */ width: min(340px, calc(100vw - (2 * var(--iki-edge-gutter)))); max-width: none; pointer-events: none; /* children re-enable; empty gaps stay click-through */ } .iki-host[hidden] { display: none; } .iki-anchor { pointer-events: auto; width: 72px; height: 72px; min-width: 44px; min-height: 44px; border: 1px solid rgba(126, 96, 52, 0.24); border-radius: 50%; padding: 0; display: grid; place-items: center; background: radial-gradient(circle at 46% 34%, #fffaf0 0%, #f6e8ce 58%, #e7cfaa 100%); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.86); cursor: pointer; position: relative; /* Long-press drag: stop the browser from scrolling/selecting under the pointer. */ touch-action: none; user-select: none; -webkit-user-select: none; align-self: flex-end; /* Keep IKI visibly inside the bubble's edge on every viewport. */ margin-right: 8px; /* Slow breathing glow so IKI stays noticeable while minimized. */ animation: iki-glow 2800ms ease-in-out infinite; transition: transform 180ms ease, box-shadow 180ms ease; } /* Long-press drag + edge docking (grafted from Hằng's IKI drag). */ .iki-host--dock-left { align-items: flex-start; } /* The anchor pins itself flex-end for the resting right-hand lane; when the guest docks it on the left, pull the anchor (and its bubble) to that edge. */ .iki-host--dock-left .iki-anchor { align-self: flex-start; margin-right: 0; margin-left: 8px; } .iki-host--dock-left .iki-bubble { align-self: flex-start; } .iki-host--dragging { z-index: 85; /* Shrink the host to the mascot while dragging: the drag code positions it by the anchor's top-left, but phucnh's resting host is a fixed 340px lane with the anchor pinned flex-end — without this the mascot jumps ~268px to the right the instant the drag starts. */ width: auto; max-width: none; gap: 0; } .iki-anchor--pressing { animation: none !important; transform: scale(0.94) !important; box-shadow: var(--shadow-md), 0 0 0 5px color-mix(in srgb, var(--iki-green) 24%, transparent) !important; } .iki-anchor--dragging, .iki-host--dragging .iki-anchor { animation: none !important; cursor: grabbing; transform: scale(1.07) !important; box-shadow: var(--shadow-lg), 0 0 0 5px color-mix(in srgb, var(--iki-green) 32%, transparent) !important; } .iki-host--dragging .iki-mascot, .iki-host--dragging .iki-mascot * { animation: none !important; } .iki-anchor:hover { transform: translateY(-2px); } .iki-anchor:hover .iki-mascot { transform: scale(1.08) rotate(-3deg); } .iki-anchor:hover .iki-mascot__sprout { animation-duration: 900ms; } /* On hover, the clover whirls continuously instead of waiting for its idle cadence, so the pinwheel is visible on demand. The stem stays put (it is not inside .iki-mascot__clover). */ .iki-anchor:hover .iki-mascot__clover { animation: iki-spin-hover 1100ms linear infinite; } .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(26px, -26px); 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: 60px; height: 60px; transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); } .iki-mascot--sm { width: 40px; height: 40px; flex: none; } .iki-mascot__svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 60%; /* Continuous, subtle — IKI reads as alive even at rest. */ animation: iki-breathe 4200ms ease-in-out infinite; } .iki-mascot__body { fill: var(--iki-green); stroke: var(--iki-outline); stroke-width: 1.8; } .iki-mascot__belly { fill: color-mix(in srgb, var(--iki-green-tint) 72%, #fff 28%); stroke: color-mix(in srgb, var(--iki-outline) 45%, transparent); stroke-width: 1; } .iki-mascot__shine { fill: rgba(255, 255, 255, 0.4); } .iki-mascot__eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: iki-blink 4600ms ease-in-out infinite; } .iki-mascot__eye { fill: var(--ink); } .iki-mascot__eye-shine { fill: #fff; } .iki-mascot__eye-happy { fill: none; stroke: var(--ink); stroke-width: 1.8; 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.8; stroke-linecap: round; } .iki-mascot__sprout { transform-box: fill-box; transform-origin: 50% 100%; animation: iki-sway 3400ms ease-in-out infinite; } .iki-mascot__leaf { fill: var(--iki-sprout); stroke: var(--iki-sprout-deep); stroke-width: 1.3; stroke-linejoin: round; } .iki-mascot__vein { fill: none; stroke: var(--iki-sprout-deep); stroke-width: 0.8; stroke-linecap: round; opacity: 0.55; } .iki-mascot__stem { fill: var(--iki-sprout-deep); } /* Four-leaf clover: rests most of the cycle, then whirls one full turn like a pinwheel. Only the leaves live in this group — the stem sits outside it, so the stem never spins. Pause / reduced-motion / static rules already cover any `.iki-mascot *` descendant, so the spin stops with the rest of IKI's motion. */ .iki-mascot__clover { transform-box: fill-box; transform-origin: 50% 50%; animation: iki-spin 9000ms ease-in-out infinite; } @keyframes iki-spin { 0%, 80% { transform: rotate(0deg); } 90%, 100% { transform: rotate(360deg); } } @keyframes iki-spin-hover { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 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--helpful .iki-mascot__eye-shine, .iki-mascot--celebrate .iki-mascot__eye, .iki-mascot--celebrate .iki-mascot__eye-shine { display: none; } .iki-mascot--helpful .iki-mascot__eye-happy, .iki-mascot--celebrate .iki-mascot__eye-happy { display: block; } /* --- Speech bubble -------------------------------------------------------- */ .iki-bubble { position: relative; pointer-events: auto; background: var(--iki-surface); 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__content { flex: 1; min-width: 0; } .iki-bubble__eyebrow { margin: 0 0 2px; color: var(--iki-green-deep); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; line-height: 1.3; text-transform: uppercase; } .iki-bubble__teaser { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } /* Các ý phụ (giờ, điểm hẹn…) tách thành gạch đầu dòng thay vì viết liền một câu dài rồi bị cắt bằng "...". */ .iki-bubble__points { margin: 5px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; animation: iki-bubble-points-in 260ms ease both; } .iki-bubble__point { position: relative; padding-left: 11px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.35; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .iki-bubble__point::before { content: ""; position: absolute; top: 7px; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--iki-green); } @keyframes iki-bubble-points-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .iki-bubble__points { animation: none; } } .iki-bubble__icon { flex: none; width: 44px; height: 44px; margin: -6px -8px -6px 0; 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; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } .iki-bubble__cta { border: none; background: var(--brand-900); color: var(--white); font-weight: 600; font-size: 11px; padding: 4px 11px; min-height: 32px; border-radius: 8px; cursor: pointer; } .iki-bubble__cta:hover { background: var(--brand-700); } .iki-bubble__cta:focus-visible, .iki-bubble__more:focus-visible, .iki-bubble__menu-item:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; } .iki-bubble__more { width: 30px; min-width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink-soft); font-size: 15px; font-weight: 700; letter-spacing: 0.11em; cursor: pointer; line-height: 1; } .iki-bubble__more:hover { border-color: var(--iki-green); color: var(--iki-green-deep); } .iki-bubble__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--iki-green) 22%, var(--line)); } .iki-bubble__menu-item { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 78%, var(--iki-green-tint) 22%); color: var(--ink-soft); cursor: pointer; font-size: 13px; line-height: 1.3; padding: 8px 10px; text-align: center; touch-action: manipulation; } .iki-bubble__menu-item:hover { border-color: var(--iki-green); background: var(--iki-green-tint); 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-bob { 0%, 18%, 100% { transform: translateY(0) rotate(-1.5deg); } 34% { transform: translateY(-8px) rotate(4deg); } 48% { transform: translateY(1px) rotate(-3deg); } 62% { transform: translateY(-4px) rotate(2.5deg); } 76% { transform: translateY(0) rotate(0deg); } } /* Continuous, subtle — IKI reads as alive even at rest. */ @keyframes iki-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @keyframes iki-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } } @keyframes iki-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @keyframes iki-glow { 0%, 100% { transform: translateY(0) rotate(-1deg); box-shadow: var(--shadow-md), 0 0 0 0 color-mix(in srgb, var(--iki-green) 45%, transparent); } 28% { transform: translateY(-4px) rotate(2deg); } 50% { transform: translateY(1px) rotate(-1.5deg); box-shadow: var(--shadow-md), 0 0 16px 4px color-mix(in srgb, var(--iki-green) 55%, transparent); } 72% { transform: translateY(-2px) rotate(1deg); } } /* The bubble itself stays still; only its copy reveals from left to right. */ .iki-host[data-iki-fsm="Appearing"] .iki-bubble { animation: none; } .iki-bubble [data-iki-typewriter].is-typing::after { width: 1px; height: 0.9em; margin-left: 2px; display: inline-block; vertical-align: -0.08em; background: currentColor; animation: iki-type-caret 640ms ease-in-out infinite; content: ""; } @keyframes iki-type-caret { 0%, 45% { opacity: 0.78; } 55%, 100% { opacity: 0.12; } } /* Keep the opened speech bubble stationary; only the mascot keeps its idle life. */ .iki-host[data-iki-fsm="Teaser"] .iki-bubble { animation: none; } /* A clear but unhurried bounce keeps IKI visibly alive between interactions. */ .iki-host[data-iki-fsm="Teaser"] .iki-mascot, .iki-host[data-iki-fsm="Minimized"] .iki-mascot { animation: iki-bob 2800ms ease-in-out infinite; } .iki-host--paused .iki-mascot, .iki-host--paused .iki-mascot *, .iki-host--paused .iki-anchor, .iki-host--paused .iki-bubble { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { /* Bare selectors (not scoped to .iki-host) so the sheet-header mascot — which mounts outside .iki-host — also respects reduced motion. */ .iki-bubble, .iki-bubble [data-iki-typewriter].is-typing::after, .iki-anchor, .iki-mascot, .iki-mascot * { animation: none !important; } .iki-sheet, .iki-sheet-backdrop { transition: none !important; } .iki-anchor, .iki-mascot { transition: none !important; } } .iki-host--static .iki-bubble, .iki-host--static .iki-bubble [data-iki-typewriter].is-typing::after, .iki-host--static .iki-mascot, .iki-host--static .iki-mascot *, .iki-host--static .iki-anchor { animation: none !important; } @media (max-width: 520px) { :root { --iki-edge-gutter: max(16px, env(safe-area-inset-right)); } .iki-host { right: max(12px, env(safe-area-inset-right)); max-width: min(88vw, 380px); } .iki-anchor { width: 64px; height: 64px; } .iki-mascot { width: 54px; height: 54px; } }