@font-face { font-family: Cairo; font-weight: 300 800; font-style: normal; font-display: swap; src: url("fonts/cairo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Cairo; font-weight: 300 800; font-style: normal; font-display: swap; src: url("fonts/cairo-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF; }
:root { --ink: #15231f; --muted: #6e7d77; --line: #e5ebe8; --green: #35c765; --green-deep: #159b4b; --mint: #eafaf0; --sidebar: #f7faf8; --shadow: 0 20px 70px rgba(34, 80, 56, .11); }
* { box-sizing: border-box; } html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Cairo, Inter, system-ui, sans-serif; } button, input { font: inherit; } button { cursor: pointer; } [hidden] { display: none !important; }
.access-gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0%, #f2fff6 0, #fff 48%); }.access-card { width: min(100%, 410px); padding: 42px; text-align: center; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); }.access-mark, .brand-orb { display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 800; background: linear-gradient(145deg, #fafffc 8%, #a4edb8 48%, #2ec95d 78%); box-shadow: inset 0 0 15px rgba(255,255,255,.8), 0 8px 25px rgba(43,195,91,.18); }.access-mark { width: 64px; height: 64px; margin: 0 auto 22px; color: #194f30; font-size: 1.5rem; }.eyebrow { margin: 0 0 10px; color: var(--green-deep); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }.access-card h1 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }.access-copy, .voice-copy { color: var(--muted); font-size: .94rem; }.access-form { display: grid; gap: 10px; margin-top: 28px; text-align: left; }.access-form label { font-size: .8rem; font-weight: 700; }.access-form input { width: 100%; padding: 13px 15px; border: 1px solid #dce7e0; border-radius: 12px; outline: 0; background: #fbfefc; color: var(--ink); }.access-form input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(53,199,101,.12); }.primary-button, .voice-control { border: 0; border-radius: 12px; padding: 13px 18px; color: #fff; background: #1aa651; font-weight: 800; }.primary-button:hover, .voice-control:hover { background: #128742; }.access-error { margin: 0; color: #c13f3f; font-size: .78rem; }.prototype-note { margin: 26px 0 0; color: #a0ada6; font-size: .72rem; }
.prototype-shell { min-height: 100dvh; display: block; background: #fff; }.sidebar { display: none; }.sidebar-top, .brand-lockup, .user-row, .topbar, .topbar-title { display: flex; align-items: center; }
.chat-area { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; }.topbar { min-height: 67px; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid #f0f3f1; }.topbar-title { gap: 10px; }.topbar-title strong { font-size: .92rem; }.topbar-title span { color: #a0aba5; font-size: .72rem; }.prototype-badge { padding: 5px 10px; border-radius: 999px; color: #218d47; background: #edf9f0; font-size: .68rem; font-weight: 800; }.icon-button { border: 0; background: transparent; color: #66756e; font-size: 1.2rem; }.menu-button, .mobile-close { display: none; }
.conversation { flex: 1; overflow: auto; padding: 40px 32px 24px; }.welcome-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(625px, 72vh); text-align: center; }.hero-orb { position: relative; overflow: hidden; flex: none; border-radius: 50%; background: radial-gradient(circle at 47% 16%, #ffffff 0 26%, #f5fff8 36%, #b5efc4 54%, #35c961 82%); box-shadow: inset 0 -8px 18px rgba(35, 190, 80, .14), 0 14px 34px rgba(46, 190, 87, .18); }.orb-small { width: 112px; height: 112px; margin-bottom: 28px; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }.orb-small:hover, .orb-small:focus-visible { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(53,199,101,.1), 0 14px 34px rgba(46, 190, 87, .2); outline: 0; }.orb-large { width: min(58vw, 390px); height: min(58vw, 390px); margin: 0; cursor: pointer; }.hero-orb canvas { width: 100%; height: 100%; display: block; }.welcome-state h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.065em; }.welcome-copy { margin: 10px 0 30px; color: var(--muted); font-size: .95rem; }
.composer-wrap { width: min(100%, 790px); margin: 0 auto; padding: 5px 24px 22px; }.composer { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 7px 9px 7px 10px; border: 1px solid #d8e5dc; border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(43,80,55,.08); }.composer:focus-within { border-color: #8fcea1; box-shadow: 0 0 0 4px rgba(53,199,101,.1), 0 8px 26px rgba(43,80,55,.08); }.composer input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .92rem; }.composer-icon, .send-button { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; }.composer-icon { color: #277a46; background: #effaf2; }.composer-icon:hover { color: #fff; background: #25ad55; }.composer-icon svg { width: 20px; height: 20px; fill: currentColor; }.send-button { color: #fff; background: #1baa52; box-shadow: 0 4px 10px rgba(27,170,82,.22); }.send-button:hover { background: #138c43; transform: translateY(-1px); }.send-button svg { width: 19px; height: 19px; fill: currentColor; }.composer-hint { margin: 8px 0 0; color: #a2ada6; font-size: .66rem; text-align: center; }
.message-row { display: flex; width: min(100%, 980px); gap: 12px; margin: 18px auto; }.message-row.user { justify-content: flex-end; }.message-row.assistant { justify-content: flex-start; }.message-row.assistant.is-rtl { justify-content: flex-end; }.message-bubble { max-width: min(92%, 900px); padding: 11px 15px; border-radius: 15px; background: #f4f8f5; font-size: .92rem; line-height: 1.75; white-space: pre-wrap; }.user .message-bubble { color: white; background: #229d4c; }.assistant .message-bubble { padding: 8px 0; border: 0; background: transparent; color: var(--ink); }.message-row.is-rtl .message-bubble { text-align: right; }.message-row.is-ltr .message-bubble { text-align: left; }
.thinking-row { display: block; }.thinking-bubble { color: #9aa59f; border-color: #edf1ee; font-style: italic; }.message-row.assistant { flex-direction: column; align-items: flex-start; }.message-row.assistant.is-rtl { align-items: flex-end; }.reasoning-control { display: flex; align-items: center; gap: 8px; margin-top: -4px; }.message-row.assistant.is-rtl .reasoning-control { direction: rtl; }.reasoning-toggle { border: 0; padding: 0; color: #87938d; background: transparent; font-size: .7rem; }.reasoning-toggle:hover { color: #238b48; }.reasoning-note { color: #a3ada7; font-size: .68rem; }
.voice-panel { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 80px 24px 24px; background: #fff; animation: voice-in .32s ease both; }.voice-title { position: absolute; top: 26px; left: 50%; margin: 0; transform: translateX(-50%); font-size: .95rem; letter-spacing: .01em; }.home-button { position: absolute; top: 20px; left: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #d8e5dc; border-radius: 11px; color: #277a46; background: #fff; font-size: .8rem; font-weight: 750; }.home-button:hover { border-color: #8fcea1; background: #effaf2; }.home-button svg { width: 16px; height: 16px; fill: currentColor; }.lang-toggle-button { position: absolute; top: 20px; right: 24px; padding: 9px 13px; border: 1px solid #d8e5dc; border-radius: 11px; color: #277a46; background: #fff; font-size: .8rem; font-weight: 750; cursor: pointer; transition: border-color .2s, background .2s; }.lang-toggle-button:hover { border-color: #8fcea1; background: #effaf2; }.voice-orb { animation: orb-in .46s cubic-bezier(.2,.8,.2,1) both; }.voice-orb.is-listening { box-shadow: 0 0 0 18px rgba(53,199,101,.1), 0 0 70px rgba(53,199,101,.34), inset 0 -8px 18px rgba(35,190,80,.14); animation: orb-in .46s cubic-bezier(.2,.8,.2,1) both, voice-pulse 1.6s ease-in-out infinite .46s; }.voice-orb:focus-visible { outline: 4px solid rgba(53,199,101,.24); outline-offset: 10px; }.voice-status { position: absolute; bottom: 48px; margin: 0; color: #63736a; font-size: .82rem; text-align: center; }@keyframes voice-in { from { opacity: 0; } to { opacity: 1; } }@keyframes orb-in { from { opacity: 0; transform: scale(.38); } to { opacity: 1; transform: scale(1); } }@keyframes voice-pulse { 50% { transform: scale(1.035); } }
.quick-questions { position: absolute; top: 50%; left: 28px; right: 28px; transform: translateY(-50%); }.quick-questions #quick-question-list { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 28px; }.quick-question-column { display: grid; gap: 10px; width: min(220px, 22vw); }.quick-questions-title { margin: 0 0 2px; color: #829189; font-size: .7rem; font-weight: 750; }.quick-question { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #dce8df; border-radius: 13px; color: #315d43; background: #f8fcf9; font-size: .76rem; line-height: 1.35; text-align: left; transition: border-color .2s, background .2s, opacity .2s; }.quick-question.is-arabic { text-align: right; }.quick-question:hover:not(:disabled) { border-color: #75c88f; background: #effaf2; }.quick-question:disabled { cursor: not-allowed; opacity: .18; }
@media (max-width: 760px) { .prototype-shell { display: block; }.sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; width: 270px; transform: translateX(-100%); transition: transform .2s; box-shadow: 15px 0 40px rgba(15,45,25,.1); }.prototype-shell.sidebar-open .sidebar { transform: translateX(0); }.menu-button, .mobile-close { display: block; }.menu-button { margin-right: 12px; }.topbar { justify-content: flex-start; }.topbar .prototype-badge { margin-left: auto; }.topbar-title span { display: none; }.conversation { padding: 24px 16px; }.starter-grid { grid-template-columns: 1fr; width: min(100%, 360px); }.starter-card { min-height: 74px; }.welcome-state { min-height: 75vh; }.orb-large { width: 205px; height: 205px; } }
.voice-transcript { position: absolute; top: calc(50% + min(38vw, 250px)); width: min(86vw, 620px); min-height: 54px; text-align: center; }.voice-transcript p { margin: 5px 0; font-size: .85rem; line-height: 1.55; }.recognized-text { color: #7e8b84; }.spoken-text { color: #1b9a4c; font-weight: 650; }.voice-status { position: absolute; bottom: 42px; margin: 0; color: #63736a; font-size: .82rem; font-weight: 750; }.voice-status[data-state="recognizing"] { color: #72847a; }.voice-status[data-state="speaking"] { color: #168c43; }.voice-status[data-state="error"] { color: #bd4d4d; }
@media (max-width: 760px) { .quick-questions { top: auto; left: 16px; right: 16px; bottom: 92px; transform: none; }.quick-questions #quick-question-list { gap: 10px; }.quick-question-column { width: calc(50% - 5px); }.quick-question { padding: 9px 10px; font-size: .7rem; }.quick-questions-title { display: none; }.voice-transcript { top: auto; bottom: 150px; } }