/******************************************************
 * BBbear Theme
 * Version: V4.40ZZK_STEP7CC_BACKEND_FRONTEND_ALIGNMENT
 ******************************************************/
:root {
  --bb-blue: #58A6D7;
  --bb-blue-dark: #2878aa;
  --bb-blue-soft: #DFF3FF;
  --bb-sand: #F6E7BD;
  --bb-cream: #FFFAF4;
  --bb-brown: #8A5437;
  --bb-caramel: #C48A5A;
  --bb-green: #6AA93F;
  --bb-orange: #EFB648;
  --bb-red: #C75B42;
  --bb-text: #2E2218;
  --bb-line: #E4D4B8;
  --bb-white: #FFFFFF;
  --bb-shadow: 0 18px 45px rgba(46,34,24,0.16);
  --bb-radius-xl: 34px;
  --bb-radius-lg: 24px;
  --bb-radius-md: 16px;
  --bb-font-title: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  --bb-font-body: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--bb-font-body);
  color: var(--bb-text);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.86) 0 11%, transparent 12%),
    radial-gradient(circle at 82% 18%, rgba(246,231,189,0.72) 0 13%, transparent 14%),
    linear-gradient(135deg, var(--bb-blue-soft), var(--bb-cream) 46%, var(--bb-sand));
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.bb-page {
  padding: 22px 20px 150px;
}
.bb-topbar {
  width: min(1120px, 100%);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.bb-icon-btn {
  width: 46px;
  height: 46px;
  border: 2px solid rgba(138,84,55,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.82);
  color: var(--bb-brown);
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(46,34,24,0.08);
}
.bb-close-btn {
  background: var(--bb-red);
  color: #fff;
  border-color: transparent;
}
.bb-version {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(138,84,55,0.16);
  color: rgba(46,34,24,0.72);
  font-size: 12px;
  font-weight: 700;
}
.bb-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
}
.bb-card {
  background: rgba(255,250,244,0.94);
  border: 3px solid rgba(255,255,255,0.82);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow);
  padding: clamp(22px, 4vw, 42px);
}
.bb-main-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(280px, 1.15fr);
  gap: clamp(20px, 4vw, 42px);
  align-items: center;
}
.bb-center { text-align: center; }
.bb-brand-kicker {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(88,166,215,0.18);
  color: var(--bb-blue-dark);
  font-weight: 800;
  margin-bottom: 12px;
}
h1, h2, h3 {
  font-family: var(--bb-font-title);
  margin: 0 0 12px;
  line-height: 1.08;
}
h1 { font-size: clamp(34px, 7vw, 62px); color: var(--bb-brown); }
h2 { font-size: clamp(24px, 4vw, 34px); color: var(--bb-brown); }
p { line-height: 1.55; }
.bb-lead {
  font-size: clamp(17px, 2.5vw, 21px);
  color: rgba(46,34,24,0.78);
  margin: 0 0 24px;
}
.bb-small {
  font-size: 14px;
  color: rgba(46,34,24,0.70);
}
.bb-mascot-stage {
  min-height: 330px;
  display: grid;
  place-items: center;
  position: relative;
}
.bb-mascot {
  width: min(310px, 76vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 64%, #f1d0a9 0 16%, transparent 17%),
    radial-gradient(circle at 35% 43%, #2E2218 0 3.5%, transparent 4%),
    radial-gradient(circle at 65% 43%, #2E2218 0 3.5%, transparent 4%),
    radial-gradient(circle at 50% 52%, #2E2218 0 3%, transparent 3.5%),
    radial-gradient(circle at 50% 59%, #8A5437 0 5%, transparent 5.5%),
    radial-gradient(circle at 22% 24%, #C48A5A 0 18%, transparent 18.5%),
    radial-gradient(circle at 78% 24%, #C48A5A 0 18%, transparent 18.5%),
    radial-gradient(circle at 50% 52%, #C48A5A 0 42%, #8A5437 43% 60%, transparent 61%);
  border: 9px solid rgba(255,255,255,0.70);
  box-shadow: 0 24px 44px rgba(138,84,55,0.28);
  position: relative;
}
.bb-mascot::before {
  content: "BB";
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--bb-blue);
  color: #fff;
  font-family: var(--bb-font-title);
  font-weight: 900;
  box-shadow: 0 8px 14px rgba(40,120,170,0.25);
}
.bb-mascot::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
}
.bb-main-btn, .bb-secondary-btn, .bb-danger-btn {
  border: 0;
  border-radius: 22px;
  padding: 15px 24px;
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(46,34,24,0.14);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.bb-main-btn {
  background: var(--bb-blue);
  color: #fff;
  font-size: 20px;
}
.bb-main-btn:hover { background: var(--bb-blue-dark); transform: translateY(-2px); }
.bb-secondary-btn {
  background: #fff;
  color: var(--bb-brown);
  border: 2px solid var(--bb-line);
}
.bb-secondary-btn:hover { background: var(--bb-blue-soft); transform: translateY(-1px); }
.bb-danger-btn {
  background: var(--bb-red);
  color: #fff;
}
.bb-form {
  display: grid;
  gap: 16px;
  text-align: left;
  margin-top: 20px;
}
.bb-form label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}
.bb-form input, .bb-form textarea {
  width: 100%;
  border: 2px solid var(--bb-line);
  border-radius: 18px;
  background: #fff;
  padding: 15px 16px;
  outline: none;
}
.bb-form input:focus, .bb-form textarea:focus {
  border-color: var(--bb-blue);
  box-shadow: 0 0 0 4px rgba(88,166,215,0.18);
}
.bb-message {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(88,166,215,0.14);
  color: var(--bb-text);
  display: none;
}
.bb-message.bb-success { background: rgba(106,169,63,0.16); }
.bb-message.bb-error { background: rgba(199,91,66,0.16); }
.bb-hidden { display: none !important; }
.bb-dashboard-header {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}
.bb-dashboard-bear {
  width: 88px;
  height: 88px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: var(--bb-sand);
  font-size: 46px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.6);
}
.bb-battery {
  min-width: 210px;
  background: rgba(255,255,255,0.82);
  border: 2px solid var(--bb-line);
  border-radius: 20px;
  padding: 10px;
}
.bb-battery-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 7px;
}
.bb-battery-track {
  height: 16px;
  border-radius: 999px;
  background: rgba(138,84,55,0.14);
  overflow: hidden;
}
.bb-battery-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bb-green), var(--bb-orange));
}
.bb-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 14px;
  margin: 20px 0 24px;
}
.bb-summary-item {
  background: #fff;
  border: 2px solid rgba(228,212,184,0.8);
  border-radius: 20px;
  padding: 16px;
}
.bb-summary-item strong {
  display: block;
  color: var(--bb-brown);
  margin-bottom: 6px;
}
.bb-modules-grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(210px, 1fr) );
  gap: 16px;
}
.bb-module-card {
  border: 2px solid var(--bb-line);
  border-radius: 24px;
  background: #fff;
  padding: 18px;
  min-height: 170px;
  display: grid;
  gap: 10px;
  align-content: start;
  position: relative;
  overflow: hidden;
}
.bb-module-card::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -40px;
  top: -44px;
  border-radius: 50%;
  background: var(--module-color, var(--bb-blue));
  opacity: .18;
}
.bb-module-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bb-module-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--module-color, var(--bb-blue));
  color: #fff;
  font-size: 25px;
}
.bb-status-pill {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(106,169,63,0.16);
  color: #46752b;
}
.bb-status-pill.locked {
  background: rgba(199,91,66,0.16);
  color: var(--bb-red);
}
.bb-module-card h3 { margin: 0; font-size: 22px; }
.bb-module-card p { margin: 0; font-size: 14px; color: rgba(46,34,24,0.72); }
.bb-module-card .bb-secondary-btn {
  width: 100%;
  margin-top: 6px;
}

.bb-module-card.is-active {
  border-color: color-mix(in srgb, var(--module-color, var(--bb-blue)) 68%, white);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82)),
    radial-gradient(circle at 92% 8%, var(--module-color, var(--bb-blue)) 0 34%, transparent 35%);
  box-shadow: 0 16px 32px rgba(46,34,24,0.13);
}
.bb-module-card.is-active::before {
  opacity: .26;
}
.bb-module-card.is-active .bb-module-icon {
  background: var(--module-color, var(--bb-blue));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--module-color, var(--bb-blue)) 35%, transparent);
}
.bb-module-card.is-locked {
  border-color: #cfcfcf;
  background:
    linear-gradient(180deg, #f8f8f8, #eeeeee);
  color: #5f5f5f;
  filter: grayscale(1);
  box-shadow: none;
}
.bb-module-card.is-locked::before {
  background: #b8b8b8;
  opacity: .20;
}
.bb-module-card.is-locked .bb-module-icon {
  background: linear-gradient(135deg, #b7b7b7, #8f8f8f);
  color: #ffffff;
}
.bb-module-card.is-locked h3,
.bb-module-card.is-locked p {
  color: #666666;
}
.bb-module-action {
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-radius: 18px;
  padding: 12px 14px;
  font-weight: 900;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.bb-module-action.is-active {
  background: var(--module-color, var(--bb-blue));
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--module-color, var(--bb-blue)) 32%, transparent);
}
.bb-module-action.is-active:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.bb-module-action.is-locked {
  background: linear-gradient(135deg, #d6d6d6, #b8b8b8);
  color: #555555;
  box-shadow: none;
}

.bb-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.bb-diagnostic {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  background: rgba(255,255,255,0.96);
  border: 2px solid rgba(88,166,215,0.28);
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(46,34,24,0.18);
  padding: 10px;
}
.bb-diagnostic-inner {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(4, auto);
  gap: 8px;
  align-items: center;
}
.bb-diagnostic input {
  min-height: 38px;
  border: 1px solid var(--bb-line);
  border-radius: 12px;
  padding: 8px 10px;
}
.bb-diagnostic button {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  padding: 8px 11px;
  background: var(--bb-blue);
  color: #fff;
  font-weight: 800;
}
.bb-diag-output {
  margin-top: 8px;
  max-height: 82px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
  background: var(--bb-cream);
  border-radius: 14px;
  padding: 8px;
}
@media (max-width: 840px) {
  .bb-main-grid { grid-template-columns: 1fr; }
  .bb-mascot-stage { min-height: 240px; }
  .bb-dashboard-header { grid-template-columns: 70px 1fr; }
  .bb-battery { grid-column: 1 / -1; min-width: 0; }
  .bb-summary-grid { grid-template-columns: 1fr; }
  .bb-diagnostic-inner { grid-template-columns: 1fr 1fr; }
  .bb-diagnostic-inner input { grid-column: 1 / -1; }
}


/******************************************************
 * Step 5 - TALK minimal
 * Version: V4.40ZZK_STEP7CC_BACKEND_FRONTEND_ALIGNMENT
 ******************************************************/
.bb-page-discussion .bb-card {
  max-width: 980px;
  margin: 0 auto;
}

.bb-talk-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bb-talk-header {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  align-items: center;
}

.bb-talk-bear {
  display: grid;
  place-items: center;
}

.bb-mascot.small {
  width: 138px;
  height: 138px;
  min-width: 138px;
  border-width: 6px;
}

.bb-chat-box {
  min-height: 320px;
  max-height: 48vh;
  overflow: auto;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,0.72);
  border: 2px solid rgba(138,84,55,0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bb-chat-message {
  width: min(78%, 640px);
  padding: 14px 16px;
  border-radius: 22px;
  box-shadow: 0 8px 18px rgba(46,34,24,0.08);
}

.bb-chat-message strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--bb-font-title);
}

.bb-chat-message p {
  margin: 0;
}

.bb-chat-message.bear {
  align-self: flex-start;
  background: var(--bb-blue-soft);
  border: 2px solid rgba(88,166,215,0.28);
}

.bb-chat-message.user {
  align-self: flex-end;
  background: var(--bb-sand);
  border: 2px solid rgba(239,182,72,0.30);
}

.bb-talk-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bb-talk-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: stretch;
}

.bb-talk-input-row textarea {
  resize: vertical;
  min-height: 92px;
  border: 2px solid rgba(138,84,55,0.18);
  border-radius: 18px;
  padding: 14px 16px;
  background: #fff;
  color: var(--bb-text);
  outline: none;
}

.bb-talk-input-row textarea:focus {
  border-color: var(--bb-blue);
  box-shadow: 0 0 0 4px rgba(88,166,215,0.18);
}

.bb-talk-input-row textarea:disabled {
  background: #eeeeee;
  color: #777;
}

.bb-talk-input-row .bb-main-btn {
  align-self: stretch;
  min-width: 140px;
}

@media (max-width: 760px) {
  .bb-talk-header {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .bb-talk-input-row {
    grid-template-columns: 1fr;
  }

  .bb-chat-message {
    width: 92%;
  }
}


/******************************************************
 * Step 6 - TALK visual states
 ******************************************************/
.bb-talk-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.38fr) minmax(320px, 0.62fr);
  gap: clamp(22px, 4vw, 38px);
  align-items: stretch;
}

.bb-talk-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bb-talk-main {
  min-width: 0;
}

.bb-talk-mascot-stage {
  min-height: 280px;
  padding: 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,0.82), transparent 26%),
    linear-gradient(145deg, rgba(223,243,255,0.88), rgba(246,231,189,0.55));
  border: 2px solid rgba(255,255,255,0.85);
  overflow: hidden;
}

.bb-mascot-state-label {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  color: var(--bb-brown);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bb-mascot-talk {
  position: relative;
  transition: transform 180ms ease, filter 180ms ease;
}

.bb-mascot-talk.state-normal {
  animation: bb-bear-idle 3.4s ease-in-out infinite;
}

.bb-mascot-talk.state-thinking {
  animation: bb-bear-thinking 1.25s ease-in-out infinite;
  filter: saturate(1.06);
}

.bb-mascot-talk.state-speaking {
  animation: bb-bear-speaking 0.62s ease-in-out infinite;
}

.bb-mascot-talk.state-listening {
  animation: bb-bear-listening 1s ease-in-out infinite;
  filter: saturate(1.12) brightness(1.02);
}

.bb-mascot-mouth {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 34px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 0 0 28px 28px;
  background: rgba(46,34,24,0.78);
  opacity: 0.85;
  transition: height 120ms ease, border-radius 120ms ease, width 120ms ease;
}

.bb-mascot-talk.state-speaking .bb-mascot-mouth {
  animation: bb-mouth-speaking 310ms ease-in-out infinite;
}

.bb-mascot-wave {
  position: absolute;
  inset: 18%;
  border: 4px solid rgba(88,166,215,0.42);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.bb-mascot-talk.state-listening .bb-mascot-wave {
  animation: bb-wave-listening 1.3s ease-out infinite;
}

.bb-mascot-talk.state-listening .wave-2 {
  animation-delay: 0.36s;
}

.bb-mascot-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 2px solid rgba(88,166,215,0.26);
  opacity: 0;
  pointer-events: none;
}

.bb-mascot-bubble.bubble-1 {
  width: 22px;
  height: 22px;
  right: 18%;
  top: 7%;
}

.bb-mascot-bubble.bubble-2 {
  width: 31px;
  height: 31px;
  right: 8%;
  top: -3%;
}

.bb-mascot-bubble.bubble-3 {
  width: 42px;
  height: 42px;
  right: -3%;
  top: -17%;
}

.bb-mascot-talk.state-thinking .bb-mascot-bubble {
  opacity: 1;
  animation: bb-thinking-bubble 1.45s ease-in-out infinite;
}

.bb-mascot-talk.state-thinking .bubble-2 {
  animation-delay: 0.15s;
}

.bb-mascot-talk.state-thinking .bubble-3 {
  animation-delay: 0.3s;
}

.bb-talk-voice-panel {
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(138,84,55,0.15);
}

.bb-talk-voice-panel strong {
  color: var(--bb-brown);
  font-family: var(--bb-font-title);
  font-size: 20px;
}

.bb-actions-row.compact {
  margin-top: 10px;
  gap: 8px;
}

.bb-secondary-btn.is-active {
  background: var(--bb-blue);
  color: #fff;
  border-color: transparent;
}

.bb-secondary-btn.is-off {
  background: #d8d8d8;
  color: #555;
  border-color: #c4c4c4;
}

.bb-chat-box.improved {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,250,244,0.92));
  border: 2px solid rgba(138,84,55,0.12);
}

.bb-chat-box.improved .bb-chat-message {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 86%;
}

.bb-chat-box.improved .bb-chat-message.user {
  margin-left: auto;
  flex-direction: row-reverse;
}

.bb-chat-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(138,84,55,0.12);
  box-shadow: 0 6px 14px rgba(46,34,24,0.08);
}

.bb-chat-bubble-content {
  border-radius: 22px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 18px rgba(46,34,24,0.08);
}

.bb-chat-message.bear .bb-chat-bubble-content {
  background: rgba(223,243,255,0.86);
}

.bb-chat-message.user .bb-chat-bubble-content {
  background: rgba(246,231,189,0.92);
}

.bb-chat-bubble-content strong {
  display: block;
  margin-bottom: 4px;
}

.bb-chat-bubble-content p {
  margin: 0;
}

@keyframes bb-bear-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(0.5deg); }
}

@keyframes bb-bear-thinking {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes bb-bear-speaking {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.02); }
}

@keyframes bb-bear-listening {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-0.8deg); }
}

@keyframes bb-mouth-speaking {
  0%   { width:26px; height:10px; border-radius:0 0 18px 18px; background:#3a2318; }
  18%  { width:34px; height:26px; border-radius:50% 50% 44% 44%; background:#1a0800; }
  36%  { width:20px; height:28px; border-radius:50%;             background:#1a0800; }
  55%  { width:46px; height:13px; border-radius:0 0 28px 28px;  background:#3a2318; }
  75%  { width:30px; height:22px; border-radius:50%;             background:#1a0800; }
  100% { width:26px; height:10px; border-radius:0 0 18px 18px;  background:#3a2318; }
}

@keyframes bb-wave-listening {
  0% { transform: scale(0.84); opacity: 0.55; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes bb-thinking-bubble {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(-8px); opacity: 1; }
}

@media (max-width: 820px) {
  .bb-talk-layout {
    grid-template-columns: 1fr;
  }

  .bb-talk-mascot-stage {
    min-height: 240px;
  }

  .bb-chat-box.improved .bb-chat-message {
    max-width: 96%;
  }
}


/******************************************************
 * Step6B - Functional voice controls
 ******************************************************/
.bb-talk-voice-panel.functional {
  display: grid;
  gap: 10px;
}
.bb-field-compact {
  display: grid;
  gap: 5px;
  font-weight: 800;
  font-size: 13px;
}
.bb-field-compact select {
  width: 100%;
  border: 2px solid rgba(138,84,55,0.18);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  color: var(--bb-text);
}
.bb-mic-fallback-btn {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.bb-mic-symbol {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  font-size: 18px;
}
.bb-mic-fallback-btn.is-active {
  border-color: var(--bb-blue);
  background: rgba(88,166,215,0.16);
}
.bb-message.info {
  color: var(--bb-blue-dark);
}


/* Step6J - politique voix admin */
.bb-voice-policy-ok {
  font-weight: 800;
}

.bb-voice-policy-warning {
  font-weight: 800;
}

#speechVoiceSelect option:disabled {
  color: #777;
}

/* Step6M - Micro SpeechRecognition */
.bb-mic-fallback-btn.is-active {
  border-color: var(--bb-red);
  background: rgba(199,91,66,0.16);
  animation: bb-mic-pulse 1.1s ease-in-out infinite;
}

.bb-mic-fallback-btn.is-disabled {
  opacity: .62;
  cursor: not-allowed;
}

.bb-mic-auto-send {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(46,34,24,0.78);
  line-height: 1.35;
}

.bb-mic-auto-send input {
  width: 18px;
  height: 18px;
  accent-color: var(--bb-blue);
}

.bb-mic-status {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.64);
  border: 1px solid rgba(138,84,55,0.14);
}

.bb-mic-ready {
  background: rgba(106,169,63,0.13);
}

.bb-mic-listening {
  background: rgba(88,166,215,0.17);
  font-weight: 800;
}

.bb-mic-warning {
  background: rgba(239,182,72,0.18);
}

.bb-mic-error {
  background: rgba(199,91,66,0.16);
  font-weight: 800;
}

@keyframes bb-mic-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.02); }
}


/******************************************************
 * Step7A - Quiz minimal
 ******************************************************/
.bb-quiz-card {
  max-width: 980px;
  margin: 0 auto;
}

.bb-quiz-question-card,
.bb-quiz-final-card {
  margin-top: 1.2rem;
  padding: 1.2rem;
  border-radius: 24px;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(75, 56, 33, 0.12);
  box-shadow: 0 12px 28px rgba(65, 43, 21, 0.08);
}

.bb-quiz-question-card h2 {
  margin: 0.4rem 0 1rem;
  line-height: 1.25;
}

.bb-quiz-answers {
  display: grid;
  gap: 0.8rem;
  margin: 1rem 0;
}

.bb-quiz-answer-btn {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.8rem;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 0.8rem 1rem;
  border: 2px solid rgba(82, 134, 175, 0.25);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.bb-quiz-answer-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(82, 134, 175, 0.55);
  box-shadow: 0 10px 20px rgba(65, 43, 21, 0.09);
}

.bb-quiz-answer-btn strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: rgba(82, 134, 175, 0.14);
}



.bb-quiz-answer-btn.is-selected {
  border-color: rgba(82, 134, 175, 0.9);
  background: rgba(82, 134, 175, 0.14);
  box-shadow: 0 10px 22px rgba(65, 43, 21, 0.12);
}

.bb-hidden-admin-action[hidden] {
  display: none !important;
}

.bb-quiz-answer-btn.is-correct {
  border-color: rgba(51, 155, 96, 0.7);
  background: rgba(51, 155, 96, 0.12);
}

.bb-quiz-answer-btn.is-wrong {
  border-color: rgba(211, 83, 72, 0.7);
  background: rgba(211, 83, 72, 0.12);
}

.bb-quiz-answer-btn:disabled {
  cursor: default;
  opacity: 0.9;
}


/* =====================================================
   STEP7B - Quiz thème, chrono et musique
===================================================== */
.bb-quiz-theme-card,
.bb-quiz-question-card,
.bb-quiz-final-card {
  margin-top: 18px;
  padding: 18px;
  border: 2px solid rgba(88,166,215,0.25);
  border-radius: var(--bb-radius-lg);
  background: rgba(255,255,255,0.72);
}

.bb-quiz-themes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.bb-quiz-theme-btn {
  width: 100%;
  min-height: 118px;
  padding: 14px;
  border: 2px solid rgba(138,84,55,0.16);
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff, var(--bb-blue-soft));
  color: var(--bb-text);
  text-align: left;
  box-shadow: 0 10px 20px rgba(46,34,24,0.08);
}

.bb-quiz-theme-btn strong {
  display: block;
  font-family: var(--bb-font-title);
  font-size: 1.05rem;
  color: var(--bb-brown);
  margin-bottom: 6px;
}

.bb-quiz-theme-btn span {
  display: block;
  font-size: 0.88rem;
  opacity: 0.86;
  line-height: 1.35;
}

.bb-quiz-theme-btn.is-selected {
  border-color: var(--bb-orange);
  background: linear-gradient(145deg, #fff8e6, #fff);
  box-shadow: 0 0 0 4px rgba(239,182,72,0.20);
}

.bb-quiz-timer {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(138,84,55,0.16);
  border-radius: 18px;
  background: rgba(255,250,244,0.9);
}

.bb-quiz-timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.bb-quiz-timer-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(138,84,55,0.14);
}

.bb-quiz-timer-bar {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--bb-green);
  transition: width 1s linear, background-color 0.4s ease;
}

.bb-quiz-hourglass {
  position: relative;
  min-height: 98px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.bb-quiz-hourglass-icon {
  font-size: 58px;
  line-height: 1;
  animation: bbHourglassPulse 1.5s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

.bb-quiz-hourglass-sand {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 8px;
  height: 100%;
  max-height: 76px;
  border-radius: 50% 50% 10px 10px;
  background: linear-gradient(0deg, rgba(239,182,72,0.65), rgba(246,231,189,0.15));
  transform-origin: bottom;
  transition: transform 1s linear, opacity 0.4s ease;
  z-index: 1;
}

@keyframes bbHourglassPulse {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(2deg) scale(1.04); }
}

.bb-quiz-answer-btn.is-disabled {
  pointer-events: none;
  opacity: 0.82;
}

.bb-quiz-answer-btn.is-waiting {
  filter: saturate(0.7);
}



/******************************************************
 * Admin Space - Step7F
 ******************************************************/
.bb-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.bb-action-row button {
  flex: 1 1 220px;
}

.bb-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  font-weight: 600;
}

.bb-check-row input {
  width: auto;
  margin-top: 3px;
}

.bb-output {
  white-space: pre-wrap;
  overflow: auto;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(92,62,38,0.18);
  border-radius: 18px;
  padding: 14px;
  min-height: 180px;
  max-height: 520px;
}

.bb-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

/******************************************************
 * BBbear Theme — STEP 8AB
 * Univers BBbear + Accès Hostinger
 * Version: V4.40ZZK_STEP7CC_BACKEND_FRONTEND_ALIGNMENT
 *
 * INSTRUCTIONS :
 * Coller ce bloc à la FIN de bbbear_theme.css
 * (après la dernière règle existante).
 ******************************************************/


/* ====================================================
   PAGE UNIVERS — Structure générale
==================================================== */
.bb-page-universe {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 15% 10%,  rgba(223,243,255,0.95) 0%, transparent 38%),
    radial-gradient(ellipse at 88% 80%,  rgba(246,231,189,0.80) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 50%,  rgba(255,250,244,1)    0%, transparent 70%),
    linear-gradient(160deg, #dff3ff 0%, #fffaf4 48%, #f6e7bd 100%);
}

.bb-universe-main {
  min-height: calc(100vh - 60px);
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 48px);
}

.bb-universe-footer {
  text-align: center;
  padding: 14px 20px 20px;
  opacity: .72;
}


/* ====================================================
   FOND ANIMÉ — étincelles et bulles
==================================================== */
.bb-universe-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Étincelles dorées */
.bb-sparkle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bb-orange);
  opacity: 0;
  animation: bb-sparkle-pop 4s ease-in-out infinite;
}
.bb-sp-1  { top: 8%;  left: 12%; width: 10px; height: 10px; animation-delay: 0s;    animation-duration: 3.8s; background: var(--bb-orange); }
.bb-sp-2  { top: 18%; left: 78%; width: 8px;  height: 8px;  animation-delay: 0.7s;  animation-duration: 4.2s; background: var(--bb-blue); }
.bb-sp-3  { top: 72%; left: 8%;  width: 14px; height: 14px; animation-delay: 1.1s;  animation-duration: 3.5s; background: var(--bb-caramel); }
.bb-sp-4  { top: 62%; left: 88%; width: 9px;  height: 9px;  animation-delay: 1.8s;  animation-duration: 4.6s; background: var(--bb-green); }
.bb-sp-5  { top: 40%; left: 5%;  width: 7px;  height: 7px;  animation-delay: 2.3s;  animation-duration: 3.2s; background: var(--bb-orange); }
.bb-sp-6  { top: 28%; left: 92%; width: 11px; height: 11px; animation-delay: 0.4s;  animation-duration: 5.0s; background: var(--bb-blue); }

@keyframes bb-sparkle-pop {
  0%   { opacity: 0;    transform: scale(0.4) rotate(0deg); }
  30%  { opacity: 0.85; transform: scale(1.2) rotate(20deg); }
  60%  { opacity: 0.6;  transform: scale(1)   rotate(40deg); }
  100% { opacity: 0;    transform: scale(0.4) rotate(60deg); }
}

/* Bulles flottantes douces */
.bb-float-blob {
  position: absolute;
  border-radius: 50%;
  animation: bb-blob-float 12s ease-in-out infinite;
  opacity: 0.22;
}
.bb-blob-1 {
  width: 340px; height: 340px;
  top: -80px; left: -80px;
  background: radial-gradient(circle, var(--bb-blue-soft), transparent 70%);
  animation-duration: 14s;
  animation-delay: 0s;
}
.bb-blob-2 {
  width: 280px; height: 280px;
  bottom: -60px; right: -60px;
  background: radial-gradient(circle, var(--bb-sand), transparent 70%);
  animation-duration: 11s;
  animation-delay: 3s;
}
.bb-blob-3 {
  width: 200px; height: 200px;
  top: 42%; left: 62%;
  background: radial-gradient(circle, rgba(196,138,90,0.3), transparent 70%);
  animation-duration: 16s;
  animation-delay: 6s;
}

@keyframes bb-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(18px, -24px) scale(1.04); }
  66%       { transform: translate(-14px, 18px) scale(0.96); }
}


/* ====================================================
   GRILLE PRINCIPALE
==================================================== */
.bb-universe-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr);
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
  width: min(1120px, 100%);
}


/* ====================================================
   COLONNE MASCOTTE
==================================================== */
.bb-universe-mascot-col {
  display: flex;
  justify-content: center;
}

.bb-universe-mascot-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Mascotte agrandie pour la page univers */
.bb-mascot-universe {
  width: min(360px, 82vw);
  aspect-ratio: 1;
  animation: bb-universe-bear-idle 4s ease-in-out infinite;
  filter: drop-shadow(0 28px 48px rgba(138,84,55,0.32));
}

@keyframes bb-universe-bear-idle {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25%       { transform: translateY(-10px) rotate(0.8deg) scale(1.01); }
  50%       { transform: translateY(-6px) rotate(0deg) scale(1.02); }
  75%       { transform: translateY(-12px) rotate(-0.6deg) scale(1.01); }
}

/* Bulle de parole de la mascotte */
.bb-universe-speech {
  background: #ffffff;
  border: 2px solid rgba(88,166,215,0.30);
  border-radius: 22px;
  padding: 13px 20px;
  font-family: var(--bb-font-title);
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 800;
  color: var(--bb-brown);
  box-shadow: 0 12px 28px rgba(46,34,24,0.10);
  position: relative;
  text-align: center;
  animation: bb-speech-appear 0.5s ease 0.8s both;
  max-width: min(320px, 90vw);
}

/* Flèche bulle pointant vers le haut */
.bb-universe-speech::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: rgba(88,166,215,0.30);
}
.bb-universe-speech::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #ffffff;
}

@keyframes bb-speech-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ====================================================
   COLONNE CONTENU
==================================================== */
.bb-universe-content-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bb-universe-title {
  font-size: clamp(32px, 6vw, 58px);
  color: var(--bb-brown);
  margin: 0 0 14px;
  line-height: 1.08;
  animation: bb-content-fadein 0.5s ease 0.3s both;
}

.bb-universe-desc {
  font-size: clamp(16px, 2.3vw, 20px);
  color: rgba(46,34,24,0.80);
  margin: 0 0 22px;
  animation: bb-content-fadein 0.5s ease 0.45s both;
}

@keyframes bb-content-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ====================================================
   BADGES ACTIVITÉS
==================================================== */
.bb-universe-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  animation: bb-content-fadein 0.5s ease 0.6s both;
}

.bb-universe-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border: 2px solid rgba(138,84,55,0.14);
  font-family: var(--bb-font-title);
  font-size: 14px;
  font-weight: 800;
  color: var(--bb-brown);
  box-shadow: 0 6px 14px rgba(46,34,24,0.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

.bb-universe-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(46,34,24,0.13);
}


/* ====================================================
   BOUTON PRESS START
==================================================== */
.bb-press-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 36px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--bb-blue), var(--bb-blue-dark));
  color: #ffffff;
  font-family: var(--bb-font-title);
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 16px 38px rgba(40,120,170,0.38),
    0 0 0 0 rgba(88,166,215,0.4);
  animation:
    bb-content-fadein 0.5s ease 0.75s both,
    bb-press-start-glow 2.4s ease-in-out 1.4s infinite;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  align-self: flex-start;
}

.bb-press-start-btn:hover {
  background: linear-gradient(135deg, #4a96c5, var(--bb-blue-dark));
  transform: translateY(-3px);
  box-shadow:
    0 22px 46px rgba(40,120,170,0.44),
    0 0 0 8px rgba(88,166,215,0.18);
}

.bb-press-start-btn:active {
  transform: translateY(0);
}

.bb-press-start-btn:disabled {
  opacity: 0.65;
  animation: none;
  cursor: wait;
}

.bb-press-start-icon {
  font-size: 1.1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}

/* Animation pulsation douce du bouton */
@keyframes bb-press-start-glow {
  0%, 100% {
    box-shadow:
      0 16px 38px rgba(40,120,170,0.38),
      0 0 0 0 rgba(88,166,215,0.4);
  }
  50% {
    box-shadow:
      0 20px 44px rgba(40,120,170,0.46),
      0 0 0 12px rgba(88,166,215,0.08);
  }
}

/* État prêt après validation accès */
.bb-press-start-btn.bb-press-start-ready {
  animation:
    bb-press-start-arrive 0.4s ease both,
    bb-press-start-glow 2.4s ease-in-out 0.5s infinite;
}

@keyframes bb-press-start-arrive {
  from { transform: scale(0.92); opacity: 0.7; }
  to   { transform: scale(1);    opacity: 1; }
}


/* ====================================================
   OVERLAY ACCÈS HOSTINGER
==================================================== */
.bb-access-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(46,34,24,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: bb-overlay-in 0.25s ease both;
}

.bb-access-overlay.bb-hidden {
  display: none !important;
}

@keyframes bb-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bb-access-box {
  background: var(--bb-cream);
  border: 3px solid rgba(255,255,255,0.88);
  border-radius: var(--bb-radius-xl);
  box-shadow: 0 28px 60px rgba(46,34,24,0.28);
  padding: clamp(28px, 5vw, 50px);
  width: min(440px, 100%);
  text-align: center;
  animation: bb-box-in 0.3s ease 0.1s both;
}

@keyframes bb-box-in {
  from { transform: translateY(16px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.bb-access-bear {
  font-size: 58px;
  line-height: 1;
  margin-bottom: 12px;
  animation: bb-bear-bounce 1.5s ease infinite;
}

@keyframes bb-bear-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(2deg); }
}

.bb-access-box h2 {
  font-size: clamp(26px, 5vw, 34px);
  color: var(--bb-brown);
  margin: 0 0 8px;
}

.bb-access-desc {
  color: rgba(46,34,24,0.76);
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.5;
}

.bb-access-form {
  display: grid;
  gap: 14px;
}

.bb-access-input {
  width: 100%;
  border: 2px solid var(--bb-line);
  border-radius: 20px;
  background: #ffffff;
  padding: 16px 18px;
  font-size: 18px;
  font-family: var(--bb-font-body);
  text-align: center;
  letter-spacing: 0.12em;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.bb-access-input:focus {
  border-color: var(--bb-blue);
  box-shadow: 0 0 0 4px rgba(88,166,215,0.18);
}

.bb-access-submit {
  width: 100%;
  font-size: 18px;
  padding: 16px;
}

.bb-access-error {
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(199,91,66,0.12);
  color: var(--bb-red);
  font-weight: 800;
  font-size: 15px;
  text-align: center;
}

.bb-access-error.bb-hidden {
  display: none !important;
}


/* ====================================================
   RESPONSIVE
==================================================== */
@media (max-width: 860px) {
  .bb-universe-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .bb-universe-mascot-col {
    order: -1;
  }

  .bb-mascot-universe {
    width: min(260px, 72vw);
  }

  .bb-universe-badges {
    justify-content: center;
  }

  .bb-press-start-btn {
    align-self: center;
    width: 100%;
    justify-content: center;
  }

  .bb-universe-speech {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .bb-universe-main {
    padding: 16px;
  }

  .bb-press-start-btn {
    font-size: 20px;
    padding: 18px 24px;
  }

  .bb-access-box {
    padding: 24px 20px;
  }
}


/* Step7AH - Login password reset */
.bb-secondary-btn {
  background: #ffffff;
  color: var(--bb-text);
  border: 2px solid var(--bb-line);
}
.bb-secondary-btn:hover {
  border-color: var(--bb-blue);
}
.bb-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.bb-whatsapp-btn {
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
  background: #6AA93F;
  color: #ffffff;
}


/* Step7AI - Discussion: loader attente + micro sous Envoyer */
.bb-chat-box.improved .bb-chat-message {
  align-items: stretch;
}
.bb-talk-submit-stack {
  display: grid;
  gap: 7px;
}
.bb-mic-under-send {
  display: grid;
  gap: 4px;
}


/* =========================================================
   STEP7AJ — Tête parlante BBbear dans Discussion
   La zone remplace le texte "Userform du nounours" et suit
   les états du moteur voix: normal/listening/thinking/speaking.
========================================================= */
.bb-talking-head-panel {
  display:flex;
  align-items:center;
  gap:12px;
}
.bb-talking-head-meta {
  display:grid;
  gap:2px;
}
.bb-voice-engine-label {
  color:var(--bb-blue-dark);
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
#talkVoiceEngine {
  color:#6b7280;
  font-weight:700;
  font-size:11px;
  text-transform:lowercase;
}


/* =========================================================
   STEP7AK — Tête parlante BBbear calibrée / moteur lipsync
   La page admin/lipsync_calibrage.html sert de module de calibrage.
========================================================= */
.bb-talking-head.bb-lipsync-head,
.bb-lipsync-head {
  width: 300px;
  height: 360px;
  max-width: min(300px, 72vw);
  aspect-ratio: 5 / 6;
  position: relative;
  overflow: visible;
  margin: 0 auto;
  transform-origin: center bottom;
  filter: drop-shadow(0 18px 28px rgba(138,84,55,.25));
}
.bb-lipsync-layer {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
}
.bb-lipsync-head.state-normal {
  animation: bbHeadIdle 3.4s ease-in-out infinite;
}
.bb-lipsync-head.state-listening {
  animation: bbHeadListening 1.1s ease-in-out infinite;
}
.bb-lipsync-head.state-thinking {
  animation: bbHeadThinking 1.8s ease-in-out infinite;
}
.bb-lipsync-head.state-speaking {
  animation: bbHeadSpeaking 0.38s ease-in-out infinite;
}
.bb-lipsync-head.state-speaking .bb-lipsync-mouth {
  filter: drop-shadow(0 2px 3px rgba(46,34,24,.18));
}
.bb-lipsync-head.state-listening .bb-lipsync-wave,
.bb-lipsync-head.state-speaking .bb-lipsync-wave {
  position:absolute;
  left: 20px;
  right: 20px;
  top: 32px;
  bottom: 72px;
  border: 3px solid rgba(88,166,215,.52);
  border-radius: 50%;
  z-index: 30;
  opacity: 0;
  animation: bbHeadWave 1.25s ease-out infinite;
}
.bb-lipsync-head.state-thinking .bb-lipsync-thought {
  position:absolute;
  right: 10px;
  top: 24px;
  width: 74px;
  height: 48px;
  z-index: 31;
  opacity: 1;
}
.bb-lipsync-head.state-thinking .bb-lipsync-thought::before,
.bb-lipsync-head.state-thinking .bb-lipsync-thought::after {
  content:"";
  position:absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(88,166,215,.28);
  box-shadow: 0 6px 12px rgba(40,120,170,.12);
}
.bb-lipsync-head.state-thinking .bb-lipsync-thought::before {
  width: 42px;
  height: 30px;
  right: 12px;
  top: 0;
  animation: bbThoughtFloat 1.5s ease-in-out infinite;
}
.bb-lipsync-head.state-thinking .bb-lipsync-thought::after {
  width: 18px;
  height: 18px;
  right: 50px;
  top: 30px;
  animation: bbThoughtFloat 1.5s ease-in-out infinite .2s;
}
.bb-talking-head-meta .bb-voice-engine-label {
  color: var(--bb-blue-dark);
}
@keyframes bbHeadIdle {
  0%,100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-4px) rotate(.5deg); }
}
@keyframes bbHeadListening {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.025); }
}
@keyframes bbHeadThinking {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-3px) rotate(1deg); }
}
@keyframes bbHeadSpeaking {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.018); }
}
@keyframes bbHeadWave {
  0% { transform: scale(.72); opacity: .42; }
  80% { transform: scale(1.18); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes bbThoughtFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (max-width: 760px) {
  .bb-talking-head.bb-lipsync-head,
  .bb-lipsync-head {
    width: 240px;
    height: 288px;
    transform: scale(.9);
  }
}


/* =========================================================
   STEP7AL — Userform carré fixe pour tête parlante calibrée
   Objectif:
   - Figer la tête parlante dans un cadre carré stable.
   - Garder le lipsync visible sans agrandir le header.
   - Préserver les états normal/listening/thinking/speaking.
========================================================= */
.bb-talking-head-panel {
  width: 100%;
  align-items: center;
  gap: 14px;
}

.bb-talking-head-userform {
  width: 190px;
  height: 190px;
  flex: 0 0 190px;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 26px;
  border: 3px solid rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.90) 0 18%, transparent 19%),
    linear-gradient(180deg, rgba(223,243,255,.98), rgba(255,250,244,.98));
  box-shadow:
    inset 0 0 0 2px rgba(88,166,215,.16),
    0 14px 30px rgba(46,34,24,.16);
}

.bb-talking-head-userform::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 20px;
  border: 1px dashed rgba(88,166,215,.26);
  pointer-events: none;
  z-index: 50;
}

.bb-talking-head-userform::after {
  content: "BBbear";
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 51;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(88,166,215,.94);
  color: #fff;
  font-family: var(--bb-font-title);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 5px 12px rgba(40,120,170,.18);
}

.bb-talking-head-userform .bb-talking-head.bb-lipsync-head,
.bb-talking-head-userform .bb-lipsync-head {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 360px;
  max-width: none;
  margin: 0;
  aspect-ratio: 5 / 6;
  overflow: visible;
  filter: drop-shadow(0 12px 18px rgba(138,84,55,.24));
  transform-origin: center 72%;
}

.bb-talking-head-userform .bb-lipsync-head.state-normal {
  animation: bbHeadIdleUserform 3.4s ease-in-out infinite;
}
.bb-talking-head-userform .bb-lipsync-head.state-listening {
  animation: bbHeadListeningUserform 1.1s ease-in-out infinite;
}
.bb-talking-head-userform .bb-lipsync-head.state-thinking {
  animation: bbHeadThinkingUserform 1.8s ease-in-out infinite;
}
.bb-talking-head-userform .bb-lipsync-head.state-speaking {
  animation: bbHeadSpeakingUserform 0.38s ease-in-out infinite;
}

.bb-talking-head-userform .bb-lipsync-head.state-listening .bb-lipsync-wave,
.bb-talking-head-userform .bb-lipsync-head.state-speaking .bb-lipsync-wave {
  left: 28px;
  right: 28px;
  top: 34px;
  bottom: 122px;
}

.bb-talking-head-userform .bb-lipsync-head.state-thinking .bb-lipsync-thought {
  right: 18px;
  top: 28px;
}

@keyframes bbHeadIdleUserform {
  0%,100% { transform: translate(-50%, -47%) scale(.56) rotate(-.5deg); }
  50% { transform: translate(-50%, -49%) scale(.56) rotate(.5deg); }
}
@keyframes bbHeadListeningUserform {
  0%,100% { transform: translate(-50%, -47%) scale(.56); }
  50% { transform: translate(-50%, -50%) scale(.575); }
}
@keyframes bbHeadThinkingUserform {
  0%,100% { transform: translate(-50%, -47%) scale(.56) rotate(-1deg); }
  50% { transform: translate(-50%, -49%) scale(.56) rotate(1deg); }
}
@keyframes bbHeadSpeakingUserform {
  0%,100% { transform: translate(-50%, -47%) scale(.56); }
  50% { transform: translate(-50%, -49%) scale(.572); }
}

@media (max-width: 760px) {
  .bb-talking-head-panel {
    align-items: center;
    gap: 10px;
  }
  .bb-talking-head-userform {
    width: 156px;
    height: 156px;
    flex-basis: 156px;
    border-radius: 22px;
  }
  .bb-talking-head-userform::before {
    inset: 8px;
    border-radius: 17px;
  }
  .bb-talking-head-userform::after {
    font-size: 10px;
    padding: 4px 8px;
  }
  .bb-talking-head-userform .bb-talking-head.bb-lipsync-head,
  .bb-talking-head-userform .bb-lipsync-head {
    width: 300px;
    height: 360px;
  }
  @keyframes bbHeadIdleUserform {
    0%,100% { transform: translate(-50%, -47%) scale(.46) rotate(-.5deg); }
    50% { transform: translate(-50%, -49%) scale(.46) rotate(.5deg); }
  }
  @keyframes bbHeadListeningUserform {
    0%,100% { transform: translate(-50%, -47%) scale(.46); }
    50% { transform: translate(-50%, -50%) scale(.475); }
  }
  @keyframes bbHeadThinkingUserform {
    0%,100% { transform: translate(-50%, -47%) scale(.46) rotate(-1deg); }
    50% { transform: translate(-50%, -49%) scale(.46) rotate(1deg); }
  }
  @keyframes bbHeadSpeakingUserform {
    0%,100% { transform: translate(-50%, -47%) scale(.46); }
    50% { transform: translate(-50%, -49%) scale(.472); }
  }
}

@media (max-width: 520px) {
  .bb-talking-head-panel {
    display: grid;
    grid-template-columns: 156px 1fr;
  }
}


/* ============================================================
   STEP7AO — DESIGN SYSTEM UNIFIÉ
   Tokens partagés + composants Sky-space + Admin dark
   Version : V4.40ZZK_STEP7CC_BACKEND_FRONTEND_ALIGNMENT
============================================================ */

/* ── Tokens globaux ── */
:root {
  --bb-font-body: 'Trebuchet MS', 'Comic Sans MS', Arial, system-ui, sans-serif;
  --bb-font-title: 'Trebuchet MS', 'Comic Sans MS', Arial, system-ui, sans-serif;
  --bb-r-pill:   999px;
  --bb-r-xl:     24px;
  --bb-r-lg:     18px;
  --bb-r-md:     14px;
  --bb-r-sm:     10px;

  /* Sky-space */
  --sky-accent:      #2196f3;
  --sky-accent-dark: #1565c0;
  --sky-accent-lt:   #e3f2fd;
  --sky-orange:      #e65100;
  --sky-text:        #333;
  --sky-text-soft:   #555;
  --sky-card:        rgba(255,255,255,0.94);
  --sky-hud:         rgba(255,255,255,0.88);

  /* Admin dark */
  --adm-bg:          #0d1b2a;
  --adm-card:        #162033;
  --adm-card2:       #1e2d45;
  --adm-border:      rgba(144,202,249,0.12);
  --adm-accent:      #2196f3;
  --adm-text:        #e0e0e0;
  --adm-text-soft:   #90caf9;
  --adm-top-from:    #1565c0;
  --adm-top-to:      #0d47a1;

  --bb-ease: .18s ease;
}

/* ─────────────────────────────
   SKY-SPACE (normal / demo)
───────────────────────────── */
.bb-sky-body {
  background: linear-gradient(180deg,
    #87ceeb 0%, #b3e5fc 35%, #e1f5fe 65%, #fffde7 85%, #a5d6a7 100%);
  font-family: var(--bb-font-body);
  color: var(--sky-text);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
.bb-sky-body::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg,#81c784 0%,#66bb6a 40%,#4caf50 100%);
  border-radius: 50% 50% 0 0 / 20px 20px 0 0;
  z-index: 0;
  pointer-events: none;
}

/* Nuages */
.bb-cloud {
  position: fixed;
  width: 120px; height: 50px;
  background: white;
  border-radius: 50px;
  opacity: .85;
  animation: bb-drift linear infinite;
  z-index: 1;
  pointer-events: none;
}
.bb-cloud::before,.bb-cloud::after {
  content: ''; position: absolute; background: white; border-radius: 50%;
}
.bb-cloud::before { width:60px; height:60px; top:-25px; left:15px; }
.bb-cloud::after  { width:45px; height:45px; top:-18px; left:45px; }
.bb-cloud:nth-child(1) { top:6%;  animation-duration:28s; }
.bb-cloud:nth-child(2) { top:16%; animation-duration:35s; animation-delay:-12s; width:90px; }
.bb-cloud:nth-child(3) { top:4%;  animation-duration:22s; animation-delay:-7s; width:100px; opacity:.7; }
.bb-cloud:nth-child(4) { top:22%; animation-duration:40s; animation-delay:-20s; width:140px; }
@keyframes bb-drift {
  from { transform: translateX(-220px); }
  to   { transform: translateX(calc(100vw + 220px)); }
}

/* App container */
.bb-app {
  position: relative; z-index: 2;
  width: 100%; height: 100vh;
  display: flex; flex-direction: column; overflow: hidden;
}

/* HUD barre du haut */
.bb-hud {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: var(--sky-hud);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  z-index: 10; flex-shrink: 0;
}
.bb-hud-bear {
  font-size: 26px; cursor: pointer;
  transition: transform var(--bb-ease); user-select: none;
}
.bb-hud-bear:hover { transform: scale(1.2) rotate(-10deg); }
.bb-hud-bear.talking { animation: bb-bear-talk .35s ease-in-out infinite alternate; }
@keyframes bb-bear-talk {
  from { transform: scale(1); } to { transform: scale(1.12) rotate(5deg); }
}
.bb-hud-name { font-size:13px; font-weight:800; color:var(--sky-accent); }
.bb-hud-btn, .bb-hud-back {
  width:36px; height:36px; border:none; border-radius:50%;
  font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition:transform var(--bb-ease);
}
.bb-hud-btn  { background:var(--sky-orange); color:white; }
.bb-hud-back { background:var(--sky-accent); color:white; }
.bb-hud-btn:hover, .bb-hud-back:hover { transform:scale(1.1); }

/* Ecrans switch */
.bb-screen { flex:1; overflow-y:auto; padding:14px 14px 80px; display:none; flex-direction:column; gap:14px; }
.bb-screen.active { display:flex; }

/* Cards sky */
.bb-sky-card {
  background: var(--sky-card);
  border-radius: var(--bb-r-xl);
  padding: 16px 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  border: 2px solid rgba(255,255,255,.8);
}

/* Grille modules 2 colonnes */
.bb-modules-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.bb-module-pill {
  background: white; border-radius: var(--bb-r-xl);
  padding: 18px 12px; text-align: center; cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,.10); border: 3px solid transparent;
  transition: transform var(--bb-ease), box-shadow var(--bb-ease);
  user-select: none;
}
.bb-module-pill:active { transform: scale(.94); }
.bb-module-pill.enabled:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(0,0,0,.15); }
.bb-module-pill.disabled { opacity:.5; cursor:not-allowed; }
.bb-pill-icon  { font-size:36px; display:block; margin-bottom:7px; }
.bb-pill-label { font-size:13px; font-weight:800; color:var(--sky-text); }
.bb-pill-blue   { border-color:#2196f3; background:linear-gradient(135deg,#e3f2fd,#fff); }
.bb-pill-green  { border-color:#4caf50; background:linear-gradient(135deg,#e8f5e9,#fff); }
.bb-pill-purple { border-color:#9c27b0; background:linear-gradient(135deg,#f3e5f5,#fff); }
.bb-pill-orange { border-color:#ff9800; background:linear-gradient(135deg,#fff3e0,#fff); }
.bb-pill-pink   { border-color:#e91e63; background:linear-gradient(135deg,#fce4ec,#fff); }
.bb-pill-teal   { border-color:#009688; background:linear-gradient(135deg,#e0f2f1,#fff); }

/* Toast */
.bb-toast {
  position:fixed; bottom:80px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(0,0,0,.8); color:white;
  padding:10px 20px; border-radius:var(--bb-r-pill);
  font-size:13px; opacity:0;
  transition:opacity .3s, transform .3s;
  pointer-events:none; z-index:200;
  white-space:nowrap; max-width:90vw; text-align:center;
}
.bb-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Loader */
.bb-loader {
  position:fixed; inset:0;
  background:rgba(255,255,255,.72); backdrop-filter:blur(4px);
  z-index:300; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
}
.bb-loader.show { display:flex; }
.bb-loader-spin { font-size:52px; animation:bb-spin 1.2s linear infinite; }
@keyframes bb-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.bb-loader-text { font-size:14px; color:var(--sky-text-soft); font-weight:700; }

/* Menu overlay */
.bb-menu-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:50; display:none; align-items:center; justify-content:center;
}
.bb-menu-overlay.open { display:flex; }
.bb-menu-card {
  background:white; border-radius:var(--bb-r-xl); padding:20px;
  width:90%; max-width:320px; box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.bb-menu-card h3 { text-align:center; font-size:18px; color:var(--sky-orange); margin-bottom:16px; font-weight:900; }
.bb-menu-btn {
  display:flex; align-items:center; gap:11px; width:100%;
  background:#f5f5f5; border:none; border-radius:var(--bb-r-md);
  padding:13px 15px; font-size:14px;
  font-family:var(--bb-font-body); font-weight:600; color:var(--sky-text);
  cursor:pointer; margin-bottom:8px; transition:background var(--bb-ease);
}
.bb-menu-btn:hover  { background:var(--sky-accent-lt); }
.bb-menu-btn.danger { color:#f44336; }
.bb-menu-btn.danger:hover { background:#fce4ec; }
.bb-menu-close {
  width:100%; background:var(--sky-orange); color:white; border:none;
  border-radius:var(--bb-r-md); padding:12px; font-size:14px;
  font-family:var(--bb-font-body); font-weight:800; cursor:pointer; margin-top:4px;
}

/* Badge abonnement */
.bb-sub-badge {
  display:inline-block; padding:3px 10px; border-radius:var(--bb-r-pill);
  font-size:11px; font-weight:800; text-transform:uppercase;
}
.bb-sub-badge.actif,.bb-sub-badge.active   { background:#e8f5e9; color:#2e7d32; }
.bb-sub-badge.expire,.bb-sub-badge.expired { background:#fce4ec; color:#c62828; }
.bb-sub-badge.inactif                      { background:#f5f5f5; color:#757575; }

/* Progress / timer */
.bb-progress-track,.bb-timer-track {
  height:8px; background:#e0e0e0; border-radius:var(--bb-r-pill); overflow:hidden;
}
.bb-timer-track { height:10px; }
.bb-progress-fill {
  height:100%; background:linear-gradient(90deg,var(--sky-accent),#42a5f5);
  border-radius:var(--bb-r-pill); transition:width .4s ease;
}
.bb-timer-fill { height:100%; border-radius:var(--bb-r-pill); transition:width .1s linear; }
.bb-timer-fill.ok     { background:linear-gradient(90deg,#4caf50,#66bb6a); }
.bb-timer-fill.warn   { background:linear-gradient(90deg,#ff9800,#ffb74d); }
.bb-timer-fill.danger { background:linear-gradient(90deg,#f44336,#e57373); }

/* Boutons action sky */
.bb-btn {
  border:none; border-radius:var(--bb-r-md); padding:12px 20px;
  font-size:14px; font-weight:800; font-family:var(--bb-font-body);
  cursor:pointer; transition:transform var(--bb-ease), box-shadow var(--bb-ease);
}
.bb-btn:active { transform:scale(.96); }
.bb-btn-primary  { background:var(--sky-accent); color:white; box-shadow:0 4px 12px rgba(33,150,243,.3); }
.bb-btn-primary:hover  { background:var(--sky-accent-dark); transform:translateY(-1px); }
.bb-btn-secondary { background:#f5f5f5; color:var(--sky-text); }
.bb-btn-secondary:hover { background:var(--sky-accent-lt); }
.bb-btn-danger { background:#f44336; color:white; }
.bb-btn-orange { background:linear-gradient(135deg,var(--sky-orange),#c05000); color:white; }
.bb-btn-full { width:100%; }

/* Barre de saisie */
.bb-input-bar {
  background:rgba(255,255,255,.96); border-top:2px solid var(--sky-accent-lt);
  padding:10px 11px; display:flex; gap:7px; align-items:center; flex-shrink:0;
}
.bb-text-input {
  flex:1; padding:10px 13px; border:2px solid #90caf9;
  border-radius:22px; font-size:13px; font-family:var(--bb-font-body);
  outline:none; transition:border-color var(--bb-ease); background:white;
}
.bb-text-input:focus { border-color:var(--sky-accent); }
.bb-round-btn {
  width:42px; height:42px; border:none; border-radius:50%; font-size:19px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform var(--bb-ease); flex-shrink:0;
}
.bb-round-btn:active { transform:scale(.88); }
.bb-round-btn-send { background:var(--sky-accent); color:white; }
.bb-round-btn-mic  { background:var(--sky-orange); color:white; }
.bb-round-btn-mic.listening { background:#f44336; animation:bb-pulse .7s infinite; }
@keyframes bb-pulse { 0%,100%{opacity:.55} 50%{opacity:.9} }

/* Quiz - réponses */
.bb-answer-btn {
  background:white; border:2.5px solid #ce93d8; border-radius:var(--bb-r-lg);
  padding:12px 10px; text-align:center; cursor:pointer;
  font-size:13px; font-family:var(--bb-font-body); font-weight:700; color:var(--sky-text);
  transition:all var(--bb-ease); box-shadow:0 2px 8px rgba(0,0,0,.07);
}
.bb-answer-btn:hover:not(:disabled) { background:#f3e5f5; border-color:#9c27b0; transform:translateY(-2px); }
.bb-answer-btn:disabled { cursor:default; }
.bb-answer-btn.correct { background:#e8f5e9; border-color:#4caf50; color:#2e7d32; }
.bb-answer-btn.wrong   { background:#fce4ec; border-color:#f44336; color:#c62828; }
.bb-answer-btn.reveal  { background:#e8f5e9; border-color:#4caf50; color:#2e7d32; }

/* Press-start */
.bb-press-start {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--sky-accent); color:white; border:none;
  border-radius:var(--bb-r-pill); padding:20px 36px;
  font-size:24px; font-weight:900; font-family:var(--bb-font-body);
  cursor:pointer; box-shadow:0 10px 30px rgba(33,150,243,.35);
  animation:bb-ps-pulse 2.5s ease-in-out infinite;
}
.bb-press-start:hover { transform:scale(1.04); }
@keyframes bb-ps-pulse {
  0%,100%{box-shadow:0 10px 30px rgba(33,150,243,.35)}
  50%{box-shadow:0 14px 40px rgba(33,150,243,.55)}
}

/* ─────────────────────────────
   ADMIN DARK THEME
───────────────────────────── */
.bb-admin-body {
  background: var(--adm-bg);
  color: var(--adm-text);
  font-family: var(--bb-font-body);
  margin: 0; min-height: 100vh;
}

/* Topbar admin */
.bb-adm-topbar {
  background: linear-gradient(135deg, var(--adm-top-from), var(--adm-top-to));
  padding: 0 20px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap:16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
  position: sticky; top: 0; z-index: 100;
}
.bb-adm-topbar-brand { font-size:20px; font-weight:900; color:white; letter-spacing:.02em; }
.bb-adm-topbar-nav { display:flex; gap:8px; }
.bb-adm-topbar-nav a {
  color:rgba(255,255,255,.82); text-decoration:none; padding:6px 12px;
  border-radius:var(--bb-r-sm); font-size:13px; font-weight:600;
  transition:background var(--bb-ease), color var(--bb-ease);
}
.bb-adm-topbar-nav a:hover,
.bb-adm-topbar-nav a.active { background:rgba(255,255,255,.18); color:white; }

/* Layout sidebar */
.bb-adm-layout { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 60px); }
.bb-adm-sidebar { background:var(--adm-card); border-right:1px solid var(--adm-border); padding:20px 12px; }
.bb-adm-nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--bb-r-md);
  color:rgba(224,224,224,.75); text-decoration:none;
  font-size:14px; font-weight:600;
  transition:background var(--bb-ease), color var(--bb-ease); margin-bottom:2px;
}
.bb-adm-nav-item:hover { background:rgba(255,255,255,.06); color:white; }
.bb-adm-nav-item.active { background:rgba(33,150,243,.22); color:#90caf9; }
.bb-adm-main { padding:24px; overflow-y:auto; }

/* Cards admin */
.bb-adm-card {
  background:var(--adm-card); border:1px solid var(--adm-border);
  border-radius:var(--bb-r-xl); padding:20px 24px;
  box-shadow:0 4px 16px rgba(0,0,0,.2); margin-bottom:20px;
}
.bb-adm-card-title {
  font-size:16px; font-weight:800; color:var(--adm-text-soft);
  margin-bottom:16px; display:flex; align-items:center; gap:8px;
}

/* Stats admin */
.bb-adm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:24px; }
.bb-adm-stat {
  background:var(--adm-card2); border:1px solid var(--adm-border);
  border-radius:var(--bb-r-lg); padding:16px 18px; text-align:center;
}
.bb-adm-stat-value { font-size:30px; font-weight:900; color:var(--adm-text-soft); line-height:1; margin-bottom:4px; }
.bb-adm-stat-label { font-size:12px; color:rgba(224,224,224,.6); text-transform:uppercase; letter-spacing:.05em; }

/* Tableau admin */
.bb-adm-table-wrap { overflow-x:auto; border-radius:var(--bb-r-md); }
.bb-adm-table { width:100%; border-collapse:collapse; font-size:13px; }
.bb-adm-table th {
  background:var(--adm-card2); color:var(--adm-text-soft);
  padding:10px 14px; text-align:left; font-weight:700;
  font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--adm-border);
}
.bb-adm-table td {
  padding:10px 14px; border-bottom:1px solid var(--adm-border);
  color:var(--adm-text); vertical-align:middle;
}
.bb-adm-table tr:hover td { background:rgba(255,255,255,.03); }

/* Badges admin */
.bb-adm-badge { display:inline-block; padding:3px 9px; border-radius:var(--bb-r-pill); font-size:11px; font-weight:700; text-transform:uppercase; }
.bb-adm-badge-green  { background:rgba(165,214,167,.18); color:#a5d6a7; }
.bb-adm-badge-red    { background:rgba(239,154,154,.18); color:#ef9a9a; }
.bb-adm-badge-blue   { background:rgba(144,202,249,.18); color:#90caf9; }
.bb-adm-badge-orange { background:rgba(255,183,77,.18);  color:#ffb74d; }
.bb-adm-badge-gray   { background:rgba(224,224,224,.12); color:#aaaaaa; }

/* Boutons admin */
.bb-adm-btn {
  border:none; border-radius:var(--bb-r-md); padding:8px 14px;
  font-size:12px; font-weight:700; font-family:var(--bb-font-body);
  cursor:pointer; transition:background var(--bb-ease), transform var(--bb-ease);
}
.bb-adm-btn:active { transform:scale(.96); }
.bb-adm-btn-primary { background:var(--adm-accent); color:white; }
.bb-adm-btn-primary:hover { background:#1976d2; }
.bb-adm-btn-danger  { background:#f44336; color:white; }
.bb-adm-btn-danger:hover { background:#c62828; }
.bb-adm-btn-ghost   { background:rgba(255,255,255,.08); color:var(--adm-text); border:1px solid var(--adm-border); }
.bb-adm-btn-ghost:hover { background:rgba(255,255,255,.14); }
.bb-adm-btn-full { width:100%; text-align:center; }

/* Inputs admin */
.bb-adm-input,.bb-adm-select,.bb-adm-textarea {
  background:var(--adm-card2); border:1px solid var(--adm-border);
  border-radius:var(--bb-r-sm); color:var(--adm-text);
  padding:8px 12px; font-size:13px; font-family:var(--bb-font-body);
  outline:none; width:100%; transition:border-color var(--bb-ease);
}
.bb-adm-input:focus,.bb-adm-select:focus,.bb-adm-textarea:focus {
  border-color:var(--adm-accent); box-shadow:0 0 0 3px rgba(33,150,243,.18);
}
.bb-adm-textarea { resize:vertical; min-height:80px; }

/* Modal admin */
.bb-adm-modal-bg {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:200; display:none; align-items:center; justify-content:center;
}
.bb-adm-modal-bg.open { display:flex; }
.bb-adm-modal {
  background:var(--adm-card); border:1px solid var(--adm-border);
  border-radius:var(--bb-r-xl); padding:24px;
  max-width:500px; width:94%; box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.bb-adm-modal-title { font-size:17px; font-weight:900; color:var(--adm-text-soft); margin-bottom:16px; }

/* Responsive admin */
@media (max-width: 860px) {
  .bb-adm-layout { grid-template-columns:1fr; }
  .bb-adm-sidebar,.bb-adm-topbar-nav { display:none; }
}
@media (max-width: 600px) {
  .bb-adm-main { padding:14px; }
  .bb-adm-stats { grid-template-columns:1fr 1fr; }
}



/* =========================================================
   STEP7AO — Discussion: avatar système/calibré + userform figé en haut
   Objectif:
   - Le volet Discussion accepte l'avatar intégré ou l'avatar calibré admin.
   - La tête parlante est placée dans un userform supérieur, sous la navigation.
   - Le carré lipsync reste stable et toujours visible pendant la discussion.
========================================================= */
.bb-talk-avatar-dock {
  position: fixed;
  top: 76px;
  z-index: 45;
  width: min(980px, calc(100% - 28px));
  margin: 10px auto 12px;
  pointer-events: none;
}

.bb-avatar-dock-userform {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 24px;
  border: 2px solid rgba(255,255,255,.88);
  background: rgba(255,250,244,.94);
  box-shadow: 0 16px 32px rgba(46,34,24,.14);
  backdrop-filter: blur(10px);
  padding: 10px 12px 12px;
}

.bb-avatar-dock-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  font-family: var(--bb-font-title);
  color: var(--bb-blue-dark);
  font-size: 13px;
}

.bb-avatar-dock-title strong {
  color: var(--bb-brown);
  font-size: 15px;
}

.bb-avatar-dock-title span {
  color: #5f6b76;
  font-weight: 800;
}

.bb-avatar-dock-body {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.bb-avatar-square-userform {
  width: 148px;
  height: 148px;
  flex: 0 0 148px;
  border-radius: 20px;
}

.bb-avatar-square-userform .bb-lipsync-head {
  width: 300px !important;
  height: 360px !important;
  max-width: none !important;
  transform: translate(-76px, -58px) scale(.66) !important;
  transform-origin: top left;
}

.bb-avatar-dock-meta {
  min-width: 0;
}

.bb-avatar-dock-meta .bb-voice-engine-label {
  display: block;
  margin-bottom: 3px;
}

.bb-avatar-dock-meta strong {
  display: inline-flex;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(88,166,215,.13);
  color: var(--bb-blue-dark);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.bb-avatar-mode-field {
  display: grid;
  gap: 4px;
  margin-top: 7px;
  max-width: 260px;
  font-size: 12px;
  color: #5f6b76;
  font-weight: 800;
}

.bb-avatar-mode-field select {
  width: 100%;
  min-height: 38px;
  border-radius: 13px;
  border: 2px solid rgba(88,166,215,.28);
  background: rgba(255,255,255,.96);
  color: var(--bb-text);
  padding: 0 10px;
  font-weight: 800;
}

.bb-talk-header-compact {
  display: block !important;
  min-height: 0 !important;
}

.bb-page-discussion .bb-shell {
  margin-top: 0;
}

.bb-lipsync-head[data-avatar-mode="system"]::after {
  content: "intégré";
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(88,166,215,.94);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.bb-lipsync-head[data-avatar-mode="calibrated"]::after {
  content: "calibré";
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(106,169,63,.94);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 720px) {
  .bb-talk-avatar-dock {
    top: 54px;
    width: min(100% - 16px, 520px);
    margin-top: 8px;
  }
  .bb-avatar-dock-body {
    grid-template-columns: 116px minmax(0, 1fr);
  }
  .bb-avatar-square-userform {
    width: 116px;
    height: 116px;
  }
  .bb-avatar-square-userform .bb-lipsync-head {
    transform: translate(-92px, -72px) scale(.58) !important;
  }
  .bb-avatar-mode-field {
    max-width: none;
  }
}




/* =========================================================
   STEP7AP — Discussion: userform nounours vraiment figé
   Le dock est hors du flux des messages et reste fixé sous la navigation.
========================================================= */
body.bb-page-discussion {
  padding-top: 245px !important;
}

.bb-page-discussion .bb-topbar {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 28px));
  z-index: 60;
}

.bb-talk-avatar-dock {
  position: fixed !important;
  top: 86px !important;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55 !important;
  margin: 0 !important;
}

.bb-page-discussion .bb-shell {
  position: relative;
  z-index: 2;
}

.bb-page-discussion .bb-chat-box {
  min-height: 360px;
  max-height: calc(100vh - 470px);
}

/* Style admin unifié */
.bb-admin-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.86), transparent 24%),
    linear-gradient(180deg, #dff3ff 0%, #fffaf4 62%, #f6e7bd 100%);
  color: var(--bb-text, #2e2218);
}

.bb-admin-body .bb-shell {
  width: min(1120px, calc(100% - 28px));
  padding: 28px 0;
}

.bb-admin-body .bb-card {
  border-radius: 28px;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 22px 55px rgba(46,34,24,.14);
}

.bb-admin-body .bb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(88,166,215,.14);
  color: #27658c;
  text-decoration: none;
  font-weight: 900;
}

@media (max-width: 760px) {
  body.bb-page-discussion {
    padding-top: 270px !important;
  }
  .bb-talk-avatar-dock {
    top: 82px !important;
  }
  .bb-avatar-dock-body {
    grid-template-columns: 110px 1fr;
  }
  .bb-avatar-square-userform {
    width: 110px;
    height: 110px;
  }
}


/* =========================================================
   STEP7AQ — Discussion: avatar système script/calibré + userform vraiment figé
   - Avatar système = nounours généré par CSS/script (.bb-mascot), nommé "normal".
   - Avatar calibré = lipsync_profile.json.
   - Le userform reste sous la barre de navigation, hors flux des messages.
========================================================= */
.bb-page-discussion .bb-topbar {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  width: min(1120px, calc(100% - 28px));
  margin: 0;
}

.bb-page-discussion .bb-talk-avatar-dock {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: min(980px, calc(100% - 28px));
  margin: 0;
  pointer-events: none;
}

.bb-page-discussion .bb-avatar-dock-userform {
  pointer-events: auto;
  max-height: 172px;
  overflow: hidden;
}

.bb-page-discussion .bb-shell {
  padding-top: 270px;
}

.bb-page-discussion .bb-talk-layout {
  grid-template-columns: 1fr;
}

.bb-page-discussion .bb-talk-side {
  display: none !important;
}

.bb-avatar-mode-stage {
  position: relative;
}

.bb-avatar-mode-stage #talkSystemAvatar,
.bb-avatar-mode-stage #talkHead {
  position: absolute;
  inset: 0;
}

.bb-avatar-mode-stage[data-avatar-mode="system"] #talkHead,
.bb-avatar-mode-stage.is-system-avatar #talkHead {
  display: none !important;
}

.bb-avatar-mode-stage[data-avatar-mode="calibrated"] #talkSystemAvatar,
.bb-avatar-mode-stage.is-calibrated-avatar #talkSystemAvatar {
  display: none !important;
}

.bb-avatar-system-bear {
  width: 124px !important;
  height: 124px !important;
  margin: 12px auto 0;
  transform: none !important;
  box-shadow: 0 16px 28px rgba(138,84,55,.24);
}

.bb-avatar-system-bear::before {
  top: 10%;
  padding: 4px 12px;
  font-size: 13px;
}

.bb-avatar-system-bear .bb-mascot-mouth {
  transform: scale(.72);
}

.bb-avatar-system-bear.state-speaking .bb-mascot-mouth {
  animation: bb-mouth-talk 0.18s ease-in-out infinite alternate;
}

.bb-avatar-system-bear.state-listening .bb-mascot-wave,
.bb-avatar-system-bear.state-speaking .bb-mascot-wave {
  opacity: .75;
}

.bb-avatar-system-bear.state-thinking .bb-mascot-bubble {
  opacity: .95;
}

.bb-avatar-dock-userform[data-avatar-mode="system"] .bb-avatar-dock-title strong::after {
  content: " · normal";
  color: var(--bb-blue-dark);
  font-size: 12px;
}

.bb-avatar-dock-userform[data-avatar-mode="calibrated"] .bb-avatar-dock-title strong::after {
  content: " · calibré";
  color: var(--bb-blue-dark);
  font-size: 12px;
}

@media (max-width: 720px) {
  .bb-page-discussion .bb-talk-avatar-dock {
    top: 78px;
    width: calc(100% - 18px);
  }
  .bb-page-discussion .bb-avatar-dock-body {
    grid-template-columns: 116px minmax(0, 1fr);
  }
  .bb-page-discussion .bb-avatar-square-userform {
    width: 116px;
    height: 116px;
  }
  .bb-avatar-system-bear {
    width: 94px !important;
    height: 94px !important;
    margin-top: 11px;
  }
  .bb-page-discussion .bb-avatar-dock-userform {
    max-height: 148px;
  }
  .bb-page-discussion .bb-shell {
    padding-top: 238px;
  }
}


/* =========================================================
   STEP7AR — Correction alignement avatar système/calibré
   Cause corrigée:
   - L'avatar calibré venait d'un canvas admin 600x720.
   - Le volet discussion l'affichait dans un carré 148x148 avec
     une translation fixe, donc les éléments de visage pouvaient
     paraître décalés après calibration.
   Solution:
   - Le runtime calcule une translation/échelle depuis le calque Head.
   - Le userform reste figé sous la barre de navigation.
========================================================= */

.bb-page-discussion .bb-talk-avatar-dock {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  top: 74px !important;
  width: min(980px, calc(100% - 28px)) !important;
  margin: 0 !important;
}

.bb-page-discussion .bb-shell {
  margin-top: 210px !important;
}

.bb-page-discussion .bb-avatar-square-userform {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.94) 0 38%, rgba(223,243,255,.86) 39% 100%) !important;
  border: 2px solid rgba(88,166,215,.28) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 10px 18px rgba(46,34,24,.12) !important;
}

.bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar {
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

.bb-page-discussion .bb-avatar-square-userform #talkHead.bb-lipsync-head {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 300px !important;
  height: 360px !important;
  max-width: none !important;
  margin: 0 !important;
  transform-origin: top left !important;
  transform:
    translate(var(--bb-lipsync-fit-x, -76px), var(--bb-lipsync-fit-y, -8px))
    scale(var(--bb-lipsync-fit-scale, .66)) !important;
}

.bb-page-discussion .bb-avatar-mode-stage[data-avatar-mode="system"] #talkHead,
.bb-page-discussion .bb-avatar-mode-stage.is-system-avatar #talkHead {
  display: none !important;
}

.bb-page-discussion .bb-avatar-mode-stage[data-avatar-mode="calibrated"] #talkSystemAvatar,
.bb-page-discussion .bb-avatar-mode-stage.is-calibrated-avatar #talkSystemAvatar {
  display: none !important;
}

.bb-page-discussion .bb-avatar-mode-stage[data-avatar-mode="calibrated"] #talkHead,
.bb-page-discussion .bb-avatar-mode-stage.is-calibrated-avatar #talkHead {
  display: block !important;
}

@media (max-width: 720px) {
  .bb-page-discussion .bb-shell {
    margin-top: 245px !important;
  }
}


/* =========================================================
   STEP7AS — Correction bouche avatar système intégré
   Cause:
   - La règle STEP7AQ remplaçait transform: translateX(-50%)
     par transform: scale(.72), ce qui supprimait le centrage horizontal.
   Correction:
   - On conserve translateX(-50%) et on ajoute l'échelle ensuite.
   - La bouche reste centrée sur le museau dans l'avatar système "normal".
========================================================= */
.bb-page-discussion .bb-avatar-system-bear .bb-mascot-mouth {
  left: 50% !important;
  top: 62% !important;
  transform: translateX(-50%) scale(.72) !important;
  transform-origin: center top !important;
}

.bb-page-discussion .bb-avatar-system-bear.state-speaking .bb-mascot-mouth {
  animation: bb-mouth-speaking 360ms ease-in-out infinite !important;
}


/* =========================================================
   STEP7AT — Avatar système de référence + clignement des yeux
   Demande:
   - L'avatar système "normal" doit reprendre le nounours fourni:
     tête ronde caramel, oreilles simples, yeux noirs, museau crème,
     nez brun et bouche centrée.
   - Les yeux clignent 1 fois toutes les 4 secondes.
   - Le mode calibré admin reste indépendant.
========================================================= */

.bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar.bb-system-avatar-ref {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: 124px !important;
  height: 124px !important;
  margin: 8px auto 0 !important;
  transform: none !important;
  overflow: visible !important;
  filter: drop-shadow(0 14px 18px rgba(46,34,24,.18));
}

.bb-system-avatar-ref[hidden],
.bb-avatar-mode-stage[data-avatar-mode="calibrated"] #talkSystemAvatar.bb-system-avatar-ref,
.bb-avatar-mode-stage.is-calibrated-avatar #talkSystemAvatar.bb-system-avatar-ref {
  display: none !important;
}

.bb-system-avatar-ref > span {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

/* STEP7AW — Oreilles reproduites comme le modèle :
   grand cercle extérieur + petit cercle intérieur, groupe placé derrière la face. */
.bb-system-avatar-ref .bb-system-ear {
  width: 64px;
  height: 64px;
  top: -3px;
  border-radius: 50%;
  background: #c98a55;
  z-index: 1;
}

.bb-system-avatar-ref .bb-system-ear-left {
  left: -2px;
}

.bb-system-avatar-ref .bb-system-ear-right {
  right: -2px;
}

.bb-system-avatar-ref .bb-system-head {
  width: 112px;
  height: 112px;
  left: 6px;
  top: 12px;
  border-radius: 50%;
  background: #c98a55;
  z-index: 3;
  box-shadow: inset 0 -6px 0 rgba(138,84,55,.08);
}

.bb-system-avatar-ref .bb-system-ear-shine {
  width: 30px;
  height: 18px;
  top: 15px;
  border-radius: 50%;
  background: #f3d7b4;
  opacity: .72;
  z-index: 2;
}

.bb-system-avatar-ref .bb-system-ear-shine-left {
  left: 15px;
  transform: rotate(-38deg);
}

.bb-system-avatar-ref .bb-system-ear-shine-right {
  right: 15px;
  transform: rotate(38deg);
}

.bb-system-avatar-ref .bb-system-eye {
  width: 12px;
  height: 12px;
  top: 55px;
  border-radius: 50%;
  background: #1f1914;
  z-index: 4;
  transform-origin: center center;
  animation: bbSystemEyeBlink 4s infinite;
}

.bb-system-avatar-ref .bb-system-eye-left {
  left: 41px;
}

.bb-system-avatar-ref .bb-system-eye-right {
  right: 41px;
}

.bb-system-avatar-ref .bb-system-muzzle {
  width: 62px;
  height: 46px;
  left: 31px;
  top: 70px;
  border-radius: 50%;
  background: #f3d7b4;
  z-index: 4;
}

.bb-system-avatar-ref .bb-system-nose {
  width: 22px;
  height: 15px;
  left: 51px;
  top: 74px;
  border-radius: 50%;
  background: #3b2418;
  z-index: 5;
}

.bb-system-avatar-ref .bb-system-mouth {
  width: 28px;
  height: 10px;
  left: 48px;
  top: 96px;
  border-radius: 0 0 18px 18px;
  background: #5a3828;
  z-index: 5;
  transform-origin: center top;
}

.bb-system-avatar-ref.state-speaking .bb-system-mouth {
  animation: bbSystemMouthTalk 280ms ease-in-out infinite alternate;
}

.bb-system-avatar-ref.state-listening .bb-mascot-wave,
.bb-system-avatar-ref.state-speaking .bb-mascot-wave {
  opacity: .72;
}

.bb-system-avatar-ref.state-thinking .bb-mascot-bubble {
  opacity: .95;
}

.bb-system-avatar-ref .bb-mascot-wave {
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(88,166,215,.45);
  border-radius: 50%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: bbWavePulse 1.8s ease-out infinite;
}

.bb-system-avatar-ref .bb-mascot-wave.wave-2 {
  animation-delay: .45s;
}

.bb-system-avatar-ref .bb-mascot-bubble {
  position: absolute;
  background: rgba(88,166,215,.82);
  border-radius: 50%;
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  animation: bbThinkingBubble 1.6s ease-in-out infinite;
}

.bb-system-avatar-ref .bb-mascot-bubble.bubble-1 {
  width: 10px;
  height: 10px;
  top: 12px;
  right: 16px;
}

.bb-system-avatar-ref .bb-mascot-bubble.bubble-2 {
  width: 7px;
  height: 7px;
  top: 5px;
  right: 5px;
  animation-delay: .18s;
}

.bb-system-avatar-ref .bb-mascot-bubble.bubble-3 {
  width: 5px;
  height: 5px;
  top: 0;
  right: 25px;
  animation-delay: .36s;
}

@keyframes bbSystemEyeBlink {
  0%, 92%, 100% {
    transform: scaleY(1);
  }
  94%, 96% {
    transform: scaleY(.10);
  }
}

@keyframes bbSystemMouthTalk {
  from {
    height: 8px;
    border-radius: 0 0 18px 18px;
    transform: scaleX(.92);
  }
  to {
    height: 14px;
    border-radius: 0 0 16px 16px;
    transform: scaleX(1.05);
  }
}

@media (max-width: 720px) {
  .bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar.bb-system-avatar-ref {
    width: 94px !important;
    height: 94px !important;
    margin-top: 9px !important;
    transform: scale(.88) !important;
    transform-origin: center center !important;
  }
}


/* =========================================================
   STEP7BC — Avatar dock séparé + jeu éducatif fusionné
   - Supprime les écritures visibles BBbear / mode avatar.
   - Place "BBbear prépare sa réponse..." à droite du userform avatar.
   - Rapproche le bouton switch du userform avatar.
   - Rend le userform avatar entièrement visible dans son conteneur parent.
========================================================= */
.bb-page-discussion .bb-avatar-dock-userform {
  max-height: none !important;
  overflow: visible !important;
  padding: 8px 10px !important;
}

.bb-page-discussion .bb-avatar-dock-title {
  display: none !important;
}

.bb-page-discussion .bb-avatar-dock-body {
  grid-template-columns: 148px 54px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  overflow: visible !important;
}

.bb-page-discussion .bb-avatar-square-userform {
  overflow: visible !important;
}

.bb-page-discussion .bb-avatar-switch-meta {
  min-width: 54px !important;
  width: 54px !important;
  align-self: center !important;
  justify-content: flex-start !important;
  margin-left: -2px !important;
}

.bb-page-discussion .bb-avatar-switch-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 18px !important;
}

.bb-avatar-response-status {
  justify-self: start;
  align-self: center;
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(88,166,215,.22);
  color: #4b2e18;
  font-weight: 1000;
  line-height: 1.25;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

@media (max-width: 720px) {
  .bb-page-discussion .bb-avatar-dock-body {
    grid-template-columns: 116px 50px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .bb-page-discussion .bb-avatar-switch-meta {
    min-width: 50px !important;
    width: 50px !important;
  }

  .bb-page-discussion .bb-avatar-switch-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .bb-avatar-response-status {
    min-height: 48px;
    padding: 8px 10px;
    font-size: 13px;
  }
}



/* =========================================================
   STEP7BC — Dock avatar séparé, avatar non débordant, fit calibrage complet
   - Le dock avatar est figé SOUS la barre de navigation avec un espace fixe.
   - Le carré avatar masque les débordements internes, mais l'image calibrée est recalculée pour tenir entière.
   - Le statut "BBbear prépare sa réponse..." reste à droite du carré avatar.
========================================================= */
body.bb-page-discussion {
  padding-top: 0 !important;
}

.bb-page-discussion .bb-topbar {
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1120px, calc(100% - 28px)) !important;
  z-index: 120 !important;
  margin: 0 !important;
}

.bb-page-discussion .bb-talk-avatar-dock {
  position: fixed !important;
  top: 78px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(980px, calc(100% - 28px)) !important;
  z-index: 95 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.bb-page-discussion .bb-avatar-dock-userform {
  pointer-events: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 8px 10px !important;
}

.bb-page-discussion .bb-avatar-dock-body {
  grid-template-columns: 158px 50px minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: center !important;
  overflow: visible !important;
}

.bb-page-discussion .bb-avatar-square-userform {
  width: 158px !important;
  height: 158px !important;
  flex: 0 0 158px !important;
  max-width: 158px !important;
  max-height: 158px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  display: grid !important;
  place-items: center !important;
}

.bb-page-discussion .bb-avatar-square-userform::before,
.bb-page-discussion .bb-avatar-square-userform::after {
  display: none !important;
  content: none !important;
}

.bb-page-discussion .bb-avatar-square-userform #talkHead.bb-lipsync-head {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 300px !important;
  height: 360px !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
  transform-origin: top left !important;
  transform:
    translate(var(--bb-lipsync-fit-x, 0px), var(--bb-lipsync-fit-y, 0px))
    scale(var(--bb-lipsync-fit-scale, .44)) !important;
}

.bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar.bb-system-avatar-ref {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 116px !important;
  height: 116px !important;
  margin: 0 !important;
  transform: scale(.96) !important;
  transform-origin: center center !important;
}

.bb-page-discussion .bb-avatar-switch-meta {
  min-width: 50px !important;
  width: 50px !important;
  margin-left: -4px !important;
  justify-content: flex-start !important;
}

.bb-page-discussion .bb-avatar-switch-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 17px !important;
}

.bb-page-discussion .bb-avatar-response-status {
  min-height: 52px !important;
  padding: 10px 14px !important;
  align-self: center !important;
}

.bb-page-discussion .bb-shell {
  margin-top: 262px !important;
  padding-top: 0 !important;
}

@media (max-width: 760px) {
  .bb-page-discussion .bb-topbar {
    top: 8px !important;
    width: min(100% - 16px, 720px) !important;
  }

  .bb-page-discussion .bb-talk-avatar-dock {
    top: 68px !important;
    width: min(100% - 16px, 520px) !important;
  }

  .bb-page-discussion .bb-avatar-dock-body {
    grid-template-columns: 128px 46px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .bb-page-discussion .bb-avatar-square-userform {
    width: 128px !important;
    height: 128px !important;
    flex-basis: 128px !important;
    max-width: 128px !important;
    max-height: 128px !important;
  }

  .bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar.bb-system-avatar-ref {
    transform: scale(.82) !important;
  }

  .bb-page-discussion .bb-avatar-switch-meta {
    width: 46px !important;
    min-width: 46px !important;
  }

  .bb-page-discussion .bb-avatar-switch-btn {
    width: 42px !important;
    height: 42px !important;
  }

  .bb-page-discussion .bb-avatar-response-status {
    min-height: 46px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  .bb-page-discussion .bb-shell {
    margin-top: 238px !important;
  }
}


/* =========================================================
   STEP7BE/STEP7BF — Avatar système : graphisme repris du modèle Index.html
   Source graphique uniquement :
   .peluche / .oreille / .oeil / .museau / .nez / .bouche
   Le comportement Discussion, le mode calibré et le backend ne changent pas.
========================================================= */
.bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar.bb-system-avatar-ref{
  width:170px !important;
  height:170px !important;
  margin:0 !important;
  transform:scale(.72) !important;
  transform-origin:center center !important;
  overflow:visible !important;
  filter:drop-shadow(0 8px 16px rgba(65,35,12,.12)) !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear{
  width:72px !important;
  height:72px !important;
  top:-12px !important;
  border-radius:50% !important;
  background:#c48a5a !important;
  z-index:0 !important;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.06) !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-left{
  left:2px !important;
  right:auto !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-right{
  right:2px !important;
  left:auto !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-shine{
  width:32px !important;
  height:32px !important;
  top:8px !important;
  border-radius:50% !important;
  background:#e2b48d !important;
  opacity:1 !important;
  z-index:1 !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.05) !important;
  transform:none !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-shine-left{
  left:22px !important;
  right:auto !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-shine-right{
  right:22px !important;
  left:auto !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-head{
  width:170px !important;
  height:170px !important;
  left:0 !important;
  top:0 !important;
  border-radius:50% !important;
  background:#c48a5a !important;
  z-index:2 !important;
  box-shadow:
inset 0 -10px 0 rgba(0,0,0,.08),
0 8px 16px rgba(65,35,12,.12) !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-eye{
  width:16px !important;
  height:16px !important;
  top:65px !important;
  border-radius:50% !important;
  background:#222 !important;
  z-index:3 !important;
  transform-origin:center center !important;
  animation:bbSystemEyeBlink 4s infinite !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-eye-left{
  left:52px !important;
  right:auto !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-eye-right{
  right:52px !important;
  left:auto !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-muzzle{
  width:72px !important;
  height:50px !important;
  left:49px !important;
  top:88px !important;
  border-radius:50% !important;
  background:#f2d2b6 !important;
  z-index:3 !important;
  box-shadow:none !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-nose{
  width:22px !important;
  height:16px !important;
  left:74px !important;
  top:96px !important;
  border-radius:50% !important;
  background:#3a2318 !important;
  z-index:4 !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref .bb-system-mouth{
  width:28px !important;
  height:8px !important;
  left:71px !important;
  top:118px !important;
  border-radius:0 0 20px 20px !important;
  background:#3a2318 !important;
  z-index:4 !important;
  transform-origin:center top !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-speaking .bb-system-mouth{
  animation:bbSystemModelMouthTalk .25s infinite alternate !important;
}

@keyframes bbSystemModelMouthTalk{
  from{height:6px}
  to{height:20px}
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-speaking{
  animation:bbSystemModelBearTalk .34s infinite alternate ease-in-out;
}

@keyframes bbSystemModelBearTalk{
  from{transform:scale(.72) translateY(0)}
  to{transform:scale(.72) translateY(-2px)}
}

@media(max-width:760px){
  .bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar.bb-system-avatar-ref{
transform:scale(.60) !important;
  }

  .bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-speaking{
animation:bbSystemModelBearTalkMobile .34s infinite alternate ease-in-out;
  }

  @keyframes bbSystemModelBearTalkMobile{
from{transform:scale(.60) translateY(0)}
to{transform:scale(.60) translateY(-2px)}
  }
}



/* =========================================================
   STEP7BF — Discussion : attente dans le userform principal
   - dézoom avatar système
   - suppression du mini userform "Vérification"
   - points animés dans "BBbear prépare sa réponse"
   - yeux fermés pendant thinking / préparation
========================================================= */

.bb-page-discussion .bb-wait-lottie-disabled,
.bb-page-discussion #talkWaitLottie.bb-wait-lottie-disabled{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}

.bb-page-discussion .bb-avatar-response-status{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:3px !important;
}

.bb-page-discussion .bb-avatar-status-dots{
  display:inline-flex;
  gap:4px;
  align-items:center;
  margin-left:2px;
}

.bb-page-discussion .bb-avatar-status-dots i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#58a6d7;
  display:block;
  animation:bbAvatarStatusDot 1s infinite ease-in-out;
}

.bb-page-discussion .bb-avatar-status-dots i:nth-child(2){
  animation-delay:.15s;
}

.bb-page-discussion .bb-avatar-status-dots i:nth-child(3){
  animation-delay:.30s;
}

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

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-thinking .bb-system-eye{
  height:4px !important;
  top:72px !important;
  border-radius:999px !important;
  animation:none !important;
  transform:scaleY(1) !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-thinking .bb-system-mouth{
  height:6px !important;
  border-radius:0 0 16px 16px !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-thinking{
  filter:drop-shadow(0 8px 16px rgba(65,35,12,.12)) saturate(.96) !important;
}



/* =========================================================
   STEP7BG — Restauration saisie Discussion
   Correction interface uniquement: les éléments décoratifs ne
   doivent jamais intercepter la saisie du module Discussion.
========================================================= */
.bb-page-discussion .bb-topbar{
  z-index:320 !important;
}

.bb-page-discussion .bb-talk-avatar-dock{
  z-index:90 !important;
  pointer-events:none !important;
}

.bb-page-discussion .bb-avatar-dock-userform,
.bb-page-discussion .bb-avatar-dock-body,
.bb-page-discussion .bb-avatar-response-status,
.bb-page-discussion .bb-talking-head-userform,
.bb-page-discussion .bb-avatar-mode-stage{
  pointer-events:none !important;
}

.bb-page-discussion #talkAvatarSwitchBtn,
.bb-page-discussion #talkAvatarMode{
  pointer-events:auto !important;
}

.bb-page-discussion .bb-shell{
  position:relative !important;
  z-index:180 !important;
}

.bb-page-discussion .bb-talk-card,
.bb-page-discussion .bb-talk-main,
.bb-page-discussion .bb-chat-box,
.bb-page-discussion .bb-talk-form,
.bb-page-discussion .bb-talk-input-row,
.bb-page-discussion .bb-talk-submit-stack,
.bb-page-discussion .bb-mic-under-send{
  position:relative !important;
  z-index:210 !important;
  pointer-events:auto !important;
}

.bb-page-discussion #talkInput,
.bb-page-discussion #sendTalkBtn,
.bb-page-discussion #mockMicBtn,
.bb-page-discussion #micAutoSendCheck,
.bb-page-discussion #speakLastBtn,
.bb-page-discussion #stopVoiceBtn{
  position:relative !important;
  z-index:230 !important;
  pointer-events:auto !important;
}

.bb-page-discussion #talkInput{
  user-select:text !important;
  -webkit-user-select:text !important;
  cursor:text !important;
}

.bb-page-discussion #talkInput.bb-talk-input-waiting{
  opacity:1 !important;
  background:#ffffff !important;
  color:#2e2218 !important;
}

.bb-page-discussion .bb-wait-lottie-disabled{
  display:none !important;
  pointer-events:none !important;
}


/* =========================================================
   STEP7BH — Discussion : historique scrollable + saisie figée
   Interface uniquement.
   - Le userform Discussion est figé entre le dock nounours et la zone de saisie.
   - L'historique des échanges se scrolle verticalement.
   - La zone "Ton message / Envoyer / Parler" est figée en bas de page.
========================================================= */

body.bb-page-discussion{
  overflow:hidden !important;
  padding-bottom:0 !important;
}

.bb-page-discussion .bb-shell{
  position:fixed !important;
  left:50% !important;
  top:302px !important;
  bottom:245px !important;
  transform:translateX(-50%) !important;
  width:min(760px,calc(100% - 56px)) !important;
  max-width:760px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:180 !important;
  overflow:hidden !important;
}

.bb-page-discussion .bb-talk-card,
.bb-page-discussion .bb-talk-layout{
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  width:100% !important;
  overflow:hidden !important;
}

.bb-page-discussion .bb-talk-layout{
  display:block !important;
  padding:0 !important;
  border-radius:28px !important;
}

.bb-page-discussion .bb-talk-main{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:0 !important;
}

.bb-page-discussion .bb-talk-header.bb-talk-form-header{
  display:none !important;
}

.bb-page-discussion #chatMessages.bb-chat-box.improved,
.bb-page-discussion #chatMessages{
  flex:1 1 auto !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  padding:18px 18px 28px !important;
  scroll-behavior:smooth !important;
  -webkit-overflow-scrolling:touch !important;
  border-radius:28px !important;
}

.bb-page-discussion #talkForm.bb-talk-form{
  position:fixed !important;
  left:50% !important;
  bottom:74px !important;
  transform:translateX(-50%) !important;
  width:min(760px,calc(100% - 56px)) !important;
  max-width:760px !important;
  z-index:310 !important;
  margin:0 !important;
  padding:12px 14px 14px !important;
  border:2px solid rgba(187,222,251,.95) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 -10px 28px rgba(32,120,180,.13), 0 8px 24px rgba(46,34,24,.12) !important;
  pointer-events:auto !important;
}

.bb-page-discussion #talkForm .bb-talk-input-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 128px !important;
  gap:10px !important;
  align-items:stretch !important;
}

.bb-page-discussion #talkInput{
  min-height:96px !important;
  max-height:128px !important;
  resize:none !important;
}

.bb-page-discussion .bb-talk-submit-stack{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

.bb-page-discussion #sendTalkBtn,
.bb-page-discussion #mockMicBtn{
  width:100% !important;
  min-height:48px !important;
}

.bb-page-discussion .bb-mic-under-send{
  margin-top:8px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:8px !important;
  align-items:center !important;
}

.bb-page-discussion .bb-mic-under-send .bb-small,
.bb-page-discussion .bb-mic-under-send p{
  margin:0 !important;
}

.bb-page-discussion .bb-actions-row:not(.bb-talk-diag-actions){
  position:fixed !important;
  left:50% !important;
  bottom:18px !important;
  transform:translateX(-50%) !important;
  width:min(760px,calc(100% - 56px)) !important;
  max-width:760px !important;
  z-index:305 !important;
  margin:0 !important;
  justify-content:flex-end !important;
  pointer-events:auto !important;
}

.bb-page-discussion #talkMessage{
  position:fixed !important;
  left:50% !important;
  bottom:206px !important;
  transform:translateX(-50%) !important;
  width:min(760px,calc(100% - 56px)) !important;
  max-width:760px !important;
  z-index:306 !important;
  margin:0 !important;
  pointer-events:none !important;
}

.bb-page-discussion #talkDiagCard{
  display:none !important;
}

.bb-page-discussion .bb-diagnostic-panel{
  display:none !important;
}

@media(max-width:760px){
  .bb-page-discussion{
    overflow:hidden !important;
  }

  .bb-page-discussion .bb-shell{
    top:326px !important;
    bottom:260px !important;
    width:calc(100% - 28px) !important;
  }

  .bb-page-discussion #talkForm.bb-talk-form{
    bottom:72px !important;
    width:calc(100% - 28px) !important;
    padding:10px !important;
  }

  .bb-page-discussion #talkForm .bb-talk-input-row{
    grid-template-columns:1fr !important;
  }

  .bb-page-discussion #talkInput{
    min-height:84px !important;
    max-height:104px !important;
  }

  .bb-page-discussion .bb-talk-submit-stack{
    flex-direction:row !important;
  }

  .bb-page-discussion .bb-mic-under-send{
    grid-template-columns:1fr !important;
  }

  .bb-page-discussion .bb-actions-row:not(.bb-talk-diag-actions){
    bottom:18px !important;
    width:calc(100% - 28px) !important;
  }

  .bb-page-discussion #talkMessage{
    bottom:222px !important;
    width:calc(100% - 28px) !important;
  }
}

@media(max-height:720px){
  .bb-page-discussion .bb-shell{
    top:286px !important;
    bottom:224px !important;
  }

  .bb-page-discussion #talkForm.bb-talk-form{
    bottom:58px !important;
  }

  .bb-page-discussion #talkInput{
    min-height:70px !important;
    max-height:88px !important;
  }

  .bb-page-discussion .bb-mic-under-send{
    display:none !important;
  }

  .bb-page-discussion .bb-actions-row:not(.bb-talk-diag-actions){
    bottom:10px !important;
  }
}


/* =========================================================
   STEP7BI — Discussion : parole + layout figé propre
   Interface uniquement.
   - La bouche de l'avatar système bouge pendant la parole.
   - Le cercle bleu autour du nounours est supprimé en état speaking.
   - Le nounours fait un léger mouvement haut/bas pendant la parole.
   - L'espace dock nounours → userform discussion égale l'espace topbar → dock nounours.
   - Le userform discussion reste figé; seul l'historique scrolle.
   - La zone "Ton message / Envoyer / Parler" est fixée au bas du userform discussion.
========================================================= */

body.bb-page-discussion{
  --bb-discussion-gap: 10px;
  --bb-topbar-y: 12px;
  --bb-topbar-h: 58px;
  --bb-avatar-y: calc(var(--bb-topbar-y) + var(--bb-topbar-h) + var(--bb-discussion-gap));
  --bb-avatar-h: 198px;
  --bb-composer-h: 178px;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

.bb-page-discussion .bb-topbar{
  top: var(--bb-topbar-y) !important;
  min-height: var(--bb-topbar-h) !important;
  z-index: 320 !important;
}

.bb-page-discussion .bb-talk-avatar-dock{
  top: var(--bb-avatar-y) !important;
  z-index: 260 !important;
  pointer-events: none !important;
}

.bb-page-discussion .bb-avatar-dock-userform{
  min-height: var(--bb-avatar-h) !important;
}

.bb-page-discussion .bb-avatar-dock-userform,
.bb-page-discussion .bb-avatar-dock-body,
.bb-page-discussion .bb-avatar-response-status,
.bb-page-discussion .bb-talking-head-userform,
.bb-page-discussion .bb-avatar-mode-stage{
  pointer-events:none !important;
}

.bb-page-discussion #talkAvatarSwitchBtn,
.bb-page-discussion #talkAvatarMode{
  pointer-events:auto !important;
}

/* Userform Discussion figé sous le dock nounours avec le même espace */
.bb-page-discussion .bb-shell{
  position: fixed !important;
  left: 50% !important;
  top: calc(var(--bb-avatar-y) + var(--bb-avatar-h) + var(--bb-discussion-gap)) !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  width: min(760px, calc(100% - 56px)) !important;
  max-width: 760px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 180 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

.bb-page-discussion .bb-talk-card,
.bb-page-discussion .bb-talk-layout,
.bb-page-discussion .bb-talk-main{
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

.bb-page-discussion .bb-talk-layout{
  display: block !important;
  padding: 0 !important;
  border-radius: 28px !important;
}

/* La conversation scrolle, mais le formulaire reste fixé dans le userform */
.bb-page-discussion #chatMessages.bb-chat-box.improved,
.bb-page-discussion #chatMessages{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: calc(var(--bb-composer-h) + 12px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 18px 18px 28px !important;
  border-radius: 28px 28px 18px 18px !important;
  pointer-events: auto !important;
}

/* Formulaire fixé au bas du userform Discussion, pas au bas de la page */
.bb-page-discussion #talkForm.bb-talk-form{
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  min-height: auto !important;
  z-index: 230 !important;
  margin: 0 !important;
  padding: 12px 14px 14px !important;
  border: 2px solid rgba(187,222,251,.95) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 -10px 28px rgba(32,120,180,.13), 0 8px 24px rgba(46,34,24,.12) !important;
  pointer-events: auto !important;
}

.bb-page-discussion #talkForm .bb-talk-input-row{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 128px !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.bb-page-discussion #talkInput{
  min-height: 88px !important;
  max-height: 104px !important;
  resize: none !important;
  pointer-events: auto !important;
}

.bb-page-discussion #sendTalkBtn,
.bb-page-discussion #mockMicBtn{
  pointer-events: auto !important;
}

.bb-page-discussion .bb-actions-row:not(.bb-talk-diag-actions),
.bb-page-discussion #talkMessage{
  display: none !important;
}

/* Suppression du cercle bleu autour du nounours quand il parle */
.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-speaking .bb-mascot-wave{
  opacity: 0 !important;
  display: none !important;
  animation: none !important;
}

/* Les ondes restent possibles uniquement quand il écoute */
.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-listening .bb-mascot-wave{
  display: block !important;
  opacity: .62 !important;
}

/* Bouche parlante plus visible + mouvement haut/bas du nounours */
.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-speaking .bb-system-mouth{
  animation: bbSystemMouthTalkStep7BI .22s ease-in-out infinite alternate !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-speaking{
  animation: bbSystemBearSpeakStep7BI .46s ease-in-out infinite alternate !important;
}

@keyframes bbSystemMouthTalkStep7BI{
  0%{
    height: 6px;
    width: 26px;
    border-radius: 0 0 18px 18px;
    transform: translateX(0) scaleX(.92);
  }
  100%{
    height: 22px;
    width: 30px;
    border-radius: 0 0 18px 18px;
    transform: translateX(-1px) scaleX(1.04);
  }
}

@keyframes bbSystemBearSpeakStep7BI{
  0%{
    transform: scale(.72) translateY(0);
  }
  100%{
    transform: scale(.72) translateY(-7px);
  }
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref.state-thinking .bb-system-eye{
  height: 4px !important;
  top: 72px !important;
  border-radius: 999px !important;
  animation: none !important;
  transform: scaleY(1) !important;
}

@media(max-width:760px){
  body.bb-page-discussion{
    --bb-discussion-gap: 8px;
    --bb-topbar-y: 8px;
    --bb-topbar-h: 62px;
    --bb-avatar-h: 166px;
    --bb-composer-h: 214px;
  }

  .bb-page-discussion .bb-talk-avatar-dock{
    width: min(100% - 16px, 520px) !important;
  }

  .bb-page-discussion .bb-shell{
    width: calc(100% - 28px) !important;
    bottom: 10px !important;
  }

  .bb-page-discussion #talkForm.bb-talk-form{
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    padding: 10px !important;
  }

  .bb-page-discussion #talkForm .bb-talk-input-row{
    grid-template-columns: 1fr !important;
  }

  .bb-page-discussion #talkInput{
    min-height: 78px !important;
    max-height: 94px !important;
  }

  .bb-page-discussion .bb-talk-submit-stack{
    flex-direction: row !important;
  }

  @keyframes bbSystemBearSpeakStep7BI{
    0%{
      transform: scale(.60) translateY(0);
    }
    100%{
      transform: scale(.60) translateY(-6px);
    }
  }
}

@media(max-height:720px){
  body.bb-page-discussion{
    --bb-avatar-h: 168px;
    --bb-composer-h: 154px;
  }

  .bb-page-discussion #talkInput{
    min-height: 64px !important;
    max-height: 78px !important;
  }

  .bb-page-discussion .bb-mic-under-send{
    display: none !important;
  }
}


/* =========================================================
   STEP7BK-C — THÈME NUIT GLOBAL (Design B : Nuit Magique)
   Activé par data-bb-theme="night" posé sur <body> via
   bbbear_theme_init.js (init synchrone).
   S'applique à toutes les pages .bb-sky-body.
   Les pages avec inline styles sont également couvertes grâce
   à !important (inline <style> et feuille externe = même
   spécificité; !important gagne toujours).
   La page discussion.html a ses propres surcharges (STEP7BK-C
   dans son <style> inline) qui prennent le relais.
========================================================= */

/* ── Étoiles nuit — CSS de base ── */
#bbNightStars{
  display:none;
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
@keyframes bbStarTwinkle{
  0%,100%{opacity:.12}
  50%{opacity:1}
}

/* ── Corps de page nuit ── */
.bb-sky-body[data-bb-theme="night"],
.bb-sky-body[data-bb-theme="night"] .bb-sky{
  background:radial-gradient(ellipse at 50% 0%,#2d1b69 0%,#0f0728 45%,#06031a 100%) !important;
  color:#e8e0ff !important;
}
.bb-sky-body[data-bb-theme="night"]::after{
  background:linear-gradient(180deg,#0a0620 0%,#06031a 100%) !important;
}
/* Masquer nuages jour */
.bb-sky-body[data-bb-theme="night"] .cloud,
.bb-sky-body[data-bb-theme="night"] .bb-sky-cloud,
.bb-sky-body[data-bb-theme="night"] .bb-sky-clouds{
  display:none !important;
}
/* Soleil / decorations jour */
.bb-sky-body[data-bb-theme="night"] .bb-sun,
.bb-sky-body[data-bb-theme="night"] .bb-sun-glow,
.bb-sky-body[data-bb-theme="night"] .sun,
.bb-sky-body[data-bb-theme="night"] .bb-grass{
  display:none !important;
}

/* ── Topbar nuit ── */
.bb-sky-body[data-bb-theme="night"] .bb-topbar,
.bb-sky-body[data-bb-theme="night"] #hud{
  background:rgba(13,8,36,.92) !important;
  border-bottom:1.5px solid rgba(124,58,237,.25) !important;
  box-shadow:0 4px 24px rgba(0,0,0,.45) !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-icon-btn{
  background:linear-gradient(135deg,#7c3aed,#5b21b6) !important;
  color:#e0d0ff !important;
  box-shadow:0 3px 12px rgba(124,58,237,.5) !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-close-btn,
.bb-sky-body[data-bb-theme="night"] .hud-close{
  background:linear-gradient(135deg,#be185d,#9d174d) !important;
  box-shadow:0 3px 12px rgba(190,24,93,.4) !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-version{
  color:#9585c8 !important;
}

/* ── Cartes & shell nuit ── */
.bb-sky-body[data-bb-theme="night"] .bb-card,
.bb-sky-body[data-bb-theme="night"] .bb-shell > section,
.bb-sky-body[data-bb-theme="night"] .bb-panel{
  background:rgba(30,18,70,.82) !important;
  border-color:rgba(120,80,220,.28) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.bb-sky-body[data-bb-theme="night"] h1,
.bb-sky-body[data-bb-theme="night"] h2,
.bb-sky-body[data-bb-theme="night"] h3{
  color:#e8e0ff !important;
}
.bb-sky-body[data-bb-theme="night"] p,
.bb-sky-body[data-bb-theme="night"] label,
.bb-sky-body[data-bb-theme="night"] .bb-lead{
  color:#c4b5fd !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-brand-kicker{
  color:#fcd34d !important;
  background:rgba(252,211,77,.12) !important;
  border-color:rgba(252,211,77,.25) !important;
}

/* ── Mascot stage nuit ── */
.bb-sky-body[data-bb-theme="night"] .bb-mascot-stage{
  background:radial-gradient(ellipse at 50% 30%,rgba(124,58,237,.16) 0%,rgba(13,8,36,.65) 100%) !important;
  border-color:rgba(168,85,247,.22) !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-mascot{
  box-shadow:0 0 0 8px rgba(168,85,247,.12),0 0 36px rgba(168,85,247,.2) !important;
}

/* ── Formulaires nuit ── */
.bb-sky-body[data-bb-theme="night"] .bb-form input,
.bb-sky-body[data-bb-theme="night"] .bb-form select,
.bb-sky-body[data-bb-theme="night"] .bb-form textarea,
.bb-sky-body[data-bb-theme="night"] input[type="text"],
.bb-sky-body[data-bb-theme="night"] input[type="password"],
.bb-sky-body[data-bb-theme="night"] input[type="email"],
.bb-sky-body[data-bb-theme="night"] select{
  background:rgba(20,12,50,.85) !important;
  border-color:rgba(124,58,237,.38) !important;
  color:#e8e0ff !important;
}
.bb-sky-body[data-bb-theme="night"] input::placeholder,
.bb-sky-body[data-bb-theme="night"] textarea::placeholder{
  color:#6b5b9a !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-btn,
.bb-sky-body[data-bb-theme="night"] button.bb-btn-primary,
.bb-sky-body[data-bb-theme="night"] .bb-submit-btn{
  background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
  box-shadow:0 4px 18px rgba(124,58,237,.42) !important;
  color:#fff !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-btn:hover:not(:disabled){
  background:linear-gradient(135deg,#8b5cf6,#c084fc) !important;
  transform:translateY(-1px) !important;
}
.bb-sky-body[data-bb-theme="night"] a{
  color:#a5f3fc !important;
}
.bb-sky-body[data-bb-theme="night"] a:hover{
  color:#fcd34d !important;
}

/* ── Quiz nuit ── */
.bb-sky-body[data-bb-theme="night"] .bb-quiz-card{
  background:rgba(30,18,70,.88) !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-answer-btn{
  background:rgba(124,58,237,.18) !important;
  border:2px solid rgba(168,85,247,.32) !important;
  color:#e8e0ff !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-answer-btn:hover{
  background:rgba(124,58,237,.35) !important;
  border-color:#a855f7 !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-answer-btn.correct{
  background:rgba(20,184,166,.22) !important;
  border-color:#14b8a6 !important;
  color:#5eead4 !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-answer-btn.wrong{
  background:rgba(190,24,93,.18) !important;
  border-color:#be185d !important;
  color:#fda4af !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-quiz-progress-bar{
  background:rgba(168,85,247,.22) !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-quiz-progress-fill{
  background:linear-gradient(90deg,#7c3aed,#a855f7) !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-summary-item{
  background:rgba(30,18,70,.7) !important;
  border-color:rgba(168,85,247,.22) !important;
  color:#e8e0ff !important;
}

/* ── Accueil / index — cartes activités nuit ── */
.bb-sky-body[data-bb-theme="night"] .bb-home-card,
.bb-sky-body[data-bb-theme="night"] .activity-card,
.bb-sky-body[data-bb-theme="night"] .bb-card-activity{
  background:rgba(30,18,70,.82) !important;
  border-color:rgba(120,80,220,.28) !important;
  color:#e8e0ff !important;
}
.bb-sky-body[data-bb-theme="night"] .bb-home-card:hover,
.bb-sky-body[data-bb-theme="night"] .activity-card:hover{
  border-color:#a855f7 !important;
  box-shadow:0 8px 32px rgba(168,85,247,.25) !important;
}

/* ── HUD (accueil / mon_espace / conte) nuit ── */
.bb-sky-body[data-bb-theme="night"] #hud{
  background:rgba(13,8,36,.92) !important;
  border-bottom:1.5px solid rgba(124,58,237,.25) !important;
}
.bb-sky-body[data-bb-theme="night"] .hud-bear,
.bb-sky-body[data-bb-theme="night"] .hud-name{
  color:#fcd34d !important;
}
.bb-sky-body[data-bb-theme="night"] .hud-coins,
.bb-sky-body[data-bb-theme="night"] .hud-stars{
  color:#5eead4 !important;
}

/* ── Conte nuit ── */
.bb-sky-body[data-bb-theme="night"] #storyText,
.bb-sky-body[data-bb-theme="night"] .story-box{
  background:rgba(30,18,70,.88) !important;
  border-color:rgba(168,85,247,.22) !important;
  color:#e8e0ff !important;
}

/* ── Dashboard / mon_espace nuit ── */
.bb-sky-body[data-bb-theme="night"] #app{
  background:transparent !important;
}
.bb-sky-body[data-bb-theme="night"] .menu-btn{
  background:rgba(124,58,237,.22) !important;
  border:2px solid rgba(168,85,247,.32) !important;
  color:#e8e0ff !important;
}
.bb-sky-body[data-bb-theme="night"] .menu-btn:hover{
  background:rgba(124,58,237,.42) !important;
  border-color:#a855f7 !important;
}

/* ── Scrollbar nuit globale ── */
.bb-sky-body[data-bb-theme="night"] ::-webkit-scrollbar-track{
  background:rgba(30,18,70,.4) !important;
}
.bb-sky-body[data-bb-theme="night"] ::-webkit-scrollbar-thumb{
  background:rgba(168,85,247,.35) !important;
}



/* =========================================================
       STEP7BM — adaptation switch jour / nuit + visibilité discussion
       Corrige le switch manuel, masque le diagnostic hors debug et
       stabilise l'interface de discussion en mode jour/nuit.
    ========================================================= */
    body.bb-page-discussion:not([data-bb-debug="1"]) .bb-diagnostic-panel,
    body.bb-page-discussion:not([data-bb-debug="1"]) #talkDiagCard{
      display:none !important;
    }

    .bb-page-discussion .bb-theme-toggle-btn{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      gap:6px !important;
      min-height:34px !important;
      padding:7px 12px !important;
      border-radius:999px !important;
      border:2px solid rgba(88,166,215,.35) !important;
      background:rgba(255,255,255,.92) !important;
      color:#1376bd !important;
      font-weight:900 !important;
      font-size:12px !important;
      box-shadow:0 6px 16px rgba(46,34,24,.08) !important;
      cursor:pointer !important;
      white-space:nowrap !important;
    }
    .bb-page-discussion .bb-theme-toggle-btn:hover{
      transform:translateY(-1px) !important;
      filter:brightness(1.03) !important;
    }

    .bb-page-discussion .bb-topbar{
      z-index:120 !important;
    }

    .bb-page-discussion .bb-talk-avatar-dock{
      top:92px !important;
      z-index:90 !important;
      pointer-events:none !important;
    }
    .bb-page-discussion .bb-avatar-dock-userform,
    .bb-page-discussion #talkAvatarSwitchBtn{
      pointer-events:auto !important;
    }
    .bb-page-discussion .bb-shell{
      margin-top:268px !important;
      position:relative !important;
      z-index:20 !important;
    }
    .bb-page-discussion .bb-talk-layout{
      grid-template-columns:1fr !important;
      max-width:760px !important;
      margin:0 auto !important;
      min-height:auto !important;
    }
    .bb-page-discussion .bb-talk-side{
      display:none !important;
    }
    .bb-page-discussion .bb-talk-main,
    .bb-page-discussion .bb-talk-form,
    .bb-page-discussion .bb-talk-input-row,
    .bb-page-discussion #talkInput,
    .bb-page-discussion #sendTalkBtn,
    .bb-page-discussion #mockMicBtn{
      position:relative !important;
      z-index:30 !important;
      pointer-events:auto !important;
    }

    body.bb-page-discussion[data-bb-theme="day"]{
      background:linear-gradient(180deg,#87ceeb 0%,#bcefff 44%,#eafaff 76%,#b6e89a 100%) !important;
    }
    body.bb-page-discussion[data-bb-theme="day"] .bb-topbar{
      background:rgba(240,250,255,.88) !important;
      border:1.5px solid rgba(88,166,215,.35) !important;
    }
    body.bb-page-discussion[data-bb-theme="day"] .bb-talk-card,
    body.bb-page-discussion[data-bb-theme="day"] .bb-talk-layout{
      background:rgba(255,255,255,.82) !important;
      border-color:rgba(187,222,251,.82) !important;
    }

    body.bb-page-discussion[data-bb-theme="night"] .bb-night-stars{
      display:block;
    }
    body.bb-page-discussion[data-bb-theme="night"] .bb-theme-toggle-btn{
      background:rgba(36,18,84,.92) !important;
      border-color:rgba(168,85,247,.45) !important;
      color:#f7d66f !important;
      box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(124,58,237,.22) !important;
    }
    body.bb-page-discussion[data-bb-theme="night"] .bb-talk-avatar-dock .bb-avatar-dock-userform{
      background:rgba(28,15,71,.88) !important;
      border-color:rgba(168,85,247,.28) !important;
      box-shadow:0 12px 34px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.06) !important;
    }
    body.bb-page-discussion[data-bb-theme="night"] .bb-avatar-response-status{
      background:rgba(80,37,135,.45) !important;
      border-color:rgba(168,85,247,.38) !important;
      color:#f1dcff !important;
    }
    body.bb-page-discussion[data-bb-theme="night"] .bb-talk-card,
    body.bb-page-discussion[data-bb-theme="night"] .bb-talk-layout{
      background:rgba(17,8,43,.86) !important;
      border-color:rgba(124,58,237,.34) !important;
      box-shadow:0 18px 46px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04) !important;
    }
    body.bb-page-discussion[data-bb-theme="night"] .bb-chat-box.improved{
      background:rgba(10,4,31,.72) !important;
      border-color:rgba(124,58,237,.28) !important;
      color:#f4edff !important;
    }
    body.bb-page-discussion[data-bb-theme="night"] .bb-chat-bubble,
    body.bb-page-discussion[data-bb-theme="night"] .bb-message-bubble,
    body.bb-page-discussion[data-bb-theme="night"] .bb-bubble{
      color:#f7f0ff !important;
    }
    body.bb-page-discussion[data-bb-theme="night"] #talkInput{
      background:rgba(14,8,38,.92) !important;
      border-color:rgba(124,58,237,.48) !important;
      color:#f4edff !important;
    }
    body.bb-page-discussion[data-bb-theme="night"] #talkInput::placeholder{
      color:rgba(244,237,255,.62) !important;
    }

    @media(max-width:760px){
      .bb-page-discussion .bb-topbar{
        min-height:102px !important;
        gap:8px !important;
      }
      .bb-page-discussion .bb-theme-toggle-btn{
        order:2 !important;
      }
      .bb-page-discussion .bb-talk-quota-battery{
        order:3 !important;
      }
      .bb-page-discussion .bb-talk-avatar-dock{
        top:128px !important;
      }
      .bb-page-discussion .bb-shell{
        margin-top:318px !important;
      }
    }


/******************************************************
 * STEP7BQ — Discussion: layout conforme au schéma utilisateur
 * Objectif:
 * - barre de navigation pleine largeur figée tout en haut
 * - userform avatar/switch/statut séparé
 * - userform conversation séparé avec scroll interne
 * - userform saisie/actions séparé sous la conversation
 * - diagnostic non intrusif
 ******************************************************/

body.bb-page-discussion{
  min-height:100vh !important;
  overflow:hidden !important;
  padding:0 !important;
}

.bb-page-discussion .bb-night-stars,
.bb-page-discussion .bb-sky-cloud{
  pointer-events:none !important;
}

.bb-page-discussion .bb-topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100vw !important;
  height:64px !important;
  min-height:64px !important;
  max-width:none !important;
  margin:0 !important;
  padding:8px 18px !important;
  border-radius:0 !important;
  z-index:5000 !important;
  display:grid !important;
  grid-template-columns:54px minmax(220px,1fr) auto 54px !important;
  gap:14px !important;
  align-items:center !important;
  background:rgba(255,250,244,.96) !important;
  border:0 !important;
  border-bottom:2px solid rgba(228,212,184,.95) !important;
  box-shadow:0 8px 24px rgba(46,34,24,.12) !important;
  backdrop-filter:blur(14px) !important;
}

.bb-page-discussion .bb-topbar .bb-icon-btn{
  width:46px !important;
  height:46px !important;
  border-radius:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:30px !important;
  line-height:1 !important;
}

.bb-page-discussion .bb-topbar .bb-close-btn{
  border-radius:50% !important;
}

.bb-page-discussion .bb-discussion-titleblock{
  min-width:0 !important;
  display:flex !important;
  align-items:baseline !important;
  gap:10px !important;
  justify-content:flex-start !important;
  color:#2E2218 !important;
}

.bb-page-discussion .bb-discussion-titleblock strong{
  font-size:18px !important;
  white-space:nowrap !important;
  letter-spacing:.01em !important;
}

.bb-page-discussion .bb-discussion-titleblock [data-bbbear-version]{
  display:inline-block !important;
  font-size:11px !important;
  opacity:.72 !important;
  max-width:360px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.bb-page-discussion .bb-theme-toggle-btn{
  display:none !important;
}

body.bb-page-discussion[data-bb-debug="1"] .bb-theme-toggle-btn{
  display:inline-flex !important;
  position:fixed !important;
  right:92px !important;
  bottom:16px !important;
  z-index:5300 !important;
}

.bb-page-discussion .bb-talk-quota-battery{
  justify-self:end !important;
  min-width:230px !important;
  max-width:320px !important;
  height:44px !important;
  margin:0 !important;
  padding:7px 12px !important;
  border-radius:999px !important;
}

.bb-page-discussion .bb-talk-avatar-dock{
  position:fixed !important;
  top:78px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(1080px,calc(100vw - 32px)) !important;
  max-width:1080px !important;
  z-index:4200 !important;
  margin:0 !important;
  pointer-events:none !important;
}

.bb-page-discussion .bb-avatar-dock-userform{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:12px 14px !important;
  border-radius:24px !important;
  background:rgba(255,250,244,.96) !important;
  border:2px solid rgba(228,212,184,.95) !important;
  box-shadow:0 14px 30px rgba(46,34,24,.14) !important;
  pointer-events:none !important;
}

.bb-page-discussion .bb-avatar-dock-body{
  display:grid !important;
  grid-template-columns:170px 54px minmax(260px,1fr) !important;
  align-items:center !important;
  gap:14px !important;
  width:100% !important;
}

.bb-page-discussion .bb-avatar-square-userform{
  width:148px !important;
  height:148px !important;
  min-width:148px !important;
  min-height:148px !important;
  border-radius:18px !important;
  margin:0 auto !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  border:2px solid rgba(228,212,184,.92) !important;
  box-shadow:inset 0 0 0 6px #fffaf1,0 8px 18px rgba(45,24,8,.08) !important;
  pointer-events:none !important;
}

.bb-page-discussion .bb-avatar-switch-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:54px !important;
  min-width:54px !important;
  min-height:120px !important;
  pointer-events:none !important;
}

.bb-page-discussion .bb-avatar-switch-btn{
  pointer-events:auto !important;
  width:50px !important;
  height:78px !important;
  border-radius:14px !important;
  font-size:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.bb-page-discussion .bb-avatar-response-status{
  min-height:96px !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  padding:20px 24px !important;
  border-radius:20px !important;
  background:#FFFAF4 !important;
  border:2px solid rgba(228,212,184,.95) !important;
  color:#2E2218 !important;
  font-weight:900 !important;
  font-size:18px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important;
  pointer-events:none !important;
}

.bb-page-discussion .bb-shell{
  position:fixed !important;
  top:250px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(1080px,calc(100vw - 32px)) !important;
  bottom:16px !important;
  z-index:100 !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

.bb-page-discussion .bb-talk-layout{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

.bb-page-discussion .bb-talk-main{
  height:100% !important;
  display:grid !important;
  grid-template-rows:minmax(0,1fr) auto auto !important;
  gap:12px !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

.bb-page-discussion .bb-discussion-userform{
  min-height:0 !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  padding:14px !important;
  border-radius:24px !important;
  background:rgba(255,250,244,.96) !important;
  border:2px solid rgba(228,212,184,.95) !important;
  box-shadow:0 12px 30px rgba(46,34,24,.13) !important;
  pointer-events:auto !important;
  overflow:hidden !important;
}

.bb-page-discussion .bb-discussion-userform .bb-talk-header{
  flex:0 0 auto !important;
  margin:0 0 10px !important;
  padding:0 0 10px !important;
  border-bottom:2px dashed rgba(228,212,184,.75) !important;
  background:transparent !important;
  box-shadow:none !important;
}

.bb-page-discussion .bb-discussion-userform h2{
  margin:0 !important;
  font-size:18px !important;
  color:#2E2218 !important;
}

.bb-page-discussion #chatMessages{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:14px !important;
  border-radius:20px !important;
  background:#fff !important;
  border:1.5px solid rgba(228,212,184,.9) !important;
  scroll-behavior:smooth !important;
}

.bb-page-discussion .bb-input-userform{
  flex:0 0 auto !important;
  padding:14px !important;
  border-radius:24px !important;
  background:rgba(255,250,244,.98) !important;
  border:2px solid rgba(228,212,184,.95) !important;
  box-shadow:0 12px 30px rgba(46,34,24,.14) !important;
  pointer-events:auto !important;
  position:relative !important;
  z-index:200 !important;
}

.bb-page-discussion .bb-talk-form{
  margin:0 !important;
  padding:0 !important;
  pointer-events:auto !important;
}

.bb-page-discussion .bb-talk-form > label{
  display:block !important;
  margin:0 0 8px !important;
  color:#2E2218 !important;
  font-weight:900 !important;
  font-size:14px !important;
}

.bb-page-discussion .bb-talk-input-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 150px !important;
  gap:12px !important;
  align-items:stretch !important;
  pointer-events:auto !important;
}

.bb-page-discussion #talkInput{
  width:100% !important;
  min-height:74px !important;
  max-height:110px !important;
  resize:vertical !important;
  border-radius:18px !important;
  padding:14px 16px !important;
  font-size:16px !important;
  background:#fff !important;
  border:2px solid rgba(228,212,184,.95) !important;
  color:#2E2218 !important;
  pointer-events:auto !important;
  position:relative !important;
  z-index:220 !important;
}

.bb-page-discussion .bb-talk-submit-stack{
  display:grid !important;
  grid-template-rows:1fr 1fr !important;
  gap:10px !important;
  min-height:74px !important;
  pointer-events:auto !important;
}

.bb-page-discussion #sendTalkBtn,
.bb-page-discussion #mockMicBtn{
  width:100% !important;
  min-height:0 !important;
  height:100% !important;
  border-radius:18px !important;
  pointer-events:auto !important;
  position:relative !important;
  z-index:230 !important;
}

.bb-page-discussion .bb-mic-under-send{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:10px 0 0 !important;
  padding-top:10px !important;
  border-top:1.5px dashed rgba(228,212,184,.75) !important;
}

.bb-page-discussion .bb-mic-auto-send{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  font-size:13px !important;
  font-weight:800 !important;
  color:#2E2218 !important;
}

.bb-page-discussion .bb-mic-auto-send input{
  width:18px !important;
  height:18px !important;
}

.bb-page-discussion .bb-mic-status{
  margin:0 !important;
  text-align:right !important;
  white-space:nowrap !important;
}

.bb-page-discussion .bb-talk-voice-actions{
  margin-top:10px !important;
  padding:10px 0 0 !important;
  border-top:1.5px dashed rgba(228,212,184,.75) !important;
  background:transparent !important;
  justify-content:flex-start !important;
}

.bb-page-discussion #talkMessage{
  margin:8px 0 0 !important;
  min-height:18px !important;
}

.bb-page-discussion #talkDiagCard{
  flex:0 0 auto !important;
  max-height:160px !important;
  overflow:auto !important;
  margin:0 !important;
  padding:12px !important;
  border-radius:18px !important;
  background:rgba(255,250,244,.96) !important;
  border:2px solid rgba(228,212,184,.95) !important;
  pointer-events:auto !important;
}

body.bb-page-discussion:not([data-bb-debug="1"]) #talkDiagCard{
  display:none !important;
}

.bb-page-discussion .bb-diagnostic-panel{
  display:none !important;
}

body.bb-page-discussion[data-bb-debug="1"] .bb-diagnostic-panel{
  display:block !important;
  position:fixed !important;
  right:16px !important;
  bottom:16px !important;
  width:min(460px,calc(100vw - 32px)) !important;
  max-height:42vh !important;
  overflow:auto !important;
  z-index:5200 !important;
}

/* Bulles conformes au schéma: BBbear gauche, Moi droite */
.bb-page-discussion .bb-chat-message{
  max-width:78% !important;
  margin:10px 0 !important;
  clear:both !important;
  border-radius:18px !important;
}

.bb-page-discussion .bb-chat-message.bear{
  margin-right:auto !important;
  margin-left:0 !important;
}

.bb-page-discussion .bb-chat-message.user{
  margin-left:auto !important;
  margin-right:0 !important;
}

/* État nuit compatible avec le layout figé */
body.bb-page-discussion[data-bb-theme="night"] .bb-topbar{
  background:rgba(13,8,36,.96) !important;
  border-bottom:2px solid rgba(124,58,237,.35) !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-discussion-titleblock,
body.bb-page-discussion[data-bb-theme="night"] .bb-discussion-titleblock strong{
  color:#e8e0ff !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-avatar-dock-userform,
body.bb-page-discussion[data-bb-theme="night"] .bb-discussion-userform,
body.bb-page-discussion[data-bb-theme="night"] .bb-input-userform,
body.bb-page-discussion[data-bb-theme="night"] #talkDiagCard{
  background:rgba(13,8,36,.9) !important;
  border-color:rgba(124,58,237,.35) !important;
  color:#e8e0ff !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-discussion-userform h2,
body.bb-page-discussion[data-bb-theme="night"] .bb-talk-form > label,
body.bb-page-discussion[data-bb-theme="night"] .bb-mic-auto-send{
  color:#e8e0ff !important;
}

body.bb-page-discussion[data-bb-theme="night"] #chatMessages,
body.bb-page-discussion[data-bb-theme="night"] #talkInput{
  background:rgba(20,12,50,.86) !important;
  border-color:rgba(124,58,237,.38) !important;
  color:#e8e0ff !important;
}

@media(max-width:760px){
  body.bb-page-discussion{
    overflow:auto !important;
  }

  .bb-page-discussion .bb-topbar{
    grid-template-columns:44px minmax(0,1fr) 44px !important;
    height:auto !important;
    min-height:60px !important;
    padding:8px 10px !important;
  }

  .bb-page-discussion .bb-topbar .bb-talk-quota-battery{
    grid-column:1 / -1 !important;
    justify-self:stretch !important;
    max-width:none !important;
    width:100% !important;
  }

  .bb-page-discussion .bb-talk-avatar-dock{
    top:118px !important;
    width:calc(100vw - 20px) !important;
  }

  .bb-page-discussion .bb-avatar-dock-body{
    grid-template-columns:118px 44px minmax(0,1fr) !important;
    gap:8px !important;
  }

  .bb-page-discussion .bb-avatar-square-userform{
    width:108px !important;
    height:108px !important;
    min-width:108px !important;
    min-height:108px !important;
  }

  .bb-page-discussion .bb-avatar-switch-btn{
    width:40px !important;
    height:62px !important;
  }

  .bb-page-discussion .bb-avatar-response-status{
    min-height:72px !important;
    padding:12px !important;
    font-size:14px !important;
  }

  .bb-page-discussion .bb-shell{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    width:calc(100vw - 20px) !important;
    bottom:auto !important;
    margin:238px auto 16px !important;
    height:auto !important;
    overflow:visible !important;
  }

  .bb-page-discussion .bb-talk-main{
    display:flex !important;
    flex-direction:column !important;
    overflow:visible !important;
  }

  .bb-page-discussion .bb-discussion-userform{
    min-height:280px !important;
  }

  .bb-page-discussion #chatMessages{
    min-height:210px !important;
    max-height:38vh !important;
  }

  .bb-page-discussion .bb-talk-input-row{
    grid-template-columns:1fr !important;
  }

  .bb-page-discussion .bb-talk-submit-stack{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
  }

  .bb-page-discussion .bb-mic-under-send{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .bb-page-discussion .bb-mic-status{
    text-align:left !important;
  }
}


/* =========================================================
   STEP7BR — Avatar entièrement visible + messages non tronqués
   Version: V4.40ZZK_STEP7CC_BACKEND_FRONTEND_ALIGNMENT
   Objectif:
   - le nounours système reste entier dans son userform carré
   - la zone messages ne coupe plus les bulles
   - le scroll reste uniquement interne au userform conversation
========================================================= */

.bb-page-discussion .bb-talk-avatar-dock {
  overflow: visible !important;
}

.bb-page-discussion .bb-avatar-dock-userform,
.bb-page-discussion .bb-avatar-dock-body {
  overflow: visible !important;
}

.bb-page-discussion .bb-avatar-dock-body {
  grid-template-columns: 190px minmax(0, 1fr) !important;
  align-items: center !important;
}

.bb-page-discussion .bb-avatar-square-userform {
  width: 184px !important;
  height: 142px !important;
  min-width: 184px !important;
  min-height: 142px !important;
  flex: 0 0 184px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

.bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar.bb-system-avatar-ref {
  width: 118px !important;
  height: 118px !important;
  margin: 0 auto !important;
  transform: translateY(6px) scale(.84) !important;
  transform-origin: center center !important;
  overflow: visible !important;
}

/* Les éléments extérieurs du nounours ne doivent jamais être coupés. */
.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref *,
.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref > span {
  overflow: visible !important;
}

/* Mode avatar calibré: conserver le rendu dans le même userform sans recouvrement. */
.bb-page-discussion .bb-avatar-square-userform .bb-lipsync-head {
  width: 260px !important;
  height: 300px !important;
  max-width: none !important;
  transform: translate(-54px, -48px) scale(.62) !important;
  transform-origin: top left !important;
}

/* Userform conversation: hauteur utile et scroll interne stable. */
.bb-page-discussion .bb-discussion-userform {
  min-height: 250px !important;
  overflow: hidden !important;
}

.bb-page-discussion #chatMessages.bb-chat-box,
.bb-page-discussion #chatMessages.improved {
  flex: 1 1 auto !important;
  min-height: 210px !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px 22px 26px !important;
  box-sizing: border-box !important;
  align-content: flex-start !important;
}

/* Empêcher les messages longs d'être visuellement coupés. */
.bb-page-discussion #chatMessages .bb-chat-message,
.bb-page-discussion #chatMessages .bb-chat-row,
.bb-page-discussion #chatMessages .bb-chat-bubble,
.bb-page-discussion #chatMessages .bb-chat-bubble-content {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.48 !important;
}

.bb-page-discussion #chatMessages .bb-chat-message {
  display: block !important;
  width: fit-content !important;
  max-width: min(76%, 720px) !important;
  margin-bottom: 12px !important;
}

.bb-page-discussion #chatMessages .bb-chat-message.bear,
.bb-page-discussion #chatMessages .bb-chat-message.bb-bear,
.bb-page-discussion #chatMessages .bb-chat-message.assistant {
  align-self: flex-start !important;
}

.bb-page-discussion #chatMessages .bb-chat-message.user,
.bb-page-discussion #chatMessages .bb-chat-message.me,
.bb-page-discussion #chatMessages .bb-chat-message.child {
  align-self: flex-end !important;
}

.bb-page-discussion #chatMessages .bb-chat-message p,
.bb-page-discussion #chatMessages .bb-chat-bubble-content p {
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* La saisie reste séparée et ne doit pas recouvrir les messages. */
.bb-page-discussion .bb-input-userform {
  flex: 0 0 auto !important;
  overflow: visible !important;
  z-index: 6 !important;
}

@media (max-width: 720px) {
  .bb-page-discussion .bb-avatar-dock-body {
    grid-template-columns: 138px minmax(0, 1fr) !important;
  }

  .bb-page-discussion .bb-avatar-square-userform {
    width: 132px !important;
    height: 112px !important;
    min-width: 132px !important;
    min-height: 112px !important;
  }

  .bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar.bb-system-avatar-ref {
    transform: translateY(5px) scale(.72) !important;
  }

  .bb-page-discussion #chatMessages .bb-chat-message {
    max-width: 92% !important;
  }
}


/* =========================================================
   STEP7BS — Avatar visible + envoi cliquable + pile quota + icônes
   Version: V4.40ZZK_STEP7CC_BACKEND_FRONTEND_ALIGNMENT
   Commentaires utilisateur:
   - le nounours n'est pas visible en avatar système ni lipsync
   - impossible d'envoyer un message
   - la pile quota ne marche pas
   - remplacer le texte Envoyer/Parler par des icônes
========================================================= */

/* La zone avatar revient à 3 colonnes claires : avatar | switch | statut. */
.bb-page-discussion .bb-avatar-dock-body{
  display:grid !important;
  grid-template-columns:176px 56px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:center !important;
}

/* Carré avatar strictement visible, sans coupe du nounours. */
.bb-page-discussion .bb-avatar-square-userform{
  position:relative !important;
  width:168px !important;
  height:136px !important;
  min-width:168px !important;
  min-height:136px !important;
  max-width:168px !important;
  max-height:136px !important;
  flex:0 0 168px !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  isolation:isolate !important;
  background:rgba(255,250,244,.98) !important;
  border:2px solid rgba(228,212,184,.95) !important;
}

/* Avatar système : affichage forcé en mode system, centré et réduit. */
.bb-page-discussion .bb-avatar-mode-stage[data-avatar-mode="system"] #talkSystemAvatar.bb-system-avatar-ref,
.bb-page-discussion .bb-avatar-mode-stage.is-system-avatar #talkSystemAvatar.bb-system-avatar-ref{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar.bb-system-avatar-ref{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:124px !important;
  height:124px !important;
  min-width:124px !important;
  min-height:124px !important;
  margin:0 auto !important;
  transform:translateY(2px) scale(.72) !important;
  transform-origin:center center !important;
  overflow:visible !important;
  z-index:3 !important;
  filter:drop-shadow(0 8px 12px rgba(46,34,24,.18)) !important;
}

.bb-page-discussion #talkSystemAvatar.bb-system-avatar-ref > span{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Avatar calibré : ne plus utiliser de translation fixe hors cadre.
   Les variables calculées par le moteur lipsync cadrent le profil complet. */
.bb-page-discussion .bb-avatar-square-userform #talkHead.bb-lipsync-head,
.bb-page-discussion .bb-avatar-square-userform .bb-lipsync-head{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:300px !important;
  height:360px !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  overflow:visible !important;
  z-index:2 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform-origin:top left !important;
  transform:
    translate(var(--bb-lipsync-fit-x, 0px), var(--bb-lipsync-fit-y, 0px))
    scale(var(--bb-lipsync-fit-scale, .36)) !important;
}

/* Fallback visuel si le profil calibré ne charge pas encore. */
.bb-page-discussion .bb-avatar-mode-stage[data-avatar-mode="calibrated"] #talkHead.bb-lipsync-head:empty::before,
.bb-page-discussion .bb-avatar-mode-stage.is-calibrated-avatar #talkHead.bb-lipsync-head:empty::before{
  content:"🐻";
  position:absolute;
  left:58px;
  top:42px;
  width:150px;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:76px;
  border-radius:42%;
  background:rgba(255,250,244,.7);
}

/* Le switch reste dans sa propre colonne. */
.bb-page-discussion .bb-avatar-switch-meta{
  grid-column:auto !important;
  width:56px !important;
  min-width:56px !important;
  min-height:100px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.bb-page-discussion .bb-avatar-switch-btn{
  width:48px !important;
  height:72px !important;
  min-width:48px !important;
  min-height:72px !important;
}

/* Messages: pas de troncature, la bulle prend sa hauteur réelle. */
.bb-page-discussion #chatMessages{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  min-height:240px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.bb-page-discussion #chatMessages .bb-chat-message,
.bb-page-discussion #chatMessages .bb-chat-bubble,
.bb-page-discussion #chatMessages .bb-chat-bubble-content{
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  line-height:1.55 !important;
}

/* Boutons Envoyer/Parler en icônes uniquement. */
.bb-page-discussion #sendTalkBtn,
.bb-page-discussion #mockMicBtn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:26px !important;
  line-height:1 !important;
  font-weight:900 !important;
  text-indent:0 !important;
}

.bb-page-discussion #sendTalkBtn span,
.bb-page-discussion #mockMicBtn span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}

.bb-page-discussion #sendTalkBtn:disabled{
  opacity:.75 !important;
  cursor:pointer !important;
}

/* Pile quota discussion : rendu explicite avec niveau visuel. */
.bb-page-discussion .bb-talk-quota-battery{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  background:rgba(255,255,255,.9) !important;
  border:2px solid rgba(88,166,215,.35) !important;
  color:#12466b !important;
  box-shadow:0 4px 12px rgba(46,34,24,.12) !important;
}

.bb-page-discussion .bb-battery-icon{
  position:relative !important;
  width:54px !important;
  height:24px !important;
  min-width:54px !important;
  border:3px solid currentColor !important;
  border-radius:7px !important;
  padding:3px !important;
  display:block !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.78) !important;
}

.bb-page-discussion .bb-battery-icon::after{
  content:"" !important;
  position:absolute !important;
  right:-8px !important;
  top:6px !important;
  width:6px !important;
  height:10px !important;
  border-radius:0 4px 4px 0 !important;
  background:currentColor !important;
}

.bb-page-discussion .bb-battery-fill{
  display:block !important;
  height:100% !important;
  width:var(--bb-quota-percent, 0%) !important;
  border-radius:4px !important;
  background:#19c37d !important;
  transition:width .35s ease, background .35s ease !important;
}

.bb-page-discussion .bb-talk-quota-battery[data-quota-level="medium"] .bb-battery-fill{ background:#EFB648 !important; }
.bb-page-discussion .bb-talk-quota-battery[data-quota-level="low"] .bb-battery-fill{ background:#F97316 !important; }
.bb-page-discussion .bb-talk-quota-battery[data-quota-level="empty"] .bb-battery-fill{ background:#C75B42 !important; }
.bb-page-discussion .bb-talk-quota-battery[data-quota-level="unknown"] .bb-battery-fill{ background:#94A3B8 !important; }

.bb-page-discussion .bb-battery-text{
  display:flex !important;
  flex-direction:column !important;
  line-height:1.05 !important;
  min-width:0 !important;
}

.bb-page-discussion .bb-battery-text strong{
  font-size:18px !important;
  font-weight:1000 !important;
}

.bb-page-discussion .bb-battery-text small{
  font-size:10px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  opacity:.78 !important;
}

/* Sur petit écran, garder l'avatar visible et entier. */
@media(max-width:760px){
  .bb-page-discussion .bb-avatar-dock-body{
    grid-template-columns:132px 44px minmax(0,1fr) !important;
    gap:8px !important;
  }
  .bb-page-discussion .bb-avatar-square-userform{
    width:128px !important;
    height:112px !important;
    min-width:128px !important;
    min-height:112px !important;
    max-width:128px !important;
    max-height:112px !important;
  }
  .bb-page-discussion .bb-avatar-square-userform #talkSystemAvatar.bb-system-avatar-ref{
    transform:translateY(1px) scale(.62) !important;
  }
  .bb-page-discussion .bb-avatar-switch-meta{
    width:44px !important;
    min-width:44px !important;
  }
  .bb-page-discussion .bb-avatar-switch-btn{
    width:40px !important;
    height:58px !important;
  }
}


/* =========================================================
 * V4.40ZZK_STEP7CC_BACKEND_FRONTEND_ALIGNMENT
 * Module Discussion — socle interface propre selon schéma validé
 * Zones fixes : navigation, avatar/statut, conversation, saisie/actions.
 * ========================================================= */

:root {
  --bb-discussion-nav-h: 70px;
  --bb-discussion-gap: 12px;
  --bb-discussion-avatar-h: 145px;
  --bb-discussion-compose-h: 150px;
  --bb-discussion-max-w: 920px;
}

html, body {
  height: 100%;
}

body.bb-page-discussion {
  margin: 0 !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  padding: 0 !important;
  color: var(--bb-text) !important;
  background:
    linear-gradient(180deg,#88d5f2 0%,#bdeeff 42%,#f8fcff 72%,#cef0ce 100%) !important;
}

body.bb-page-discussion::after {
  content: "" !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 58px !important;
  background: linear-gradient(180deg,#7bc96f,#4caf50) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.bb-night-stars {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

@keyframes bbStarTwinkle {
  0%,100% { opacity:.14; }
  50% { opacity:1; }
}

body.bb-page-discussion[data-bb-theme="night"] {
  background: radial-gradient(ellipse at 50% 0%,#2d1b69 0%,#0f0728 48%,#06031a 100%) !important;
  color: #efeaff !important;
}

body.bb-page-discussion[data-bb-theme="night"]::after {
  background: linear-gradient(180deg,#0a0620 0%,#06031a 100%) !important;
  opacity: .72 !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-night-stars {
  display: block !important;
}

body.bb-page-discussion .bb-sky-cloud,
body.bb-page-discussion .bb-topbar,
body.bb-page-discussion .bb-shell,
body.bb-page-discussion .bb-talk-avatar-dock,
body.bb-page-discussion .bb-talk-side,
body.bb-page-discussion .bb-diagnostic-panel {
  display: none !important;
}

/* 1. Barre navigation */
.bb-discussion-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--bb-discussion-nav-h) !important;
  z-index: 1000 !important;
  display: grid !important;
  grid-template-columns: 58px minmax(170px, 360px) 52px 58px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 8px max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right)) !important;
  background: rgba(255,250,244,.94) !important;
  border-bottom: 2px solid rgba(88,166,215,.24) !important;
  box-shadow: 0 12px 28px rgba(46,34,24,.12) !important;
  backdrop-filter: blur(10px) !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-discussion-nav {
  background: rgba(13,8,36,.94) !important;
  border-bottom-color: rgba(252,211,77,.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.42) !important;
}

.bb-nav-btn,
.bb-theme-toggle-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  background: #fff !important;
  color: #167fc0 !important;
  box-shadow: 0 7px 16px rgba(46,34,24,.16) !important;
}

.bb-nav-close {
  background: #ff6b3d !important;
  color: #fff !important;
}

.bb-theme-toggle-btn {
  font-size: 24px !important;
  color: #8a5437 !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-nav-btn,
body.bb-page-discussion[data-bb-theme="night"] .bb-theme-toggle-btn {
  background: rgba(255,255,255,.92) !important;
  color: #301553 !important;
}

.bb-debug-version {
  display: none !important;
}

body.bb-debug-mode .bb-debug-version {
  display: block !important;
  position: fixed !important;
  top: 72px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1300 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(88,166,215,.28) !important;
  font-size: 11px !important;
  color: #557 !important;
}

/* 2. Pile quota */
.bb-quota-module {
  min-width: 170px !important;
  max-width: 360px !important;
  height: 44px !important;
  justify-self: center !important;
  display: grid !important;
  grid-template-columns: 58px 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
  border: 2px solid rgba(88,166,215,.20) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 6px 16px rgba(46,34,24,.08) !important;
}

.bb-quota-battery {
  position: relative !important;
  width: 52px !important;
  height: 24px !important;
  border-radius: 7px !important;
  border: 3px solid rgba(46,34,24,.36) !important;
  background: linear-gradient(180deg,#ffffff,#edf7ff) !important;
  overflow: visible !important;
}

.bb-quota-battery::after {
  content: "" !important;
  position: absolute !important;
  right: -8px !important;
  top: 6px !important;
  width: 5px !important;
  height: 9px !important;
  border-radius: 0 4px 4px 0 !important;
  background: rgba(46,34,24,.36) !important;
}

.bb-quota-fill {
  position: absolute !important;
  left: 2px !important;
  top: 2px !important;
  bottom: 2px !important;
  width: var(--bb-quota-percent,0%) !important;
  max-width: calc(100% - 4px) !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg,#6aa93f,#a8d85f) !important;
  transition: width .25s ease, background .25s ease !important;
}

.bb-quota-module[data-quota-level="medium"] .bb-quota-fill {
  background: linear-gradient(90deg,#efb648,#ffd36e) !important;
}

.bb-quota-module[data-quota-level="low"] .bb-quota-fill {
  background: linear-gradient(90deg,#f97316,#ffb15c) !important;
}

.bb-quota-module[data-quota-level="empty"] .bb-quota-fill {
  background: linear-gradient(90deg,#9e3428,#c75b42) !important;
}

.bb-quota-text {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 1.02 !important;
  color: #2e2218 !important;
}

.bb-quota-text strong {
  font-size: 17px !important;
  color: #268042 !important;
}

.bb-quota-text small {
  font-size: 9px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #6a7280 !important;
}

/* 3. Avatar + statut */
.bb-avatar-status-form {
  position: fixed !important;
  top: calc(var(--bb-discussion-nav-h) + var(--bb-discussion-gap)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 24px), var(--bb-discussion-max-w)) !important;
  height: var(--bb-discussion-avatar-h) !important;
  z-index: 850 !important;
  display: grid !important;
  grid-template-columns: 148px 1fr !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border-radius: 28px !important;
  background: rgba(255,250,244,.96) !important;
  border: 2px solid rgba(88,166,215,.25) !important;
  box-shadow: 0 18px 45px rgba(46,34,24,.14) !important;
  overflow: hidden !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-avatar-status-form {
  background: rgba(18,12,46,.92) !important;
  border-color: rgba(252,211,77,.18) !important;
}

.bb-avatar-dock-userform {
  display: grid !important;
  grid-template-columns: 116px 36px !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: 116px !important;
}

.bb-avatar-mode-stage {
  width: 116px !important;
  height: 116px !important;
}

.bb-avatar-frame {
  position: relative !important;
  width: 116px !important;
  height: 116px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.88) !important;
  border: 2px solid rgba(88,166,215,.32) !important;
  box-shadow: inset 0 0 0 6px rgba(255,250,241,.92), 0 8px 18px rgba(45,24,8,.08) !important;
  overflow: hidden !important;
}

.bb-avatar-switch {
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  border: 2px solid rgba(88,166,215,.22) !important;
  background: rgba(255,255,255,.95) !important;
  color: #1683c5 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  box-shadow: 0 7px 15px rgba(46,34,24,.10) !important;
}

.bb-avatar-status-box {
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.92) !important;
  border: 2px solid rgba(88,166,215,.20) !important;
  color: #4a2f1f !important;
  font-weight: 900 !important;
  font-size: clamp(18px,2.3vw,26px) !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-avatar-status-box {
  background: rgba(255,255,255,.08) !important;
  color: #fff6d6 !important;
  border-color: rgba(252,211,77,.20) !important;
}

.bb-avatar-status-dots {
  display: inline-flex !important;
  gap: 4px !important;
  margin-left: 4px !important;
}

.bb-avatar-status-dots i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  opacity: .24 !important;
  animation: bbDiscussionDotPulse 1.1s infinite ease-in-out !important;
}

.bb-avatar-status-dots i:nth-child(2) { animation-delay: .16s !important; }
.bb-avatar-status-dots i:nth-child(3) { animation-delay: .32s !important; }

@keyframes bbDiscussionDotPulse {
  0%,100% { opacity:.2; transform: translateY(0); }
  50% { opacity:1; transform: translateY(-3px); }
}

/* 4. Avatar système graphique */
.bb-system-avatar-ref {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 170px !important;
  height: 170px !important;
  margin: 0 !important;
  transform: translate(-50%,-50%) scale(.60) !important;
  transform-origin: center center !important;
  overflow: visible !important;
  filter: drop-shadow(0 8px 16px rgba(65,35,12,.12)) !important;
}

.bb-system-avatar-ref[hidden] {
  display: none !important;
}

.bb-system-avatar-ref .bb-system-ear,
.bb-system-avatar-ref .bb-system-head,
.bb-system-avatar-ref .bb-system-ear-shine,
.bb-system-avatar-ref .bb-system-eye,
.bb-system-avatar-ref .bb-system-muzzle,
.bb-system-avatar-ref .bb-system-nose,
.bb-system-avatar-ref .bb-system-mouth {
  position: absolute !important;
  display: block !important;
}

.bb-system-avatar-ref .bb-system-ear {
  width: 72px !important;
  height: 72px !important;
  top: -12px !important;
  border-radius: 50% !important;
  background: #c48a5a !important;
  z-index: 0 !important;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.06) !important;
}

.bb-system-avatar-ref .bb-system-ear-left { left: 2px !important; right: auto !important; }
.bb-system-avatar-ref .bb-system-ear-right { right: 2px !important; left: auto !important; }

.bb-system-avatar-ref .bb-system-head {
  inset: 0 !important;
  border-radius: 50% !important;
  background: #c48a5a !important;
  z-index: 2 !important;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.08), 0 8px 16px rgba(65,35,12,.12) !important;
}

.bb-system-avatar-ref .bb-system-ear-shine {
  width: 32px !important;
  height: 32px !important;
  top: 8px !important;
  border-radius: 50% !important;
  background: #e2b48d !important;
  z-index: 1 !important;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.05) !important;
}

.bb-system-avatar-ref .bb-system-ear-shine-left { left: 22px !important; }
.bb-system-avatar-ref .bb-system-ear-shine-right { right: 22px !important; }

.bb-system-avatar-ref .bb-system-eye {
  width: 16px !important;
  height: 16px !important;
  top: 65px !important;
  border-radius: 50% !important;
  background: #222 !important;
  z-index: 3 !important;
  transform-origin: center center !important;
  animation: bbSystemEyeBlink 4s infinite !important;
}

.bb-system-avatar-ref .bb-system-eye-left { left: 52px !important; }
.bb-system-avatar-ref .bb-system-eye-right { right: 52px !important; }

@keyframes bbSystemEyeBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.12); }
}

.bb-system-avatar-ref.state-thinking .bb-system-eye {
  animation: none !important;
  transform: scaleY(.12) !important;
}

.bb-system-avatar-ref .bb-system-muzzle {
  width: 72px !important;
  height: 50px !important;
  left: 49px !important;
  top: 88px !important;
  border-radius: 50% !important;
  background: #f2d2b6 !important;
  z-index: 3 !important;
}

.bb-system-avatar-ref .bb-system-nose {
  width: 22px !important;
  height: 16px !important;
  left: 74px !important;
  top: 96px !important;
  border-radius: 50% !important;
  background: #3a2318 !important;
  z-index: 4 !important;
}

.bb-system-avatar-ref .bb-system-mouth {
  width: 28px !important;
  height: 8px !important;
  left: 71px !important;
  top: 118px !important;
  border-radius: 0 0 20px 20px !important;
  background: #3a2318 !important;
  z-index: 4 !important;
  transform-origin: center top !important;
}

.bb-system-avatar-ref.state-speaking .bb-system-mouth {
  animation: bbSystemMouthTalk .25s infinite alternate !important;
}

.bb-system-avatar-ref.state-speaking {
  animation: bbSystemBearTalk .34s infinite alternate ease-in-out !important;
}

@keyframes bbSystemMouthTalk {
  from { height: 6px; }
  to { height: 20px; }
}

@keyframes bbSystemBearTalk {
  from { transform: translate(-50%,-50%) scale(.60) translateY(0); }
  to { transform: translate(-50%,-50%) scale(.60) translateY(-2px); }
}

.bb-calibrated-avatar {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.bb-calibrated-avatar[hidden] {
  display: none !important;
}

/* 5. Conversation */
.bb-chat-form {
  position: fixed !important;
  top: calc(var(--bb-discussion-nav-h) + var(--bb-discussion-gap) + var(--bb-discussion-avatar-h) + var(--bb-discussion-gap)) !important;
  bottom: calc(var(--bb-discussion-compose-h) + 26px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 24px), var(--bb-discussion-max-w)) !important;
  z-index: 700 !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.93) !important;
  border: 2px solid rgba(88,166,215,.22) !important;
  box-shadow: 0 15px 35px rgba(46,34,24,.12) !important;
  overflow: hidden !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-chat-form {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(252,211,77,.16) !important;
}

.bb-chat-messages {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 4px 4px 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.bb-chat-message {
  width: fit-content !important;
  max-width: min(78%, 640px) !important;
  min-width: 120px !important;
  padding: 12px 15px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.07) !important;
  border: 2px solid transparent !important;
}

.bb-chat-message.bear {
  align-self: flex-start !important;
  background: linear-gradient(135deg,#e3f2fd,#f3f9ff) !important;
  border-color: #bbdefb !important;
  color: #24384a !important;
  border-bottom-left-radius: 5px !important;
}

.bb-chat-message.user {
  align-self: flex-end !important;
  background: linear-gradient(135deg,#fff3e0,#fffbf5) !important;
  border-color: #ffe082 !important;
  color: #4b2f18 !important;
  border-bottom-right-radius: 5px !important;
}

.bb-chat-message strong {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 13px !important;
  color: #1e88e5 !important;
}

.bb-chat-message.user strong {
  color: #e65100 !important;
}

.bb-chat-message p {
  margin: 0 !important;
}

/* 6. Saisie/actions */
.bb-compose-form-wrap {
  position: fixed !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 24px), var(--bb-discussion-max-w)) !important;
  height: var(--bb-discussion-compose-h) !important;
  z-index: 800 !important;
  display: grid !important;
  grid-template-rows: 72px 28px 34px auto !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  background: rgba(255,250,244,.96) !important;
  border: 2px solid rgba(196,138,90,.28) !important;
  box-shadow: 0 15px 35px rgba(46,34,24,.14) !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-compose-form-wrap {
  background: rgba(18,12,46,.94) !important;
  border-color: rgba(252,211,77,.18) !important;
}

.bb-compose-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 56px !important;
  gap: 10px !important;
  margin: 0 !important;
  height: 72px !important;
}

.bb-compose-form textarea {
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  resize: none !important;
  border-radius: 18px !important;
  border: 2px solid rgba(88,166,215,.22) !important;
  background: rgba(255,255,255,.98) !important;
  color: #2e2218 !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  outline: none !important;
}

.bb-compose-form textarea:focus {
  border-color: rgba(88,166,215,.55) !important;
  box-shadow: 0 0 0 4px rgba(88,166,215,.13) !important;
}

.bb-compose-actions {
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 8px !important;
  width: 56px !important;
  height: 72px !important;
}

.bb-compose-icon-btn {
  width: 56px !important;
  min-width: 56px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 13px !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #fff !important;
  box-shadow: 0 5px 0 rgba(72,43,25,.28), 0 7px 14px rgba(46,34,24,.12) !important;
}

.bb-send-icon-btn {
  background: linear-gradient(180deg,#5ed2ff,#168cb9) !important;
}

.bb-mic-icon-btn {
  background: linear-gradient(180deg,#ffca45,#f39c12) !important;
}

.bb-mic-icon-btn.is-active {
  background: linear-gradient(180deg,#ff6b6b,#c75b42) !important;
  animation: bbMicPulse .9s infinite ease-in-out !important;
}

@keyframes bbMicPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.bb-compose-options {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  font-size: 13px !important;
  color: #5a4637 !important;
}

.bb-mic-auto-send {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.bb-mic-auto-send input {
  width: 16px !important;
  height: 16px !important;
}

.bb-mic-status {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.bb-voice-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.bb-voice-actions .bb-secondary-btn {
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

.bb-message {
  min-height: 16px !important;
  margin: 0 !important;
  font-size: 12px !important;
}

/* 7. Debug */
.bb-debug-panel {
  display: none !important;
}

body.bb-debug-mode .bb-debug-panel {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(var(--bb-discussion-compose-h) + 28px) !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 24px), var(--bb-discussion-max-w)) !important;
  max-height: 220px !important;
  z-index: 900 !important;
  display: block !important;
  overflow: auto !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.97) !important;
  border: 2px solid rgba(199,91,66,.22) !important;
  box-shadow: 0 12px 28px rgba(46,34,24,.16) !important;
}

.bb-debug-panel h2 {
  margin: 0 0 8px !important;
  font-size: 16px !important;
}

.bb-debug-errors {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: #fff4ed !important;
  border: 1px solid #ffd0bc !important;
  color: #7c2d12 !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

.bb-debug-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.bb-debug-panel pre {
  margin: 0 !important;
  max-height: 95px !important;
  overflow: auto !important;
  font-size: 11px !important;
}

/* 8. Accessibilité */
.bb-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 9. Responsive */
@media (max-width: 760px) {
  :root {
    --bb-discussion-nav-h: 62px;
    --bb-discussion-gap: 9px;
    --bb-discussion-avatar-h: 126px;
    --bb-discussion-compose-h: 144px;
  }

  .bb-discussion-nav {
    grid-template-columns: 48px minmax(140px, 1fr) 44px 48px !important;
    gap: 7px !important;
    padding: 7px 8px !important;
  }

  .bb-nav-btn,
  .bb-theme-toggle-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 24px !important;
  }

  .bb-quota-module {
    min-width: 140px !important;
    height: 40px !important;
    grid-template-columns: 48px 1fr !important;
    padding: 5px 9px !important;
  }

  .bb-quota-battery {
    width: 43px !important;
    height: 21px !important;
  }

  .bb-quota-text strong {
    font-size: 15px !important;
  }

  .bb-quota-text small {
    font-size: 8px !important;
  }

  .bb-avatar-status-form {
    grid-template-columns: 120px 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }

  .bb-avatar-dock-userform {
    grid-template-columns: 94px 30px !important;
    height: 94px !important;
    gap: 5px !important;
  }

  .bb-avatar-mode-stage,
  .bb-avatar-frame {
    width: 94px !important;
    height: 94px !important;
  }

  .bb-system-avatar-ref {
    transform: translate(-50%,-50%) scale(.49) !important;
  }

  .bb-system-avatar-ref.state-speaking {
    animation: bbSystemBearTalkMobile .34s infinite alternate ease-in-out !important;
  }

  @keyframes bbSystemBearTalkMobile {
    from { transform: translate(-50%,-50%) scale(.49) translateY(0); }
    to { transform: translate(-50%,-50%) scale(.49) translateY(-2px); }
  }

  .bb-avatar-switch {
    width: 30px !important;
    height: 30px !important;
    border-radius: 11px !important;
    font-size: 18px !important;
  }

  .bb-avatar-status-box {
    min-height: 66px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
  }

  .bb-compose-form-wrap {
    grid-template-rows: 66px 26px 30px auto !important;
    gap: 5px !important;
    padding: 10px !important;
  }

  .bb-compose-form {
    grid-template-columns: minmax(0,1fr) 50px !important;
    height: 66px !important;
    gap: 8px !important;
  }

  .bb-compose-form textarea {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    font-size: 14px !important;
  }

  .bb-compose-actions {
    width: 50px !important;
    height: 66px !important;
    gap: 6px !important;
  }

  .bb-compose-icon-btn {
    width: 50px !important;
    min-width: 50px !important;
    height: 30px !important;
  }

  .bb-compose-options {
    font-size: 11px !important;
  }

  .bb-mic-status {
    font-size: 11px !important;
  }

  .bb-chat-message {
    max-width: 86% !important;
    font-size: 14px !important;
  }

  .bb-voice-actions .bb-secondary-btn {
    min-height: 28px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 440px) {
  .bb-compose-options {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .bb-mic-auto-send {
    white-space: normal !important;
  }

  .bb-avatar-status-box {
    font-size: 14px !important;
  }

  .bb-voice-actions {
    gap: 5px !important;
  }
}


/******************************************************
 * V4.40ZZK_STEP7CC_BACKEND_FRONTEND_ALIGNMENT
 * Page Discussion reconstruite selon le cahier de charge.
 * Zones fixes : navigation / avatar-statut / conversation / saisie.
 ******************************************************/

.bb-page-discussion.bb-discussion-clean {
  --bb-discussion-max: min(92vw, 760px);
  --bb-nav-h: 70px;
  --bb-gap: 12px;
  --bb-avatar-h: 132px;
  --bb-compose-h: 156px;
  min-height: 100vh !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.70) 0 34px, transparent 35px),
    radial-gradient(circle at 84% 14%, rgba(255,255,255,.58) 0 48px, transparent 49px),
    linear-gradient(180deg, #84d7f7 0%, #dff3ff 58%, #f7f1dc 100%) !important;
  color: var(--bb-text, #2E2218) !important;
}

.bb-page-discussion.bb-discussion-clean[data-bb-theme="night"] {
  background:
    radial-gradient(circle at 78% 10%, rgba(255,245,190,.95) 0 25px, transparent 27px),
    linear-gradient(180deg, #1d2b5f 0%, #314b8b 55%, #192847 100%) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-night-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.bb-page-discussion.bb-discussion-clean[data-bb-theme="night"] .bb-night-stars {
  display: block;
}

.bb-page-discussion.bb-discussion-clean .bb-discussion-nav,
.bb-page-discussion.bb-discussion-clean .bb-avatar-status-form,
.bb-page-discussion.bb-discussion-clean .bb-chat-form,
.bb-page-discussion.bb-discussion-clean .bb-compose-form-wrap,
.bb-page-discussion.bb-discussion-clean .bb-debug-panel {
  box-sizing: border-box !important;
  font-family: Arial, system-ui, sans-serif !important;
}

.bb-page-discussion.bb-discussion-clean .bb-discussion-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--bb-nav-h) !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: 54px 1fr 54px 54px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right)) !important;
  background: rgba(255, 250, 244, .94) !important;
  border-bottom: 2px solid rgba(228, 212, 184, .85) !important;
  box-shadow: 0 10px 22px rgba(46,34,24,.12) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-nav-btn,
.bb-page-discussion.bb-discussion-clean .bb-theme-toggle-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  box-shadow: 0 7px 16px rgba(46,34,24,.16), inset 0 5px 0 rgba(255,255,255,.28) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-nav-back {
  color: #ffffff !important;
  background: linear-gradient(180deg, #58A6D7, #2e91ce) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-nav-close {
  color: #ffffff !important;
  background: linear-gradient(180deg, #ff805f, #f05c32) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-theme-toggle-btn {
  color: #2E2218 !important;
  background: linear-gradient(180deg, #fff7d9, #ffd96f) !important;
  font-size: 23px !important;
}

.bb-page-discussion.bb-discussion-clean[data-bb-theme="night"] .bb-theme-toggle-btn {
  color: #ffffff !important;
  background: linear-gradient(180deg, #51649f, #26376b) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-quota-module {
  justify-self: center !important;
  width: min(100%, 292px) !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.94) !important;
  border: 2px solid rgba(88,166,215,.28) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 6px 14px rgba(46,34,24,.08) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-quota-battery {
  position: relative !important;
  width: 58px !important;
  height: 26px !important;
  flex: 0 0 58px !important;
  border-radius: 8px !important;
  border: 3px solid rgba(46,34,24,.52) !important;
  background: #fff !important;
  overflow: visible !important;
}

.bb-page-discussion.bb-discussion-clean .bb-quota-battery::after {
  content: "" !important;
  position: absolute !important;
  right: -9px !important;
  top: 7px !important;
  width: 7px !important;
  height: 12px !important;
  border-radius: 0 5px 5px 0 !important;
  background: rgba(46,34,24,.52) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-quota-fill {
  position: absolute !important;
  left: 2px !important;
  top: 2px !important;
  bottom: 2px !important;
  width: 0% !important;
  max-width: calc(100% - 4px) !important;
  border-radius: 5px !important;
  background: linear-gradient(90deg, #6AA93F, #98db54) !important;
  transition: width .25s ease, background .25s ease !important;
}

.bb-page-discussion.bb-discussion-clean .bb-quota-module[data-quota-level="medium"] .bb-quota-fill {
  background: linear-gradient(90deg, #EFB648, #ffd978) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-quota-module[data-quota-level="low"] .bb-quota-fill {
  background: linear-gradient(90deg, #ff8a42, #ffbd68) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-quota-module[data-quota-level="empty"] .bb-quota-fill {
  background: linear-gradient(90deg, #C75B42, #9e3428) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-quota-text {
  min-width: 108px !important;
  display: grid !important;
  grid-template-columns: auto !important;
  line-height: 1.08 !important;
  color: #2E2218 !important;
}

.bb-page-discussion.bb-discussion-clean .bb-quota-text strong {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #2e7c31 !important;
}

.bb-page-discussion.bb-discussion-clean .bb-quota-text small {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  color: rgba(46,34,24,.70) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-debug-version {
  display: none !important;
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  transform: translateX(-50%) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: rgba(46,34,24,.55) !important;
  background: rgba(255,255,255,.88) !important;
  padding: 3px 10px !important;
  border-radius: 0 0 12px 12px !important;
}

.bb-page-discussion.bb-discussion-clean.bb-debug-mode .bb-debug-version:not([hidden]) {
  display: block !important;
}

.bb-page-discussion.bb-discussion-clean .bb-avatar-status-form {
  position: fixed !important;
  z-index: 70 !important;
  top: calc(var(--bb-nav-h) + var(--bb-gap)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--bb-discussion-max) !important;
  height: var(--bb-avatar-h) !important;
  display: grid !important;
  grid-template-columns: 132px 1fr 48px !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border-radius: 28px !important;
  background: rgba(255,250,244,.94) !important;
  border: 2px solid rgba(228,212,184,.86) !important;
  box-shadow: 0 14px 32px rgba(46,34,24,.11), inset 0 0 0 1px rgba(255,255,255,.82) !important;
  overflow: visible !important;
}

.bb-page-discussion.bb-discussion-clean .bb-avatar-dock-userform {
  width: 122px !important;
  height: 112px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
}

.bb-page-discussion.bb-discussion-clean .bb-avatar-mode-stage,
.bb-page-discussion.bb-discussion-clean .bb-avatar-frame {
  width: 110px !important;
  height: 110px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #fff, #fff7ea) !important;
  border: 2px solid rgba(88,166,215,.42) !important;
  box-shadow: inset 0 0 0 5px rgba(223,243,255,.8), 0 9px 18px rgba(46,34,24,.10) !important;
  overflow: hidden !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref {
  display: block !important;
  position: relative !important;
  width: 170px !important;
  height: 170px !important;
  margin: 0 !important;
  transform: scale(.56) !important;
  transform-origin: center center !important;
  overflow: visible !important;
  filter: drop-shadow(0 8px 14px rgba(65,35,12,.12)) !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar[hidden],
.bb-page-discussion.bb-discussion-clean #talkHead[hidden] {
  display: none !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear,
.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-head,
.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-shine,
.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-eye,
.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-muzzle,
.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-nose,
.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-mouth {
  position: absolute !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear {
  width: 72px !important;
  height: 72px !important;
  top: -12px !important;
  border-radius: 50% !important;
  background: #c48a5a !important;
  z-index: 0 !important;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.06) !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-left { left: 2px !important; }
.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-right { right: 2px !important; }

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-head {
  width: 170px !important;
  height: 170px !important;
  left: 0 !important;
  top: 0 !important;
  border-radius: 50% !important;
  background: #c48a5a !important;
  z-index: 2 !important;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.08), 0 8px 16px rgba(65,35,12,.12) !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-shine {
  width: 32px !important;
  height: 32px !important;
  top: 8px !important;
  border-radius: 50% !important;
  background: #e2b48d !important;
  opacity: 1 !important;
  z-index: 3 !important;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.05) !important;
  transform: none !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-shine-left { left: 22px !important; }
.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-ear-shine-right { right: 22px !important; }

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-eye {
  width: 16px !important;
  height: 16px !important;
  top: 65px !important;
  border-radius: 50% !important;
  background: #222 !important;
  z-index: 4 !important;
  transform-origin: center center !important;
  animation: bbSystemEyeBlink 4s infinite !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-eye-left { left: 52px !important; }
.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-eye-right { right: 52px !important; }

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref.state-thinking .bb-system-eye {
  height: 4px !important;
  top: 71px !important;
  border-radius: 999px !important;
  animation: none !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-muzzle {
  width: 72px !important;
  height: 50px !important;
  left: 49px !important;
  top: 88px !important;
  border-radius: 50% !important;
  background: #f2d2b6 !important;
  z-index: 4 !important;
  box-shadow: none !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-nose {
  width: 22px !important;
  height: 16px !important;
  left: 74px !important;
  top: 96px !important;
  border-radius: 50% !important;
  background: #3a2318 !important;
  z-index: 5 !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref .bb-system-mouth {
  width: 28px !important;
  height: 8px !important;
  left: 71px !important;
  top: 118px !important;
  border-radius: 0 0 20px 20px !important;
  background: #3a2318 !important;
  z-index: 5 !important;
  transform-origin: center top !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref.state-speaking .bb-system-mouth {
  animation: bbSystemModelMouthTalk .25s infinite alternate !important;
}

.bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref.state-speaking {
  animation: bbSystemModelBearTalk .34s infinite alternate ease-in-out !important;
}

.bb-page-discussion.bb-discussion-clean #talkHead.bb-calibrated-avatar {
  position: relative !important;
  width: 110px !important;
  height: 110px !important;
  max-width: 110px !important;
  max-height: 110px !important;
  inset: auto !important;
  transform: none !important;
  transform-origin: center center !important;
  overflow: hidden !important;
  display: block !important;
}

.bb-page-discussion.bb-discussion-clean #talkHead.bb-calibrated-avatar[hidden] {
  display: none !important;
}

.bb-page-discussion.bb-discussion-clean .bb-avatar-switch {
  position: absolute !important;
  right: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.97) !important;
  color: #2878aa !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(46,34,24,.16) !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

.bb-page-discussion.bb-discussion-clean .bb-avatar-status-box {
  min-height: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 18px 22px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.91) !important;
  border: 1px solid rgba(88,166,215,.30) !important;
  color: #3c2a1d !important;
  font-size: clamp(18px, 2.6vw, 26px) !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.bb-page-discussion.bb-discussion-clean .bb-avatar-status-dots {
  display: inline-flex !important;
  gap: 4px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}

.bb-page-discussion.bb-discussion-clean .bb-avatar-status-dots i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #58A6D7 !important;
  display: inline-block !important;
  animation: bbStatusDotPulse 1.05s infinite ease-in-out !important;
}

.bb-page-discussion.bb-discussion-clean .bb-avatar-status-dots i:nth-child(2) { animation-delay: .18s !important; }
.bb-page-discussion.bb-discussion-clean .bb-avatar-status-dots i:nth-child(3) { animation-delay: .36s !important; }

.bb-page-discussion.bb-discussion-clean .bb-chat-form {
  position: fixed !important;
  z-index: 50 !important;
  left: 50% !important;
  top: calc(var(--bb-nav-h) + var(--bb-gap) + var(--bb-avatar-h) + var(--bb-gap)) !important;
  bottom: calc(var(--bb-compose-h) + 24px) !important;
  transform: translateX(-50%) !important;
  width: var(--bb-discussion-max) !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background: rgba(255,250,244,.95) !important;
  border: 2px solid rgba(228,212,184,.86) !important;
  box-shadow: 0 14px 32px rgba(46,34,24,.10), inset 0 0 0 1px rgba(255,255,255,.84) !important;
  overflow: hidden !important;
}

.bb-page-discussion.bb-discussion-clean .bb-chat-messages {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 4px 4px 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
}

.bb-page-discussion.bb-discussion-clean .bb-chat-message {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.bb-page-discussion.bb-discussion-clean .bb-chat-message.bear {
  justify-content: flex-start !important;
}

.bb-page-discussion.bb-discussion-clean .bb-chat-message.user {
  justify-content: flex-end !important;
}

.bb-page-discussion.bb-discussion-clean .bb-chat-bubble-content {
  max-width: min(76%, 520px) !important;
  min-width: min(180px, 70%) !important;
  padding: 14px 16px !important;
  border-radius: 20px !important;
  border: 2px solid rgba(228,212,184,.72) !important;
  box-shadow: 0 8px 18px rgba(46,34,24,.08) !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  white-space: normal !important;
}

.bb-page-discussion.bb-discussion-clean .bb-chat-message.bear .bb-chat-bubble-content {
  background: #ffffff !important;
  color: #3d2b1e !important;
  border-top-left-radius: 8px !important;
}

.bb-page-discussion.bb-discussion-clean .bb-chat-message.user .bb-chat-bubble-content {
  background: #ffffff !important;
  color: #16384f !important;
  border-top-right-radius: 8px !important;
}

.bb-page-discussion.bb-discussion-clean .bb-chat-bubble-content strong {
  display: block !important;
  margin-bottom: 7px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: rgba(46,34,24,.74) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-chat-bubble-content p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

.bb-page-discussion.bb-discussion-clean .bb-compose-form-wrap {
  position: fixed !important;
  z-index: 70 !important;
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  width: var(--bb-discussion-max) !important;
  min-height: var(--bb-compose-h) !important;
  height: var(--bb-compose-h) !important;
  padding: 12px !important;
  border-radius: 22px !important;
  background: rgba(255,250,244,.96) !important;
  border: 2px solid rgba(228,212,184,.90) !important;
  box-shadow: 0 14px 32px rgba(46,34,24,.13), inset 0 0 0 1px rgba(255,255,255,.85) !important;
  overflow: hidden !important;
}

.bb-page-discussion.bb-discussion-clean .bb-compose-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 58px !important;
  gap: 10px !important;
  align-items: stretch !important;
  height: 72px !important;
  margin: 0 !important;
}

.bb-page-discussion.bb-discussion-clean #talkInput {
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  resize: none !important;
  border-radius: 18px !important;
  border: 2px solid rgba(88,166,215,.28) !important;
  background: #fff !important;
  padding: 14px 16px !important;
  color: #2E2218 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  outline: none !important;
}

.bb-page-discussion.bb-discussion-clean #talkInput:focus {
  border-color: rgba(88,166,215,.88) !important;
  box-shadow: 0 0 0 4px rgba(88,166,215,.16) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-compose-actions {
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 8px !important;
  width: 58px !important;
  height: 72px !important;
}

.bb-page-discussion.bb-discussion-clean .bb-compose-icon-btn {
  width: 58px !important;
  height: 32px !important;
  min-width: 58px !important;
  min-height: 32px !important;
  border: 0 !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 rgba(92,58,31,.86), inset 0 7px 0 rgba(255,255,255,.25) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-send-icon-btn {
  background: linear-gradient(180deg, #58A6D7, #168cb9) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-mic-icon-btn {
  background: linear-gradient(180deg, #EFB648, #d48d10) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-mic-icon-btn.is-active {
  background: linear-gradient(180deg, #ff6d5d, #c9302c) !important;
  animation: bbMicPulse .85s infinite ease-in-out !important;
}

.bb-page-discussion.bb-discussion-clean .bb-compose-options {
  height: 28px !important;
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: rgba(46,34,24,.78) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  overflow: hidden !important;
}

.bb-page-discussion.bb-discussion-clean .bb-mic-auto-send {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.bb-page-discussion.bb-discussion-clean .bb-mic-auto-send input {
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
}

.bb-page-discussion.bb-discussion-clean .bb-mic-status {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #2878aa !important;
  white-space: nowrap !important;
}

.bb-page-discussion.bb-discussion-clean .bb-voice-actions {
  height: 32px !important;
  margin-top: 6px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.bb-page-discussion.bb-discussion-clean .bb-voice-actions .bb-secondary-btn {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(88,166,215,.13) !important;
  color: #2878aa !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.bb-page-discussion.bb-discussion-clean .bb-message {
  display: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-debug-mode .bb-message:not(:empty) {
  display: block !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: -28px !important;
  min-height: 22px !important;
  font-size: 12px !important;
  color: #C75B42 !important;
  background: rgba(255,255,255,.88) !important;
  border-radius: 9px !important;
  padding: 4px 8px !important;
}

.bb-page-discussion.bb-discussion-clean .bb-debug-panel {
  display: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-debug-mode {
  overflow-y: auto !important;
  min-height: calc(100vh + 380px) !important;
}

.bb-page-discussion.bb-discussion-clean.bb-debug-mode .bb-debug-panel:not([hidden]) {
  display: block !important;
  position: absolute !important;
  z-index: 20 !important;
  top: calc(100vh + 18px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--bb-discussion-max) !important;
  margin-bottom: 40px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  background: rgba(255,250,244,.96) !important;
  border: 2px solid rgba(199,91,66,.35) !important;
  box-shadow: 0 12px 26px rgba(46,34,24,.13) !important;
}

.bb-page-discussion.bb-discussion-clean .bb-debug-panel h2 {
  margin: 0 0 10px !important;
  font-size: 18px !important;
  color: #C75B42 !important;
}

.bb-page-discussion.bb-discussion-clean .bb-debug-errors {
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: #fff4ef !important;
  border: 1px solid rgba(199,91,66,.30) !important;
  color: #8d301f !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.bb-page-discussion.bb-discussion-clean .bb-debug-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.bb-page-discussion.bb-discussion-clean .bb-debug-actions .bb-secondary-btn {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 11px !important;
  background: rgba(88,166,215,.16) !important;
  color: #2878aa !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.bb-page-discussion.bb-discussion-clean #talkDiagOutput {
  width: 100% !important;
  max-height: 220px !important;
  overflow: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #1f1f1f !important;
  color: #f4f4f4 !important;
  font-size: 12px !important;
}

@keyframes bbSystemModelMouthTalk {
  from { height: 6px; }
  to { height: 20px; }
}

@keyframes bbSystemModelBearTalk {
  from { transform: scale(.56) translateY(0); }
  to { transform: scale(.56) translateY(-2px); }
}

@keyframes bbStatusDotPulse {
  0%, 100% { transform: translateY(0); opacity: .35; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes bbMicPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes bbStarTwinkle {
  0%, 100% { opacity: .18; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.22); }
}

@media (max-width: 620px) {
  .bb-page-discussion.bb-discussion-clean {
    --bb-discussion-max: calc(100vw - 20px);
    --bb-nav-h: 62px;
    --bb-gap: 8px;
    --bb-avatar-h: 116px;
    --bb-compose-h: 150px;
  }

  .bb-page-discussion.bb-discussion-clean .bb-discussion-nav {
    grid-template-columns: 46px 1fr 44px 46px !important;
    gap: 6px !important;
    padding: 7px 8px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-nav-btn,
  .bb-page-discussion.bb-discussion-clean .bb-theme-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 22px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-quota-module {
    width: min(100%, 210px) !important;
    height: 42px !important;
    gap: 7px !important;
    padding: 5px 10px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-quota-battery {
    width: 46px !important;
    height: 22px !important;
    flex-basis: 46px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-quota-text strong {
    font-size: 14px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-quota-text small {
    font-size: 8px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-avatar-status-form {
    grid-template-columns: 102px 1fr 38px !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-avatar-dock-userform {
    width: 98px !important;
    height: 98px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-avatar-mode-stage,
  .bb-page-discussion.bb-discussion-clean .bb-avatar-frame {
    width: 90px !important;
    height: 90px !important;
  }

  .bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref {
    transform: scale(.48) !important;
  }

  .bb-page-discussion.bb-discussion-clean #talkHead.bb-calibrated-avatar {
    width: 90px !important;
    height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-avatar-switch {
    width: 34px !important;
    height: 34px !important;
    font-size: 19px !important;
    right: -6px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-avatar-status-box {
    height: 64px !important;
    min-height: 64px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-chat-form {
    padding: 10px !important;
    border-radius: 20px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-chat-bubble-content {
    max-width: 88% !important;
    min-width: 150px !important;
    padding: 11px 12px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-chat-bubble-content p {
    font-size: 14px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-compose-form-wrap {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-compose-form {
    grid-template-columns: minmax(0,1fr) 50px !important;
    height: 68px !important;
  }

  .bb-page-discussion.bb-discussion-clean #talkInput {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    font-size: 14px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-compose-actions {
    width: 50px !important;
    height: 68px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-compose-icon-btn {
    width: 50px !important;
    min-width: 50px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-compose-options {
    font-size: 11px !important;
    gap: 6px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-voice-actions .bb-secondary-btn {
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

@media (max-height: 640px) {
  .bb-page-discussion.bb-discussion-clean {
    --bb-nav-h: 58px;
    --bb-gap: 7px;
    --bb-avatar-h: 104px;
    --bb-compose-h: 138px;
  }

  .bb-page-discussion.bb-discussion-clean .bb-avatar-status-form {
    grid-template-columns: 96px 1fr 38px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-avatar-dock-userform,
  .bb-page-discussion.bb-discussion-clean .bb-avatar-mode-stage,
  .bb-page-discussion.bb-discussion-clean .bb-avatar-frame {
    width: 86px !important;
    height: 86px !important;
  }

  .bb-page-discussion.bb-discussion-clean #talkSystemAvatar.bb-system-avatar-ref {
    transform: scale(.45) !important;
  }

  .bb-page-discussion.bb-discussion-clean #talkHead.bb-calibrated-avatar {
    width: 86px !important;
    height: 86px !important;
    max-width: 86px !important;
    max-height: 86px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-avatar-status-box {
    height: 58px !important;
    min-height: 58px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-compose-form {
    height: 58px !important;
  }

  .bb-page-discussion.bb-discussion-clean #talkInput {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-compose-actions {
    height: 58px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-compose-icon-btn {
    height: 25px !important;
    min-height: 25px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-compose-options {
    margin-top: 5px !important;
  }

  .bb-page-discussion.bb-discussion-clean .bb-voice-actions {
    margin-top: 4px !important;
  }
}


/* STEP7BV_FINAL_CAHIER_VERIFIED_START
 * Version: V4.40ZZK_STEP7CC_BACKEND_FRONTEND_ALIGNMENT
 * Rôle: source finale de vérité pour l'interface Discussion.
 * Ce bloc surcharge les correctifs empilés précédents uniquement sur normal/discussion.html.
 */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified {
  --bb-nav-h: 70px;
  --bb-gap: 12px;
  --bb-avatar-h: 136px;
  --bb-compose-h: 168px;
  --bb-debug-h: 220px;
  --bb-shell-w: min(94vw, 820px);
  min-height: 100vh !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.75), transparent 26%),
    linear-gradient(180deg, #dff3ff 0%, #9ed8ff 58%, #f6e7bd 100%) !important;
  color: #2e2218 !important;
  padding: 0 !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="night"] {
  background:
    radial-gradient(circle at 80% 10%, rgba(255,250,244,.9) 0 34px, transparent 36px),
    linear-gradient(180deg, #14213d 0%, #25446e 48%, #304c6b 100%) !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-night-stars {
  display: none;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="night"] .bb-night-stars {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-discussion-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--bb-nav-h) !important;
  min-height: var(--bb-nav-h) !important;
  display: grid !important;
  grid-template-columns: 58px minmax(180px, 1fr) 54px 58px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px max(10px, env(safe-area-inset-left)) 8px max(10px, env(safe-area-inset-right)) !important;
  background: rgba(255,250,244,.96) !important;
  border-bottom: 2px solid rgba(228,212,184,.95) !important;
  box-shadow: 0 8px 20px rgba(46,34,24,.13) !important;
  z-index: 100 !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-nav-btn,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-theme-toggle-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #2e2218 !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 0 rgba(46,34,24,.32), 0 8px 16px rgba(46,34,24,.10) !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-nav-close {
  border-radius: 50% !important;
  background: #c75b42 !important;
  color: #ffffff !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-module {
  justify-self: center !important;
  width: min(100%, 315px) !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 3px solid rgba(46,34,24,.25) !important;
  box-shadow: inset 0 0 0 4px rgba(255,250,244,.9), 0 4px 12px rgba(46,34,24,.10) !important;
  padding: 5px 14px !important;
  color: #2e2218 !important;
  overflow: visible !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-battery {
  position: relative !important;
  width: 62px !important;
  height: 28px !important;
  flex: 0 0 62px !important;
  border: 3px solid #2e2218 !important;
  border-radius: 8px !important;
  background: #f7f7f7 !important;
  overflow: visible !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-battery::after {
  content: "" !important;
  position: absolute !important;
  right: -9px !important;
  top: 7px !important;
  width: 7px !important;
  height: 12px !important;
  border-radius: 0 4px 4px 0 !important;
  background: #2e2218 !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-fill {
  display: block !important;
  position: absolute !important;
  left: 3px !important;
  top: 3px !important;
  bottom: 3px !important;
  width: var(--bb-quota-percent, 0%) !important;
  max-width: calc(100% - 6px) !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #6aa93f, #a8d85f) !important;
  transition: width .25s ease, background .25s ease !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-module[data-quota-level="medium"] .bb-quota-fill {
  background: linear-gradient(90deg, #efb648, #ffd36e) !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-module[data-quota-level="low"] .bb-quota-fill {
  background: linear-gradient(90deg, #ef7d3e, #ffb36e) !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-module[data-quota-level="empty"] .bb-quota-fill {
  background: linear-gradient(90deg, #9e3428, #c75b42) !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 1.05 !important;
  min-width: 92px !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-text strong {
  font-size: 18px !important;
  font-weight: 900 !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-text small {
  font-size: 10px !important;
  font-weight: 800 !important;
  opacity: .86 !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-debug-version {
  display: none !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified.bb-debug-mode .bb-debug-version {
  display: block !important;
  position: fixed !important;
  top: calc(var(--bb-nav-h) + 4px) !important;
  right: 12px !important;
  max-width: 360px !important;
  font-size: 11px !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(228,212,184,.9) !important;
  border-radius: 10px !important;
  padding: 5px 8px !important;
  z-index: 110 !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-status-form {
  position: fixed !important;
  top: calc(var(--bb-nav-h) + var(--bb-gap)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--bb-shell-w) !important;
  height: var(--bb-avatar-h) !important;
  display: grid !important;
  grid-template-columns: 124px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 28px !important;
  background: rgba(255,250,244,.94) !important;
  border: 2px solid rgba(228,212,184,.9) !important;
  box-shadow: 0 10px 24px rgba(46,34,24,.12) !important;
  z-index: 80 !important;
  overflow: visible !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-dock-userform {
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  min-height: 112px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 2px solid rgba(228,212,184,.95) !important;
  box-shadow: inset 0 0 0 6px #fffaf1, 0 6px 14px rgba(45,24,8,.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-mode-stage,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-frame {
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  min-height: 104px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref {
  width: 170px !important;
  height: 170px !important;
  min-width: 170px !important;
  min-height: 170px !important;
  position: relative !important;
  margin: 0 !important;
  display: block !important;
  overflow: visible !important;
  transform: scale(.56) !important;
  transform-origin: center center !important;
  filter: drop-shadow(0 7px 12px rgba(65,35,12,.13)) !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar[hidden] {
  display: none !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-ear {
  position: absolute !important;
  width: 72px !important;
  height: 72px !important;
  top: -12px !important;
  border-radius: 50% !important;
  background: #c48a5a !important;
  z-index: 0 !important;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.06) !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-ear-left { left: 2px !important; }
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-ear-right { right: 2px !important; }
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-ear-shine {
  position: absolute !important;
  width: 32px !important;
  height: 32px !important;
  top: 8px !important;
  border-radius: 50% !important;
  background: #e2b48d !important;
  z-index: 1 !important;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.05) !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-ear-shine-left { left: 22px !important; }
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-ear-shine-right { right: 22px !important; }
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-head {
  position: absolute !important;
  width: 170px !important;
  height: 170px !important;
  left: 0 !important;
  top: 0 !important;
  border-radius: 50% !important;
  background: #c48a5a !important;
  z-index: 2 !important;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.08), 0 8px 16px rgba(65,35,12,.12) !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-eye {
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  top: 65px !important;
  border-radius: 50% !important;
  background: #222 !important;
  z-index: 3 !important;
  transform-origin: center center !important;
  animation: bbVerifiedBlink 4s infinite !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-eye-left { left: 52px !important; }
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-eye-right { right: 52px !important; }
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.state-thinking .bb-system-eye {
  height: 4px !important;
  top: 71px !important;
  border-radius: 999px !important;
  animation: none !important;
}
@keyframes bbVerifiedBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96% { transform: scaleY(.12); }
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-muzzle {
  position: absolute !important;
  width: 72px !important;
  height: 50px !important;
  left: 49px !important;
  top: 88px !important;
  border-radius: 50% !important;
  background: #f2d2b6 !important;
  z-index: 3 !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-nose {
  position: absolute !important;
  width: 22px !important;
  height: 16px !important;
  left: 74px !important;
  top: 96px !important;
  border-radius: 50% !important;
  background: #3a2318 !important;
  z-index: 4 !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-system-mouth {
  position: absolute !important;
  width: 28px !important;
  height: 8px !important;
  left: 71px !important;
  top: 118px !important;
  border-radius: 0 0 20px 20px !important;
  background: #3a2318 !important;
  z-index: 4 !important;
  transform-origin: center top !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.state-speaking .bb-system-mouth {
  animation: bbVerifiedMouthTalk .25s infinite alternate !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.state-speaking {
  animation: bbVerifiedBearTalk .34s infinite alternate ease-in-out !important;
}
@keyframes bbVerifiedMouthTalk { from{height:6px} to{height:20px} }
@keyframes bbVerifiedBearTalk { from{transform:scale(.56) translateY(0)} to{transform:scale(.56) translateY(-2px)} }

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-calibrated-avatar {
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  min-height: 104px !important;
  max-width: 104px !important;
  max-height: 104px !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: transparent !important;
  transform: none !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead[hidden] {
  display: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-status-box {
  height: 72px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 18px !important;
  border-radius: 999px !important;
  background: #efe2b5 !important;
  border: 2px solid rgba(196,138,90,.28) !important;
  color: #5c4a37 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-status-dots,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-status-dots {
  display: inline-flex !important;
  gap: 3px !important;
  margin-left: 3px !important;
  vertical-align: baseline !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-status-dots i,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-status-dots i {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  animation: bbVerifiedDots 1.05s infinite ease-in-out !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-status-dots i:nth-child(2) { animation-delay: .16s !important; }
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-status-dots i:nth-child(3) { animation-delay: .32s !important; }
@keyframes bbVerifiedDots {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-switch {
  justify-self: center !important;
  align-self: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  position: static !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #58a6d7 !important;
  color: #ffffff !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 0 rgba(46,34,24,.28) !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-form {
  position: fixed !important;
  top: calc(var(--bb-nav-h) + var(--bb-gap) + var(--bb-avatar-h) + var(--bb-gap)) !important;
  bottom: calc(var(--bb-compose-h) + 28px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--bb-shell-w) !important;
  display: block !important;
  padding: 14px !important;
  border-radius: 28px !important;
  background: rgba(255,250,244,.94) !important;
  border: 2px solid rgba(228,212,184,.9) !important;
  box-shadow: 0 10px 24px rgba(46,34,24,.12) !important;
  overflow: hidden !important;
  z-index: 50 !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-messages {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 8px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  scroll-behavior: smooth !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message {
  width: 100% !important;
  display: flex !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.user {
  justify-content: flex-end !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.bear {
  justify-content: flex-start !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-bubble-content {
  max-width: min(78%, 620px) !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 13px 15px !important;
  border-radius: 18px !important;
  background: #f3dfbf !important;
  color: #2e2218 !important;
  box-shadow: 0 4px 12px rgba(46,34,24,.08) !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.user .bb-chat-bubble-content {
  background: #d8e8f5 !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-bubble-content strong {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  opacity: .82 !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-bubble-content p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  white-space: pre-wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-form-wrap {
  position: fixed !important;
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) !important;
  width: var(--bb-shell-w) !important;
  height: var(--bb-compose-h) !important;
  padding: 12px !important;
  border-radius: 26px !important;
  background: rgba(255,250,244,.96) !important;
  border: 2px solid rgba(228,212,184,.9) !important;
  box-shadow: 0 10px 24px rgba(46,34,24,.13) !important;
  z-index: 85 !important;
  overflow: hidden !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-form {
  width: 100% !important;
  height: 78px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 58px !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin: 0 !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkInput {
  width: 100% !important;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  border: 2px solid #d5b08b !important;
  border-radius: 18px !important;
  background: #fffdf9 !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  color: #2e2218 !important;
  resize: none !important;
  outline: none !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-actions {
  width: 58px !important;
  height: 78px !important;
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 8px !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-icon-btn {
  width: 58px !important;
  height: 35px !important;
  min-width: 58px !important;
  min-height: 35px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #efb648 !important;
  color: #2e2218 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 0 rgba(46,34,24,.35) !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  pointer-events: auto !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-icon-btn:disabled {
  opacity: .72 !important;
  cursor: pointer !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-mic-icon-btn.is-active {
  background: #c75b42 !important;
  color: #ffffff !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-options {
  height: 26px !important;
  margin-top: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #5c4938 !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-options label {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-options input {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-voice-actions {
  height: 30px !important;
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-voice-actions .bb-secondary-btn {
  height: 30px !important;
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2e2218 !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 0 rgba(46,34,24,.25) !important;
  cursor: pointer !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkMessage {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 5px !important;
  min-height: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: #c75b42 !important;
  background: transparent !important;
  pointer-events: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-debug-panel {
  display: none !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified.bb-debug-mode {
  overflow-y: auto !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified.bb-debug-mode .bb-debug-panel {
  display: block !important;
  position: fixed !important;
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  width: var(--bb-shell-w) !important;
  height: var(--bb-debug-h) !important;
  padding: 12px !important;
  border-radius: 22px !important;
  background: rgba(255,250,244,.98) !important;
  border: 2px solid rgba(199,91,66,.32) !important;
  box-shadow: 0 10px 24px rgba(46,34,24,.18) !important;
  z-index: 90 !important;
  overflow: auto !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified.bb-debug-mode .bb-compose-form-wrap {
  bottom: calc(var(--bb-debug-h) + 28px) !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified.bb-debug-mode .bb-chat-form {
  bottom: calc(var(--bb-compose-h) + var(--bb-debug-h) + 42px) !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-debug-panel h2 {
  margin: 0 0 8px !important;
  font-size: 18px !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-debug-errors {
  padding: 9px 10px !important;
  border-radius: 12px !important;
  background: #fff1ed !important;
  border: 1px solid #f0b8a8 !important;
  color: #8a2c1c !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-debug-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-bottom: 8px !important;
}
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-debug-panel pre {
  margin: 0 !important;
  max-height: 86px !important;
  overflow: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  background: #1f1f1f !important;
  color: #f5f5f5 !important;
  border-radius: 12px !important;
  padding: 9px !important;
  font-size: 12px !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-talk-side,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-wait-lottie,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-talk-diagnostic-card:not(#talkDiagCard),
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-diagnostic-panel,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-talk-header {
  display: none !important;
}

@media (max-width: 640px) {
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified {
    --bb-nav-h: 62px;
    --bb-gap: 8px;
    --bb-avatar-h: 116px;
    --bb-compose-h: 152px;
    --bb-shell-w: calc(100vw - 16px);
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-discussion-nav {
    grid-template-columns: 48px minmax(130px, 1fr) 44px 48px !important;
    padding: 7px 8px !important;
    gap: 6px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-nav-btn,
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-theme-toggle-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 25px !important;
    border-radius: 14px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-module {
    width: min(100%, 205px) !important;
    height: 42px !important;
    gap: 7px !important;
    padding: 5px 9px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-battery {
    width: 44px !important;
    height: 22px !important;
    flex-basis: 44px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-text {
    min-width: 70px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-text strong {
    font-size: 14px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-quota-text small {
    font-size: 8px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-status-form {
    grid-template-columns: 96px minmax(0,1fr) 38px !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-dock-userform {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-mode-stage,
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-frame {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref {
    transform: scale(.43) !important;
  }
  @keyframes bbVerifiedBearTalk { from{transform:scale(.43) translateY(0)} to{transform:scale(.43) translateY(-2px)} }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-calibrated-avatar {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-status-box {
    height: 58px !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-switch {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 19px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-form {
    padding: 9px !important;
    border-radius: 18px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-bubble-content {
    max-width: 88% !important;
    padding: 10px 11px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-bubble-content p {
    font-size: 14px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-form-wrap {
    padding: 9px !important;
    border-radius: 18px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-form {
    height: 64px !important;
    grid-template-columns: minmax(0,1fr) 50px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkInput {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    font-size: 14px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-actions {
    width: 50px !important;
    height: 64px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-icon-btn {
    width: 50px !important;
    min-width: 50px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 20px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-options {
    font-size: 11px !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-voice-actions {
    margin-top: 5px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-voice-actions .bb-secondary-btn {
    padding: 0 9px !important;
    font-size: 11px !important;
  }
}

@media (max-height: 690px) {
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified {
    --bb-nav-h: 58px;
    --bb-gap: 7px;
    --bb-avatar-h: 104px;
    --bb-compose-h: 142px;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-form {
    height: 58px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkInput {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-actions {
    height: 58px !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-compose-icon-btn {
    height: 25px !important;
    min-height: 25px !important;
  }
}
/* STEP7BV_FINAL_CAHIER_VERIFIED_END */


/* ==========================================================================
   STEP7BW — Navigation menu/retour + centrage mathématique avatar nounours
   Cahier de charge:
   - le bouton gauche devient Menu (☰)
   - le bouton droit devient Retour (←)
   - le nounours est centré par rapport au centre du userform avatar
   - les bordures et fonds du petit userform nounours sont invisibles
   ========================================================================== */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-nav-menu,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-nav-return {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-dock-userform,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-mode-stage,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-frame {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-dock-userform {
  overflow: visible !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-mode-stage,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-frame {
  overflow: visible !important;
  display: block !important;
}

/* Le nounours original mesure 170x170, avec oreilles à y=-12.
   On place le centre du nounours sur le centre exact du cadre avatar. */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + 3px) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) scale(.52) !important;
  transform-origin: center center !important;
  overflow: visible !important;
  filter: drop-shadow(0 7px 12px rgba(65,35,12,.13)) !important;
}

/* Garder le même centre pendant la parole. */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref.state-speaking,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref.is-speaking {
  animation: bbStep7BWBearTalk .34s infinite alternate ease-in-out !important;
}
@keyframes bbStep7BWBearTalk {
  from { transform: translate(-50%, -50%) scale(.52) translateY(0); }
  to   { transform: translate(-50%, -50%) scale(.52) translateY(-2px); }
}

/* Avatar calibré: même logique, centre du rendu = centre du cadre. */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-calibrated-avatar {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Mobile: réduction proportionnelle, centre conservé. */
@media (max-width: 760px) {
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref {
    top: calc(50% + 2px) !important;
    transform: translate(-50%, -50%) scale(.41) !important;
  }
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref.state-speaking,
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref.is-speaking {
    animation: bbStep7BWBearTalkMobile .34s infinite alternate ease-in-out !important;
  }
  @keyframes bbStep7BWBearTalkMobile {
    from { transform: translate(-50%, -50%) scale(.41) translateY(0); }
    to   { transform: translate(-50%, -50%) scale(.41) translateY(-2px); }
  }
}


/* ==========================================================================
   STEP7BX — Correctif graphique uniquement : centrage avatar lipsync + bouche
   Fonctionnel inchangé.
   Cahier de charge:
   - ne pas modifier la logique TALK / backend / envoi / quota
   - avatar calibré/lipsync centré dans le cadre par le moteur de fit existant
   - bordure et fond du mini userform nounours invisibles
   - bouche animée graphiquement en état speaking
   ========================================================================== */

/* Le cadre avatar reste transparent et sans bordure. */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-dock-userform,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-mode-stage,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-frame {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Le cadre est le référentiel de centrage X/Y. */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-mode-stage,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-frame {
  position: relative !important;
  overflow: visible !important;
}

/* Avatar calibré/lipsync :
   on réactive le cadrage calculé par bbbear_lipsync_head.js
   via --bb-lipsync-fit-x / --bb-lipsync-fit-y / --bb-lipsync-fit-scale.
   Cette règle corrige le translate(-50%, -50%) qui recentrait le conteneur,
   mais pas le profil calibré réel. */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-calibrated-avatar,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-lipsync-head {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 300px !important;
  height: 360px !important;
  min-width: 300px !important;
  min-height: 360px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform-origin: top left !important;
  transform:
    translate(var(--bb-lipsync-fit-x, 0px), var(--bb-lipsync-fit-y, 0px))
    scale(var(--bb-lipsync-fit-scale, .36)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Tous les calques calibrés restent strictement dans le repère du moteur lipsync. */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-calibrated-avatar .bb-lipsync-layer,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-lipsync-head .bb-lipsync-layer {
  position: absolute !important;
  object-fit: contain !important;
  transform-origin: center center !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Animation graphique de la bouche de l'avatar système en speaking. */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref.state-speaking .bb-system-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref.is-speaking .bb-system-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref[data-state="speaking"] .bb-system-mouth {
  animation: bbStep7BXSystemMouthTalk .18s infinite alternate ease-in-out !important;
  transform-origin: center top !important;
}

/* Animation graphique de la bouche lipsync : même si les visèmes changent,
   on ajoute un léger pulse visuel pour rendre la parole visible immédiatement. */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-calibrated-avatar.state-speaking .bb-lipsync-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-lipsync-head.state-speaking .bb-lipsync-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-calibrated-avatar[data-state="speaking"] .bb-lipsync-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-lipsync-head[data-state="speaking"] .bb-lipsync-mouth {
  animation: bbStep7BXLipsyncMouthPulse .16s infinite alternate ease-in-out !important;
  transform-origin: center center !important;
  filter: drop-shadow(0 2px 3px rgba(46,34,24,.22)) !important;
}

/* Légère respiration du lipsync en speaking, sans changer le centre calculé. */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-calibrated-avatar.state-speaking,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-lipsync-head.state-speaking,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-calibrated-avatar[data-state="speaking"],
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-lipsync-head[data-state="speaking"] {
  animation: bbStep7BXLipsyncSpeakBob .34s infinite alternate ease-in-out !important;
}

@keyframes bbStep7BXSystemMouthTalk {
  0%   { height: 6px;  border-radius: 0 0 18px 18px; }
  100% { height: 20px; border-radius: 0 0 22px 22px; }
}

@keyframes bbStep7BXLipsyncMouthPulse {
  0%   { transform: scaleY(.82) scaleX(.96); opacity: .88; }
  100% { transform: scaleY(1.18) scaleX(1.04); opacity: 1; }
}

@keyframes bbStep7BXLipsyncSpeakBob {
  0% {
    transform:
      translate(var(--bb-lipsync-fit-x, 0px), var(--bb-lipsync-fit-y, 0px))
      scale(var(--bb-lipsync-fit-scale, .36))
      translateY(0);
  }
  100% {
    transform:
      translate(var(--bb-lipsync-fit-x, 0px), var(--bb-lipsync-fit-y, 0px))
      scale(var(--bb-lipsync-fit-scale, .36))
      translateY(-2px);
  }
}

/* Mobile : on garde exactement la même méthode de centrage calculé. */
@media (max-width: 760px) {
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-calibrated-avatar,
  .bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkHead.bb-lipsync-head {
    transform:
      translate(var(--bb-lipsync-fit-x, 0px), var(--bb-lipsync-fit-y, 0px))
      scale(var(--bb-lipsync-fit-scale, .30)) !important;
  }

  @keyframes bbStep7BXLipsyncSpeakBob {
    0% {
      transform:
        translate(var(--bb-lipsync-fit-x, 0px), var(--bb-lipsync-fit-y, 0px))
        scale(var(--bb-lipsync-fit-scale, .30))
        translateY(0);
    }
    100% {
      transform:
        translate(var(--bb-lipsync-fit-x, 0px), var(--bb-lipsync-fit-y, 0px))
        scale(var(--bb-lipsync-fit-scale, .30))
        translateY(-2px);
    }
  }
}


/* STEP7BY — Discussion graphique uniquement : suppression halo bleu + bouche système animée */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar .bb-mascot-wave,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref .bb-mascot-wave,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref .wave-1,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref .wave-2 {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-frame,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-mode-stage,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-avatar-dock-userform {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref .bb-system-mouth {
  height: 8px !important;
  min-height: 8px !important;
  transform-origin: center top !important;
  will-change: transform, border-radius !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref.state-speaking .bb-system-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref.speaking .bb-system-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkSystemAvatar.bb-system-avatar-ref.is-speaking .bb-system-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkAvatarDockUserform.state-speaking #talkSystemAvatar.bb-system-avatar-ref .bb-system-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #talkAvatarDockUserform.is-speaking #talkSystemAvatar.bb-system-avatar-ref .bb-system-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified body.state-speaking #talkSystemAvatar.bb-system-avatar-ref .bb-system-mouth {
  animation: bbSystemStep7BYMouthScaleTalk .22s infinite alternate ease-in-out !important;
}

@keyframes bbSystemStep7BYMouthScaleTalk {
  0% {
    transform: scaleY(.55) scaleX(.94);
    border-radius: 0 0 20px 20px;
  }
  100% {
    transform: scaleY(2.65) scaleX(1.08);
    border-radius: 0 0 18px 18px;
  }
}

/* Variante de secours : si le JS met seulement l'état sur le body ou la page */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified.state-speaking #talkSystemAvatar.bb-system-avatar-ref .bb-system-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified.is-speaking #talkSystemAvatar.bb-system-avatar-ref .bb-system-mouth,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-state="speaking"] #talkSystemAvatar.bb-system-avatar-ref .bb-system-mouth {
  animation: bbSystemStep7BYMouthScaleTalk .22s infinite alternate ease-in-out !important;
}



/* =========================================================
   STEP7CA — Discussion : userform conversation uniforme
   Objectif graphique uniquement :
   - thème nuit : fond violet uniforme à 60 %
   - thème jour : fond bleu uniforme à 60 %
   - bulles BBbear/Toi : background transparent, bordures conservées
   - suppression des doubles couleurs et ombres internes
========================================================= */
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-form,
.bb-page-discussion .bb-chat-form{
  background: rgba(88, 166, 215, .60) !important;
  background-color: rgba(88, 166, 215, .60) !important;
  background-image: none !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  box-shadow: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="day"] .bb-chat-form,
.bb-page-discussion[data-bb-theme="day"] .bb-chat-form{
  background: rgba(88, 166, 215, .60) !important;
  background-color: rgba(88, 166, 215, .60) !important;
  background-image: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="night"] .bb-chat-form,
.bb-page-discussion[data-bb-theme="night"] .bb-chat-form{
  background: rgba(63, 48, 96, .60) !important;
  background-color: rgba(63, 48, 96, .60) !important;
  background-image: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-messages,
.bb-page-discussion .bb-chat-messages{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message,
.bb-page-discussion .bb-chat-message{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-bubble-content,
.bb-page-discussion .bb-chat-bubble-content,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-bubble,
.bb-page-discussion .bb-chat-bubble{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.bear,
.bb-page-discussion .bb-chat-message.bear,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.is-bear,
.bb-page-discussion .bb-chat-message.is-bear{
  border: 2px solid rgba(88,166,215,.92) !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.user,
.bb-page-discussion .bb-chat-message.user,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.is-user,
.bb-page-discussion .bb-chat-message.is-user{
  border: 2px solid rgba(252,211,77,.95) !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.bear .bb-chat-bubble-content,
.bb-page-discussion .bb-chat-message.bear .bb-chat-bubble-content,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.is-bear .bb-chat-bubble-content,
.bb-page-discussion .bb-chat-message.is-bear .bb-chat-bubble-content{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.user .bb-chat-bubble-content,
.bb-page-discussion .bb-chat-message.user .bb-chat-bubble-content,
.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-message.is-user .bb-chat-bubble-content,
.bb-page-discussion .bb-chat-message.is-user .bb-chat-bubble-content{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   STEP7CB — Discussion : uniformisation forte du userform discussion
   Problème observé sur capture :
   - le userform conversation affichait deux couleurs : une zone interne claire/blanche
     et une bande inférieure bleue/violette.
   Cause :
   - d'anciennes règles très spécifiques sur #chatMessages, dont le mode night
     `body.bb-page-discussion[data-bb-theme="night"] #chatMessages`, gagnaient
     contre les règles Step7CA.
   Solution graphique uniquement :
   - appliquer la même couleur 60 % sur le conteneur .bb-chat-form ET sur
     #chatMessages / .bb-chat-messages avec une spécificité ID plus forte.
   - conserver les bulles transparentes.
========================================================= */

body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified {
  --bb-chat-day-uniform: rgba(88, 166, 215, .60);
  --bb-chat-night-uniform: rgba(63, 48, 96, .60);
}

body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="day"] .bb-chat-form,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="day"] #chatMessages,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="day"] #chatMessages.bb-chat-messages,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="day"] .bb-chat-messages {
  background: var(--bb-chat-day-uniform) !important;
  background-color: var(--bb-chat-day-uniform) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="night"] .bb-chat-form,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="night"] #chatMessages,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="night"] #chatMessages.bb-chat-messages,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified[data-bb-theme="night"] .bb-chat-messages {
  background: var(--bb-chat-night-uniform) !important;
  background-color: var(--bb-chat-night-uniform) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-form {
  overflow: hidden !important;
}

body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages.bb-chat-messages {
  min-height: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border: 0 !important;
  outline: 0 !important;
}

body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-bubble,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-bubble-content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.bear,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.is-bear,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.bb-bear,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.assistant {
  border: 2px solid rgba(88,166,215,.92) !important;
}

body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.user,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.is-user,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.me,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.child {
  border: 2px solid rgba(252,211,77,.95) !important;
}

/* =========================================================
   STEP7CC — Correction définitive du double cadre des messages
   À garder tout à la fin du fichier CSS.

   Principe :
   - .bb-chat-message = ligne/conteneur invisible, sans fond ni bordure.
   - .bb-chat-bubble-content / .bb-chat-bubble = seule vraie bulle visible.
   - Corrige le cadre extérieur transparent autour de .bb-chat-message.bear.
========================================================= */

/* 1) Le conteneur de message ne dessine plus de cadre. */
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message,
body.bb-page-discussion #chatMessages .bb-chat-message,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-messages .bb-chat-message,
body.bb-page-discussion .bb-chat-messages .bb-chat-message,
.bb-chat-box.improved .bb-chat-message {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* 2) Message BBbear à gauche, sans cadre extérieur. */
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.bear,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.is-bear,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.bb-bear,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.assistant,
body.bb-page-discussion #chatMessages .bb-chat-message.bear,
body.bb-page-discussion #chatMessages .bb-chat-message.is-bear,
body.bb-page-discussion #chatMessages .bb-chat-message.bb-bear,
body.bb-page-discussion #chatMessages .bb-chat-message.assistant,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.bear,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.is-bear,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.bb-bear,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.assistant,
.bb-chat-box.improved .bb-chat-message.bear,
.bb-chat-box.improved .bb-chat-message.bb-bear,
.bb-chat-box.improved .bb-chat-message.assistant {
  justify-content: flex-start !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 3) Message utilisateur à droite, sans cadre extérieur. */
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.user,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.is-user,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.me,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.child,
body.bb-page-discussion #chatMessages .bb-chat-message.user,
body.bb-page-discussion #chatMessages .bb-chat-message.is-user,
body.bb-page-discussion #chatMessages .bb-chat-message.me,
body.bb-page-discussion #chatMessages .bb-chat-message.child,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.user,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.is-user,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.me,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.child,
.bb-chat-box.improved .bb-chat-message.user,
.bb-chat-box.improved .bb-chat-message.me,
.bb-chat-box.improved .bb-chat-message.child {
  justify-content: flex-end !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 4) La vraie bulle visible est le contenu intérieur. */
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-bubble-content,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-bubble,
body.bb-page-discussion #chatMessages .bb-chat-bubble-content,
body.bb-page-discussion #chatMessages .bb-chat-bubble,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-messages .bb-chat-bubble-content,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified .bb-chat-messages .bb-chat-bubble,
body.bb-page-discussion .bb-chat-messages .bb-chat-bubble-content,
body.bb-page-discussion .bb-chat-messages .bb-chat-bubble,
.bb-chat-box.improved .bb-chat-bubble-content,
.bb-chat-box.improved .bb-chat-bubble {
  width: fit-content !important;
  max-width: min(78%, 720px) !important;
  min-width: min(180px, 70%) !important;
  height: auto !important;
  max-height: none !important;
  padding: 14px 16px !important;
  border-radius: 22px !important;
  border: 2px solid rgba(228,212,184,.72) !important;
  background: rgba(255,255,255,.94) !important;
  background-color: rgba(255,255,255,.94) !important;
  background-image: none !important;
  box-shadow: 0 8px 18px rgba(46,34,24,.08) !important;
  color: var(--bb-text) !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.48 !important;
  box-sizing: border-box !important;
}

/* 5) Apparence de la bulle BBbear. */
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.bear .bb-chat-bubble-content,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.is-bear .bb-chat-bubble-content,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.bb-bear .bb-chat-bubble-content,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.assistant .bb-chat-bubble-content,
body.bb-page-discussion #chatMessages .bb-chat-message.bear .bb-chat-bubble-content,
body.bb-page-discussion #chatMessages .bb-chat-message.is-bear .bb-chat-bubble-content,
body.bb-page-discussion #chatMessages .bb-chat-message.bb-bear .bb-chat-bubble-content,
body.bb-page-discussion #chatMessages .bb-chat-message.assistant .bb-chat-bubble-content,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.bear .bb-chat-bubble-content,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.is-bear .bb-chat-bubble-content,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.bb-bear .bb-chat-bubble-content,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.assistant .bb-chat-bubble-content,
.bb-chat-box.improved .bb-chat-message.bear .bb-chat-bubble-content,
.bb-chat-box.improved .bb-chat-message.bb-bear .bb-chat-bubble-content,
.bb-chat-box.improved .bb-chat-message.assistant .bb-chat-bubble-content {
  background: rgba(223,243,255,.94) !important;
  background-color: rgba(223,243,255,.94) !important;
  border: 2px solid rgba(88,166,215,.34) !important;
  border-radius: 22px 22px 22px 8px !important;
  color: var(--bb-text) !important;
}

/* 6) Apparence de la bulle utilisateur. */
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.user .bb-chat-bubble-content,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.is-user .bb-chat-bubble-content,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.me .bb-chat-bubble-content,
body.bb-page-discussion.bb-discussion-clean.bb-discussion-verified #chatMessages .bb-chat-message.child .bb-chat-bubble-content,
body.bb-page-discussion #chatMessages .bb-chat-message.user .bb-chat-bubble-content,
body.bb-page-discussion #chatMessages .bb-chat-message.is-user .bb-chat-bubble-content,
body.bb-page-discussion #chatMessages .bb-chat-message.me .bb-chat-bubble-content,
body.bb-page-discussion #chatMessages .bb-chat-message.child .bb-chat-bubble-content,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.user .bb-chat-bubble-content,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.is-user .bb-chat-bubble-content,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.me .bb-chat-bubble-content,
body.bb-page-discussion .bb-chat-messages .bb-chat-message.child .bb-chat-bubble-content,
.bb-chat-box.improved .bb-chat-message.user .bb-chat-bubble-content,
.bb-chat-box.improved .bb-chat-message.me .bb-chat-bubble-content,
.bb-chat-box.improved .bb-chat-message.child .bb-chat-bubble-content {
  background: rgba(246,231,189,.96) !important;
  background-color: rgba(246,231,189,.96) !important;
  border: 2px solid rgba(239,182,72,.38) !important;
  border-radius: 22px 22px 8px 22px !important;
  color: var(--bb-text) !important;
}

/* 7) Texte interne. */
body.bb-page-discussion #chatMessages .bb-chat-bubble-content strong,
body.bb-page-discussion .bb-chat-messages .bb-chat-bubble-content strong,
.bb-chat-box.improved .bb-chat-bubble-content strong {
  display: block !important;
  margin: 0 0 6px !important;
  font-family: var(--bb-font-title) !important;
  font-weight: 900 !important;
  color: rgba(46,34,24,.78) !important;
}

body.bb-page-discussion #chatMessages .bb-chat-bubble-content p,
body.bb-page-discussion .bb-chat-messages .bb-chat-bubble-content p,
.bb-chat-box.improved .bb-chat-bubble-content p {
  margin: 0 !important;
  line-height: 1.48 !important;
}

/* 8) Sécurité : ancien HTML sans .bb-chat-bubble-content.
   Si un message n'a pas de bulle interne, le message lui-même redevient la bulle. */
@supports selector(:has(*)) {
  body.bb-page-discussion #chatMessages .bb-chat-message.bear:not(:has(.bb-chat-bubble-content)):not(:has(.bb-chat-bubble)),
  body.bb-page-discussion .bb-chat-messages .bb-chat-message.bear:not(:has(.bb-chat-bubble-content)):not(:has(.bb-chat-bubble)),
  .bb-chat-box.improved .bb-chat-message.bear:not(:has(.bb-chat-bubble-content)):not(:has(.bb-chat-bubble)) {
    width: fit-content !important;
    max-width: min(78%, 720px) !important;
    margin-right: auto !important;
    padding: 14px 16px !important;
    border-radius: 22px 22px 22px 8px !important;
    background: rgba(223,243,255,.94) !important;
    border: 2px solid rgba(88,166,215,.34) !important;
    box-shadow: 0 8px 18px rgba(46,34,24,.08) !important;
  }

  body.bb-page-discussion #chatMessages .bb-chat-message.user:not(:has(.bb-chat-bubble-content)):not(:has(.bb-chat-bubble)),
  body.bb-page-discussion .bb-chat-messages .bb-chat-message.user:not(:has(.bb-chat-bubble-content)):not(:has(.bb-chat-bubble)),
  .bb-chat-box.improved .bb-chat-message.user:not(:has(.bb-chat-bubble-content)):not(:has(.bb-chat-bubble)) {
    width: fit-content !important;
    max-width: min(78%, 720px) !important;
    margin-left: auto !important;
    padding: 14px 16px !important;
    border-radius: 22px 22px 8px 22px !important;
    background: rgba(246,231,189,.96) !important;
    border: 2px solid rgba(239,182,72,.38) !important;
    box-shadow: 0 8px 18px rgba(46,34,24,.08) !important;
  }
}

@media (max-width: 760px) {
  body.bb-page-discussion #chatMessages .bb-chat-bubble-content,
  body.bb-page-discussion #chatMessages .bb-chat-bubble,
  body.bb-page-discussion .bb-chat-messages .bb-chat-bubble-content,
  body.bb-page-discussion .bb-chat-messages .bb-chat-bubble,
  .bb-chat-box.improved .bb-chat-bubble-content,
  .bb-chat-box.improved .bb-chat-bubble {
    max-width: 92% !important;
  }
}


/* =========================================================
   PATCH DEBUG MODALE DISCUSSION — 260624
   Objectif:
   - menu à gauche, retour à droite
   - bouton diagnostic dédié dans la barre
   - diagnostic dans une fenêtre modale, pas dans l'interface principale
   ========================================================= */

body.bb-page-discussion .bb-discussion-nav {
  grid-template-columns: 58px minmax(150px, 360px) 52px 52px 58px !important;
}

body.bb-page-discussion .bb-nav-menu {
  grid-column: 1 !important;
}

body.bb-page-discussion #talkQuotaBattery {
  grid-column: 2 !important;
}

body.bb-page-discussion .bb-nav-debug {
  grid-column: 3 !important;
  font-size: 21px !important;
  background: #ffffff !important;
  color: #8A5437 !important;
}

body.bb-page-discussion #talkThemeToggleBtn {
  grid-column: 4 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 23px !important;
}

body.bb-page-discussion .bb-nav-return {
  grid-column: 5 !important;
  background: #ffffff !important;
  color: #167fc0 !important;
}

body.bb-page-discussion[data-bb-theme="night"] .bb-nav-debug,
body.bb-page-discussion[data-bb-theme="night"] .bb-nav-return {
  background: rgba(255,255,255,.92) !important;
  color: #301553 !important;
}

/* Empêche l'ancien mode debug de coller le diagnostic en bas de page */
body.bb-page-discussion .bb-debug-panel {
  display: block !important;
}

body.bb-page-discussion #talkDiagModal[hidden] {
  display: none !important;
}

body.bb-page-discussion .bb-debug-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 3000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
}

body.bb-page-discussion .bb-debug-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(46,34,24,.48) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

body.bb-page-discussion .bb-debug-panel-modal {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 1 !important;
  width: min(940px, calc(100vw - 28px)) !important;
  max-height: min(82vh, 720px) !important;
  overflow: auto !important;
  padding: 16px !important;
  border-radius: 24px !important;
  background: rgba(255,250,244,.98) !important;
  border: 2px solid rgba(88,166,215,.28) !important;
  box-shadow: 0 28px 70px rgba(46,34,24,.30) !important;
}

body.bb-page-discussion .bb-debug-modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}

body.bb-page-discussion .bb-debug-modal-head h2 {
  margin: 0 !important;
  color: var(--bb-brown) !important;
  font-family: var(--bb-font-title) !important;
  font-size: 22px !important;
}

body.bb-page-discussion .bb-debug-close-btn {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bb-red) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  font-size: 25px !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(46,34,24,.14) !important;
}

body.bb-page-discussion .bb-debug-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}

body.bb-page-discussion .bb-debug-actions .bb-secondary-btn {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

body.bb-page-discussion #talkDiagOutput {
  max-height: 340px !important;
  overflow: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  margin: 10px 0 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(138,84,55,.16) !important;
  color: #2E2218 !important;
  font-size: 12px !important;
}

body.bb-page-discussion.bb-diagnostic-modal-open {
  overflow: hidden !important;
}

@media (max-width: 620px) {
  body.bb-page-discussion .bb-discussion-nav {
    grid-template-columns: 48px minmax(118px, 1fr) 44px 44px 48px !important;
    gap: 7px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.bb-page-discussion .bb-nav-btn,
  body.bb-page-discussion #talkThemeToggleBtn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  body.bb-page-discussion .bb-quota-module {
    min-width: 0 !important;
  }

  body.bb-page-discussion .bb-debug-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/******************************************************
 * BBbear Discussion — Correctif ouverture modale debug
 * Version: V4.40ZZL_DEBUG_MODAL_GUARD
 * Rôle: rendre l'ouverture du diagnostic robuste sans changer l'interface.
 ******************************************************/
body.bb-page-discussion #talkDebugOpenBtn {
  pointer-events: auto !important;
  z-index: 20 !important;
}

body.bb-page-discussion #talkDiagModal.is-open,
body.bb-page-discussion #talkDiagModal:not([hidden]) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.bb-page-discussion #talkDiagModal[hidden] {
  display: none !important;
}

body.bb-page-discussion .bb-debug-modal-backdrop,
body.bb-page-discussion .bb-debug-panel-modal {
  pointer-events: auto !important;
}