/* Lucky Dream Numbers — night-sky dream journal. dark = night (default), light = dawn */
.ldn-app {
	--ldn-bg: #0b1026;
	--ldn-bg-2: #141a3f;
	--ldn-surface: rgba(255, 255, 255, 0.06);
	--ldn-surface-2: rgba(255, 255, 255, 0.1);
	--ldn-line: rgba(255, 255, 255, 0.12);
	--ldn-text: #eef0ff;
	--ldn-muted: #a9afd6;
	--ldn-accent: #8f7bff;
	--ldn-accent-2: #6c5ce7;
	--ldn-moon: #f6d97a;
	--ldn-moon-2: #e2b94a;
	--ldn-user: rgba(143, 123, 255, 0.22);
	--ldn-danger: #ff7b8a;
	--ldn-radius: 16px;
	--ldn-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
	--ldn-serif: Georgia, "Noto Serif", "Noto Serif Thai", "Times New Roman", serif;
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	color: var(--ldn-text);
	background: linear-gradient(180deg, var(--ldn-bg-2) 0%, var(--ldn-bg) 60%, #070b1c 100%);
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(5, 8, 30, 0.45);
	font-family: var(--ldn-sans);
	font-size: 16px;
	line-height: 1.55;
	overflow: hidden;
	box-sizing: border-box;
}
.ldn-app *, .ldn-app *::before, .ldn-app *::after { box-sizing: border-box; }
/* faint star field */
.ldn-app::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
	background-image:
		radial-gradient(1.2px 1.2px at 8% 12%, #fff 60%, transparent 61%),
		radial-gradient(1px 1px at 22% 30%, #fff 60%, transparent 61%),
		radial-gradient(1.5px 1.5px at 35% 8%, #fff 60%, transparent 61%),
		radial-gradient(1px 1px at 48% 22%, #fff 60%, transparent 61%),
		radial-gradient(1.3px 1.3px at 61% 6%, #fff 60%, transparent 61%),
		radial-gradient(1px 1px at 72% 28%, #fff 60%, transparent 61%),
		radial-gradient(1.6px 1.6px at 86% 14%, #fff 60%, transparent 61%),
		radial-gradient(1px 1px at 93% 34%, #fff 60%, transparent 61%),
		radial-gradient(1px 1px at 15% 55%, #fff 60%, transparent 61%),
		radial-gradient(1.2px 1.2px at 80% 62%, #fff 60%, transparent 61%),
		radial-gradient(1px 1px at 55% 48%, #fff 60%, transparent 61%),
		radial-gradient(1px 1px at 30% 75%, #fff 60%, transparent 61%),
		radial-gradient(1.4px 1.4px at 68% 86%, #fff 60%, transparent 61%),
		radial-gradient(1px 1px at 90% 90%, #fff 60%, transparent 61%);
	background-repeat: no-repeat;
}
.ldn-app > * { position: relative; }
.ldn-app[data-theme="light"] {
	--ldn-bg: #f6f3ff;
	--ldn-bg-2: #ffffff;
	--ldn-surface: #ffffff;
	--ldn-surface-2: #efeafe;
	--ldn-line: rgba(60, 50, 120, 0.12);
	--ldn-text: #262348;
	--ldn-muted: #6d6a90;
	--ldn-accent: #6c5ce7;
	--ldn-accent-2: #5a4bd1;
	--ldn-moon: #e9b949;
	--ldn-moon-2: #c99a2e;
	--ldn-user: #ebe7ff;
	--ldn-danger: #d8475a;
	background: linear-gradient(180deg, #fff7ee 0%, var(--ldn-bg) 55%, #efeafe 100%);
	box-shadow: 0 16px 40px rgba(80, 60, 160, 0.15);
}
.ldn-app[data-theme="light"]::before { opacity: 0; }

/* icons */
.ldn-icon { display: inline-flex; width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em; }
.ldn-icon svg { width: 100%; height: 100%; display: block; }
.ldn-label { display: inline-block; }

/* header */
.ldn-header { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1px solid var(--ldn-line); }
.ldn-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ldn-title strong { display: block; font-family: var(--ldn-serif); font-size: 1.35em; font-weight: 600; letter-spacing: .01em; line-height: 1.2; }
.ldn-title small { display: block; margin-top: 2px; color: var(--ldn-muted); font-size: 0.84em; font-style: italic; }
.ldn-logo { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ldn-moon); background: radial-gradient(circle at 35% 35%, rgba(246,217,122,0.28), rgba(246,217,122,0.04) 70%); }
.ldn-logo .ldn-icon { width: 24px; height: 24px; vertical-align: 0; filter: drop-shadow(0 0 6px rgba(246,217,122,0.55)); }
.ldn-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ldn-lang { background: var(--ldn-surface-2); color: var(--ldn-text); border: 1px solid var(--ldn-line); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 0.88em; }
.ldn-app[data-theme="dark"] .ldn-lang option { color: #222; }
.ldn-user { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9em; color: var(--ldn-muted); }
.ldn-user img { width: 26px; height: 26px; border-radius: 50%; }

/* buttons */
.ldn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; background: linear-gradient(135deg, var(--ldn-accent), var(--ldn-accent-2)); color: #fff; font: inherit; font-size: 0.88em; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .12s ease, filter .12s ease; }
.ldn-btn:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; color: #fff; }
.ldn-btn-ghost { background: var(--ldn-surface-2); color: var(--ldn-text); border-color: var(--ldn-line); }
.ldn-btn-ghost:hover { color: var(--ldn-text); }
.ldn-btn-danger { background: transparent; color: var(--ldn-danger); border-color: var(--ldn-danger); }
.ldn-btn-danger:hover { background: rgba(255, 123, 138, 0.12); color: var(--ldn-danger); }
.ldn-btn:disabled { opacity: .5; cursor: default; transform: none; }
.ldn-btn .ldn-icon { opacity: .9; }

/* conversation */
.ldn-chat { display: flex; flex-direction: column; min-height: 520px; }
.ldn-messages { flex: 1 1 auto; overflow-y: auto; max-height: 70vh; padding: 20px 18px 8px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.ldn-msg { display: flex; }
.ldn-msg-bot { justify-content: flex-start; }
.ldn-msg-user { justify-content: flex-end; }
.ldn-bubble { max-width: 88%; padding: 13px 16px; border-radius: var(--ldn-radius); background: var(--ldn-surface); border: 1px solid var(--ldn-line); animation: ldn-rise .2s ease-out; }
.ldn-app[data-theme="light"] .ldn-bubble { box-shadow: 0 2px 10px rgba(80, 60, 160, 0.06); }
.ldn-msg-bot .ldn-bubble { border-top-left-radius: 6px; }
.ldn-msg-user .ldn-bubble { background: var(--ldn-user); border-color: transparent; border-top-right-radius: 6px; font-style: italic; }
.ldn-msg-result .ldn-bubble { max-width: 96%; width: 100%; }
.ldn-bubble p { margin: 0 0 8px; }
.ldn-bubble p:last-child { margin-bottom: 0; }
.ldn-tip { color: var(--ldn-muted); font-size: 0.88em; }
.ldn-error { color: var(--ldn-danger); }
.ldn-reading { font-style: italic; color: var(--ldn-moon); }
.ldn-saved { color: var(--ldn-muted); font-size: 0.85em; }
.ldn-save-prompt { margin-top: 12px; font-size: 0.92em; }
.ldn-shared-note { font-size: 0.74em; color: var(--ldn-muted); text-transform: uppercase; letter-spacing: .12em; }
@keyframes ldn-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ldn-typing { display: inline-flex; gap: 4px; vertical-align: middle; }
.ldn-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ldn-muted); animation: ldn-blink 1.3s infinite; }
.ldn-typing i:nth-child(2) { animation-delay: .22s; }
.ldn-typing i:nth-child(3) { animation-delay: .44s; }
.ldn-typing-label { color: var(--ldn-muted); font-size: .9em; }
@keyframes ldn-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* symbol tags */
.ldn-chips { display: inline; }
.ldn-chip { display: inline-block; margin: 2px 3px; padding: 2px 10px; border-radius: 999px; background: rgba(246, 217, 122, 0.14); color: var(--ldn-moon); border: 1px solid rgba(246, 217, 122, 0.35); font-size: 0.88em; font-weight: 600; }
.ldn-app[data-theme="light"] .ldn-chip { background: rgba(233, 185, 73, 0.14); color: #8a6410; border-color: rgba(233, 185, 73, 0.45); }
.ldn-chip-ai { border-style: dashed; }

/* numbers card: a small night sky */
.ldn-numbers-title { font-weight: 600; margin-top: 12px; }
.ldn-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin-top: 6px; border-radius: 14px; background: linear-gradient(160deg, rgba(143,123,255,0.14), rgba(246,217,122,0.06)); border: 1px solid var(--ldn-line); }
.ldn-app[data-theme="light"] .ldn-card { background: linear-gradient(160deg, #f1edff, #fff8e6); }
.ldn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ldn-row-label { flex: 0 0 110px; font-size: 0.74em; color: var(--ldn-muted); text-transform: uppercase; letter-spacing: .1em; }
.ldn-row-value { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ldn-row-hero { padding-bottom: 10px; border-bottom: 1px dashed var(--ldn-line); }
.ldn-ball { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 8px; border-radius: 50%; background: var(--ldn-surface-2); color: var(--ldn-text); font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--ldn-line); }
.ldn-ball-gold { background: radial-gradient(circle at 35% 30%, #fff5d0, var(--ldn-moon) 55%, var(--ldn-moon-2)); color: #3a2c00; border-color: transparent; box-shadow: 0 0 14px rgba(246, 217, 122, 0.35); }
.ldn-ball-bonus { background: linear-gradient(135deg, var(--ldn-accent), var(--ldn-accent-2)); color: #fff; border-color: transparent; }
.ldn-ball-small { min-width: 32px; height: 32px; font-size: 0.9em; }
.ldn-big { font-family: var(--ldn-serif); font-size: 2.3em; font-weight: 700; letter-spacing: .12em; color: var(--ldn-moon); text-shadow: 0 0 18px rgba(246, 217, 122, 0.35); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ldn-app[data-theme="light"] .ldn-big { text-shadow: none; }
.ldn-six { font-size: 1.5em; font-weight: 700; letter-spacing: .18em; font-variant-numeric: tabular-nums; }

.ldn-meanings { margin-top: 12px; font-size: 0.93em; }
.ldn-meanings summary { cursor: pointer; color: var(--ldn-muted); }
.ldn-meanings ul { margin: 8px 0 0; padding-left: 18px; }
.ldn-meanings li { margin-bottom: 5px; }
.ldn-sym-nums { color: var(--ldn-moon); font-variant-numeric: tabular-nums; }
.ldn-app[data-theme="light"] .ldn-sym-nums { color: #8a6410; }
.ldn-sym-src { color: var(--ldn-muted); font-size: 0.8em; }
.ldn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ldn-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px dashed var(--ldn-line); background: var(--ldn-surface); }
.ldn-share-url { flex: 1 1 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ldn-line); background: var(--ldn-surface-2); color: var(--ldn-muted); font: inherit; font-size: 0.8em; }

/* when did you dream this */
.ldn-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 18px 0; border-top: 1px solid var(--ldn-line); font-size: 0.86em; color: var(--ldn-muted); }
.ldn-when-label { font-weight: 600; }
.ldn-when-sel { background: var(--ldn-surface-2); color: var(--ldn-text); border: 1px solid var(--ldn-line); border-radius: 10px; padding: 5px 9px; font: inherit; }
.ldn-app[data-theme="dark"] .ldn-when-sel option { color: #222; }
.ldn-dream-note { margin: 10px 0 0; font-size: 0.86em; color: var(--ldn-muted); font-style: italic; }

/* composer */
.ldn-composer { display: flex; gap: 10px; align-items: flex-end; padding: 14px 18px; border-top: 1px solid var(--ldn-line); background: rgba(0, 0, 0, 0.12); }
.ldn-app[data-theme="light"] .ldn-composer { background: rgba(108, 92, 231, 0.05); }
.ldn-input { flex: 1 1 auto; resize: vertical; min-height: 50px; max-height: 180px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ldn-line); background: var(--ldn-surface-2); color: var(--ldn-text); font: inherit; }
.ldn-app[data-theme="light"] .ldn-input { background: #fff; }
.ldn-input::placeholder { color: var(--ldn-muted); font-style: italic; }
.ldn-input:focus { outline: 2px solid var(--ldn-accent); outline-offset: 1px; }
.ldn-mic, .ldn-send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.ldn-mic { flex: 0 0 48px; width: 48px; background: var(--ldn-surface-2); color: var(--ldn-text); border-color: var(--ldn-line); }
.ldn-mic .ldn-icon { width: 22px; height: 22px; vertical-align: 0; }
.ldn-mic:hover { border-color: var(--ldn-accent); }
.ldn-mic-on { background: var(--ldn-danger); border-color: var(--ldn-danger); color: #fff; animation: ldn-pulse 1.2s infinite; }
@keyframes ldn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 123, 138, .5); } 50% { box-shadow: 0 0 0 8px rgba(255, 123, 138, 0); } }
.ldn-send { flex: 0 0 auto; padding: 0 18px; background: linear-gradient(135deg, var(--ldn-moon), var(--ldn-moon-2)); color: #3a2c00; }
.ldn-send:hover { filter: brightness(1.05); }
.ldn-send:disabled { opacity: .5; cursor: default; }
.ldn-footer { padding: 8px 18px 14px; }
.ldn-disclaimer { margin: 0; font-size: 0.74em; color: var(--ldn-muted); text-align: center; }

/* providers */
.ldn-providers { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 380px; }
.ldn-provider { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; color: #222; text-decoration: none; font-weight: 600; border: 1px solid rgba(0,0,0,0.1); }
.ldn-provider:hover { filter: brightness(0.97); color: #222; }
.ldn-provider-icon { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px; }
.ldn-provider-google .ldn-provider-icon { background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.ldn-provider-facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.ldn-provider-facebook:hover { color: #fff; }
.ldn-provider-facebook .ldn-provider-icon { background: #fff; }
.ldn-provider-apple { background: #000; color: #fff; border-color: #000; }
.ldn-provider-apple:hover { color: #fff; }
.ldn-provider-apple .ldn-provider-icon { background: #fff; border-radius: 30% 30% 50% 50%; }

/* side panel (sign-in / history) */
.ldn-panel { position: absolute; inset: 0; background: var(--ldn-bg); overflow-y: auto; padding: 22px 20px; z-index: 5; animation: ldn-rise .18s ease-out; }
.ldn-app[data-theme="light"] .ldn-panel { background: var(--ldn-bg); }
.ldn-panel-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ldn-line); background: var(--ldn-surface-2); color: var(--ldn-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ldn-panel-close .ldn-icon { width: 18px; height: 18px; vertical-align: 0; }
.ldn-panel-inner h3 { margin: 6px 0 12px; font-family: var(--ldn-serif); font-size: 1.3em; font-weight: 600; }
.ldn-panel-open .ldn-chat { visibility: hidden; }
.ldn-history { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.ldn-empty { color: var(--ldn-muted); }
.ldn-hist { position: relative; border-radius: 14px; background: var(--ldn-surface); border: 1px solid var(--ldn-line); padding: 12px 46px 12px 14px; }
.ldn-hist-head { all: unset; display: block; width: 100%; cursor: pointer; }
.ldn-hist-head:focus-visible, .ldn-share-btn:focus-visible { outline: 2px solid var(--ldn-accent); outline-offset: 2px; border-radius: 6px; }
.ldn-hist-date { display: block; font-size: 0.76em; color: var(--ldn-muted); text-transform: uppercase; letter-spacing: .1em; }
.ldn-hist-excerpt { display: block; margin: 3px 0; font-style: italic; }
.ldn-hist-nums { display: block; font-size: 0.86em; color: var(--ldn-moon); background: transparent; padding: 0; font-family: inherit; font-weight: 700; letter-spacing: .05em; }
.ldn-app[data-theme="light"] .ldn-hist-nums { color: #8a6410; }
.ldn-hist-body { margin-top: 10px; }
.ldn-hist-text { white-space: pre-wrap; }
.ldn-hist-symbols { font-size: 0.85em; color: var(--ldn-muted); margin-top: 8px; }
.ldn-hist-del { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--ldn-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ldn-hist-del .ldn-icon { width: 18px; height: 18px; vertical-align: 0; }
.ldn-hist-del:hover { background: rgba(255, 123, 138, 0.15); color: var(--ldn-danger); }

/* toast */
.ldn-toast { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; background: #2a2561; color: #fff; font-size: 0.9em; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 6; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.ldn-toast-error { background: #7a2b3a; }
.ldn-app [hidden] { display: none !important; }

/* mobile */
@media (max-width: 600px) {
	.ldn-app { border-radius: 0; font-size: 15px; }
	.ldn-header { padding: 14px 14px 10px; }
	.ldn-title small { display: none; }
	.ldn-messages { padding: 16px 14px 8px; max-height: none; }
	.ldn-composer, .ldn-footer, .ldn-when { padding-left: 14px; padding-right: 14px; }
	.ldn-composer { flex-wrap: wrap; }
	.ldn-input { flex-basis: 100%; }
	.ldn-send { flex: 1 1 auto; }
	.ldn-bubble { max-width: 94%; }
	.ldn-row-label { flex-basis: 100%; }
	.ldn-big { font-size: 1.9em; }
	.ldn-chat { min-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
	.ldn-bubble, .ldn-panel { animation: none; }
	.ldn-typing i, .ldn-mic-on { animation: none; }
	.ldn-messages { scroll-behavior: auto; }
}