/* ======================================================
   WISE ASSISTANT — GLASS VERSION
   ====================================================== */

@font-face {
  font-family: 'Tangerine';
  src: url('/vendor/wise/fonts/tangerine-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Orbitron';
  src: url('/vendor/wise/fonts/orbitron-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.wise-title-wise {
  font-family: 'Tangerine', cursive;
  font-weight: 700;
  font-size: 2em;
  line-height: 1;
  letter-spacing: 0.02em;
}

.wise-title-assistant {
  font-family: 'Orbitron', sans-serif;
  font-weight: 400;
  font-size: 0.65em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wise-title-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

/* =======================
   ROOT TOKENS
   ======================= */

.wise-root {
  --indigo: rgb(99 102 241);

  --black: rgb(6 6 10);
  --black-2: rgb(10 10 18);

  --white-bg: rgb(248, 248, 250);
  --white-text-main: rgb(14, 14, 22);
  --white-text-soft: rgb(90, 90, 110);

  --glow: rgba(99,102,241,.75);
  --glow2: rgba(99,102,241,.40);

  /* Dark default */
  --wise-accent: var(--indigo);
  --wise-panel: rgba(10, 10, 18, 0.75);
  --wise-text: rgb(235 235 245);
  --wise-text-soft: rgb(170 170 190);
  --wise-border: rgba(255,255,255,.08);

  --wise-avatar-bg: rgba(255,255,255,.10);
  --wise-bubble-bot: rgba(255,255,255,.07);
  --wise-bubble-user: var(--wise-accent);

  --wise-input-bg: rgba(0,0,0,.30);
  --wise-button-bg: rgba(255,255,255,.08);

  --wise-radius: 18px;
  --wise-border-width: 1px;
  --wise-shadow: 0 30px 80px rgba(0,0,0,.65);

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* =======================
   LIGHT THEME
   ======================= */

.wise-root[data-theme="light"]{
  --wise-panel: rgba(255,255,255,.70);
  --wise-text: var(--white-text-main);
  --wise-text-soft: var(--white-text-soft);
  --wise-border: rgba(14,14,22,.08);

  --wise-avatar-bg: rgba(14,14,22,.05);
  --wise-bubble-bot: rgba(14,14,22,.05);

  --wise-input-bg: rgba(14,14,22,.05);
  --wise-button-bg: rgba(14,14,22,.06);

  --wise-shadow: 0 30px 80px rgba(14,14,22,.25);
}

/* =======================
   BASE
   ======================= */

.wise-root,
.wise-root * {
  box-sizing: border-box;
}

.wise-root button,
.wise-root input {
  font: inherit;
}

/* =======================
   FAB
   ======================= */

#wise-fab{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border:0;
  border-radius:9999px;
  background:var(--wise-accent);
  color:#fff;
  box-shadow:0 0 0 4px var(--glow2), 0 12px 30px rgba(0,0,0,.35);
  cursor:pointer;
  transition:.2s ease;
}

#wise-fab:hover{ transform:translateY(-2px); }
#wise-fab:active{ transform:translateY(0); }

/* =======================
   PANEL — GLASS STRONG
   ======================= */

#wise-panel{
  margin-top:12px;
  width:min(420px,92vw);
  height:min(560px,78vh);

  display:flex;
  flex-direction:column;

  background:var(--wise-panel);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  border:var(--wise-border-width) solid var(--wise-border);
  border-radius:var(--wise-radius);
  box-shadow:var(--wise-shadow);
  overflow:hidden;

  transform:translateY(10px);
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
}

#wise-panel.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

#wise-panel[hidden]{ display:none !important; }

/* =======================
   HEADER / FOOTER GLASS
   ======================= */

.wise-header,
.wise-footer{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.wise-header{
  padding:12px 14px;
  border-bottom:1px solid var(--wise-border);
  display:flex;
  justify-content:space-between;
}

.wise-footer{
  padding:12px 14px;
  border-top:1px solid var(--wise-border);
}

/* =======================
   MESSAGES
   ======================= */

#wise-messages{
  flex:1;
  overflow-y:auto;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.wise-msg{
  display:flex;
  gap:10px;
}

.wise-msg.wise-user{
  justify-content:flex-end;
}

.wise-msg.wise-assistant{
  justify-content:flex-start;
}

/* =======================
   BUBBLES
   ======================= */

.wise-bubble{
  padding:10px 12px;
  border-radius:var(--wise-radius);
  max-width:85%;
  line-height:1.35;
  font-size:14px;
}

.wise-bubble,
.wise-bubble p{
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.wise-msg.wise-user .wise-bubble{
  background:var(--wise-bubble-user);
  color:#fff !important;
  border-top-right-radius:calc(var(--wise-radius) - 10px);
}

.wise-msg.wise-user .wise-bubble p{
  color:#fff !important;
  margin: 0!important;
}

.wise-msg.wise-assistant .wise-bubble{
  background:var(--wise-bubble-bot);
  color:var(--wise-text);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--wise-border);
  border-top-left-radius:calc(var(--wise-radius) - 10px);
}

/* =======================
   AVATAR
   ======================= */

.wise-avatar{
  width:32px;
  height:32px;
  border-radius:9999px;
  background:var(--wise-avatar-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  border:1px solid var(--wise-border);
}

/* =======================
   INPUT
   ======================= */

#wise-form{
  display:flex;
  gap:10px;
  align-items:center;
}

#wise-input{
  flex:1;
  padding:10px 12px;
  border-radius:calc(var(--wise-radius) - 6px);
  border:1px solid var(--wise-border);
  background:var(--wise-input-bg);
  color:var(--wise-text);
  outline:none;
  cursor:text;
}

#wise-input:focus{
  border-color:var(--wise-accent);
  box-shadow:0 0 0 4px var(--glow2);
}

#wise-send{
  width:42px;
  height:42px;
  border:0;
  border-radius:calc(var(--wise-radius) - 6px);
  background:var(--wise-button-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}

#wise-send:hover{
  background:rgba(99,102,241,.18);
}

/* =======================
   CLOSE BUTTON
   ======================= */

#wise-close{
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:10px;
}

#wise-close:hover{
  background:var(--wise-button-bg);
}

/* =======================
   STATUS
   ======================= */

.wise-status-row{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--wise-text-soft);
}

#wise-clear{
  background:transparent;
  border:0;
  cursor:pointer;
}

/* =======================
   SUGGESTIONS
   ======================= */

.wise-suggestions{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.wise-suggestion{
  border:1px solid var(--wise-border);
  background:var(--wise-button-bg);
  padding:6px 10px;
  border-radius:9999px;
  font-size:12px;
  cursor:pointer;
  transition:.2s ease;
}

.wise-suggestion:hover{
  background:rgba(99,102,241,.18);
}

/* =======================
   TYPING DOTS
   ======================= */

.dot{
  width:8px;
  height:8px;
  border-radius:9999px;
  background:var(--wise-text-soft);
  display:inline-block;
  animation:wise-bounce 1s infinite;
}

.dot:nth-child(1){ animation-delay:-.2s; }
.dot:nth-child(2){ animation-delay:-.1s; }

@keyframes wise-bounce{
  0%,80%,100%{ transform:translateY(0); opacity:.6; }
  40%{ transform:translateY(-4px); opacity:1; }
}