/* Brand variables */
:root{
  --vprc-blue:#003753;
  --vprc-cyan:#1D9EEE;
  --vprc-green:#8FDB98;
  --vprc-bg: rgba(255,255,255,0.66);
  --vprc-stroke: rgba(255,255,255,0.5);
  --vprc-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 2px 10px rgba(0,0,0,0.06);
}

/* Wrapper with gradient glow */
.vprc-chat{
  position: relative;
  border-radius: 16px;
  padding: 12px;
  max-width: 720px;
  background: var(--vprc-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--vprc-shadow);
  overflow: hidden;
}

/* Fancy gradient border using pseudo-element */
.vprc-chat::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: 18px;
  background: conic-gradient(from 120deg,
    var(--vprc-blue),
    var(--vprc-cyan),
    var(--vprc-green),
    var(--vprc-cyan),
    var(--vprc-blue));
  z-index: -1;
}

/* Inner surface to create a clean edge */
.vprc-chat::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.55));
  pointer-events:none;
  z-index:-1;
}

/* Chat log */
.vprc-chat-log{
  height: 320px;
  overflow:auto;
  padding:12px;
  background: rgba(255,255,255,0.5);
  border-radius: 12px;
  border: 1px solid var(--vprc-stroke);
  margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Messages */
.vprc-chat-msg{ margin:10px 0; line-height:1.4 }
.vprc-chat-msg .role{ display:inline-block; font-weight:700; margin-right:6px; opacity:.85 }

/* Links */
.vprc-chat-msg a{ text-decoration:none; border-bottom:1px solid currentColor; }
.vprc-chat-msg a:hover{ opacity:.85 }

/* Input row */
.vprc-chat-row{ display:flex; gap:10px; align-items:center }
.vprc-chat-row input{
  flex:1; padding:12px 14px; border-radius:12px;
  border:1px solid var(--vprc-stroke);
  background: rgba(255,255,255,0.7);
  outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.vprc-chat-row input:focus{
  border-color: var(--vprc-cyan);
  box-shadow: 0 0 0 4px rgba(29,158,238,0.18);
}

/* Buttons */
.vprc-chat-actions{ display:flex; gap:8px }
.vprc-chat-row button{
  padding:10px 14px; border-radius:12px; border:0;
  color:#fff; cursor:pointer; font-weight:600;
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.vprc-chat-row button:active{ transform: translateY(1px) }

.vprc-chat-send{
  background: linear-gradient(135deg, var(--vprc-cyan), var(--vprc-green));
}
.vprc-chat-send:hover{ box-shadow: 0 10px 28px rgba(29,158,238,0.24) }

.vprc-chat-reset{
  background: linear-gradient(135deg, var(--vprc-blue), #335e7a);
  opacity:.95;
}
.vprc-chat-reset:hover{ opacity:1 }

.vprc-chat-row button[disabled]{ opacity:0.6; cursor:not-allowed }

/* Status with animated dots */
.vprc-status{
  font-size:12px; color:#0b3a5a; margin:2px 2px 10px 2px;
  display:none; font-weight:600;
}
.vprc-status.is-thinking::after{
  content:"";
  display:inline-block;
  width: 16px; height: 8px; margin-left:6px;
  background: radial-gradient(circle, var(--vprc-blue) 50%, transparent 51%) 0 50%/4px 4px no-repeat,
              radial-gradient(circle, var(--vprc-cyan) 50%, transparent 51%) 6px 50%/4px 4px no-repeat,
              radial-gradient(circle, var(--vprc-green) 50%, transparent 51%) 12px 50%/4px 4px no-repeat;
  animation: vprc-dots 1s infinite ease-in-out;
}
@keyframes vprc-dots{
  0%{ transform: translateX(0) }
  50%{ transform: translateX(2px) }
  100%{ transform: translateX(0) }
}

/* Markdown niceties */
.vprc-chat-msg h1,.vprc-chat-msg h2,.vprc-chat-msg h3{ margin:6px 0 }
.vprc-chat-msg ul{ margin:8px 0 8px 18px }
.vprc-chat-msg p{ margin:6px 0 }