/* Vercel-only additions on top of site.css (which tools/build.py copies from the PHP site). */

/* Clickable contact cards */
a.contact-row.is-link { color: inherit; text-decoration: none; position: relative; transition: border-color .15s, transform .15s; }
a.contact-row.is-link b { user-select: auto; }
a.contact-row.is-link:hover { border-color: var(--mint); transform: translateY(-1px); }
a.contact-row.is-link:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.contact-go { font-size: .82rem; font-weight: 600; color: var(--mint-ink); }

/* Floating LINE / AI buttons */
.fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; font: 700 .95rem var(--f); text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.fab-btn span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .8rem; }
.fab-line { background: #06c755; color: #fff; }
.fab-line span { background: #fff; color: #06c755; }
.fab-ai { background: var(--ink); color: var(--on-ink); }
.fab-ai span { background: var(--mint); color: #062b23; }
.fab-btn[hidden] { display: none; }
.fab-btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }

/* AI panel */
.ai-panel { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 124px); z-index: 41; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 170px)); display: flex; flex-direction: column; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); overflow: hidden; }
.ai-panel[hidden] { display: none; }
.ai-panel header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ai-panel header button { background: none; border: 0; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.ai-log { flex: 1; overflow-y: auto; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.ai-msg { margin: 0; padding: 9px 12px; border-radius: 12px; max-width: 88%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .93rem; line-height: 1.55; }
.ai-msg.bot { background: var(--bg); border: 1px solid var(--line); justify-self: start; }
.ai-msg.me { background: var(--mint); color: #062b23; justify-self: end; }
.ai-msg.wait { opacity: .7; font-style: italic; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.ai-chips[hidden] { display: none; }
.ai-chips button { font: 500 .82rem var(--f); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
.ai-panel form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.ai-panel input { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: inherit; }
.ai-panel form button { font: 700 .9rem var(--f); padding: 0 16px; border-radius: 999px; border: 0; background: var(--ink); color: var(--on-ink); cursor: pointer; }
.ai-fine { margin: 0; padding: 0 14px 12px; font-size: .74rem; color: var(--fg-2); }
.ai-fine a { color: inherit; }
@media (max-width: 520px) { .ai-panel { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 124px); } }
@media print { .fab, .ai-panel { display: none !important; } }

/* Hero: the highlighted phrase gets its own line in mint instead of a background bar
   (the bar hid Thai lower vowels and was hard to read on the dark theme). */
.hero h1 { line-height: 1.3; }
.hero h1 em { display: block; margin-top: .08em; background: none; color: var(--mint-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1 em { color: var(--mint); } }
:root[data-theme="dark"] .hero h1 em { color: var(--mint); }

/* Hero image: use only the people/phone side of the artwork (its left part is empty) and fade it
   into the hero background instead of framing it. Desktop: bleeds to the right edge behind the text column. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-grid > div { position: relative; z-index: 1; }
.hero-grid > .hero-img { border: 0; border-radius: 0; box-shadow: none; object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 22%, #000 48%), linear-gradient(to top, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 22%, #000 48%), linear-gradient(to top, transparent 0%, #000 22%);
  mask-composite: intersect; }
@media (min-width: 861px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid > div { max-width: min(560px, 48%); }
  .hero-grid > .hero-img { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 60%; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 860px) {
  .hero-grid > .hero-img { aspect-ratio: 4 / 3; margin-inline: -16px; width: calc(100% + 32px); max-width: none; object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%); }
}