/* Safarly support chat (public site). Glass panel, brand colours. Phone first: full-screen sheet; desktop: floating card. All rules start with .sfh */
.sfh { --h-bg: #050a1a; --h-glass: linear-gradient(165deg, rgba(26, 46, 100, .78), rgba(7, 14, 36, .92)); --h-line: rgba(150, 190, 255, .2); --h-text: #e9eefb; --h-soft: #b4c1de; --h-neon: #4cc9ff; --h-gold: linear-gradient(135deg, #f6e2b0, #e3bd72 45%, #c99a4c);
  font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--h-text); font-size: 15px; line-height: 1.5; }
.sfh *, .sfh *::before, .sfh *::after { box-sizing: border-box; }
.sfh button { font: inherit; color: inherit; cursor: pointer; }
.sfh [hidden] { display: none !important; }

/* launcher */
.sfh-launch { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 60; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: linear-gradient(145deg, #1b3a86, #0a1a44); color: #fff; display: grid; place-items: center; box-shadow: 0 16px 36px -10px rgba(10, 30, 90, .9), 0 0 0 1px rgba(76, 201, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; -webkit-tap-highlight-color: transparent; }
.sfh-launch:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 22px 44px -10px rgba(76, 201, 255, .55), 0 0 0 1px rgba(76, 201, 255, .6); }
.sfh-launch svg { width: 26px; height: 26px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.sfh-launch .x { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.5); }
.sfh.open .sfh-launch .c { opacity: 0; transform: rotate(90deg) scale(.5); }
.sfh.open .sfh-launch .x { opacity: 1; transform: none; }
.sfh-launch::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--h-neon); opacity: 0; animation: sfhping 3s ease-out 2s 3; }
@keyframes sfhping { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.sfh-dot { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #ff4d5e; color: #fff; font: 800 12px/22px "Jakarta", sans-serif; text-align: center; border: 2px solid #050a1a; animation: sfhpop .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes sfhpop { from { transform: scale(0); } }
.sfh-tip { position: fixed; right: 84px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 60; max-width: 230px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--h-glass); border: 1px solid var(--h-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); font-weight: 600; font-size: 14px; animation: sfhin .5s cubic-bezier(.2, .8, .2, 1) both; cursor: pointer; }
@keyframes sfhin { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.sfh.open .sfh-tip { display: none; }

/* panel */
.sfh-panel { position: fixed; z-index: 70; inset: 0; display: flex; flex-direction: column; background: var(--h-glass), var(--h-bg); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility 0s .45s; overflow: hidden; }
.sfh.open .sfh-panel { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.sfh-panel::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 420px; height: 420px; background: radial-gradient(circle, rgba(76, 201, 255, .22), transparent 65%); pointer-events: none; }
@media (min-width: 640px) {
  .sfh-panel { inset: auto 20px 20px auto; width: 392px; height: min(660px, calc(100dvh - 40px)); border-radius: 26px; border: 1px solid var(--h-line); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(76, 201, 255, .12); transform: translateY(24px) scale(.96); transform-origin: bottom right; }
  .sfh.open .sfh-launch { opacity: 0; pointer-events: none; }
}

.sfh-head { position: relative; display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top)) 14px 14px; border-bottom: 1px solid var(--h-line); }
.sfh-logo { width: 40px; height: 40px; border-radius: 13px; background: var(--h-gold); display: grid; place-items: center; color: #1a1204; flex: none; box-shadow: 0 6px 18px -6px rgba(227, 189, 114, .7); }
.sfh-logo svg { width: 22px; height: 22px; }
.sfh-title { flex: 1; min-width: 0; line-height: 1.25; }
.sfh-title b { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfh-title small { display: flex; align-items: center; gap: 6px; color: var(--h-soft); font-size: 12.5px; }
.sfh-title small i { width: 8px; height: 8px; border-radius: 50%; background: #8e9cbd; flex: none; }
.sfh-title small.on i { background: #3be07c; box-shadow: 0 0 0 0 rgba(59, 224, 124, .7); animation: sfhlp 1.8s infinite; }
@keyframes sfhlp { 70% { box-shadow: 0 0 0 7px rgba(59, 224, 124, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 224, 124, 0); } }
.sfh-ib { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--h-line); background: rgba(255, 255, 255, .06); display: grid; place-items: center; flex: none; transition: background .2s; }
.sfh-ib:hover { background: rgba(255, 255, 255, .14); }
.sfh-ib svg { width: 18px; height: 18px; }
.sfh-menu { position: absolute; top: calc(62px + env(safe-area-inset-top)); right: 12px; z-index: 5; min-width: 200px; padding: 6px; border-radius: 16px; background: rgba(9, 18, 44, .96); border: 1px solid var(--h-line); box-shadow: 0 24px 50px -16px #000; animation: sfhin .25s both; }
[dir=rtl] .sfh-menu { right: auto; left: 12px; }
.sfh-menu button, .sfh-menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; background: none; border-radius: 11px; text-align: start; color: var(--h-text); text-decoration: none; font-weight: 600; font-size: 14px; }
.sfh-menu button:hover, .sfh-menu a:hover { background: rgba(255, 255, 255, .08); }
.sfh-menu .sep { height: 1px; background: var(--h-line); margin: 4px 6px; }
.sfh-menu .on { color: #f6e2b0; }

.sfh-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px; scrollbar-width: thin; scrollbar-color: rgba(150, 190, 255, .3) transparent; }
.sfh-body::-webkit-scrollbar { width: 6px; } .sfh-body::-webkit-scrollbar-thumb { background: rgba(150, 190, 255, .25); border-radius: 9px; }

/* home */
.sfh-hello { padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: rgba(255, 255, 255, .08); border: 1px solid var(--h-line); animation: sfhin .5s .1s both; font-size: 15.5px; font-weight: 600; }
[dir=rtl] .sfh-hello { border-radius: 20px 20px 6px 20px; }
.sfh-hello small { display: block; margin-top: 6px; font-weight: 500; font-size: 13px; color: var(--h-soft); }
.sfh-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.sfh-chip { display: flex; align-items: center; gap: 9px; padding: 13px 12px; border-radius: 16px; border: 1px solid var(--h-line); background: rgba(255, 255, 255, .06); font-weight: 700; font-size: 14px; text-align: start; transition: transform .2s, background .2s, border-color .2s; animation: sfhin .5s both; }
.sfh-chip:nth-child(2) { animation-delay: .05s; } .sfh-chip:nth-child(3) { animation-delay: .1s; } .sfh-chip:nth-child(4) { animation-delay: .15s; } .sfh-chip:nth-child(5) { animation-delay: .2s; } .sfh-chip:nth-child(6) { animation-delay: .25s; }
.sfh-chip:hover { transform: translateY(-2px); background: rgba(76, 201, 255, .12); border-color: rgba(76, 201, 255, .5); }
.sfh-chip span { font-size: 19px; line-height: 1; }
.sfh-chip.human { grid-column: 1 / -1; background: var(--h-gold); color: #1a1204; border-color: transparent; justify-content: center; }
.sfh-h { margin: 20px 2px 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--h-soft); }
.sfh-past { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-bottom: 8px; border-radius: 16px; border: 1px solid var(--h-line); background: rgba(255, 255, 255, .05); text-align: start; transition: background .2s; }
.sfh-past:hover { background: rgba(255, 255, 255, .1); }
.sfh-past .tx { flex: 1; min-width: 0; }
.sfh-past b { display: block; font-size: 14px; }
.sfh-past small { display: block; color: var(--h-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.sfh-st { font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); white-space: nowrap; }
.sfh-st.open { background: rgba(255, 193, 7, .18); color: #ffd36b; } .sfh-st.progress { background: rgba(76, 201, 255, .18); color: #7fdcff; } .sfh-st.done { background: rgba(59, 224, 124, .16); color: #6fe9a3; }
.sfh-un { background: #ff4d5e; color: #fff; border-radius: 99px; padding: 1px 8px; font-size: 12px; font-weight: 800; }
.sfh-contact { display: flex; gap: 8px; margin-top: 14px; }
.sfh-contact a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border-radius: 16px; text-decoration: none; font-weight: 700; font-size: 14px; color: #fff; }
.sfh-contact .wa { background: #19b85a; box-shadow: 0 10px 24px -12px #19b85a; }
.sfh-contact .tel { background: rgba(255, 255, 255, .1); border: 1px solid var(--h-line); }
.sfh-contact svg { width: 18px; height: 18px; }
.sfh-closed { margin-top: 12px; padding: 11px 13px; border-radius: 14px; background: rgba(227, 189, 114, .12); border: 1px solid rgba(227, 189, 114, .35); color: #f6e2b0; font-size: 13px; }

/* thread */
.sfh-msgs { display: flex; flex-direction: column; gap: 8px; }
.sfh-b { max-width: 84%; padding: 10px 14px 6px; border-radius: 20px; font-size: 15px; overflow-wrap: anywhere; animation: sfhin .3s both; position: relative; }
.sfh-b p { margin: 0; }
.sfh-b a { color: #9be7ff; }
.sfh-b time { display: flex; justify-content: flex-end; align-items: center; gap: 5px; font-size: 11px; opacity: .65; margin-top: 3px; }
.sfh-b.in { align-self: flex-start; background: rgba(255, 255, 255, .1); border: 1px solid var(--h-line); border-bottom-left-radius: 6px; }
[dir=rtl] .sfh-b.in { border-bottom-left-radius: 20px; border-bottom-right-radius: 6px; }
.sfh-b.in .by { display: block; font-size: 11.5px; font-weight: 800; color: #f6e2b0; margin-bottom: 2px; }
.sfh-b.in.bot .by { color: #7fdcff; }
.sfh-b.me { align-self: flex-end; background: linear-gradient(145deg, #2a6df0, #1b46b8); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 8px 18px -10px #1b46b8; }
[dir=rtl] .sfh-b.me { border-bottom-right-radius: 20px; border-bottom-left-radius: 6px; }
.sfh-b.me a { color: #fff; }
.sfh-b.sys { align-self: center; max-width: 92%; background: none; border: 0; text-align: center; font-size: 12.5px; color: var(--h-soft); padding: 2px 6px; }
.sfh-b.sys time { display: none; }
.sfh-b img { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; margin-bottom: 4px; }
.sfh-b .fl { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: inherit; text-decoration: none; }
.sfh-tk { letter-spacing: -3px; font-size: 12px; }
.sfh-tk.seen { color: #7bf2b0; opacity: 1; }
.sfh-pend { opacity: .6; }
.sfh-type { display: inline-flex; gap: 4px; padding: 12px 15px; border-radius: 18px; background: rgba(255, 255, 255, .1); align-self: flex-start; }
.sfh-type i { width: 7px; height: 7px; border-radius: 50%; background: #9be7ff; animation: sfhb 1s infinite; }
.sfh-type i:nth-child(2) { animation-delay: .15s; } .sfh-type i:nth-child(3) { animation-delay: .3s; }
@keyframes sfhb { 50% { transform: translateY(-5px); opacity: .45; } }
.sfh-card { margin: 12px 0; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid var(--h-line); animation: sfhin .4s both; }
.sfh-card.center { text-align: center; }
.sfh-ib[data-small] { width: 42px; height: 42px; }
.sfh-card h4 { margin: 0 0 4px; font-size: 15px; }
.sfh-card p { margin: 0 0 10px; color: var(--h-soft); font-size: 13.5px; }
.sfh-card input, .sfh-card textarea { width: 100%; margin-bottom: 8px; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--h-line); background: rgba(5, 10, 26, .6); color: var(--h-text); font: inherit; font-size: 15px; }
.sfh-card input:focus, .sfh-card textarea:focus { outline: 2px solid var(--h-neon); outline-offset: 1px; }
.sfh-go { width: 100%; padding: 13px; border: 0; border-radius: 14px; background: var(--h-gold); color: #1a1204; font-weight: 800; }
.sfh-stars { display: flex; gap: 6px; justify-content: center; margin: 8px 0 12px; }
.sfh-stars button { border: 0; background: none; font-size: 36px; line-height: 1; color: rgba(255, 255, 255, .25); transition: transform .15s, color .15s; padding: 2px; }
.sfh-stars button.on { color: #ffc93c; transform: scale(1.12); }

/* composer */
.sfh-foot { position: relative; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--h-line); background: rgba(5, 10, 26, .45); }
.sfh-row { display: flex; align-items: flex-end; gap: 8px; }
.sfh-row textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 12px 16px; border-radius: 22px; border: 1px solid var(--h-line); background: rgba(255, 255, 255, .08); color: var(--h-text); font: inherit; font-size: 16px; line-height: 1.35; }
.sfh-row textarea::placeholder { color: #8e9cbd; }
.sfh-row textarea:focus { outline: 2px solid var(--h-neon); outline-offset: 0; }
.sfh-send { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--h-gold); color: #1a1204; display: grid; place-items: center; flex: none; transition: transform .15s, opacity .2s; }
.sfh-send:active { transform: scale(.9); }
.sfh-send:disabled { opacity: .45; }
.sfh-send svg { width: 20px; height: 20px; }
[dir=rtl] .sfh-send svg { transform: scaleX(-1); }
.sfh-fine { margin: 6px 4px 0; font-size: 11.5px; color: #7d8bac; text-align: center; }
.sfh-fine a { color: #9be7ff; }
.sfh-err { color: #ff8b97; font-size: 13px; margin: 0 0 8px; }
.sfh-lang { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sfh-lang button { padding: 12px; border-radius: 14px; border: 1px solid var(--h-line); background: rgba(255, 255, 255, .06); font-weight: 700; }
.sfh-lang button.on { border-color: #e3bd72; color: #f6e2b0; }

@media (prefers-reduced-motion: reduce) { .sfh *, .sfh *::before, .sfh *::after { animation: none !important; transition: none !important; } }
.sfh-row textarea { overflow-y: auto; scrollbar-width: none; }
.sfh-row textarea::-webkit-scrollbar { display: none; }