#hai-ewa-widget {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--hai-text, #fff7ed);
}
#hai-ewa-widget * { box-sizing: border-box; }
.hai-ewa__bubble {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(255, 213, 161, .58);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 242, 218, .56), transparent 24%),
    linear-gradient(135deg, rgba(255, 209, 102, .98), rgba(255, 122, 89, .90) 58%, rgba(143, 57, 37, .94));
  box-shadow:
    0 28px 96px rgba(0, 0, 0, .62),
    0 0 0 9px rgba(255, 122, 89, .12),
    0 0 48px rgba(255, 209, 102, .34),
    inset 0 1px 0 rgba(255,255,255,.36);
  color: #24100b;
  font-weight: 950;
  cursor: pointer;
  overflow: hidden;
  transform: translateZ(0);
}
.hai-ewa__bubble::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: url('/avatars/ewa.jpg') center / cover no-repeat;
  opacity: .86;
  mix-blend-mode: soft-light;
  filter: saturate(1.15) contrast(1.08);
}
.hai-ewa__bubble::after {
  content: "Ewa";
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  padding: 2px 8px 3px;
  border: 1px solid rgba(255, 242, 218, .38);
  border-radius: 999px;
  background: rgba(36, 16, 11, .64);
  color: #fff7ed;
  font-size: 13px;
  letter-spacing: -.04em;
  text-shadow: 0 1px 8px rgba(0,0,0,.58);
}
.hai-ewa__bubble:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(255, 230, 190, .88);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, .68),
    0 0 0 12px rgba(255, 122, 89, .15),
    0 0 68px rgba(255, 209, 102, .44),
    inset 0 1px 0 rgba(255,255,255,.44);
}
.hai-ewa__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: transparent;
}
.hai-ewa__ping {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(36,16,11,.66);
  border-radius: 999px;
  background: #74f0b4;
  box-shadow: 0 0 0 7px rgba(116, 240, 180, .17);
}
.hai-ewa.is-busy .hai-ewa__ping {
  background: #ffd166;
  animation: haiPulse 1s infinite;
}
.hai-ewa__panel {
  position: absolute;
  right: 0;
  bottom: 92px;
  width: min(430px, calc(100vw - 28px));
  max-height: min(690px, calc(100dvh - 124px));
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 213, 161, .28);
  border-radius: 26px;
  background:
    radial-gradient(460px 260px at 100% 0%, rgba(255, 122, 89, .16), transparent 60%),
    linear-gradient(180deg, rgba(45, 29, 23, .96), rgba(14, 9, 9, .985));
  box-shadow: 0 30px 130px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: auto;
}
.hai-ewa__panel[hidden] { display: none; }
.hai-ewa__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hai-ewa__header strong { display: block; font-size: 19px; letter-spacing: -.045em; color: var(--hai-cream, #fff2da); }
.hai-ewa__header span { display: block; margin-top: 2px; color: var(--hai-muted, #d8bca0); font-size: 12px; line-height: 1.35; }
.hai-ewa__controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.hai-ewa__select { grid-column: 1/-1; }
.hai-ewa__select,
.hai-ewa__input,
.hai-ewa__mode,
.hai-ewa__ghost,
.hai-ewa__run {
  border: 1px solid rgba(255, 213, 161, .20);
  border-radius: 14px;
  background: rgba(255, 242, 218, .06);
  color: var(--hai-text, #fff7ed);
}
.hai-ewa__select,
.hai-ewa__mode,
.hai-ewa__ghost,
.hai-ewa__run { height: 40px; padding: 0 10px; }
.hai-ewa__mode,
.hai-ewa__ghost,
.hai-ewa__run { cursor: pointer; font-weight: 850; }
.hai-ewa__mode:hover,
.hai-ewa__ghost:hover { border-color: rgba(255, 213, 161, .46); background: rgba(255, 122, 89, .12); }
.hai-ewa__mode.is-active {
  border-color: rgba(255, 214, 156, .66);
  background: linear-gradient(135deg, rgba(255, 209, 102, .92), rgba(255, 122, 89, .86));
  color: #24100b;
}
.hai-ewa__input {
  width: 100%;
  min-height: 124px;
  resize: vertical;
  padding: 12px;
  line-height: 1.45;
  outline: none;
  background: rgba(10, 7, 7, .42);
}
.hai-ewa__input:focus { border-color: rgba(255, 179, 102, .58); box-shadow: 0 0 0 4px rgba(255, 122, 89, .12); }
.hai-ewa__footer { display: flex; gap: 8px; flex-wrap: wrap; }
.hai-ewa__ghost { flex: 1 1 145px; color: #ffe4bc; }
.hai-ewa__run {
  flex: 2 1 100%;
  min-width: 100%;
  min-height: 48px;
  border-color: rgba(255, 241, 208, .72);
  background: linear-gradient(135deg, var(--hai-amber, #ffd166), var(--hai-copper, #ff7a59) 75%);
  color: #24100b;
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(255, 122, 89, .22), inset 0 1px 0 rgba(255,255,255,.34);
}
.hai-ewa__output {
  min-height: 108px;
  max-height: 240px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255, 213, 161, .16);
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  white-space: pre-wrap;
  overflow: auto;
  color: #ffe9c8;
  font: 12px/1.45 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}
@keyframes haiPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (max-width: 560px) {
  #hai-ewa-widget { right: 14px; bottom: 14px; }
  .hai-ewa__bubble { width: 72px; height: 72px; }
  .hai-ewa__panel { width: calc(100vw - 28px); bottom: 86px; }
  .hai-ewa__controls { grid-template-columns: 1fr; }
  .hai-ewa__select { grid-column: auto; }
}


body.hai-ewa-page-editing [contenteditable="true"].hai-ewa-editable {
  outline: 2px dashed rgba(116, 240, 180, .68);
  outline-offset: 3px;
  border-radius: 8px;
  background: rgba(116, 240, 180, .08);
  cursor: text;
}
body.hai-ewa-page-editing [contenteditable="true"].hai-ewa-editable:focus {
  outline-color: rgba(255, 209, 102, .95);
  background: rgba(255, 209, 102, .10);
  box-shadow: 0 0 0 5px rgba(255, 209, 102, .10);
}
.hai-ewa__edit-footer {
  border-top: 1px solid rgba(255, 213, 161, .12);
  padding-top: 8px;
}
