/* แชทผู้ช่วย Airrok มุมล่างขวา */
@property --ac-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --ac-grad: conic-gradient(from var(--ac-a), #FF2E4D, #FF8A3D, #FFD0D9, #FF4FA3, #8A5CFF, #FF2E4D); }

/* ---- ลูกแก้ว AI ---- */
.ac-orb { position: relative; display: grid; place-items: center; flex: none; border-radius: 50%; }
.ac-orb.lg { width: 62px; height: 62px; }
.ac-orb.sm { width: 36px; height: 36px; }
.ac-orb .ring, .ac-orb .glow { position: absolute; inset: 0; border-radius: 50%; background: var(--ac-grad);
                               animation: ac-spin 4s linear infinite; }
.ac-orb .glow { inset: -6px; filter: blur(14px); opacity: .55; transition: opacity .3s, inset .3s; }
.ac-orb.sm .glow { inset: -2px; filter: blur(6px); opacity: .45; }
.ac-orb .core { position: absolute; inset: 2.5px; border-radius: 50%; display: grid; place-items: center;
                background: radial-gradient(circle at 35% 28%, #2a1218 0%, #0b0b0d 55%, #050506 100%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 18px rgba(255,46,77,.18); }
.ac-orb.sm .core { inset: 1.5px; }
.ac-orb .spark { width: 52%; height: auto; filter: drop-shadow(0 0 5px rgba(255,90,120,.8));
                 animation: ac-twinkle 3.2s ease-in-out infinite; }
@keyframes ac-spin { to { --ac-a: 360deg; } }
@keyframes ac-twinkle { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,90,120,.6)); } 50% { filter: drop-shadow(0 0 10px rgba(255,46,77,1)); } }

/* ---- ปุ่มเปิดแชท ---- */
.ac-fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; gap: 0;
          padding: 0; border: 0; background: none; cursor: pointer; color: #fff; }
.ac-fab-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; margin-right: 0;
                font: 500 14px var(--head, sans-serif); letter-spacing: .08em; text-transform: uppercase;
                padding: 9px 0; border-radius: 999px; background: rgba(10,10,12,.82); backdrop-filter: blur(10px);
                box-shadow: 0 0 0 1px rgba(255,255,255,.14); transition: max-width .35s, opacity .25s, padding .35s, margin .35s; }
.ac-fab:hover .ac-fab-label, .ac-fab:focus-visible .ac-fab-label { max-width: 140px; opacity: 1; padding: 9px 16px; margin-right: 12px; }
.ac-fab:hover .glow { inset: -10px; opacity: .8; }
.ac-fab:hover .ring, .ac-fab:hover .glow { animation-duration: 1.6s; }
.ac-fab[aria-expanded="true"] .ring, .ac-fab[aria-expanded="true"] .glow { animation-duration: 1.2s; }
.ac-fab[aria-expanded="true"] .ac-fab-label { display: none; }

/* ---- หน้าต่างแชท ---- */
.ac-panel { position: fixed; right: 22px; bottom: 100px; z-index: 91; width: min(390px, calc(100vw - 32px));
            height: min(580px, calc(100svh - 124px)); display: flex; flex-direction: column;
            background: rgba(10,10,12,.88); backdrop-filter: blur(22px) saturate(1.4);
            border-radius: 18px; overflow: hidden; font-family: var(--body, sans-serif); color: var(--text, #F4F4F6);
            box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 90px rgba(0,0,0,.75), 0 0 80px -20px rgba(255,46,77,.35);
            opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right; pointer-events: none;
            transition: opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.2); }
.ac-panel.open { opacity: 1; transform: none; pointer-events: auto; }
/* เส้นแสงไล่สีด้านบน */
.ac-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ac-grad);
                    animation: ac-spin 4s linear infinite; opacity: .9; }
@media (max-width: 520px) {
  .ac-panel { right: 12px; left: 12px; width: auto; bottom: 92px; height: calc(100svh - 112px); }
  .ac-fab { right: 16px; bottom: 16px; }
}

.ac-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ac-head b { display: block; font: 600 15px var(--head, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.ac-head small { display: flex; align-items: center; gap: 6px; color: var(--muted, #8E8E96); font-size: 12.5px; }
.ac-head small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #30D158; box-shadow: 0 0 8px #30D158; }
.ac-close { margin-left: auto; background: none; border: 0; color: var(--muted, #8E8E96); cursor: pointer; padding: 6px; border-radius: 8px; }
.ac-close:hover { color: #fff; background: rgba(255,255,255,.06); }
.ac-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

.ac-log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.ac-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.6;
          white-space: pre-wrap; word-wrap: break-word; animation: ac-in .25s ease-out; }
.ac-msg.bot { align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); border-bottom-left-radius: 5px; }
.ac-msg.me { align-self: flex-end; color: #fff; border-bottom-right-radius: 5px;
             background: linear-gradient(135deg, #FF2E4D, #C8204F 60%, #7A2CC9); box-shadow: 0 6px 20px -8px rgba(255,46,77,.6); }
.ac-msg b { font-weight: 600; }
.ac-note { align-self: flex-start; font-size: 11.5px; color: var(--dim, #5A5A62); margin-top: -4px; }
@keyframes ac-in { from { opacity: 0; transform: translateY(8px); } }

/* กำลังคิด: ตัวอักษรไล่แสง */
.ac-typing span { font-weight: 500; background: linear-gradient(90deg, #6b6b73 0%, #6b6b73 35%, #fff 50%, #FF8FA3 58%, #6b6b73 70%, #6b6b73 100%);
                  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
                  animation: ac-shimmer 1.6s linear infinite; }
.ac-typing span::after { content: "…"; }
@keyframes ac-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.ac-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.ac-quick button { font: 400 13px var(--body, sans-serif); padding: 7px 12px; border-radius: 999px; cursor: pointer;
                   background: rgba(255,255,255,.04); color: var(--text, #F4F4F6); border: 1px solid rgba(255,255,255,.14);
                   transition: border-color .2s, background .2s; }
.ac-quick button:hover { border-color: rgba(255,90,120,.7); background: rgba(255,46,77,.1); }

/* ช่องพิมพ์: ขอบไล่สีตอนโฟกัส */
.ac-form { position: relative; display: flex; gap: 8px; margin: 4px 12px 8px; padding: 6px 6px 6px 14px; border-radius: 16px;
           background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.ac-form:focus-within { box-shadow: inset 0 0 0 1px transparent; }
.ac-form::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--ac-grad);
                   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                   -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s;
                   animation: ac-spin 4s linear infinite; pointer-events: none; }
.ac-form:focus-within::before { opacity: 1; }
.ac-form textarea { flex: 1; resize: none; max-height: 110px; min-height: 36px; padding: 8px 0; border: 0;
                    background: transparent; color: inherit; font: 400 14.5px/1.45 var(--body, sans-serif); outline: none; }
.ac-form button { width: 38px; height: 38px; align-self: flex-end; border: 0; border-radius: 12px; cursor: pointer;
                  display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #FF2E4D, #8A5CFF); }
.ac-form button:disabled { opacity: .35; cursor: default; }
.ac-form button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ac-foot { text-align: center; font-size: 11px; color: var(--dim, #5A5A62); padding: 0 12px 10px; }

@media (prefers-reduced-motion: reduce) {
  .ac-orb .ring, .ac-orb .glow, .ac-orb .spark, .ac-panel::before, .ac-form::before, .ac-typing span { animation: none; }
  .ac-panel, .ac-msg { transition: none; animation: none; }
}