/* ytm_chat.css — khung chat Trợ lý ảo Y Tế Mới (màu hồng của trang chủ) */
#ytm-chat { --ytc-pk: var(--pk, #db2777); --ytc-pk-dark: var(--pk-dark, #b81d62); --ytc-soft: var(--pk-soft, #fdf2f8); --ytc-line: var(--pk-line, #f9c6df);
  --ytc-ink: var(--ink, #1e293b); --ytc-muted: var(--muted, #64748b);
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--ytc-ink); }
#ytm-chat *, #ytm-chat *::before, #ytm-chat *::after { box-sizing: border-box; }
#ytm-chat [hidden] { display: none !important; }

/* Nút mở */
#ytm-chat .ytc-btn { position: fixed; right: 20px; bottom: 20px; z-index: 1200; width: 60px; height: 60px; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--ytc-pk), var(--ytc-pk-dark)); color: #fff; box-shadow: 0 8px 24px rgba(184, 29, 98, .38);
  display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; }
#ytm-chat .ytc-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 28px rgba(184, 29, 98, .45); }
#ytm-chat .ytc-btn:focus-visible, #ytm-chat .ytc-ic:focus-visible, #ytm-chat .ytc-send:focus-visible, #ytm-chat .ytc-chip:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
#ytm-chat .ytc-btn svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }
#ytm-chat .ytc-btn svg circle { fill: var(--ytc-pk-dark); }
#ytm-chat .ytc-btn.ytc-hide { display: none; }
#ytm-chat .ytc-tip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: #fff; color: var(--ytc-pk-dark);
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 14px rgba(15, 23, 42, .15); opacity: 0; pointer-events: none; transition: opacity .15s; }
#ytm-chat .ytc-btn:hover .ytc-tip, #ytm-chat .ytc-btn:focus-visible .ytc-tip { opacity: 1; }

/* Khung chat */
#ytm-chat .ytc-panel { position: fixed; right: 20px; bottom: 20px; z-index: 1201; width: 390px; max-width: calc(100vw - 24px); height: min(620px, calc(100vh - 40px));
  display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(15, 23, 42, .3); border: 1px solid var(--ytc-line); }
#ytm-chat .ytc-head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 12px 16px; color: #fff; background: linear-gradient(135deg, var(--ytc-pk), var(--ytc-pk-dark)); }
#ytm-chat .ytc-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#ytm-chat .ytc-ttl b { font-size: 16px; line-height: 1.25; }
#ytm-chat .ytc-ttl small { font-size: 12px; opacity: .9; }
#ytm-chat .ytc-ic { width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#ytm-chat .ytc-ic:hover { background: rgba(255, 255, 255, .3); }
#ytm-chat .ytc-ic.ytc-on { background: #fff; color: var(--ytc-pk-dark); }
#ytm-chat .ytc-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#ytm-chat .ytc-log { flex: 1; overflow-y: auto; padding: 14px 14px 6px; background: #fcf7fa; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
#ytm-chat .ytc-msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; word-wrap: break-word; overflow-wrap: anywhere; }
#ytm-chat .ytc-bot { align-self: flex-start; background: #fff; border: 1px solid var(--ytc-line); border-top-left-radius: 4px; }
#ytm-chat .ytc-user { align-self: flex-end; background: var(--ytc-pk); color: #fff; border-top-right-radius: 4px; white-space: pre-wrap; }
#ytm-chat .ytc-bot p { margin: 0 0 6px; } #ytm-chat .ytc-bot p:last-child { margin-bottom: 0; }
#ytm-chat .ytc-bot ul { margin: 2px 0 6px; padding-left: 20px; } #ytm-chat .ytc-bot li { margin: 2px 0; }
#ytm-chat .ytc-listen { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 4px 0 -2px; padding: 0; border: 1px solid var(--ytc-line); border-radius: 50%; background: var(--ytc-soft); color: var(--ytc-pk-dark); cursor: pointer; }
#ytm-chat .ytc-listen:hover { background: #fff; border-color: var(--ytc-pk); }
#ytm-chat .ytc-listen svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ytm-chat .ytc-listen:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
#ytm-chat .ytc-lbl { display: none; margin-left: 8px; font-size: 12.5px; color: var(--ytc-pk-dark); vertical-align: middle; }
#ytm-chat .ytc-load + .ytc-lbl, #ytm-chat .ytc-play + .ytc-lbl { display: inline; }
#ytm-chat .ytc-listen.ytc-load { border-color: var(--ytc-pk); }
#ytm-chat .ytc-listen.ytc-load svg { display: none; }
#ytm-chat .ytc-listen.ytc-load::after { content: ''; width: 14px; height: 14px; border: 2px solid var(--ytc-line); border-top-color: var(--ytc-pk); border-radius: 50%; animation: ytcs .8s linear infinite; }
#ytm-chat .ytc-listen.ytc-play { background: var(--ytc-pk); border-color: var(--ytc-pk); color: #fff; animation: ytcw 1.3s infinite; }
@keyframes ytcs { to { transform: rotate(360deg); } }
@keyframes ytcw { 0% { box-shadow: 0 0 0 0 rgba(219, 39, 119, .45); } 100% { box-shadow: 0 0 0 10px rgba(219, 39, 119, 0); } }
#ytm-chat .ytc-err { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
#ytm-chat .ytc-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
#ytm-chat .ytc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ytc-pk); opacity: .35; animation: ytcb 1.1s infinite ease-in-out; }
#ytm-chat .ytc-dots i:nth-child(2) { animation-delay: .15s; } #ytm-chat .ytc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ytcb { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
#ytm-chat .ytc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#ytm-chat .ytc-chips { padding: 6px 14px 10px; background: #fcf7fa; display: flex; flex-wrap: wrap; gap: 7px; }
#ytm-chat .ytc-chip { border: 1px solid var(--ytc-line); background: #fff; color: var(--ytc-pk-dark); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
#ytm-chat .ytc-chip:hover { background: var(--ytc-soft); border-color: var(--ytc-pk); }

#ytm-chat .ytc-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ytc-line); background: #fff; }
#ytm-chat .ytc-form textarea { flex: 1; resize: none; border: 1px solid #e2e8f0; border-radius: 12px; padding: 9px 12px; font: inherit; line-height: 1.4; max-height: 110px; color: var(--ytc-ink); background: #fff; }
#ytm-chat .ytc-form textarea:focus { outline: 2px solid var(--ytc-pk); border-color: transparent; }
#ytm-chat .ytc-form textarea:disabled { background: #f8fafc; }
#ytm-chat .ytc-send { width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--ytc-pk); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
#ytm-chat .ytc-send:hover:not(:disabled) { background: var(--ytc-pk-dark); } #ytm-chat .ytc-send:disabled { opacity: .5; cursor: default; }
#ytm-chat .ytc-send svg { width: 20px; height: 20px; fill: currentColor; }
#ytm-chat .ytc-mic { width: 42px; height: 42px; border: 1px solid var(--ytc-line); border-radius: 12px; background: #fff; color: var(--ytc-pk-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
#ytm-chat .ytc-mic:hover { background: var(--ytc-soft); }
#ytm-chat .ytc-mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ytm-chat .ytc-mic.ytc-on { background: #dc2626; border-color: #dc2626; color: #fff; animation: ytcp 1.2s infinite; }
#ytm-chat .ytc-mic:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
@keyframes ytcp { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); } 100% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); } }
#ytm-chat .ytc-note { margin: 0; padding: 0 14px 10px; font-size: 11.5px; line-height: 1.4; color: var(--ytc-muted); background: #fff; }

/* Điện thoại: khung chiếm gần hết màn hình */
@media (max-width: 560px) {
  #ytm-chat .ytc-btn { right: 14px; bottom: 14px; width: 56px; height: 56px; }
  #ytm-chat .ytc-tip { display: none; }
  #ytm-chat .ytc-panel { right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; height: min(88vh, 100dvh - 24px); border-radius: 18px 18px 0 0; }
  #ytm-chat .ytc-form textarea { font-size: 16px; }   /* tránh iOS tự phóng to khi bấm vào ô nhập */
}
@media (prefers-reduced-motion: reduce) { #ytm-chat .ytc-btn, #ytm-chat .ytc-dots i, #ytm-chat .ytc-mic, #ytm-chat .ytc-listen, #ytm-chat .ytc-log { transition: none; animation: none; scroll-behavior: auto; } }