:root { --wkh-bottom: 16px; --wkh-accent: #C9A227; --wkh-accent-deep: #8A6D14; }

.wkh-fab {
  position: fixed; right: 16px; z-index: 180;
  bottom: calc(var(--wkh-bottom) + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; cursor: pointer; display: grid; place-items: center; overflow: visible;
  box-shadow: 0 10px 24px rgba(28, 26, 23, .24), 0 2px 6px rgba(28, 26, 23, .14);
  transition: transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.wkh-fab:active { transform: scale(.94); }
.wkh-fab:focus-visible { outline: 3px solid var(--wkh-accent-deep); outline-offset: 3px; }
.wkh-fab::after {
  content: attr(data-peek); position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%); background: #1C1A17; color: #fff; font-size: .78rem;
  font-weight: 600; font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  padding: 6px 10px; border-radius: 999px; white-space: nowrap; opacity: 0;
  pointer-events: none; transition: opacity .25s ease;
}
.wkh-fab.wkh-greet::after {
  white-space: normal; width: max-content; max-width: min(64vw, 250px); text-align: left;
  line-height: 1.35; border-radius: 14px; padding: 9px 12px; font-weight: 500;
}
.wkh-fab.wkh-peek::after { opacity: 1; }
@media (hover: hover) { .wkh-fab:hover::after { opacity: 1; } }
@media (max-width: 760px) { .wkh-fab.wkh-raised { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

.wkh-invite {
  position: fixed; right: 16px; z-index: 181;
  bottom: calc(var(--wkh-bottom) + 68px + env(safe-area-inset-bottom, 0px));
  max-width: min(84vw, 300px); padding: 12px 14px; border-radius: 16px;
  background: #1C1A17; color: #fff;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  box-shadow: 0 12px 28px rgba(28, 26, 23, .32);
  animation: wkh-invite-in .25s ease;
}
@keyframes wkh-invite-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wkh-invite p { margin: 0 0 10px; font-size: .92rem; line-height: 1.35; font-weight: 500; }
.wkh-invite-row { display: flex; gap: 8px; }
.wkh-invite button {
  min-height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 700;
  font-size: .9rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wkh-invite-go { border: 0; background: var(--wkh-accent); color: #1C1A17; flex: 1; }
.wkh-invite-no { border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; }
.wkh-invite button:disabled { opacity: .6; cursor: default; }
@media (max-width: 760px) { .wkh-invite.wkh-raised { bottom: calc(76px + 68px + env(safe-area-inset-bottom, 0px)); } }

.wkh-orb { position: relative; flex: none; width: 46px; height: 46px; display: block; }
.wkh-orb i.wkh-in {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: #FAF7F1 center / cover no-repeat;
  background-image: url("../img/haniya-avatar-192.webp");
  background-image: image-set(url("../img/haniya-avatar-96.webp") 1x, url("../img/haniya-avatar-192.webp") 2x);
  box-shadow: 0 0 0 1.5px rgba(201, 162, 39, .85), 0 3px 10px rgba(26, 19, 12, .18);
}
.wkh-orb b.wkh-live {
  position: absolute; right: -2px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
  background: #2E9E5B; border: 2.5px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.wkh-orb::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--wkh-accent); opacity: 0;
}
.wkh-orb.wkh-busy::after { animation: wkh-think 1.5s ease-out infinite; }
.wkh-orb.wkh-sm { width: 44px; height: 44px; }
.wkh-orb.wkh-sm b.wkh-live { width: 11px; height: 11px; right: -3px; }
@keyframes wkh-think {
  0%   { transform: scale(.94); opacity: .75; }
  100% { transform: scale(1.22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wkh-orb.wkh-busy::after { animation: none; opacity: .6; } }

.wkh-scrim {
  position: fixed; inset: 0; z-index: 320; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(20, 15, 11, .52);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: wkh-fade .18s ease;
}
.wkh-scrim[hidden] { display: none !important; }
.wkh-panel {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px;
  max-height: 86vh; max-height: 86dvh; background: #fff; color: #1C1A17;
  border-radius: 20px 20px 0 0; box-shadow: 0 -18px 50px rgba(20, 15, 11, .28);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 17px; line-height: 1.5;
  animation: wkh-rise .22s cubic-bezier(.2, .7, .2, 1);
}
@keyframes wkh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wkh-rise { from { transform: translateY(16px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .wkh-scrim, .wkh-panel { animation: none; }
}
@media (min-width: 761px) {
  .wkh-scrim { align-items: flex-end; justify-content: flex-end; padding: 0 20px 20px; }
  .wkh-panel { width: 400px; max-height: min(640px, 82vh); border-radius: 20px; }
}

.wkh-x {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; padding: 0;
  border-radius: 50%; background: #F3ECDF; color: #6B6258; font-size: 1.3rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.wkh-x:hover { background: #E7E0D4; color: #1C1A17; }
.wkh-x:focus-visible { outline: 2px solid var(--wkh-accent-deep); outline-offset: 2px; }

.wkh-head { display: flex; align-items: center; gap: 12px; padding: 18px 56px 12px 16px; border-bottom: 1px solid #E7E0D4; }
.wkh-who { flex: 1; min-width: 0; }
.wkh-who b { display: block; font-size: 1.02rem; line-height: 1.2; font-weight: 700; }
.wkh-who small { display: inline-flex; align-items: center; color: #1F7042; font-size: .76rem; font-weight: 600; }
.wkh-call {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
  border-radius: 999px; border: 1px solid #E7E0D4; background: #fff; color: #B23A1E;
  font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; min-height: 38px;
}
.wkh-call:active { background: #FBEDE8; }
.wkh-call:focus-visible { outline: 2px solid #B23A1E; outline-offset: 2px; }

.wkh-log { flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.wkh-msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; }
.wkh-msg.her { background: #F4EFE7; color: #1C1A17; border-bottom-left-radius: 4px; align-self: flex-start; }
.wkh-msg.you { background: #B23A1E; color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.wkh-typing { display: inline-flex; gap: 4px; align-items: center; }
.wkh-typing i { width: 6px; height: 6px; border-radius: 50%; background: #B0A79A; animation: wkh-blink 1.1s ease-in-out infinite; }
.wkh-typing i:nth-child(2) { animation-delay: .15s; }
.wkh-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wkh-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wkh-typing i { animation: none; opacity: .6; } }

.wkh-sugs { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.wkh-sugs::-webkit-scrollbar { display: none; }
.wkh-sugs button {
  flex: none; font: inherit; font-size: .82rem; padding: 7px 12px; border-radius: 999px;
  border: 1px solid #E7E0D4; background: #fff; color: #4A443C; cursor: pointer; white-space: nowrap;
}
.wkh-sugs button:hover { border-color: var(--wkh-accent); color: #1C1A17; }
.wkh-sugs button:focus-visible { outline: 2px solid var(--wkh-accent-deep); outline-offset: 2px; }

.wkh-bar { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid #E7E0D4; margin: 0; }
.wkh-field {
  flex: 1; display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #E7E0D4;
  border-radius: 26px; padding: 4px 4px 4px 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
.wkh-field:focus-within { border-color: #B23A1E; box-shadow: 0 0 0 3px rgba(178, 58, 30, .10); }
.wkh-field input { flex: 1; border: 0; background: none; font: inherit; font-size: 16px; padding: 11px 0; color: #1C1A17; outline: none; min-width: 0; }
.wkh-field button {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #B23A1E; color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: transform .12s ease, opacity .15s ease;
}
.wkh-field button:active { transform: scale(.93); }
.wkh-field button:disabled { opacity: .35; cursor: default; }
.wkh-field button:focus-visible { outline: 2px solid #B23A1E; outline-offset: 2px; }

.wkh-foot { display: block; text-align: center; margin: 0; padding: 0 16px 16px; font-size: .82rem; color: #6B6258; }

.wkh-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.wkh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }