/* Axis / Porchlight — shared interface styles. Two persona skins driven by [data-persona] on . Axis (COS): slate/navy, corporate, calm. Porchlight (PA): warm amber/terracotta, personal, calm but warmer. Fonts: Manrope (display) + Inter (body), same families already licensed and used across Seconds Co brand work, reused here per Jason's note that sharing fonts is fine even though the color identity must be distinct. */ @font-face { font-family: 'Manrope'; src: local('Manrope'); font-display: swap; } :root { --radius: 16px; --radius-sm: 10px; --font-display: 'Manrope', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } /* ---------- Axis (COS) theme ---------- */ html[data-persona="cos"] { --brand: #2b3a67; --brand-dark: #1c2747; --brand-ring: #a9b8e8; --bg: #f4f5f9; --panel: #ffffff; --panel-2: #eceffa; --ink: #1a1f2e; --muted: #5a6280; --faint: #9298b0; --line: #dde1ef; --accent: #4d6bf0; --bubble-user: #2b3a67; --bubble-user-ink: #ffffff; } /* ---------- Porchlight (PA) theme ---------- */ html[data-persona="pa"] { --brand: #b5652f; --brand-dark: #8a4a1f; --brand-ring: #f0c9a0; --bg: #fbf3ea; --panel: #fffaf3; --panel-2: #f6e6d4; --ink: #2e2016; --muted: #7a6552; --faint: #ad9c8a; --line: #ecdcc6; --accent: #e08a3e; --bubble-user: #b5652f; --bubble-user-ink: #fffaf3; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-body); transition: background .25s ease, color .25s ease; } #app { max-width: 880px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; padding: 18px 18px 0; } /* ---------- header ---------- */ .top { display: flex; align-items: center; gap: 14px; padding: 6px 6px 16px; border-bottom: 1px solid var(--line); } .mark { width: 40px; height: 40px; border-radius: 12px; background: var(--brand); display: grid; place-items: center; flex: 0 0 auto; transition: background .25s ease; } .mark svg { width: 22px; height: 22px; } .title-block { flex: 1; min-width: 0; } .title-block h1 { font: 800 19px/1.2 var(--font-display); margin: 0; color: var(--ink); } .title-block p { margin: 2px 0 0; font: 500 12.5px/1.3 var(--font-body); color: var(--muted); } .persona-switch { display: flex; background: var(--panel-2); border-radius: 999px; padding: 3px; gap: 2px; flex: 0 0 auto; } .persona-switch button { border: none; background: transparent; color: var(--muted); font: 700 12.5px/1 var(--font-body); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; } .persona-switch button.active { background: var(--brand); color: #fff; } /* ---------- chat log ---------- */ .log { flex: 1; overflow-y: auto; padding: 20px 4px; display: flex; flex-direction: column; gap: 14px; } .msg { max-width: 78%; padding: 12px 15px; border-radius: var(--radius); font: 400 14.5px/1.55 var(--font-body); white-space: pre-wrap; } .msg.bot { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 6px; } .msg.me { align-self: flex-end; background: var(--bubble-user); color: var(--bubble-user-ink); border-bottom-right-radius: 6px; } .msg.sys { align-self: center; background: transparent; color: var(--faint); font: 500 12px/1.4 var(--font-body); max-width: 90%; text-align: center; } .typing { display: inline-flex; gap: 4px; } .typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: bounce 1s infinite; } .typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; } @keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } } /* ---------- suggestion chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 14px; } .chip { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 8px 13px; font: 500 12.5px/1.2 var(--font-body); cursor: pointer; } .chip:hover { border-color: var(--brand-ring); color: var(--ink); } /* ---------- input bar ---------- */ .inputbar { display: flex; align-items: flex-end; gap: 10px; padding: 12px 6px 18px; } .inputbar textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--panel); color: var(--ink); font: 400 14.5px/1.4 var(--font-body); max-height: 120px; outline: none; } .inputbar textarea:focus { border-color: var(--brand-ring); } .iconbtn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--brand); cursor: pointer; display: grid; place-items: center; } .iconbtn.primary { background: var(--brand); color: #fff; border: none; } .iconbtn.listening { background: #d64545; border-color: #d64545; color: #fff; animation: pulse 1.1s ease-in-out infinite; } .iconbtn.voice-on { background: var(--brand); color: #fff; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,69,.5); } 50% { box-shadow: 0 0 0 8px rgba(214,69,69,0); } } .foot-note { text-align: center; color: var(--faint); font: 500 11px/1.4 var(--font-body); padding-bottom: 14px; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; } @media (max-width: 620px) { .title-block p { display: none; } .msg { max-width: 88%; } }