/*
 * InnR 1 — conversational input surface layered over the existing guest
 * report form. Everything is namespaced `irc-` so it cannot collide with
 * the host page, and all colour comes from the page's existing custom
 * properties so the overlay follows the light/dark theme for free.
 */

/* Must stay below the host page's .emergency-overlay (z-index 60). That
   dialog is a life-safety interrupt and has to render above this one. */
.irc-scrim{
  position:fixed;inset:0;z-index:50;
  background:rgba(7,19,29,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .28s cubic-bezier(.4,0,.2,1)
}
.irc-scrim[data-open="true"]{opacity:1;pointer-events:auto}

.irc-panel{
  position:relative;display:flex;flex-direction:column;
  width:min(460px,100%);height:min(760px,100%);
  background:var(--paper,#f4f1e9);color:var(--ink,#12202c);
  border-radius:26px;overflow:hidden;
  box-shadow:0 30px 90px rgba(7,19,29,.42);
  transform:translateY(16px) scale(.985);
  transition:transform .34s cubic-bezier(.22,1.15,.36,1)
}
.irc-scrim[data-open="true"] .irc-panel{transform:none}

/* ---------- header ---------- */
.irc-head{
  flex:none;background:var(--navy,#0b1724);color:#fbfaf6;
  padding:15px 16px;display:flex;align-items:center;gap:11px
}
.irc-badge{
  display:flex;align-items:center;gap:6px;flex:none;
  background:rgba(174,228,210,.13);border:1px solid rgba(174,228,210,.34);
  color:var(--mint,#aee4d2);border-radius:999px;padding:5px 11px 5px 9px;
  font-size:10.5px;font-weight:700;letter-spacing:.07em
}
.irc-badge svg{width:12px;height:12px;display:block;fill:currentColor}
.irc-head .irc-who{min-width:0;flex:1}
.irc-head .irc-nm{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.irc-head .irc-sub{
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#9fb0c0;margin-top:3px;font-weight:600
}
.irc-x{
  flex:none;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.09);color:#fbfaf6;display:grid;place-items:center;
  transition:background .2s
}
.irc-x:hover{background:rgba(255,255,255,.18)}
.irc-x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* ---------- room context ---------- */
.irc-ctx{
  flex:none;background:var(--surface,#fff);border-bottom:1px solid var(--line,#e4e1d9);
  padding:11px 16px;display:flex;align-items:center;gap:9px
}
.irc-ctx .irc-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--mint-ink,#12634f);box-shadow:0 0 0 3px var(--accent-mint-soft,#d8f7ea)
}
.irc-ctx .irc-ctxt{font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.irc-ctx .irc-ctxt span{color:var(--muted,#616a72);font-weight:500}

/* ---------- stream ---------- */
.irc-stream{
  flex:1;min-height:0;overflow-y:auto;padding:16px 14px 20px;
  display:flex;flex-direction:column;gap:10px
}
/* Column flex items shrink by default. Without this the taller entries
   (notably the summary card) collapse once the thread overflows, pushing
   their own contents outside the panel. */
.irc-stream > *{flex:none}
.irc-row{display:flex;gap:9px;align-items:flex-end;animation:irc-rise .46s cubic-bezier(.22,1.15,.36,1) both}
.irc-row.irc-me{flex-direction:row-reverse}
@keyframes irc-rise{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}
.irc-av{
  width:26px;height:26px;border-radius:9px;flex:none;margin-bottom:2px;
  background:var(--navy,#0b1724);display:grid;place-items:center
}
.irc-av svg{width:13px;height:13px;display:block;fill:var(--mint,#aee4d2)}
.irc-bub{max-width:292px;padding:11px 14px;font-size:14px;line-height:1.5;border-radius:18px}
.irc-bub.irc-ai{
  background:var(--surface,#fff);border:1px solid var(--line,#e4e1d9);
  border-bottom-left-radius:6px;
  box-shadow:0 1px 2px rgba(18,32,44,.05),0 6px 18px rgba(18,32,44,.05)
}
.irc-bub.irc-mine{
  background:var(--navy,#0b1724);color:#fbfaf6;border-bottom-right-radius:6px;
  box-shadow:0 2px 5px rgba(11,23,36,.2)
}

.irc-typing{display:flex;gap:4px;padding:14px 15px}
.irc-typing i{
  width:6px;height:6px;border-radius:50%;background:var(--muted,#616a72);
  animation:irc-bounce 1.25s infinite
}
.irc-typing i:nth-child(2){animation-delay:.16s}
.irc-typing i:nth-child(3){animation-delay:.32s}
@keyframes irc-bounce{
  0%,62%,100%{transform:translateY(0);opacity:.38}
  30%{transform:translateY(-5px);opacity:1}
}

/* ---------- chips ---------- */
.irc-chips{
  display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 2px 35px;
  animation:irc-rise .44s cubic-bezier(.22,1.15,.36,1) both
}
.irc-chip{
  font:inherit;font-size:12.5px;font-weight:600;line-height:1.25;
  padding:8px 13px;border-radius:999px;cursor:pointer;text-align:left;
  background:var(--surface,#fff);color:var(--ink,#12202c);
  border:1px solid var(--stone,#e4e1d9);
  transition:transform .2s cubic-bezier(.22,1.15,.36,1),box-shadow .2s,border-color .2s
}
.irc-chip:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(18,32,44,.11);border-color:var(--bronze,#b47a39)}
.irc-chip:focus-visible{outline:2px solid var(--bronze,#b47a39);outline-offset:2px}
.irc-chip.irc-quiet{background:transparent;border-style:dashed;color:var(--muted,#616a72)}
.irc-chips[data-spent="true"] .irc-chip{
  pointer-events:none;opacity:.42
}

/* ---------- emergency interrupt ---------- */
.irc-alarm{
  margin-left:35px;max-width:292px;border-radius:16px;padding:13px 15px;
  background:var(--status-coral-bg,#ffe0d6);
  border:1px solid rgba(156,54,27,.3);
  animation:irc-rise .46s cubic-bezier(.22,1.15,.36,1) both
}
.irc-alarm b{display:block;color:var(--status-coral-ink,#9c361b);font-size:13.5px;margin-bottom:5px}
.irc-alarm p{margin:0;font-size:12.5px;line-height:1.5;color:var(--status-coral-ink,#9c361b)}

/* ---------- photo preview ---------- */
.irc-shot{
  margin-left:35px;max-width:292px;display:flex;gap:11px;align-items:center;
  padding:10px;border-radius:16px;
  background:var(--surface,#fff);border:1px solid var(--line,#e4e1d9);
  box-shadow:0 1px 2px rgba(18,32,44,.05),0 6px 18px rgba(18,32,44,.05);
  animation:irc-rise .46s cubic-bezier(.22,1.15,.36,1) both
}
.irc-shot img{
  width:54px;height:54px;flex:none;border-radius:11px;object-fit:cover;
  background:var(--stone,#e4e1d9)
}
.irc-doc{
  width:54px;height:54px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-brass-soft,#f4e6cf);color:#7a4d12;
  font-size:10px;font-weight:800;letter-spacing:.06em
}
/* These are spans, so they need to be told to stack. */
.irc-file{display:block;min-width:0;flex:1}
.irc-fname{
  display:block;font-size:12.5px;font-weight:650;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.irc-fsize{display:block;font-size:11px;color:var(--muted,#616a72);margin-top:3px}
.irc-drop{
  flex:none;width:28px;height:28px;border-radius:50%;border:0;cursor:pointer;
  background:transparent;color:var(--muted,#616a72);display:grid;place-items:center;
  transition:background .2s,color .2s
}
.irc-drop:hover{background:var(--status-coral-bg,#ffe0d6);color:var(--status-coral-ink,#9c361b)}
.irc-drop svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* ---------- summary ---------- */
.irc-card{
  margin-left:35px;max-width:292px;border-radius:18px;overflow:hidden;
  background:var(--surface,#fff);border:1px solid var(--line,#e4e1d9);
  box-shadow:0 2px 5px rgba(18,32,44,.06),0 16px 40px rgba(18,32,44,.11);
  animation:irc-rise .5s cubic-bezier(.22,1.15,.36,1) both
}
.irc-cardhead{
  padding:11px 14px;border-bottom:1px solid var(--line,#e4e1d9);
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--muted,#616a72);display:flex;align-items:center;gap:8px
}
.irc-stub{
  margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.06em;
  padding:3px 8px;border-radius:999px;
  background:var(--status-amber-bg,#fff0c7);color:var(--status-amber-ink,#8b5c00)
}
.irc-crow{display:flex;gap:10px;padding:9px 14px;font-size:12.5px;line-height:1.4}
.irc-crow + .irc-crow{border-top:1px solid var(--rule-soft,#e7e2da)}
.irc-ck{flex:none;width:86px;color:var(--muted,#616a72)}
.irc-cv{flex:1;font-weight:600}
.irc-send{
  display:block;width:calc(100% - 28px);margin:12px 14px 14px;
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  padding:12px;border-radius:999px;border:0;
  background:var(--coral,#ef7d61);color:var(--navy,#0b1724);
  box-shadow:0 3px 10px rgba(239,125,97,.4);
  transition:transform .2s cubic-bezier(.22,1.15,.36,1)
}
.irc-send:hover{transform:translateY(-2px)}
.irc-send:disabled{opacity:.5;cursor:default;transform:none}

/* ---------- composer ---------- */
.irc-composer{
  flex:none;border-top:1px solid var(--line,#e4e1d9);
  background:var(--surface,#fff);padding:11px 14px 13px
}
.irc-box{
  display:flex;align-items:center;gap:8px;
  background:var(--paper,#f4f1e9);border:1px solid var(--stone,#e4e1d9);
  border-radius:999px;padding:8px 8px 8px 15px
}
.irc-box input{
  flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;
  font-size:14px;color:var(--ink,#12202c)
}
.irc-box input::placeholder{color:var(--muted,#616a72)}
.irc-go{
  width:32px;height:32px;border-radius:50%;flex:none;border:0;cursor:pointer;
  background:var(--coral,#ef7d61);display:grid;place-items:center;
  transition:transform .2s cubic-bezier(.22,1.15,.36,1)
}
.irc-go:hover{transform:scale(1.07)}
.irc-go svg{width:15px;height:15px;stroke:var(--navy,#0b1724);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.irc-alt{
  display:block;width:100%;margin-top:9px;font:inherit;font-size:12px;font-weight:600;
  background:none;border:0;cursor:pointer;color:var(--muted,#616a72);
  text-decoration:underline;text-underline-offset:3px;padding:3px
}
.irc-alt:hover{color:var(--ink,#12202c)}

/* ---------- launcher ---------- */
.irc-fab{
  position:fixed;right:18px;bottom:18px;z-index:45;
  display:flex;align-items:center;gap:9px;
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  padding:13px 19px;border-radius:999px;border:0;
  background:var(--navy,#0b1724);color:#fbfaf6;
  box-shadow:0 6px 22px rgba(11,23,36,.34);
  transition:transform .22s cubic-bezier(.22,1.15,.36,1),box-shadow .22s
}
.irc-fab:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(11,23,36,.4)}
.irc-fab svg{width:15px;height:15px;fill:var(--mint,#aee4d2)}
.irc-fab[hidden]{display:none}

@media (max-width:560px){
  .irc-scrim{align-items:stretch}
  .irc-panel{width:100%;height:100%;border-radius:0}
  .irc-bub,.irc-card,.irc-alarm{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .irc-scrim,.irc-panel,.irc-row,.irc-chips,.irc-card,.irc-alarm,
  .irc-chip,.irc-send,.irc-go,.irc-fab,.irc-typing i{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important
  }
  .irc-stream{scroll-behavior:auto}
}