:root{
  --wc-accent:#2563eb;
  --wc-accent-light:#60a5fa;
  --wc-bg:#fff;
  --wc-ink:#0f172a;
  --wc-muted:#6b7280;
  --wc-shadow:0 8px 30px rgba(12,20,40,.12);
  --wc-panel-w:360px;
}
body{margin:0;font-family:Inter,Arial;}

    /* Container */
    .wc-container {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9999;
    }

    /* Floating Button */
    .wc-open-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--wc-accent-light), var(--wc-accent));
      color: #fff;
      font-size: 24px;
      box-shadow: var(--wc-shadow);
      position: relative;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    /* Notification Badge */
    .wc-badge {
      position: absolute;
      top: -5px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 7px;
      background: #ef4444;
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .wc-badge[hidden] {
      display: none;
    }

/* panel */
.wc-panel{
  width:var(--wc-panel-w);max-width:calc(100vw - 48px);height:520px;
  border-radius:14px;background:var(--wc-bg);color:var(--wc-ink);
  box-shadow:var(--wc-shadow);overflow:hidden;
  display:flex;flex-direction:column;
  transform:translateY(18px) scale(.98);opacity:0;pointer-events:none;
  transition:.22s ease;
  position:absolute;bottom:70px;right:0;
}
.wc-panel--open{transform:none;opacity:1;pointer-events:auto;}

/* header */
.wc-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);}
.wc-title{font-weight:600;font-size:15px;}
.wc-sub{font-size:12px;color:var(--wc-muted);}
.wc-header-actions{display:flex;gap:8px;}
.wc-btn-small{background:transparent;border:0;cursor:pointer;font-size:14px;color:var(--wc-muted);}

/* body */
.wc-body{flex:1;padding:14px;overflow:auto;display:flex;flex-direction:column;gap:8px;background:#f9fafb;min-height:0;}
.wc-msg{
  max-width:78%;
  padding:10px 14px;
  border-radius:18px;
  font-size:14px;
  line-height:1.4;
  word-wrap:break-word;
}

/* bot/agent bubble */
.wc-msg--bot{
  background:#f1f5f9;
  color:#0f172a;
  align-self:flex-start;
  border-top-left-radius:6px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}

/* user bubble */
.wc-msg--user{
  background:linear-gradient(135deg,#2563eb,#1e40af);
  color:#fff;
  align-self:flex-end;
  border-top-right-radius:6px;
}

/* footer */
.wc-footer{padding:12px;border-top:1px solid rgba(0,0,0,.06);background:#fff;}
.wc-inputwrap{display:flex;align-items:center;gap:8px;
  border:1px solid rgba(0,0,0,.1);border-radius:12px;
  padding: 6px 6px 6px 6px;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  width: 100%;
  box-sizing: border-box;
}
.wc-input{flex:1 1 auto;resize:none;border:0;outline:0;font-size:14px;
  max-height:120px;overflow-y:auto;
  padding:4px;background:transparent;font-family:inherit;min-width:0;width:100%;}
.wc-btn{background:transparent;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--wc-muted);
  width:32px;height:32px;font-size:18px;}
.wc-btn-send{background:var(--wc-accent);color:#fff;border-radius:28%;
  width:36px;font-size:16px;}
input[type="file"]{display:none;}

/* Welcome and End Chat Screens */
.wc-screen-container {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.wc-screen-container h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    color: var(--wc-ink);
}

.wc-screen-container p {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--wc-muted);
    font-size: 14px;
}

.wc-screen-input {
    padding: 10px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.wc-screen-button {
    padding: 12px;
    background: var(--wc-accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.wc-screen-button:hover {
    background: var(--wc-accent-light);
}


@media (max-width: 480px) {
  /* On mobile, the container is just an anchor in the corner. NO WIDTH. */
  .wc-container {
    bottom: 12px;
    right: 12px;
    transition: bottom 0.25s ease;
  }

  /* The panel is sized appropriately for mobile */
  .wc-panel {
    width: calc(100vw - 24px); /* Panel has width */
    max-width: 360px;
    height: 70vh;
    max-height: 520px;
    bottom: 12px; /* Position above the button */
    right: 0;
  }

  .wc-open-btn {
    width: 56px;
    height: 56px;
  }
}
  /* When keyboard is open, move the container up */
  .wc-container.keyboard--open {
    bottom: 40%; /* A reasonable guess for keyboard height */
  }
  .wc-panel.keyboard--open {
    width: calc(100vw - 24px); /* Panel has width */
    max-width: 360px;
    height: 70vh;
    max-height: 450px;
    bottom: 12px; /* Position above the button */
    right: 0;
  }
 /* When keyboard is close, move the container up */
  .wc-container.keyboard--close {
    bottom: 12px; /* A reasonable guess for keyboard height */
  }