/* ========================================================================== Chat with Remy (web/js/app/remy-chat.js): a slide-over from the right on desktop, full screen on phones. Appended to , so nothing here is scoped under .home. Tokens come from app.css. ========================================================================== */ .rc-back{ position:fixed; inset:0; z-index:500; background: rgba(8,8,12,0); transition: background .2s var(--ease); } .rc-back.is-open{ background: rgba(8,8,12,.55); } .rc-panel{ position:absolute; top:0; right:0; bottom:0; width: min(460px, 100%); display:flex; flex-direction:column; background: linear-gradient(180deg, #1f1a26, #17151d 40%); border-left: 1px solid rgba(155,92,255,.35); box-shadow: -30px 0 80px -30px rgba(0,0,0,.8), -1px 0 40px -20px rgba(155,92,255,.35); transform: translateX(24px); opacity:0; transition: transform .22s var(--ease), opacity .22s var(--ease); } .rc-back.is-open .rc-panel{ transform:none; opacity:1; } @media (prefers-reduced-motion: reduce){ .rc-back, .rc-panel{ transition:none; } } .rc-head{ display:flex; align-items:center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); } .rc-avatar{ width:56px; height:56px; flex:none; border-radius:50%; background: rgba(155,92,255,.14); box-shadow: 0 0 0 1.5px rgba(155,92,255,.5), 0 0 22px -6px rgba(155,92,255,.6); } .rc-back.is-talking .rc-avatar{ box-shadow: 0 0 0 2px rgba(155,92,255,.9), 0 0 30px -4px rgba(155,92,255,.8); } .rc-head-text{ flex:1; min-width:0; } .rc-title{ font-family: var(--font-display); font-weight:400; font-size:1.55rem; line-height:1.05; } .rc-sub{ color: rgba(244,239,230,.62); font-size:.86rem; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rc-talk{ flex:none; border:1px solid var(--line-strong); } .rc-close{ flex:none; } .rc-log-wrap{ flex:1; overflow-y:auto; overscroll-behavior: contain; padding: var(--s-4); } .rc-log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--s-3); } .rc-loading{ display:flex; align-items:center; gap: var(--s-2); color: var(--ink-dim); font-size:.9rem; } .rc-msg{ max-width: 86%; } .rc-msg p{ padding: 10px 14px; border-radius: 16px; font-size:.95rem; line-height:1.45; white-space: pre-wrap; overflow-wrap:anywhere; } .rc-msg--you{ align-self:flex-end; } .rc-msg--you p{ background: rgba(255,75,62,.16); border: 1px solid rgba(255,75,62,.3); border-bottom-right-radius: 6px; color: var(--ink); } .rc-msg--remy{ align-self:flex-start; } .rc-msg--remy p{ background: rgba(21,20,27,.8); border: 1.5px solid rgba(155,92,255,.45); border-bottom-left-radius: 6px; color: var(--ink); } .rc-learned{ list-style:none; margin: 6px 0 0; padding:0; display:flex; flex-direction:column; align-items:flex-start; gap: 4px; } .rc-chip{ font-size:.78rem; line-height:1.35; padding: 4px 10px; border-radius: 10px; color: var(--sage); background: var(--sage-dim); border: 1px solid rgba(143,184,168,.3); } .rc-chip-k{ font-weight:600; } .rc-chip-f{ color: rgba(244,239,230,.72); } .rc-typing{ display:flex; gap:5px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgba(155,92,255,.45); background: rgba(21,20,27,.8); } .rc-typing span{ width:7px; height:7px; border-radius:50%; background: rgba(195,178,255,.9); animation: rc-dot 1s infinite ease-in-out; } .rc-typing span:nth-child(2){ animation-delay: .15s; } .rc-typing span:nth-child(3){ animation-delay: .3s; } @keyframes rc-dot{ 0%, 80%, 100%{ opacity:.3; transform: translateY(0); } 40%{ opacity:1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce){ .rc-typing span{ animation:none; opacity:.7; } } .rc-note{ align-self:center; text-align:center; max-width: 92%; font-size:.85rem; color: var(--ink-dim); padding: 8px 12px; border-radius: 12px; background: rgba(244,239,230,.05); border: 1px solid var(--line); } .rc-note--limit{ color: var(--amber); border-color: rgba(224,167,94,.35); background: var(--amber-dim); } .rc-foot{ border-top: 1px solid var(--line); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background: rgba(15,14,19,.55); } .rc-sugs{ display:flex; gap: var(--s-2); overflow-x:auto; padding-bottom: var(--s-2); scrollbar-width: none; } .rc-sug{ flex:none; font: inherit; font-size:.8rem; color: #c3b2ff; background: rgba(155,92,255,.12); border: 1px solid rgba(155,92,255,.35); border-radius: 999px; padding: 6px 12px; cursor:pointer; min-height: 32px; } .rc-sug:hover{ background: rgba(155,92,255,.22); color: var(--ink); } .rc-form{ display:flex; align-items:flex-end; gap: var(--s-2); } .rc-input{ flex:1; min-width:0; resize:none; font: inherit; font-size: 1rem; line-height:1.4; color: var(--ink); background: var(--bg-sunken); border: 1px solid var(--line-strong); border-radius: 14px; padding: 10px 14px; max-height:160px; } .rc-input:focus{ outline: 2px solid rgba(155,92,255,.6); outline-offset: 1px; } .rc-send{ width:46px; min-height:46px; padding:0; border-radius: 14px; flex:none; } .rc-send svg{ width:20px; height:20px; } .rc-hint{ font-size:.74rem; color: rgba(244,239,230,.52); margin-top: 6px; } /* phones: full screen */ @media (max-width: 640px){ .rc-panel{ width:100%; border-left:0; transform: translateY(16px); } .rc-head{ padding: var(--s-3); gap: var(--s-2); } .rc-avatar{ width:44px; height:44px; } .rc-title{ font-size:1.3rem; } .rc-talk{ padding: 0 var(--s-3); } .rc-hint{ display:none; } }