:root {
  /* Brand */
  --tbc-blue:            #0e6ee9;
  --tbc-blue-bright:     #2383ff;   /* blue action buttons - brighter than the header */
  --tbc-blue-hover:      #0c5ec8;
  --tbc-blue-light:      #1a7bf5;
  --tbc-blue-deep:       #0a4fae;
  --tbc-yellow:          #fbc302;
  --tbc-yellow-hover:    #e2af00;
  --tbc-green:          #05a300be;
  --tbc-red:          #b60303d8;
  --tbc-red-bright:          #e100008c;

  /* Own message bubbles - a light tint, so their text stays dark. Kept apart
     from the brand blues because the blue action buttons no longer follow it. */
  --tbc-bubble-mine:     #dcecfb;
  --tbc-on-bubble-mine:  #555555;

  /* Neutrals */
  --tbc-ink:             #3b3b3b;
  --tbc-ink-soft:        #60605f;
  --tbc-ink-muted:       #a6a6a5;
  --tbc-surface:         #ffffff;
  --tbc-surface-alt:     #f5f5f5;
  --tbc-surface-sunken:  #ececec;
  --tbc-line:            #ececec;
  --tbc-line-strong:     #e4e6ea;
  --tbc-line-panel:      #e8eaee;
  --tbc-chip-border:     #cfd8ea;
  --tbc-chip-hover:      #f2f6ff;
  --tbc-chip-selected:   #bbd0f8;
  --tbc-ghost-border:    #d9dce1;
  --tbc-star-off:        #e0e0e0;

  /* Colour used on top of brand surfaces */
  --tbc-on-blue:         #ffffff;
  --tbc-on-blue-soft:    rgba(255, 255, 255, .72);
  --tbc-on-blue-faint:   rgba(255, 255, 255, .12);
  --tbc-on-blue-strong:  rgba(255, 255, 255, .24);
  --tbc-on-yellow:       #3b3b3b;

  /* Launcher surface (frosted, for light pages) */
  --tbc-launcher-bg:     rgba(245, 245, 245, .88);
  --tbc-launcher-bg-hover: rgba(255, 255, 255, .96);

  /* Scrims and shadows */
  --tbc-scrim:           rgba(59, 59, 59, .42);
  --tbc-shadow-panel:    0 30px 70px -20px rgba(0, 0, 0, .55);
  --tbc-shadow-dialog:   0 20px 40px -16px rgba(0, 0, 0, .4);
  --tbc-shadow-launcher: 0 0 12px 0 rgba(0, 0, 0, .18),
                         0 0 22px 2px rgba(0, 0, 0, .1),
                         inset 0 0 0 1px rgba(255, 255, 255, .6);

  /* Type */
  --tbc-font:            'Trebuchet MS', 'Segoe UI', sans-serif;
  --tbc-size-title:      17px;
  --tbc-size-name:       15px;
  --tbc-size-body:       14px;
  --tbc-size-small:      13px;
  --tbc-size-meta:       12px;
  --tbc-size-label:      11px;
  --tbc-size-emoji:      28px;   /* messages made of emoji only */

  /* Metrics - the design runs on a 4px grid */
  --tbc-panel-width:     384px;
  --tbc-panel-height:    596px;
  --tbc-gutter:          24px;
  --tbc-radius-panel:    16px;
  --tbc-radius-bubble:   16px;
  --tbc-radius-control:  19px;
  --tbc-radius-card:     14px;
  --tbc-radius-notice:   12px;
  --tbc-control-size:    38px;

  /* Launcher. It rests as a ball and widens into a pill on hover, so the
     padding either side of the icon is derived from these two rather than
     written out - the collapsed state stays a true circle at any size. */
  --tbc-launcher-size:   56px;
  --tbc-launcher-icon:   26px;

  /* Motion */
  --tbc-speed-fast:      .15s;
  --tbc-speed:           .22s;

  /* Stacking - high enough to clear site chrome */
  --tbc-z:               2147483000;
}

/* ==========================================================================
   2. WIDGET ROOT
   ========================================================================== */

.tbc {
  position: fixed;
  inset: 0;
  z-index: var(--tbc-z);
  pointer-events: none;
  font-family: var(--tbc-font);
  color: var(--tbc-ink);
}

.tbc * { box-sizing: border-box; }

/* Only the widget surfaces take clicks - the rest of the page stays usable. */
.tbc-launcher,
.tbc-panel { pointer-events: auto; }

.tbc button {
  font-family: inherit;
  cursor: pointer;
}

.tbc-icon {
  display: block;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

/* ==========================================================================
   3. LAUNCHER
   ========================================================================== */

.tbc-launcher {
  position: absolute;
  right: 21px;
  bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: var(--tbc-launcher-size);
  /* Collapsed, the side padding completes the circle around the icon. */
  padding: 0 calc((var(--tbc-launcher-size) - var(--tbc-launcher-icon)) / 2);
  border: 0;
  border-radius: calc(var(--tbc-launcher-size) / 2);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: gap var(--tbc-speed),
              padding var(--tbc-speed),
              background var(--tbc-speed-fast);
}

/* Widening runs on the label's max-width plus the gap and padding, because
   width alone cannot be animated from a circle to a content-sized pill. The
   button is anchored right, so it grows leftwards into free space.
   Keyboard focus opens it too - hover alone would leave it shut for anyone
   tabbing through the page. */
.tbc-launcher:hover,
.tbc-launcher:focus-visible {
  gap: 10px;
  padding: 0 27px;
}

.tbc-launcher:hover .tbc-launcher__label,
.tbc-launcher:focus-visible .tbc-launcher__label {
  max-width: 240px;
  opacity: 1;
}

/* Held back until the page has settled, then dropped in with a short bounce.
   The waiting state is a class rather than a base style, so a launcher whose
   reveal never runs still ends up visible instead of invisible. */
.tbc-launcher--pending {
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
}

/* Every stage sets its own easing inside the keyframes, so nothing is
   declared here beyond the length and the fill. */
.tbc-launcher--in {
  animation: tbc-launcher-in .8s both;
}

.tbc-launcher--in .tbc-launcher__close {
 position: absolute;
 right: -5px;
 top: -20px;
 opacity: 0;
 background-color: transparent;
}
.tbc-launcher:hover .tbc-header__action,
.tbc-launcher:focus-visible .tbc-header__action {
  opacity: 1;
}

/* Default treatment: frosted light pill, for light pages. */
.tbc-launcher--light {
  background: var(--tbc-launcher-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--tbc-shadow-launcher);
  color: var(--tbc-ink);
}

.tbc-launcher--light:hover { background: var(--tbc-launcher-bg-hover); }
.tbc-launcher--light .tbc-launcher__icon { color: var(--tbc-blue); }

/* Alternative treatment for dark pages. */
.tbc-launcher--brand {
  background: var(--tbc-blue);
  box-shadow: 0 4px 14px -5px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: var(--tbc-on-blue);
}

.tbc-launcher--brand:hover { background: var(--tbc-blue-hover); }
.tbc-launcher--brand .tbc-launcher__icon { color: var(--tbc-on-blue); }

.tbc-launcher__icon {
  width: var(--tbc-launcher-icon);
  height: var(--tbc-launcher-icon);
}

.tbc-launcher__label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 1px;
  transition: max-width var(--tbc-speed), opacity var(--tbc-speed-fast);
}

/* Pinned to the corner rather than sitting in the row, so an unread count
   cannot stretch the ball out of round. */
.tbc-launcher__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--tbc-blue);
  color: var(--tbc-on-blue);
  font-size: var(--tbc-size-label);
  font-weight: 700;
}

.tbc-launcher--brand .tbc-launcher__badge {
  background: var(--tbc-yellow);
  color: var(--tbc-on-yellow);
}

/* ==========================================================================
   4. PANEL SHELL
   ========================================================================== */

.tbc-panel {
  position: absolute;
  right: var(--tbc-gutter);
  bottom: var(--tbc-gutter);
  display: flex;
  flex-direction: column;
  width: var(--tbc-panel-width);
  height: var(--tbc-panel-height);
  max-height: calc(100vh - var(--tbc-gutter) * 2);
  overflow: hidden;
  border-radius: var(--tbc-radius-panel);
  background: var(--tbc-surface);
  box-shadow: var(--tbc-shadow-panel);
  animation: tbc-rise var(--tbc-speed) ease-out;
}

/* --- Header --- */

.tbc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 14px 14px 14px 16px;
  background: var(--tbc-blue);
}

/* Larger than the control size the rest of the header runs on, because this
   one carries a photograph and a face needs the room to be recognisable. */
.tbc-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.tbc-avatar__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .22) 0 5px,
    rgba(255, 255, 255, .12) 5px 10px);
  color: var(--tbc-on-blue);
  font-size: var(--tbc-size-body);
  font-weight: 700;
}

/* Used in place of the initial when an agent photograph is configured. */
.tbc-avatar__photo {
  display: block!important;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  padding: 0!important;
  margin:  0!important;
}

.tbc-avatar__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--tbc-blue);
  border-radius: 50%;
  background: var(--tbc-blue);
  animation: tbc-pulse 2.4s infinite;
}

  
.tbc-avatar__dot.yellow { background: var(--tbc-yellow);  border: 2px solid var(--tbc-blue); }
.tbc-avatar__dot.green { background: var(--tbc-green);   border: 1px solid var(--tbc-blue-deep);}
.tbc-avatar__dot.red {  background: var(--tbc-red);  border: 1px solid var(--tbc-blue-hover); }
.tbc-avatar__dot.blue {  background: var(--tbc-blue); border: 2px solid var(--tbc-bubble-mine);  }


.tbc-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.tbc-identity__name {
  overflow: hidden;
  color: var(--tbc-on-blue);
  font-size: var(--tbc-size-name);
  font-weight: 700;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbc-identity__status {
  color: var(--tbc-on-blue-soft);
  font-size: var(--tbc-size-meta);
}

.tbc-header__action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: var(--tbc-on-blue-faint);
  color: var(--tbc-on-blue);
  transition: background var(--tbc-speed-fast);
}

.tbc-header__action:hover { background: var(--tbc-on-blue-strong); }
.tbc-header__action .tbc-icon { width: 14px; height: 14px; }

/* --- Body --- */

.tbc-body {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--tbc-surface);
}

.tbc-log {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ==========================================================================
   5. CONVERSATION
   ========================================================================== */

/* Day separators and system events share one rule. */
.tbc-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tbc-ink-muted);
  font-size: var(--tbc-size-label);
}

.tbc-note::before,
.tbc-note::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tbc-line);
}

.tbc-note__text {
  flex: 0 0 auto;
  letter-spacing: .06em;
  white-space: nowrap;
}

.tbc-notice {
  display: flex;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--tbc-line-panel);
  border-radius: var(--tbc-radius-notice);
  background: var(--tbc-surface-alt);
}

.tbc-notice .tbc-icon {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--tbc-blue);
}

.tbc-notice__text {
  color: var(--tbc-ink-soft);
  font-size: var(--tbc-size-meta);
  line-height: 1.55;
}

.tbc-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  align-self: flex-start;
  max-width: 84%;
  animation: tbc-rise .18s ease-out;
}

.tbc-msg--mine {
  align-items: flex-end;
  align-self: flex-end;
}

.tbc-msg__bubble {
  padding: 12px 15px 20px 15px;
  border-radius: var(--tbc-radius-bubble) var(--tbc-radius-bubble) var(--tbc-radius-bubble) 4px;
  background: var(--tbc-surface-alt);
  color: var(--tbc-ink);
  font-size: var(--tbc-size-body);
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.tbc-msg--mine .tbc-msg__bubble {
  border-radius: var(--tbc-radius-bubble) var(--tbc-radius-bubble) 4px var(--tbc-radius-bubble);
  background: var(--tbc-bubble-mine);
  color: var(--tbc-on-bubble-mine);
}

/* A message that carries nothing but emoji shows them at glyph size, the way
   messaging apps do. Emoji mixed into a sentence stay at text size. */
.tbc-msg__bubble--emoji {
  font-size: var(--tbc-size-emoji);
  line-height: 1.25;
}

.tbc-msg__meta {
  padding: 4px;
  margin-top: -26px;
  display: flex;
  align-self: flex-end;
  color: var(--tbc-ink-muted);
  font-size: var(--tbc-size-label);
  white-space: nowrap;
}

/* --- Attachments --- */

/* A picture fills its bubble, so the padding drops to a thin frame. */
.tbc-msg__bubble--media { padding: 5px; }

.tbc-media {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.tbc-media__thumb {
  display: block;
  max-width: 220px;
  max-height: 170px;
  border-radius: 11px;
}

.tbc-media__caption {
  padding: 0 5px 3px;
  color: var(--tbc-ink-muted);
  font-size: var(--tbc-size-label);
}

/* Secondary text sits on the light own-bubble tint, so it darkens rather than
   fading to white the way it did on the old solid-blue bubble. */
.tbc-msg--mine .tbc-media__caption { color: var(--tbc-ink-soft); }

.tbc-file {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 220px;
}

.tbc-file .tbc-icon {
  width: 20px;
  height: 20px;
}

.tbc-file__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tbc-file__name {
  overflow: hidden;
  font-size: var(--tbc-size-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbc-file__size {
  color: var(--tbc-ink-muted);
  font-size: var(--tbc-size-label);
}

.tbc-msg--mine .tbc-file__size { color: var(--tbc-ink-soft); }

.tbc-typing {
  display: flex;
  gap: 4px;
  align-self: flex-start;
  padding: 13px 15px;
  border-radius: var(--tbc-radius-bubble) var(--tbc-radius-bubble) var(--tbc-radius-bubble) 4px;
  background: var(--tbc-surface-alt);
}

.tbc-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tbc-ink-soft);
  animation: tbc-dot 1.1s infinite;
}

.tbc-typing span:nth-child(2) { animation-delay: .15s; }
.tbc-typing span:nth-child(3) { animation-delay: .3s; }

.tbc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.tbc-chip {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--tbc-chip-border);
  border-radius: 17px;
  background: var(--tbc-surface);
  color: var(--tbc-blue);
  font-size: var(--tbc-size-small);
  font-weight: 700;
  transition: background var(--tbc-speed-fast), border-color var(--tbc-speed-fast);
}

.tbc-chip:hover {
  border-color: var(--tbc-blue);
  background: var(--tbc-chip-hover);
}
.tbc-chip.selected {
  border-color: var(--tbc-blue);
  background: var(--tbc-chip-selected);
}

/* ==========================================================================
   6. OVERLAYS - queue, ended, rating
   ========================================================================== */

.tbc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 20px;
  background: var(--tbc-surface);
  text-align: center;
}

.tbc-overlay--queue { gap: 11px; }
.tbc-overlay--ended { gap: 14px; }
.tbc-overlay--rating { gap: 12px; }

.tbc-overlay__title {
  color: var(--tbc-ink);
  font-size: var(--tbc-size-title);
  font-weight: 700;
}

.tbc-overlay__title--compact {
  font-size: var(--tbc-size-name);
}

.tbc-overlay__text {
  max-width: 250px;
  color: var(--tbc-ink-soft);
  font-size: var(--tbc-size-small);
  line-height: 1.55;
}

.tbc-overlay__note {
  color: var(--tbc-ink-muted);
  font-size: 12.5px;
}

.tbc-overlay__thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.tbc-progress {
  width: 190px;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--tbc-line);
}

.tbc-progress__bar {
  width: 45%;
  height: 100%;
  border-radius: 2px;
  background: var(--tbc-blue);
}

/* --- Buttons shared by the overlays, the composer and the end dialog --- */

.tbc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 21px;
  font-size: var(--tbc-size-body);
  font-weight: 700;
  transition: background var(--tbc-speed-fast), border-color var(--tbc-speed-fast);
}

.tbc-btn--primary {
  background: var(--tbc-yellow);
  color: var(--tbc-on-yellow);
}

.tbc-btn--primary:hover { background: var(--tbc-yellow-hover); }

.tbc-btn--brand {
  background: var(--tbc-blue-bright);
  color: var(--tbc-on-blue);
}

/* Hover darkens to the header blue - same family, one step down. */
.tbc-btn--brand:hover { background: var(--tbc-blue); }


.tbc-btn--red {
  background: var(--tbc-red-bright);
  color: var(--tbc-on-blue);
}

/* Hover darkens to the header blue - same family, one step down. */
.tbc-btn--red:hover { background: var(--tbc-red); }


.tbc-btn--ghost {
  border: 1px solid var(--tbc-ghost-border);
  background: var(--tbc-surface);
  color: var(--tbc-ink);
}

.tbc-btn--ghost:hover { background: var(--tbc-surface-alt); }

/* Quiet secondary action, e.g. "Start new chat" under a closed conversation. */
.tbc-btn--quiet {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--tbc-ghost-border);
  border-radius: 18px;
  background: var(--tbc-surface);
  color: var(--tbc-blue);
  font-size: var(--tbc-size-small);
}

.tbc-btn--quiet:hover { border-color: var(--tbc-blue); }

.tbc-btn--compact {
  height: 34px;
  padding: 0 16px;
  border-radius: 17px;
  font-size: var(--tbc-size-small);
}

/* Text-only action, e.g. "Skip" under the rating form. */
.tbc-btn--plain {
  height: auto;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--tbc-blue);
  font-size: 12.5px;
}

.tbc-btn--plain:hover { color: var(--tbc-blue-hover); }

.tbc-btn:disabled {
  background: var(--tbc-surface-sunken);
  color: var(--tbc-ink-muted);
  cursor: default;
}

/* --- Rating --- */

/* One stretching column, so the field and the button below it always share a
   width - no second width declaration that could drift apart from the first. */
.tbc-rating-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 2px;
}

.tbc-feedback {
  /* Three lines of room before it has to grow, then it grows like the
     composer and stops at the max, where the text scrolls instead. */
  min-height: 78px;
  max-height: 132px;
  padding: 11px 14px;
  border: 1px solid var(--tbc-line-panel);
  border-radius: var(--tbc-radius-notice);
  background: var(--tbc-surface-alt);
  color: var(--tbc-ink);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 18px;
  text-align: left;
  resize: none;
  outline: none;
  transition: border-color var(--tbc-speed-fast);
}

.tbc-feedback:focus { border-color: var(--tbc-blue); }
.tbc-feedback::placeholder { color: var(--tbc-ink-muted); }

.tbc-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.tbc-star {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tbc-star-off);
  font-size: 26px;
  line-height: 1;
  transition: color var(--tbc-speed-fast);
}

.tbc-star.is-on { color: var(--tbc-yellow); }

.tbc-raiting-message-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -22px;

}
/* ==========================================================================
   7. COMPOSER
   ========================================================================== */

.tbc-composer {
  position: relative;              /* anchors the emoji picker */
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--tbc-line);
  background: var(--tbc-surface);
}

.tbc-composer__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.tbc-composer__tool {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--tbc-control-size);
  height: var(--tbc-control-size);
  border: 0;
  border-radius: var(--tbc-radius-control);
  background: var(--tbc-surface-alt);
  color: var(--tbc-ink-soft);
  transition: background var(--tbc-speed-fast);
}

.tbc-composer__tool:hover { background: var(--tbc-surface-sunken); }

.tbc-composer__tool.is-active {
  background: var(--tbc-chip-hover);
  color: var(--tbc-blue);
}

/* The file input is driven by the "+" button and never shown. */
.tbc-composer__file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

/* --- Emoji picker --- */

.tbc-emoji {
  position: absolute;
  right: 12px;
  bottom: calc(100% - 8px);
  left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-height: 236px;
  overflow: hidden;
  border: 1px solid var(--tbc-line-panel);
  border-radius: var(--tbc-radius-card);
  background: var(--tbc-surface);
  box-shadow: var(--tbc-shadow-dialog);
  animation: tbc-rise .16s ease-out;
}

.tbc-emoji__scroll {
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tbc-emoji__group + .tbc-emoji__group { margin-top: 12px; }

.tbc-emoji__label {
  padding: 0 2px 6px;
  color: var(--tbc-ink-muted);
  font-size: var(--tbc-size-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tbc-emoji__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

.tbc-emoji__item {
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 20px;
  line-height: 1;
  transition: background var(--tbc-speed-fast);
}

.tbc-emoji__item:hover { background: var(--tbc-surface-alt); }

.tbc-composer__input {
  flex: 1;
  min-width: 0;
  height: var(--tbc-control-size);
  max-height: 96px;
  padding: 9px 14px;
  border: 1px solid var(--tbc-line-strong);
  border-radius: var(--tbc-radius-control);
  background: var(--tbc-surface);
  color: var(--tbc-ink);
  font-family: inherit;
  font-size: var(--tbc-size-body);
  /* One line fits the control height exactly (18 + 2x9 padding + 2x1 border
     = 38), so an empty composer lines up with the round buttons and every
     extra line grows the field by a clean 18px. */
  line-height: 18px;
  resize: none;
  outline: none;
  transition: border-color var(--tbc-speed-fast);
}

.tbc-composer__input:focus { border-color: var(--tbc-blue); }
.tbc-composer__input::placeholder { color: var(--tbc-ink-muted); }

.tbc-send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--tbc-control-size);
  height: var(--tbc-control-size);
  border: 0;
  border-radius: var(--tbc-radius-control);
  background: var(--tbc-yellow);
  color: var(--tbc-on-yellow);
  transition: background var(--tbc-speed-fast), color var(--tbc-speed-fast);
}

.tbc-send:hover { background: var(--tbc-yellow-hover); }

.tbc-send:disabled {
  background: var(--tbc-surface-sunken);
  color: var(--tbc-ink-muted);
  cursor: default;
}

.tbc-composer__hint {
  padding: 8px 6px 0;
  color: var(--tbc-ink-muted);
  font-size: var(--tbc-size-label);
}

.tbc-composer__locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  padding: 0 6px 0 14px;
  border-radius: 22px;
  background: var(--tbc-surface-alt);
}

.tbc-composer__locked-text {
  color: var(--tbc-ink-muted);
  font-size: var(--tbc-size-small);
}


.tbc-composer__error-text {
    color: var(--tbc-red);
    font-size: var(--tbc-size-label);
    margin: 0 0 10px 10px;
    display: block;
}

    
/* ==========================================================================
   8. END-CHAT DIALOG
   ========================================================================== */

.tbc-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tbc-gutter);
  background: var(--tbc-scrim);
}

.tbc-confirm__card {
  width: 100%;
  padding: 22px 20px 18px;
  border-radius: var(--tbc-radius-card);
  background: var(--tbc-surface);
  box-shadow: var(--tbc-shadow-dialog);
  text-align: center;
  animation: tbc-rise .16s ease-out;
}

.tbc-confirm__title {
  margin-bottom: 6px;
  color: var(--tbc-ink);
  font-size: 16px;
  font-weight: 700;
}

.tbc-confirm__text {
  margin-bottom: 18px;
  color: var(--tbc-ink-soft);
  font-size: var(--tbc-size-small);
  line-height: 1.55;
}

.tbc-confirm__actions {
  display: flex;
  gap: 10px;
}

.tbc-confirm__actions .tbc-btn { flex: 1; }

/* ==========================================================================
   9. ANIMATIONS
   ========================================================================== */

@keyframes tbc-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes tbc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes tbc-dot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* The launcher arriving. Scaling stays uniform, so the ball is a circle at
   every frame and only its size moves. The give comes from a damped swing
   instead: each overshoot is roughly half the one before it, which is how a
   spring actually settles. Each stage carries its own easing - a sharp curve
   on the arrival, then ease-in-out on every swing, so the motion slows into
   each turn and picks up out of it rather than snapping between them.
   Opacity is finished early so the whole thing happens in plain sight. */
@keyframes tbc-launcher-in {
  0%   { opacity: 0; transform: scale(.3);
         animation-timing-function: cubic-bezier(.2, .9, .35, 1); }
  18%  { opacity: 1; }
  30%  { transform: scale(1.22);  animation-timing-function: ease-in-out; }
  48%  { transform: scale(.89);   animation-timing-function: ease-in-out; }
  66%  { transform: scale(1.06);  animation-timing-function: ease-in-out; }
  84%  { transform: scale(.975);  animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   10. RESPONSIVE - the panel takes the whole screen on phones
   ========================================================================== */

@media (max-width: 480px), (max-height: 660px) {
  .tbc-panel {
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  /* Only the two measurements change - height, padding and radius all read
     from them, so the ball stays round without restating any of it. */
  .tbc-launcher {
    right: 16px;
    bottom: 16px;
    --tbc-launcher-size: 50px;
    --tbc-launcher-icon: 24px;
  }
}

/* ==========================================================================
   11. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tbc-panel,
  .tbc-msg,
  .tbc-confirm__card,
  .tbc-launcher--in { animation: none; }

  .tbc-avatar__dot,
  .tbc-typing span { animation-duration: 4s; }
}

/* Placed last so hiding always wins over the display rules above. */
.tbc [hidden] { display: none; }