/* ==========================================================================
 * OGAICE 10 — public components (Ask OGAICE, contact, page shell).
 *
 * The theme owns the design. Every value reads an OGA Tourism theme token
 * (--oga-*) first and falls back to the association's navy/red palette, so the
 * components look native in OGA Tourism Core and sane anywhere else.
 * A theme that wants full control declares 'styles' => 'theme' and this file
 * is not loaded.
 * ======================================================================== */

.ogaice {
	--ogaice-brand: var(--oga-jungle, var(--oga-navy, #1c3f8f));
	--ogaice-brand-ink: var(--oga-on-brand, #fff);
	--ogaice-accent: var(--oga-saffron, var(--oga-red, #d81f36));
	--ogaice-ink: var(--oga-ink, #18212f);
	--ogaice-muted: var(--oga-ink-muted, #5c6576);
	--ogaice-line: var(--oga-border, #dfe3ea);
	--ogaice-soft: var(--oga-bg-soft, #f3f5f9);
	--ogaice-bg: var(--oga-bg, #fff);
	--ogaice-r: var(--oga-radius-md, 12px);
	--ogaice-r-lg: var(--oga-radius-lg, 18px);
	--ogaice-head: var(--oga-font-heading, inherit);
	--ogaice-wa: #1a9e4b;
	--ogaice-tg: #2290d0;
	--ogaice-log-h: 340px;
	color: var(--ogaice-ink);
	box-sizing: border-box;
}
.ogaice *, .ogaice *::before, .ogaice *::after { box-sizing: inherit; }
.ogaice .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.ogaice-h { font-family: var(--ogaice-head); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; margin: 0 0 14px; }
.ogaice-icon { flex: 0 0 auto; display: inline-block; vertical-align: middle; }

/* ---- buttons ----------------------------------------------------------- */
.ogaice-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
	font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
	transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
.ogaice-btn:hover { filter: brightness(.94); }
.ogaice-btn:active { transform: translateY(1px); }
.ogaice-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ogaice-brand) 40%, transparent); outline-offset: 2px; }
.ogaice-btn--wa, .ogaice-btn--wa:hover, .ogaice-btn--wa:visited { background: var(--ogaice-wa); color: #fff; }
.ogaice-btn--tg, .ogaice-btn--tg:hover, .ogaice-btn--tg:visited { background: var(--ogaice-tg); color: #fff; }
.ogaice-btn--line, .ogaice-btn--line:visited { background: var(--ogaice-bg); color: var(--ogaice-ink); border-color: var(--ogaice-line); }
.ogaice-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22b35e; box-shadow: 0 0 0 3px color-mix(in srgb, #22b35e 22%, transparent); }

/* ---- Ask OGAICE: inline console --------------------------------------- */
.ogaice-assist {
	display: flex; flex-direction: column; gap: 14px;
	max-width: 760px; margin: 0 auto 28px; padding: clamp(16px, 3vw, 24px);
	background: var(--ogaice-bg); border: 1px solid var(--ogaice-line); border-radius: var(--ogaice-r-lg);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -18px rgba(16, 24, 40, .18);
}
.ogaice-assist__head { display: flex; align-items: center; gap: 12px; }
.ogaice-assist__mark { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ogaice-soft); overflow: hidden; }
.ogaice-assist__mark img { width: 36px; height: 36px; object-fit: contain; }
.ogaice-assist__id { min-width: 0; flex: 1; }
.ogaice-assist__title { margin: 0; font-family: var(--ogaice-head); font-size: 1.15rem; line-height: 1.2; color: var(--ogaice-ink); }
.ogaice-assist__status { display: flex; align-items: center; gap: 7px; margin: 3px 0 0; font-size: .82rem; color: var(--ogaice-muted); }
.ogaice-assist__clear { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ogaice-line); background: var(--ogaice-bg); color: var(--ogaice-muted); cursor: pointer; }
.ogaice-assist__clear:hover { color: var(--ogaice-brand); border-color: var(--ogaice-brand); }
.ogaice-assist__intro { margin: 0; color: var(--ogaice-muted); font-size: .97rem; line-height: 1.5; }
.ogaice-assist.has-log .ogaice-assist__intro, .ogaice-assist.has-log .ogaice-assist__tiles { display: none; }

.ogaice-assist__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ogaice-tile {
	display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 12px 14px; text-align: left;
	background: var(--ogaice-soft); border: 1px solid transparent; border-radius: var(--ogaice-r); color: var(--ogaice-ink);
	font: inherit; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.ogaice-tile:hover { border-color: color-mix(in srgb, var(--ogaice-brand) 35%, transparent); background: var(--ogaice-bg); transform: translateY(-1px); }
.ogaice-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--ogaice-brand) 40%, transparent); outline-offset: 1px; }
.ogaice-tile__ico { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--ogaice-bg); color: var(--ogaice-brand); box-shadow: inset 0 0 0 1px var(--ogaice-line); }
.ogaice-tile__txt { display: flex; flex-direction: column; min-width: 0; }
.ogaice-tile__txt strong { font-size: .95rem; line-height: 1.25; }
.ogaice-tile__txt small { font-size: .8rem; color: var(--ogaice-muted); line-height: 1.3; }

.ogaice-assist__log { display: flex; flex-direction: column; gap: 12px; max-height: var(--ogaice-log-h); overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; padding-right: 2px; }
.ogaice-assist__log:empty { display: none; }
.ogaice-msg { max-width: 88%; padding: 11px 14px; border-radius: 16px; line-height: 1.5; font-size: .96rem; animation: ogaice-in .22s ease both; }
.ogaice-msg p { margin: 0; }
.ogaice-msg p + p { margin-top: 8px; }
.ogaice-msg--me { align-self: flex-end; background: var(--ogaice-brand); color: var(--ogaice-brand-ink); border-bottom-right-radius: 6px; }
.ogaice-msg--bot { align-self: flex-start; background: var(--ogaice-soft); color: var(--ogaice-ink); border-bottom-left-radius: 6px; }
.ogaice-msg--err { align-self: flex-start; background: color-mix(in srgb, var(--ogaice-accent) 10%, var(--ogaice-bg)); color: var(--ogaice-ink); }
.ogaice-msg__src { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--ogaice-line); display: grid; gap: 4px; font-size: .88rem; }
.ogaice-msg__src a { color: var(--ogaice-brand); text-decoration: none; }
.ogaice-msg__src a:hover { text-decoration: underline; }
.ogaice-msg__src li::before { content: "→ "; color: var(--ogaice-muted); }
.ogaice-msg__cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 210px); gap: 8px; margin-top: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
.ogaice-card { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--ogaice-bg); border: 1px solid var(--ogaice-line); border-radius: 12px; overflow: hidden; color: var(--ogaice-ink); text-decoration: none; }
.ogaice-card:hover { border-color: var(--ogaice-brand); }
.ogaice-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--ogaice-soft); }
.ogaice-card span { display: block; padding: 8px 10px 0; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ogaice-accent); font-weight: 700; }
.ogaice-card strong { display: block; padding: 2px 10px 10px; font-size: .9rem; line-height: 1.3; }
.ogaice-card em { display: block; padding: 0 10px 10px; margin-top: -6px; font-style: normal; font-size: .85rem; color: var(--ogaice-muted); }
.ogaice-msg__book { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ogaice-msg__book .ogaice-btn { min-height: 38px; padding: 8px 14px; font-size: .9rem; }
.ogaice-typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.ogaice-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ogaice-muted); animation: ogaice-blink 1.1s infinite ease-in-out; }
.ogaice-typing i:nth-child(2) { animation-delay: .15s; }
.ogaice-typing i:nth-child(3) { animation-delay: .3s; }

.ogaice-assist__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ogaice-chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--ogaice-line); background: var(--ogaice-bg); color: var(--ogaice-ink); font: inherit; font-size: .87rem; cursor: pointer; }
.ogaice-chip:hover { border-color: var(--ogaice-brand); color: var(--ogaice-brand); }

.ogaice-assist__form { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 16px; border: 1.5px solid var(--ogaice-line); border-radius: 999px; background: var(--ogaice-bg); transition: border-color .15s ease, box-shadow .15s ease; }
.ogaice-assist__form:focus-within { border-color: var(--ogaice-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ogaice-brand) 14%, transparent); }
.ogaice-assist__form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--ogaice-ink); padding: 8px 0; box-shadow: none; }
.ogaice-assist__send { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--ogaice-brand); color: var(--ogaice-brand-ink); cursor: pointer; }
.ogaice-assist__send:disabled { opacity: .55; cursor: progress; }
.ogaice-assist__send:focus-visible { outline: 3px solid color-mix(in srgb, var(--ogaice-brand) 40%, transparent); outline-offset: 2px; }

.ogaice-assist__guide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 14px; border-top: 1px dashed var(--ogaice-line); }
.ogaice-assist__guide p { margin: 0; font-size: .9rem; color: var(--ogaice-muted); }
.ogaice-assist__guide strong { color: var(--ogaice-ink); }
.ogaice-assist__links { display: flex; gap: 8px; flex-wrap: wrap; }
.ogaice-assist__links .ogaice-btn { min-height: 40px; padding: 8px 15px; font-size: .92rem; }

/* ---- floating launcher ------------------------------------------------- */
.ogaice-float { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 99990; }
.ogaice-fab { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: 999px; border: 0; background: var(--ogaice-brand); color: var(--ogaice-brand-ink); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(16, 24, 40, .45); }
.ogaice-fab__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; }
.ogaice-fab__mark img { width: 28px; height: 28px; object-fit: contain; }
.ogaice-fab .ogaice-dot { margin-left: 2px; }
.ogaice-fab[aria-expanded="true"] { opacity: 0; pointer-events: none; }
.ogaice-float__panel { position: absolute; right: 0; bottom: 0; width: min(420px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--ogaice-bg); border-radius: var(--ogaice-r-lg); box-shadow: 0 24px 60px -20px rgba(16, 24, 40, .45); overflow: hidden; animation: ogaice-up .2s ease both; }
.ogaice-float__panel[hidden] { display: none; }
.ogaice-float__bar { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; gap: 6px; }
.ogaice-float__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ogaice-line); background: var(--ogaice-bg); color: var(--ogaice-muted); cursor: pointer; }
.ogaice-float__icon:hover { color: var(--ogaice-brand); }
.ogaice-float__panel .ogaice-assist { margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; --ogaice-log-h: 46vh; }
.ogaice-float__panel .ogaice-assist__head { padding-right: 86px; }
.ogaice-float__panel .ogaice-assist__clear { position: absolute; top: 14px; right: 98px; }
.ogaice-float__panel .ogaice-assist__tiles { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) {
	.ogaice-float__panel { position: fixed; inset: auto 0 0 0; width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
	.ogaice-fab__txt { display: none; }
	.ogaice-fab { padding: 6px; }
}

/* ---- contact ----------------------------------------------------------- */
.ogaice-contact { margin: 0 0 24px; }
.ogaice-contact__text { margin: 0 0 12px; color: var(--ogaice-muted); }
.ogaice-contact__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- /ask-ogaice/ page -------------------------------------------------- */
.ogaice-page { padding: clamp(28px, 6vw, 64px) 16px; }
.ogaice-page__wrap { max-width: 800px; margin: 0 auto; }
.ogaice-page__head { text-align: center; margin: 0 auto 26px; max-width: 640px; }
.ogaice-eyebrow { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oga-saffron, #d81f36); }
.ogaice-page__title { margin: 0 0 12px; font-family: var(--oga-font-heading, inherit); font-size: clamp(1.8rem, 4.5vw, 2.7rem); line-height: 1.1; }
.ogaice-page__lead { margin: 0; color: var(--oga-ink-muted, #5c6576); font-size: 1.05rem; line-height: 1.55; }

/* ---- motion ------------------------------------------------------------ */
@keyframes ogaice-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ogaice-up { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ogaice-blink { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.ogaice *, .ogaice-float__panel { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- print ------------------------------------------------------------- */
@media print { .ogaice-float, .ogaice-assist__form, .ogaice-assist__chips, .ogaice-assist__tiles { display: none !important; } }