/* ArabiAI — app-native UI (RTL, mobile-first) */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&family=Fredoka:wght@500;600;700&family=Noto+Naskh+Arabic:wght@400;700&display=swap');

#asp-app {
	--bg: #f6f7fb;
	--surface: #ffffff;
	--ink: #16181f;
	--ink-soft: #5b6472;
	--muted: #97a0b0;
	--line: #edeef3;
	--accent: #ff6a2c;
	--accent-2: #ff9248;
	--grad: linear-gradient(135deg, #ff6a2c 0%, #ff9442 100%);
	--violet: #6c5cef;
	--good: #18c08a;
	--danger: #f0473f;
	--r: 22px; --r-sm: 14px; --r-pill: 999px;
	--sh-sm: 0 2px 8px rgba(22,24,31,.06);
	--sh: 0 12px 32px rgba(22,24,31,.10);
	--sh-lg: 0 24px 60px rgba(22,24,31,.20);
	--sh-cta: 0 10px 24px rgba(255,106,44,.36);
	--font: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-display: 'Fredoka', 'Heebo', sans-serif;
	--font-ar: 'Noto Naskh Arabic', 'Geeza Pro', serif;

	font-family: var(--font);
	color: var(--ink);
	background: var(--bg);
	position: relative;
	display: flex; flex-direction: column;
	max-width: 460px; height: 86vh; margin: 22px auto;
	border-radius: 30px; overflow: hidden; box-shadow: var(--sh-lg);
	-webkit-font-smoothing: antialiased;
}
#asp-app * { box-sizing: border-box; }
#asp-app button { font-family: inherit; }
#asp-app :focus-visible { outline: 3px solid rgba(255,106,44,.5); outline-offset: 2px; }

body.asp-appmode { margin: 0 !important; padding: 0 !important; background: var(--bg, #f6f7fb); }
body.asp-appmode .asp-appshell { position: fixed; inset: 0; }
body.asp-appmode #asp-app { max-width: none; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; position: fixed; inset: 0; }

/* show/hide by auth state */
#asp-app.is-anon .asp-stage, #asp-app.is-anon .asp-tabbar { display: none; }
#asp-app.is-auth .asp-auth { display: none; }
#asp-app.chat-open .asp-tabbar { transform: translateY(120%); }

/* ---------- AUTH ---------- */
.asp-auth { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 28px 24px; overflow-y: auto; background: var(--bg); }
.asp-auth-inner { width: 100%; max-width: 360px; text-align: center; }
.asp-auth-emoji { font-size: 46px; }
.asp-auth-mark { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); margin-top: 6px; }
.asp-auth-mark span { color: var(--accent); }
.asp-auth-title { font-size: 30px; font-weight: 900; letter-spacing: -.6px; margin: 14px 0 8px; line-height: 1.1; }
.asp-auth-sub { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 26px; line-height: 1.5; }

.asp-tabs { display: flex; gap: 4px; background: #eceef4; border-radius: var(--r-pill); padding: 5px; margin-bottom: 18px; }
.asp-tab { flex: 1; border: none; background: none; padding: 12px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 700; color: var(--muted); cursor: pointer; transition: .18s; }
.asp-tab-active { background: #fff; color: var(--ink); box-shadow: var(--sh-sm); }
.asp-form { display: flex; flex-direction: column; gap: 12px; }
.asp-form input { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 16px 18px; font-family: inherit; font-size: 16px; color: var(--ink); text-align: right; transition: .15s; }
.asp-form input::placeholder { color: var(--muted); }
.asp-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,106,44,.13); }

.asp-cta { margin-top: 6px; background: var(--grad); color: #fff; border: none; border-radius: 18px; padding: 17px; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: var(--sh-cta); transition: transform .12s, box-shadow .15s; }
.asp-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,106,44,.45); }
.asp-cta:active { transform: translateY(0) scale(.98); }
.asp-cta:disabled { opacity: .6; pointer-events: none; }
.asp-auth-msg { margin-top: 16px; font-size: 14px; min-height: 18px; font-weight: 500; }
.asp-auth-msg.err { color: var(--danger); }
.asp-auth-msg.ok { color: var(--good); }

/* ---------- STAGE & SCREENS ---------- */
.asp-stage { flex: 1 1 auto; min-height: 0; position: relative; display: flex; }
.asp-screen { display: none; flex: 1 1 auto; min-height: 0; width: 100%; flex-direction: column; }
.asp-screen.asp-active { display: flex; animation: asp-fade .28s ease; }
@keyframes asp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.asp-screen-head { padding: 26px 22px 14px; }
.asp-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--accent); letter-spacing: .3px; }
.asp-screen-title { font-size: 28px; font-weight: 900; letter-spacing: -.6px; margin: 4px 0 4px; line-height: 1.12; }
.asp-screen-sub { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* HOME personas */
#asp-home, #asp-library { overflow-y: auto; padding-bottom: 24px; }
.asp-persona-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 8px 22px 0; }
.asp-persona {
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: right;
	background: var(--surface); border: none; border-radius: var(--r); padding: 18px; min-height: 124px;
	cursor: pointer; box-shadow: var(--sh-sm); transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s;
}
.asp-persona:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.asp-persona:active { transform: translateY(-1px) scale(.98); }
.asp-persona-icon {
	width: 54px; height: 54px; border-radius: 17px; font-size: 27px;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--c) 16%, white);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 26%, white);
}
.asp-persona-title { font-size: 16px; font-weight: 700; line-height: 1.25; }

/* CHAT */
#asp-chat { position: absolute; inset: 0; background: var(--bg); z-index: 5; }
.asp-chat-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); background: rgba(246,247,251,.86); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
.asp-chat-title { flex: 1; text-align: center; font-weight: 800; font-size: 16px; }
.asp-roundbtn { width: 38px; height: 38px; border-radius: 50%; border: none; background: #fff; box-shadow: var(--sh-sm); color: var(--ink); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.asp-roundbtn:active { transform: scale(.92); }

.asp-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.asp-msg { max-width: 85%; display: flex; flex-direction: column; gap: 8px; animation: asp-pop .3s cubic-bezier(.2,.8,.25,1); }
.asp-msg-user { align-self: flex-end; }
.asp-msg-ai { align-self: flex-start; }
@keyframes asp-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.asp-bubble { padding: 13px 16px; font-size: 15.5px; line-height: 1.55; border-radius: 22px; }
.asp-msg-ai .asp-bubble { background: var(--surface); border-bottom-right-radius: 7px; box-shadow: var(--sh-sm); }
.asp-msg-user .asp-bubble { background: var(--ink); color: #fff; border-bottom-left-radius: 7px; }

/* Teach card — signature */
.asp-teach { background: var(--surface); border-radius: var(--r); padding: 16px 17px 15px; box-shadow: var(--sh-sm); position: relative; overflow: hidden; }
.asp-teach::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 5px; background: var(--grad); }
.asp-teach .t-eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--accent); margin-bottom: 6px; }
.asp-teach .t-translit { font-size: 24px; font-weight: 900; letter-spacing: -.4px; line-height: 1.25; }
.asp-teach .t-meaning { font-size: 15px; color: var(--ink-soft); margin-top: 3px; }
.asp-teach .t-arabic { font-family: var(--font-ar); font-size: 26px; color: #2a2d36; margin-top: 0; direction: rtl; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .26s ease, opacity .2s, margin-top .26s; }
.asp-teach.show-ar .t-arabic { max-height: 90px; opacity: 1; margin-top: 11px; }
.asp-teach-actions { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.t-play { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; border: none; cursor: pointer; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-cta); transition: transform .12s; }
.t-play:active { transform: scale(.9); }
.t-play.is-loading { opacity: .6; pointer-events: none; }
.t-play svg { margin-right: -2px; }
.t-ar-toggle { background: #f1f3f8; border: none; color: var(--ink-soft); font-size: 13.5px; font-weight: 700; padding: 11px 16px; border-radius: var(--r-pill); cursor: pointer; }
.t-ar-toggle:hover { background: #e8ebf2; }

.asp-correction { background: #fff5f4; border-radius: var(--r); padding: 13px 16px; font-size: 15px; line-height: 1.55; position: relative; overflow: hidden; }
.asp-correction::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 5px; background: var(--danger); }
.asp-correction .c-fix { margin-top: 6px; font-weight: 800; color: var(--ink); }

.asp-typing { align-self: flex-start; display: flex; gap: 5px; padding: 15px 17px; background: #fff; border-radius: 22px; box-shadow: var(--sh-sm); }
.asp-typing span { width: 8px; height: 8px; background: var(--muted); border-radius: 50%; animation: asp-bounce 1.2s infinite; }
.asp-typing span:nth-child(2){animation-delay:.15s} .asp-typing span:nth-child(3){animation-delay:.3s}
@keyframes asp-bounce { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-5px)} }
.asp-error-line { align-self: center; color: var(--danger); font-size: 13px; padding: 6px 10px; font-weight: 500; }

.asp-composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: rgba(246,247,251,.92); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.asp-composer textarea { flex: 1; resize: none; border: 2px solid var(--line); background: #fff; border-radius: 24px; padding: 13px 18px; font-family: inherit; font-size: 16px; max-height: 120px; line-height: 1.4; outline: none; color: var(--ink); transition: .15s; }
.asp-composer textarea:focus { border-color: var(--accent); }
.asp-send { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-cta); transition: transform .12s; }
.asp-send:active { transform: scale(.9); }
.asp-send:disabled { opacity: .5; pointer-events: none; box-shadow: none; }

/* LIBRARY */
.asp-library-list { padding: 8px 22px 0; display: flex; flex-direction: column; gap: 12px; }
.asp-lib-item { background: var(--surface); border-radius: var(--r-sm); padding: 14px 16px; cursor: pointer; box-shadow: var(--sh-sm); display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: transform .12s; }
.asp-lib-item:active { transform: scale(.99); }
.asp-lib-item .li-text .li-translit { font-weight: 800; font-size: 17px; }
.asp-lib-item .li-text .li-meaning { font-size: 13px; color: var(--muted); margin-top: 2px; }
.asp-lib-item .li-play { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: none; background: color-mix(in srgb, var(--accent) 14%, white); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.asp-lib-empty { color: var(--muted); font-size: 15px; text-align: center; padding: 40px 22px; line-height: 1.6; }

/* PROFILE */
#asp-profile { align-items: center; justify-content: center; padding: 30px 22px; }
.asp-profile-card { width: 100%; max-width: 320px; text-align: center; background: var(--surface); border-radius: var(--r); padding: 34px 24px; box-shadow: var(--sh-sm); }
.asp-profile-avatar { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 34px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-cta); }
.asp-profile-name { font-size: 22px; font-weight: 800; }
.asp-profile-email { font-size: 14px; color: var(--muted); margin-top: 4px; }
.asp-logout { margin-top: 24px; width: 100%; background: #fff; color: var(--danger); border: 2px solid #ffe0de; border-radius: 16px; padding: 15px; font-size: 15.5px; font-weight: 800; cursor: pointer; transition: .15s; }
.asp-logout:hover { background: #fff5f4; }
.asp-logout:active { transform: scale(.98); }

/* ---------- BOTTOM NAV ---------- */
.asp-tabbar {
	flex: 0 0 auto; display: flex; align-items: stretch; z-index: 10;
	background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(16px);
	border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom); transition: transform .3s cubic-bezier(.3,.7,.3,1);
}
.asp-tabbtn { flex: 1; background: none; border: none; cursor: pointer; padding: 9px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); transition: color .15s; }
.asp-tabbtn .ti { font-size: 22px; line-height: 1; filter: grayscale(.4) opacity(.65); transition: .15s; }
.asp-tabbtn .tl { font-size: 11.5px; font-weight: 700; }
.asp-tabbtn-active { color: var(--accent); }
.asp-tabbtn-active .ti { filter: none; transform: translateY(-1px); }

@media (max-width: 500px) {
	#asp-app { height: 100dvh; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
	#asp-app *, #asp-app *::before { animation: none !important; transition: none !important; }
}