/* 윙즈톡: 새빛교회 패밀리 사이트 공용 채팅 단추 (wingstalk.js 와 함께 네 사이트에 복사) */
.wt-root { --wt-navy: #1d3557; --wt-gold: #c08a3e; --wt-line: #e3e8ef; --wt-lift: 0px; font-family: inherit; line-height: 1.5; }
.wt-root *, .wt-root *::before, .wt-root *::after { box-sizing: border-box; }
.wt-face { flex: none; width: 34px; height: 34px; }
.wt-fab { position: fixed; right: 32px; bottom: calc(32px + env(safe-area-inset-bottom) + var(--wt-lift)); z-index: 9000; width: 72px; height: 72px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--wt-navy); font: inherit; font-weight: 700; font-size: 11px; line-height: 1.1; letter-spacing: -.3px; box-shadow: 0 6px 20px rgba(21, 52, 91, .22), 0 0 0 1px rgba(212, 166, 90, .35); cursor: pointer; }
.wt-fab .wt-face { width: 38px; height: 38px; }
.wt-fab:hover { transform: translateY(-1px); }
.wt-fab:focus-visible, .wt-root button:focus-visible, .wt-root a:focus-visible { outline: 3px solid var(--wt-gold); outline-offset: 2px; }
.wt-fab[hidden], .wt-panel[hidden] { display: none; }
.wt-fab .wt-face { animation: wt-bob 3s ease-in-out infinite; }
.wt-panel { position: fixed; right: 18px; bottom: calc(18px + var(--wt-lift)); z-index: 9001; width: 380px; height: min(620px, calc(100vh - 40px - var(--wt-lift))); display: flex; flex-direction: column; background: #fff; color: #23303f; border-radius: 16px; box-shadow: 0 18px 48px rgba(21, 52, 91, .28), 0 0 0 1px var(--wt-line); overflow: hidden; font-size: 15px; text-align: left; }
.wt-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--wt-line); background: linear-gradient(180deg, #fffaf0, #fff); }
.wt-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wt-head strong { color: var(--wt-navy); font-size: 16px; }
.wt-head small { color: #6b7889; font-size: 12px; }
.wt-clear { margin: 0; border: 0; background: none; color: #5b6878; font: inherit; font-size: 13px; cursor: pointer; padding: 8px; }
.wt-close { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #f1f4f8; color: #5b6878; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.wt-list { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fbfcfe; overscroll-behavior: contain; }
.wt-hello { margin: auto 0; text-align: center; color: #4b5868; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wt-hello .wt-face { width: 64px; height: 64px; }
.wt-hello p { margin: 0; white-space: pre-line; word-break: keep-all; }
.wt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.wt-chips button { margin: 0; border: 1px solid #e3d3b2; background: #fffaf0; color: #6e5020; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.wt-next { justify-content: flex-start; margin: 0 0 0 34px; }
.wt-msg { display: flex; gap: 6px; align-items: flex-end; }
.wt-msg .wt-face { width: 28px; height: 28px; }
.wt-msg.user { justify-content: flex-end; }
.wt-bubble { max-width: 84%; padding: 9px 12px; border-radius: 14px; font-size: 15px; background: #fff; box-shadow: 0 0 0 1px var(--wt-line); word-break: keep-all; overflow-wrap: anywhere; }
.wt-bubble p { margin: 0; white-space: pre-wrap; }
.wt-msg.user .wt-bubble { background: var(--wt-navy); color: #fff; box-shadow: none; border-bottom-right-radius: 4px; }
.wt-msg.assistant .wt-bubble { border-bottom-left-radius: 4px; }
.wt-msg.error .wt-bubble { background: #fff6ee; box-shadow: 0 0 0 1px #f2d3b3; }
.wt-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wt-links a { display: inline-block; padding: 6px 10px; border-radius: 999px; background: #eef2f8; color: var(--wt-navy); font-size: 13px; font-weight: 600; text-decoration: none; }
.wt-links a::after { content: ' ↗'; }
.wt-mail { display: block; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--wt-navy); color: #fff; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; }
.wt-mail-note { display: block; margin-top: 5px; color: #6b7889; font-size: 12px; }
.wt-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.wt-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--wt-gold); animation: wt-dot 1s infinite ease-in-out; }
.wt-typing span:nth-child(2) { animation-delay: .15s; }
.wt-typing span:nth-child(3) { animation-delay: .3s; }
.wt-input { display: flex; gap: 8px; align-items: flex-end; margin: 0; padding: 10px 10px 6px; border-top: 1px solid var(--wt-line); background: #fff; }
.wt-input textarea { flex: 1; min-height: 44px; max-height: 120px; margin: 0; resize: none; padding: 10px 12px; border: 1px solid #cfd7e2; border-radius: 12px; background: #fff; color: #23303f; font: inherit; font-size: 16px; line-height: 1.4; field-sizing: content; }
.wt-send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--wt-navy); color: #fff; cursor: pointer; }
.wt-send:disabled { background: #c9d1dc; cursor: default; }
.wt-note { margin: 0; padding: 0 12px max(8px, env(safe-area-inset-bottom)); background: #fff; color: #7a8696; font-size: 11px; line-height: 1.4; }
.wt-face .wt-spark { transform-origin: 50px 9px; animation: wt-spark 2.4s ease-in-out infinite; }
.wt-face .wt-wink { opacity: 0; animation: wt-wink 5s ease-in-out infinite; }
.wt-face .wt-eye { animation: wt-eye 5s ease-in-out infinite; }
@keyframes wt-wink { 0%, 84%, 96%, 100% { opacity: 0 } 86%, 94% { opacity: 1 } }
@keyframes wt-eye { 0%, 84%, 96%, 100% { opacity: 1 } 86%, 94% { opacity: 0 } }
@keyframes wt-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2px) } }
@keyframes wt-spark { 0%, 100% { opacity: .2; transform: scale(.7) } 50% { opacity: 1; transform: scale(1.1) } }
@keyframes wt-dot { 0%, 100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-4px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .wt-root .wt-face, .wt-root .wt-spark, .wt-root .wt-wink, .wt-root .wt-eye, .wt-typing span { animation: none !important; } .wt-face .wt-wink { opacity: 0; } }
@media (max-width: 720px) {
  .wt-fab { right: 20px; bottom: calc(24px + env(safe-area-inset-bottom) + var(--wt-lift)); width: 64px; height: 64px; font-size: 10.5px; }
  .wt-fab .wt-face { width: 34px; height: 34px; }
  .wt-fab { transition: width .2s, height .2s, right .2s; }
  .wt-mini .wt-fab { right: 12px; width: 48px; height: 48px; }
  .wt-mini .wt-fab span { display: none; }
  .wt-mini .wt-fab .wt-face { width: 32px; height: 32px; }
  .wt-panel { left: 0; right: 0; bottom: 0; width: auto; height: min(82dvh, calc(100dvh - 30px)); border-radius: 18px 18px 0 0; }
}
@media print { .wt-root { display: none; } }