/* In-app feedback. Fixed on the body so it paints above #app: the trend-day
   card (z-index 81), the tab bar, and toasts. Full-screen gates and modals
   that live outside #app stay above this layer. */

#feedback-root{
  position:fixed;
  inset:0;
  z-index:400;
  pointer-events:none;
}
#feedback-root.open{z-index:400}
#feedback-root .fb-bubble,
#feedback-root .fb-panel,
#feedback-root .fb-backdrop{pointer-events:auto}
#feedback-root [hidden]{display:none !important}

.fb-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  border:0;
  padding:0;
  margin:0;
  background:rgba(4,6,10,0.55);
  cursor:pointer;
}
:is(html.light, body.light) .fb-backdrop{background:rgba(26,18,8,0.28)}

.fb-bubble{
  position:absolute;
  right:12px;
  bottom:calc(var(--tab-bar) + var(--chat-gap) + var(--safe-bottom));
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:var(--r);
  background:var(--surface);
  color:var(--gold-light);
  border:1px solid var(--border-strong);
  box-shadow:0 8px 22px rgba(0,0,0,0.38);
  cursor:pointer;
  touch-action:manipulation;
  z-index:1;
}
.fb-bubble svg{width:22px;height:22px;display:block}
html.layout-tight .fb-bubble{display:flex !important}
#feedback-root.fb-away .fb-bubble{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px) scale(0.92);
}
.fb-bubble:active{transform:scale(0.96)}
.fb-bubble:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
:is(html.light, body.light) .fb-bubble{box-shadow:0 8px 20px rgba(26,18,8,0.12)}

.fb-panel{
  position:absolute;
  right:12px;
  left:12px;
  bottom:calc(var(--tab-bar) + var(--chat-gap) + 44px + 8px + var(--safe-bottom));
  max-width:360px;
  margin-left:auto;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r);
  padding:14px 14px 12px;
  box-shadow:0 18px 50px rgba(0,0,0,0.45);
  max-height:min(420px, calc(100dvh - 168px - var(--safe-bottom)));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:2;
}
.fb-title{
  position:relative;
  z-index:3;
  font-family:var(--font-head);
  font-size:22px;
  font-weight:300;
  font-style:italic;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 12px;
}
.fb-title .modal-close{
  position:relative;
  z-index:4;
  flex-shrink:0;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  color:var(--gold);
}
.fb-panel .tabs{margin-bottom:12px}
/* iOS Safari paints <button> with its own text color and can drop `color`
   on :active. The shared .tab.active gold fill also loses to this sheet
   unless the selected color and background are set here. */
.fb-panel .tab{
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  border:0;
  color:#D5CFC6;
  -webkit-text-fill-color:#D5CFC6;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
  transition:none;
}
.fb-panel .tab:active,
.fb-panel .tab:focus{
  background:transparent;
  color:#D5CFC6;
  -webkit-text-fill-color:#D5CFC6;
}
.fb-panel .tab:focus-visible{outline:2px solid var(--gold-light);outline-offset:1px}
.fb-panel .tab.active,
.fb-panel .tab[aria-pressed="true"],
.fb-panel .tab.active:active,
.fb-panel .tab.active:focus,
.fb-panel .tab[aria-pressed="true"]:active,
.fb-panel .tab[aria-pressed="true"]:focus{
  background:var(--gold);
  color:#080c12;
  -webkit-text-fill-color:#080c12;
}
:is(html.light, body.light) .fb-panel .tab,
:is(html.light, body.light) .fb-panel .tab:active,
:is(html.light, body.light) .fb-panel .tab:focus{
  color:var(--text2);
  -webkit-text-fill-color:var(--text2);
}
:is(html.light, body.light) .fb-panel .tab.active,
:is(html.light, body.light) .fb-panel .tab[aria-pressed="true"],
:is(html.light, body.light) .fb-panel .tab.active:active,
:is(html.light, body.light) .fb-panel .tab.active:focus,
:is(html.light, body.light) .fb-panel .tab[aria-pressed="true"]:active,
:is(html.light, body.light) .fb-panel .tab[aria-pressed="true"]:focus{
  background:var(--gold);
  color:#080c12;
  -webkit-text-fill-color:#080c12;
}
.fb-panel .field{margin-bottom:10px}
.fb-panel .field textarea{min-height:96px}
.fb-hint{
  letter-spacing:0.04em;
  text-transform:none;
  color:var(--text3);
  font-weight:400;
}
.fb-count{
  margin:-4px 0 10px;
  text-align:right;
  font-size:0.75rem;
  letter-spacing:0.08em;
  color:var(--text3);
}
.fb-hp{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.fb-send[disabled]{opacity:0.55;cursor:default}
.fb-status{margin-top:10px}
.fb-thanks{
  font-family:var(--font-head);
  font-style:italic;
  font-weight:400;
  font-size:22px;
  line-height:1.3;
  color:var(--text);
  margin:4px 0 0;
}
.fb-error{
  font-size:13px;
  line-height:1.45;
  color:var(--text2);
  margin:0;
}
.fb-mailto{
  display:inline-block;
  margin-top:6px;
  color:var(--gold);
  font-size:13px;
}

#app.desk-wide ~ #feedback-root .fb-bubble{bottom:calc(16px + var(--safe-bottom))}
#app.desk-wide ~ #feedback-root .fb-panel{bottom:calc(68px + var(--safe-bottom))}
/* Phone sizer is full-bleed. Leave a strip under the scrolling form so the
   bubble does not sit on Long/Short or the entry field. */
@media (max-width:1023px){
  #app.desk-wide #pages{margin-bottom:calc(64px + var(--safe-bottom))}
  #app.desk-wide ~ #feedback-root .fb-bubble{bottom:calc(10px + var(--safe-bottom))}
  #app.desk-wide ~ #feedback-root .fb-panel{bottom:calc(62px + var(--safe-bottom))}
}

@media (max-width:1023px){
  .fb-bubble{
    width:40px;
    height:40px;
    right:8px;
    border-radius:999px;
    transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }
  .fb-bubble svg{width:18px;height:18px}
  .fb-panel{bottom:calc(var(--tab-bar) + var(--chat-gap) + 40px + 12px + var(--safe-bottom))}
}

@media (min-width:1024px){
  .fb-bubble{right:20px;bottom:calc(20px + var(--safe-bottom))}
  .fb-panel{
    right:20px;
    left:auto;
    width:min(360px, calc(100vw - 240px));
    bottom:calc(72px + var(--safe-bottom));
  }
}