/*
  St.Simran Public School — front desk assistant widget.

  A self-contained voice + text assistant that sits on every page. Everything is
  namespaced under .rcp so it cannot collide with page styles, and the whole
  widget is anchored to the bottom of the viewport so it never fights with the
  sticky icon bar or the announcement banner.
*/

.rcp {
  --rcp-ink: #1c1a17;
  --rcp-indigo: #22346e;
  --rcp-indigo-deep: #16224b;
  --rcp-indigo-soft: #2c4ea8;
  --rcp-marigold: #e79a3c;
  --rcp-marigold-warm: #f1a868;
  --rcp-brass: #c9a227;
  --rcp-cream: #fdf9f3;
  --rcp-paper: #fffaf2;
  --rcp-line: rgba(34, 52, 110, 0.14);
  --rcp-muted: #6f6558;

  --rcp-shadow-lift: 0 2px 4px rgba(28, 26, 23, 0.06), 0 12px 28px rgba(28, 26, 23, 0.12),
    0 32px 64px rgba(22, 34, 75, 0.16);
  --rcp-radius: 22px;

  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99500;
  font-family: "Rubik", "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--rcp-ink);
  line-height: 1.55;
}

.rcp *,
.rcp *::before,
.rcp *::after {
  box-sizing: border-box;
}

/**************************/
/* LAUNCHER               */
/**************************/

.rcp-launcher {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 999px;
  background: linear-gradient(135deg, #223570 0%, #2c4ea8 55%, #35407e 100%);
  color: #fff8ec;
  cursor: pointer;
  box-shadow: var(--rcp-shadow-lift);
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.28s ease;
  animation: rcp-arrive 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.5s;
}

.rcp-launcher:hover {
  transform: translateY(-3px) scale(1.02);
}

.rcp-launcher:active {
  transform: translateY(-1px) scale(0.99);
}

.rcp-launcher__portrait {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 25%, #fdf0dd 0%, #f4d9b4 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 248, 236, 0.85);
}

.rcp-launcher__portrait svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* A quiet "the desk is open" pulse, not a neon glow. */
.rcp-launcher::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(231, 154, 60, 0.7);
  animation: rcp-ping 3.4s ease-out infinite;
  pointer-events: none;
}

.rcp-launcher__copy {
  display: grid;
  text-align: left;
  gap: 1px;
}

.rcp-launcher__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 236, 205, 0.78);
}

.rcp-launcher__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.rcp.is-open .rcp-launcher {
  transform: scale(0.86);
  opacity: 0;
  pointer-events: none;
}

/**************************/
/* PANEL                  */
/**************************/

.rcp-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(392px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rcp-line);
  border-radius: var(--rcp-radius);
  background: var(--rcp-cream);
  box-shadow: var(--rcp-shadow-lift);
  transform-origin: 100% 100%;
  transform: translateY(14px) scale(0.94);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease,
    visibility 0s linear 0.36s;
}

.rcp.is-open .rcp-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease,
    visibility 0s;
}

/**************************/
/* HEADER                 */
/**************************/

.rcp-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 14px 16px 17px;
  background: linear-gradient(128deg, #16224b 0%, #22346e 46%, #33417c 100%);
  color: #fff6e8;
  isolation: isolate;
}

/* Fine grain + a marigold wash for depth. Fixed layer, never scrolls. */
.rcp-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 88% -10%, rgba(231, 154, 60, 0.42) 0%, rgba(231, 154, 60, 0) 62%);
  opacity: 0.5;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: -1;
}

.rcp-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0) 0%, var(--rcp-brass) 28%,
    var(--rcp-marigold-warm) 62%, rgba(201, 162, 39, 0) 100%);
}

.rcp-head__portrait {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 22%, #fdf0dd 0%, #f2d4ab 100%);
  box-shadow: 0 0 0 2px rgba(255, 246, 232, 0.9), 0 6px 14px rgba(10, 16, 38, 0.34);
}

.rcp-head__portrait svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rcp-head__id {
  flex: 1 1 auto;
  min-width: 0;
}

.rcp-name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rcp-name span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 236, 205, 0.72);
  display: block;
  margin-top: 1px;
}

.rcp-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 11.5px;
  color: rgba(255, 240, 217, 0.88);
}

.rcp-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7bd88f;
  box-shadow: 0 0 0 3px rgba(123, 216, 143, 0.18);
  flex: 0 0 auto;
}

.rcp-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
}

.rcp-tool {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 236, 205, 0.22);
  border-radius: 9px;
  background: rgba(255, 246, 232, 0.06);
  color: #fff2df;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.rcp-tool:hover {
  background: rgba(255, 246, 232, 0.16);
  border-color: rgba(231, 154, 60, 0.6);
  transform: translateY(-1px);
}

.rcp-tool svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rcp-tool--lang {
  width: auto;
  padding: 0 9px;
  font-size: 11px;
}

.rcp-tool[aria-pressed="true"] {
  background: rgba(231, 154, 60, 0.9);
  border-color: rgba(231, 154, 60, 0.9);
  color: #1c2547;
}

/**************************/
/* TRANSCRIPT             */
/**************************/

.rcp-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 52, 110, 0.28) transparent;
}

.rcp-log::-webkit-scrollbar {
  width: 7px;
}

.rcp-log::-webkit-scrollbar-thumb {
  background: rgba(34, 52, 110, 0.24);
  border-radius: 99px;
}

.rcp-msg {
  max-width: 88%;
  padding: 10px 14px;
  font-size: 14.2px;
  border-radius: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: rcp-rise 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rcp-msg--bot {
  align-self: flex-start;
  background: var(--rcp-paper);
  border: 1px solid var(--rcp-line);
  border-left: 3px solid var(--rcp-marigold);
  border-top-left-radius: 6px;
  color: #2f2a24;
  box-shadow: 0 1px 2px rgba(28, 26, 23, 0.04), 0 6px 16px rgba(28, 26, 23, 0.05);
}

.rcp-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #22346e 0%, #2c4ea8 100%);
  border-top-right-radius: 6px;
  color: #f7f2e8;
  box-shadow: 0 4px 12px rgba(34, 52, 110, 0.22);
}

.rcp-msg--note {
  align-self: flex-start;
  max-width: 100%;
  background: rgba(231, 154, 60, 0.1);
  border: 1px dashed rgba(231, 154, 60, 0.55);
  color: #7a5a24;
  font-size: 13px;
  border-radius: 12px;
}

.rcp-msg a {
  color: var(--rcp-indigo-soft);
  text-underline-offset: 3px;
}

.rcp-msg--user a {
  color: #ffe4bc;
}

/* Waiting-for-an-answer state: three settling dots, sized like a real bubble. */
.rcp-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 16px;
  background: var(--rcp-paper);
  border: 1px solid var(--rcp-line);
  border-left: 3px solid var(--rcp-marigold);
  border-radius: 16px;
  border-top-left-radius: 6px;
  animation: rcp-rise 0.3s ease both;
}

.rcp-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(34, 52, 110, 0.42);
  animation: rcp-bounce 1.25s ease-in-out infinite;
}

.rcp-typing i:nth-child(2) {
  animation-delay: 0.16s;
}

.rcp-typing i:nth-child(3) {
  animation-delay: 0.32s;
}

/**************************/
/* SUGGESTION CHIPS       */
/**************************/

.rcp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 16px 2px;
}

.rcp-chip {
  padding: 6px 12px;
  border: 1px solid rgba(34, 52, 110, 0.22);
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.9);
  color: var(--rcp-indigo);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease,
    color 0.2s ease;
  animation: rcp-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rcp-chip:nth-child(2) { animation-delay: 0.05s; }
.rcp-chip:nth-child(3) { animation-delay: 0.1s; }
.rcp-chip:nth-child(4) { animation-delay: 0.15s; }
.rcp-chip:nth-child(5) { animation-delay: 0.2s; }

.rcp-chip:hover {
  background: var(--rcp-marigold-warm);
  border-color: var(--rcp-marigold-warm);
  color: #2a1f0f;
  transform: translateY(-2px);
}

/**************************/
/* COMPOSER               */
/**************************/

.rcp-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--rcp-line);
  background: var(--rcp-paper);
}

.rcp-input {
  flex: 1 1 auto;
  min-height: 42px;
  max-height: 108px;
  padding: 10px 13px;
  border: 1px solid rgba(34, 52, 110, 0.2);
  border-radius: 13px;
  background: #fffdf9;
  color: var(--rcp-ink);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rcp-input::placeholder {
  color: #a2988a;
}

.rcp-input:focus {
  outline: none;
  border-color: var(--rcp-indigo-soft);
  box-shadow: 0 0 0 3px rgba(44, 78, 168, 0.13);
}

.rcp-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.rcp-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rcp-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.rcp-mic {
  position: relative;
  background: rgba(34, 52, 110, 0.07);
  border-color: rgba(34, 52, 110, 0.2);
  color: var(--rcp-indigo);
}

.rcp-mic:hover:not(:disabled) {
  background: rgba(34, 52, 110, 0.13);
  transform: translateY(-2px);
}

.rcp-mic.is-live {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff4ec;
}

.rcp-mic.is-live::before,
.rcp-mic.is-live::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 15px;
  border: 2px solid rgba(192, 57, 43, 0.55);
  animation: rcp-ping 1.7s ease-out infinite;
  pointer-events: none;
}

.rcp-mic.is-live::after {
  animation-delay: 0.85s;
}

.rcp-send {
  background: linear-gradient(135deg, #22346e 0%, #2c4ea8 100%);
  color: #fff6e8;
  box-shadow: 0 4px 12px rgba(34, 52, 110, 0.26);
}

.rcp-send:hover:not(:disabled) {
  transform: translateY(-2px);
}

.rcp-foot {
  padding: 0 16px 11px;
  margin: 0;
  font-size: 10.5px;
  color: var(--rcp-muted);
  text-align: center;
  background: var(--rcp-paper);
}

.rcp-foot a {
  color: var(--rcp-indigo-soft);
}

/**************************/
/* PORTRAIT ARTWORK       */
/**************************/

.rcp-lid {
  transform-box: fill-box;
  transform-origin: center;
  animation: rcp-blink 6.2s ease-in-out infinite;
}

.rcp-lid--b {
  animation-delay: 0.04s;
}

.rcp-mouth {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s ease;
}

.rcp-portrait.is-speaking .rcp-mouth {
  animation: rcp-talk 0.42s ease-in-out infinite;
}

.rcp-portrait.is-listening .rcp-ear {
  animation: rcp-attend 1.5s ease-in-out infinite;
}

/**************************/
/* KEYFRAMES              */
/**************************/

@keyframes rcp-arrive {
  from { opacity: 0; transform: translateY(22px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rcp-ping {
  0%   { opacity: 0.65; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.55); }
}

@keyframes rcp-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rcp-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

@keyframes rcp-blink {
  0%, 92%, 100% { transform: scaleY(0.05); }
  94%, 98%      { transform: scaleY(1); }
}

@keyframes rcp-talk {
  0%, 100% { transform: scaleY(0.55) scaleX(0.96); }
  50%      { transform: scaleY(1.5) scaleX(1.04); }
}

@keyframes rcp-attend {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/**************************/
/* RESPONSIVE             */
/**************************/

@media (max-width: 560px) {
  .rcp {
    right: 14px;
    bottom: 14px;
  }

  .rcp-launcher__copy {
    display: none;
  }

  .rcp-launcher {
    padding: 8px;
  }

  .rcp-panel {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 86vh;
    border-radius: 20px 20px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rcp *,
  .rcp *::before,
  .rcp *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .rcp-panel {
    transition: opacity 0.01ms linear, visibility 0.01ms linear !important;
  }
}