/* ลิน — the assistant's chat panel on the card. A light panel in every theme (readable and calm), with the theme's accent colour. */
.lin-root {
  --lin-primary: var(--accent);
  --lin-primary-ink: var(--accent-ink);
  --lin-bg: #F6F7F9; --lin-surface: #FFFFFF; --lin-cream: #EEF1F5;
  --lin-text: #1F2329; --lin-muted: #5A626C; --lin-border: #DDE2E8;
  --lin-success: #0D8A4E; --lin-danger: #D92D20;
  font-size: 1rem; line-height: 1.5; color: var(--lin-text);
  position: fixed; right: 0; bottom: 0; z-index: 40;
}
.lin-root *, .lin-root *::before, .lin-root *::after { box-sizing: border-box; }
.lin-root [hidden] { display: none !important; }
.lin-root button, .lin-root input, .lin-root textarea { font-family: inherit; font-size: inherit; color: inherit; }
html.lin-open body { overflow: hidden; }

.lin-panel { position: fixed; inset: 0; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--lin-bg); height: 100vh; height: 100dvh; }
@media (min-width: 40rem) {
  .lin-panel { inset: auto 1.25rem 1.25rem auto; width: 24.5rem; height: min(38.75rem, calc(100vh - 2.5rem)); border: 1px solid var(--lin-border); border-radius: 1.4rem; box-shadow: 0 1.5rem 3.75rem rgba(31, 35, 41, .3); overflow: hidden; }
  html.lin-open body { overflow: auto; }
}

.lin-backbar { display: flex; align-items: center; min-height: 2.75rem; padding: calc(.3rem + env(safe-area-inset-top, 0px)) .9rem .3rem; background: var(--lin-surface); border-bottom: 1px solid var(--lin-border); }
.lin-back { display: inline-flex; align-items: center; min-height: 2.2rem; padding: .2rem .7rem; border: 1px solid var(--lin-border); border-radius: 999px; color: var(--lin-text); background: var(--lin-bg); font-size: .85rem; font-weight: 700; text-decoration: none; }
.lin-back:hover { background: var(--lin-cream); }
.lin-head { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; background: var(--lin-surface); border-bottom: 1px solid var(--lin-border); padding-top: calc(.75rem + env(safe-area-inset-top, 0px)); }
.lin-head-avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--lin-primary); flex: none; }
.lin-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lin-head-text strong { font-size: 1.1rem; }
.lin-head-text span { font-size: .8rem; color: var(--lin-muted); display: flex; align-items: center; gap: .4rem; }
.lin-head-text span { overflow-wrap: anywhere; }
.lin-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lin-success); display: inline-block; flex: none; }
.lin-close { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--lin-border); background: var(--lin-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; flex: none; }
.lin-close:hover { background: var(--lin-cream); }

.lin-log { flex: 1; overflow-y: auto; padding: 1rem .9rem .5rem; display: flex; flex-direction: column; gap: .65rem; overscroll-behavior: contain; }
.lin-row { display: flex; gap: .5rem; align-items: flex-end; max-width: 100%; }
.lin-row.user { justify-content: flex-end; }
.lin-row-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; flex: none; }
.lin-bubble { max-width: 82%; padding: .65rem .9rem; border-radius: 1.1rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; }
.lin-row.bot .lin-bubble { background: var(--lin-surface); border: 1px solid var(--lin-border); border-bottom-left-radius: .35rem; }
.lin-row.user .lin-bubble { background: var(--lin-primary); color: var(--lin-primary-ink); border-bottom-right-radius: .35rem; }
.lin-row.bot.error .lin-bubble { background: #FEF3F2; border-color: #FDA29B; color: #912018; }
.lin-typing { display: inline-flex; gap: .25rem; padding: .25rem 0; }
.lin-typing i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--lin-muted); opacity: .5; animation: lin-blink 1.2s infinite; }
.lin-typing i:nth-child(2) { animation-delay: .2s; }
.lin-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes lin-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-.15rem); } }

.lin-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-left: 2.25rem; }
.lin-action { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; border-radius: 999px; border: 1.5px solid var(--lin-primary); background: var(--lin-surface); color: var(--lin-text); font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer; }
.lin-action.primary { background: var(--lin-primary); color: var(--lin-primary-ink); }

.lin-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: .4rem .9rem .6rem; }
.lin-chip { min-height: 2.5rem; padding: .3rem .9rem; border-radius: 999px; border: 1px solid var(--lin-border); background: var(--lin-surface); cursor: pointer; font-size: .9rem; }
.lin-chip:hover { background: var(--lin-cream); }

.lin-input { display: flex; gap: .5rem; padding: .6rem .9rem; border-top: 1px solid var(--lin-border); background: var(--lin-surface); }
.lin-input input { flex: 1; min-width: 0; min-height: 3rem; padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--lin-border); background: var(--lin-bg); }
.lin-send { width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: var(--lin-primary); color: var(--lin-primary-ink); cursor: pointer; font-size: 1.1rem; flex: none; }
.lin-send:disabled { opacity: .5; cursor: not-allowed; }
.lin-note { margin: 0; padding: .35rem .9rem calc(.55rem + env(safe-area-inset-bottom, 0px)); font-size: .75rem; line-height: 1.5; color: var(--lin-muted); text-align: center; background: var(--lin-surface); }
.lin-note button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.lin-note a { color: inherit; }

.lin-form { background: var(--lin-surface); border: 1px solid var(--lin-border); border-radius: 1rem; padding: .9rem; margin: .25rem 0 .5rem; }
.lin-form h3 { margin: 0 0 .4rem; font-size: 1rem; }
.lin-form label { display: block; font-size: .85rem; color: var(--lin-muted); margin: .55rem 0 .2rem; }
.lin-form input[type="text"], .lin-form textarea { width: 100%; min-height: 2.75rem; padding: .4rem .75rem; border-radius: .7rem; border: 1px solid var(--lin-border); background: var(--lin-bg); }
.lin-form textarea { resize: vertical; min-height: 4rem; }
.lin-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lin-form label.lin-consent { display: flex; gap: .6rem; align-items: flex-start; color: var(--lin-muted); font-size: .8rem; margin-top: .8rem; }
.lin-consent input { width: 1.4rem; height: 1.4rem; margin-top: .1rem; flex: none; }
.lin-form-msg { min-height: 1.1rem; margin-top: .4rem; font-size: .85rem; color: var(--lin-danger); }
.lin-form-row { display: flex; gap: .5rem; margin-top: .4rem; }
.lin-submit { flex: 1; min-height: 2.9rem; border-radius: .8rem; border: 0; background: var(--lin-primary); color: var(--lin-primary-ink); font-weight: 700; cursor: pointer; }
.lin-cancel { min-height: 2.9rem; padding: 0 1rem; border-radius: .8rem; border: 1px solid var(--lin-border); background: var(--lin-surface); cursor: pointer; }
.lin-submit:disabled { opacity: .5; }

.lin-root :focus-visible { outline: .19rem solid var(--lin-primary); outline-offset: .15rem; }
@media (prefers-reduced-motion: reduce) { .lin-typing i { animation: none; opacity: .6; } }