#pn-support {
  position:fixed; z-index:60; right:24px; bottom:24px;
  display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:0 20px 0 14px;
  border:0; cursor:pointer;
  border-radius:999px; background:var(--color-accent); color:var(--color-bg);
  box-shadow:var(--shadow-md); text-decoration:none;
  font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:15px;
  transition:background .18s ease, transform .18s ease;
}
#pn-support:hover { background:var(--color-accent-600); color:var(--color-bg); transform:translateY(-2px); }
#pn-support:active { background:var(--color-accent-700); }
#pn-support .pn-support__icon { display:flex; align-items:center; }
#pn-support .pn-support__icon svg { display:block; }
#pn-support .pn-support__badge {
  position:absolute; top:-4px; right:-2px; min-width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 6px;
  border-radius:999px; background:var(--color-accent-2-700); color:var(--color-bg);
  font-family:var(--font-body); font-size:12px; font-weight:700; line-height:1;
  box-shadow:var(--shadow-sm);
}
#pn-support .pn-support__badge[hidden] { display:none; }
.pn-support-panel {
  position:fixed; z-index:200; right:24px; bottom:84px;
  width:min(380px, calc(100vw - 32px));
  height:min(560px, calc(100vh - 140px));
  max-height:min(560px, calc(100vh - 140px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--color-bg); color:var(--color-text);
  border:1px solid var(--color-divider); border-radius:var(--radius-lg);
  box-shadow:0 18px 50px color-mix(in srgb, #2e2b25 28%, transparent);
  font-family:var(--font-body);
}
.pn-support-panel[hidden] { display:none; }
.pn-support-panel__head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-4); border-bottom:1px solid var(--color-divider);
  background:var(--color-surface);
}
.pn-support-panel__title {
  margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:16px;
}
.pn-support-panel__sub { margin:2px 0 0; font-size:13px; color:var(--color-neutral-700); }
.pn-support-panel__close {
  flex:none; width:32px; height:32px; display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:999px; background:transparent; color:var(--color-neutral-700);
}
.pn-support-panel__close:hover { background:var(--color-neutral-200); color:var(--color-text); }
.pn-support-panel__log {
  flex:1 1 auto; overflow-y:auto; padding:var(--space-4);
  display:flex; flex-direction:column; gap:4px;
}
.pn-support-panel__msg.opens { margin-top:var(--space-3); }
.pn-support-panel__log > :first-child { margin-top:auto; }
.pn-support-panel__day + .pn-support-panel__msg.opens { margin-top:var(--space-2); }
.pn-support-panel__intro {
  margin:auto 0; padding:var(--space-4) var(--space-2); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
}
.pn-support-panel__introIcon {
  display:grid; place-items:center; width:52px; height:52px; border-radius:999px;
  background:var(--color-surface); color:var(--color-accent-600);
}
.pn-support-panel__introTitle {
  margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:18px; color:var(--color-text);
}
.pn-support-panel__introText {
  margin:0; max-width:32ch; color:var(--color-neutral-700); font-size:14px; line-height:1.55;
}
.pn-support-panel__day {
  align-self:center; margin-top:var(--space-3); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-neutral-500);
}
.pn-support-panel__msg { display:flex; flex-direction:column; gap:3px; max-width:82%; }
.pn-support-panel__msg.is-guest { align-self:flex-end; align-items:flex-end; }
.pn-support-panel__msg.is-team { align-self:flex-start; align-items:flex-start; }
.pn-support-panel__bubble {
  border-radius:var(--radius-md); padding:9px 13px; font-size:14px; line-height:1.5;
  white-space:pre-wrap; overflow-wrap:anywhere;
  background:var(--color-surface);
}
.pn-support-panel__msg.is-guest .pn-support-panel__bubble {
  background:var(--color-accent); color:var(--color-bg);
}
.pn-support-panel__meta { font-size:11px; color:var(--color-neutral-500); }
.pn-support-panel__sys {
  align-self:center; max-width:92%; margin-top:var(--space-3);
  padding:8px 14px; border-radius:999px; text-align:center;
  background:var(--color-surface); color:var(--color-neutral-700);
  font-size:12.5px; line-height:1.45;
}
.pn-support-panel__sys strong { color:var(--color-text); font-weight:600; }
.pn-support-panel__sysTime {
  display:inline-block; margin-left:6px; color:var(--color-neutral-500); font-size:11px;
}
.pn-support-panel__done {
  border-top:1px solid var(--color-divider); padding:var(--space-4) var(--space-3);
  background:var(--color-surface); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
}
.pn-support-panel__doneTitle {
  margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:15px; color:var(--color-text);
}
.pn-support-panel__doneText {
  margin:0; font-size:13px; color:var(--color-neutral-700); line-height:1.45; max-width:34ch;
}
.pn-support-panel__stars {
  display:inline-flex; gap:4px; margin:var(--space-1) 0;
}
.pn-support-panel__star {
  width:36px; height:36px; padding:0; border:0; cursor:pointer;
  background:transparent; color:var(--color-neutral-400);
  transition:color .15s ease, transform .15s ease;
}
.pn-support-panel__star:hover,
.pn-support-panel__star.is-on { color:var(--color-accent); }
.pn-support-panel__star:hover { transform:translateY(-1px); }
.pn-support-panel__star svg { display:block; width:28px; height:28px; margin:auto; }
.pn-support-panel__thanks {
  margin:0; font-size:13px; color:var(--color-accent-600);
}
.pn-support-panel__again {
  margin-top:var(--space-1); border:0; cursor:pointer;
  padding:10px 18px; border-radius:999px;
  background:var(--color-accent); color:var(--color-bg);
  font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:14px;
  transition:background .18s ease;
}
.pn-support-panel__again:hover { background:var(--color-accent-600); }
.pn-support-panel__form {
  border-top:1px solid var(--color-divider); padding:var(--space-3);
  background:var(--color-surface);
}
.pn-support-panel__form[hidden] { display:none; }
.pn-support-panel__done[hidden] { display:none; }
.pn-support-panel__contact { display:block; margin-bottom:var(--space-2); font-size:12px; }
.pn-support-panel__contact[hidden] { display:none; }
.pn-support-panel__contact span { display:block; color:var(--color-neutral-700); margin-bottom:4px; }
.pn-support-panel__contact input {
  width:100%; box-sizing:border-box; font:inherit; font-size:14px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--color-divider); background:var(--color-bg); color:var(--color-text);
}
.pn-support-panel__row { display:flex; align-items:flex-end; gap:var(--space-2); }
.pn-support-panel__row textarea {
  flex:1 1 auto; resize:none; font:inherit; font-size:14px; line-height:1.45;
  min-height:40px; max-height:120px; padding:10px 14px;
  border-radius:var(--radius-md); border:1px solid var(--color-divider);
  background:var(--color-bg); color:var(--color-text);
}
.pn-support-panel__contact input:focus, .pn-support-panel__row textarea:focus {
  outline:none; border-color:var(--color-accent);
}
.pn-support-panel__send {
  flex:none; width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:999px; background:var(--color-accent); color:var(--color-bg);
  transition:background .18s ease;
}
.pn-support-panel__send:hover { background:var(--color-accent-600); }
@media (max-width:780px) {
  #pn-support { right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); min-height:44px; padding:0 16px 0 12px; font-size:14px; }
  .pn-support-panel {
    right:0; left:0; top:0; bottom:auto;
    height:100vh; height:100dvh;
    width:auto; max-height:none; border-radius:0; border:0;
  }
  .pn-support-panel__head { padding-top:calc(var(--space-4) + env(safe-area-inset-top)); }
  .pn-support-panel__form,
  .pn-support-panel__done { padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .pn-support-panel__row textarea,
  .pn-support-panel__contact input { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  #pn-support:hover { transform:none; }
  .pn-support-panel__star:hover { transform:none; }
}
.pn-support-panel__photo { display:block; line-height:0; border-radius:var(--radius-md); overflow:hidden; }
.pn-support-panel__photo img {
  display:block; max-width:min(240px, 100%); max-height:280px; object-fit:contain;
  background:var(--color-surface);
}
.pn-support-panel__photo + .pn-support-panel__bubble { margin-top:2px; }
.pn-support-panel__attach {
  flex:none; width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--color-divider); border-radius:999px;
  background:var(--color-bg); color:var(--color-neutral-700);
  transition:color .18s ease, border-color .18s ease;
}
.pn-support-panel__attach:hover { color:var(--color-accent-600); border-color:var(--color-accent); }
.pn-support-panel__attach[hidden] { display:none; }
.pn-support-panel__attached {
  position:relative; display:inline-block; margin-bottom:var(--space-2); line-height:0;
}
.pn-support-panel__attached[hidden] { display:none; }
.pn-support-panel__attached img {
  width:64px; height:64px; object-fit:cover;
  border-radius:var(--radius-md); border:1px solid var(--color-divider);
}
.pn-support-panel__unattach {
  position:absolute; top:-6px; right:-6px; width:22px; height:22px;
  display:grid; place-items:center; padding:0; cursor:pointer;
  border:0; border-radius:999px; background:var(--color-text); color:var(--color-bg);
  box-shadow:var(--shadow-sm);
}