.monkster-chat { position: fixed; z-index: 91; left: max(var(--pad), env(safe-area-inset-left)); bottom: max(84px, calc(env(safe-area-inset-bottom) + 18px)); color: #f4f3ef; font-family: Arial, Helvetica, sans-serif; }
.monkster-launcher { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 7px 17px 7px 8px; border: 1px solid #3d3d39; border-radius: 99px; background: #151513; color: #f4f3ef; box-shadow: 0 12px 36px rgba(0,0,0,.28); font: 700 11px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.monkster-launcher img { width: 34px; height: 34px; object-fit: contain; filter: invert(1); }
.monkster-launcher:hover, .monkster-launcher:focus-visible { border-color: #85857e; transform: translateY(-2px); }
.monkster-launcher:focus-visible, .monkster-panel button:focus-visible, .monkster-panel input:focus-visible { outline: 2px solid #f4f3ef; outline-offset: 3px; }
.monkster-panel { position: absolute; left: 0; bottom: 0; width: min(740px, calc(100vw - 36px)); height: min(570px, calc(100svh - 100px)); display: grid; grid-template-columns: 230px minmax(0, 1fr); overflow: hidden; border: 1px solid #42423d; border-radius: 22px; background: #11110f; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.monkster-panel[hidden] { display: none; }
.monkster-mascot-stage { min-width: 0; display: grid; place-items: center; overflow: hidden; border-right: 1px solid #343430; background: radial-gradient(circle at 50% 42%, #33332e 0, #191917 48%, #10100f 78%); }
.monkster-avatar-wrap { position: relative; width: 76%; transition: transform .2s ease; }
.monkster-avatar-wrap > img { width: 100%; display: block; object-fit: contain; filter: invert(1); }
.monkster-effect { position: absolute; inset: -22px; display: block; pointer-events: none; font-size: 23px; letter-spacing: 8px; text-align: center; }
.monkster-chat[data-mood="amused"] .monkster-effect::after { content: '♡  ♡'; color: #f1a9bd; }
.monkster-chat[data-mood="hyped"] .monkster-effect::after { content: '✦  ✦  ✦'; color: #f4dc78; }
.monkster-chat[data-mood="bashful"] .monkster-effect::after { content: '●      ●'; color: #ec8ca9; font-size: 15px; }
.monkster-chat[data-mood="annoyed"] .monkster-effect::after { content: '♨  ♨'; color: #e77d6f; }
.monkster-chat[data-mood="puzzled"] .monkster-effect::after { content: '?   ?'; color: #b8d5ea; }
.monkster-chat[data-mood="sad"] .monkster-effect::after { content: '╵     ╵'; color: #79b9df; }
.monkster-chat[data-mood="hyped"] .monkster-avatar-wrap { animation: monkster-hop .45s ease both; }
@keyframes monkster-hop { 0%,100% { transform: translateY(0) } 45% { transform: translateY(-14px) rotate(-2deg) } }
.monkster-conversation { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto auto; padding: 20px; }
.monkster-conversation header { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid #30302d; }
.monkster-conversation header p, .monkster-conversation header h2, .monkster-conversation header span { margin: 0; }
.monkster-conversation header p { color: #85857e; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.monkster-conversation header h2 { margin-top: 3px; font: italic 400 29px/.95 Georgia, serif; }
.monkster-conversation header span { display: block; margin-top: 7px; color: #aaa9a2; font-size: 10px; }
.monkster-conversation header button { align-self: start; border: 0; background: transparent; color: #aaa9a2; font-size: 25px; cursor: pointer; }
.monkster-tools { min-height: 30px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.monkster-tools button { padding: 0; border: 0; background: none; color: #aaa9a2; font-size: 9px; text-decoration: underline; cursor: pointer; }
.monkster-messages { min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 8px 3px 12px; scrollbar-width: thin; }
.monkster-message { max-width: 84%; margin: 0; padding: 10px 12px; border-radius: 14px; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.monkster-message[data-role="user"] { align-self: flex-end; border-bottom-right-radius: 3px; background: #efeee9; color: #151513; }
.monkster-message[data-role="assistant"] { align-self: flex-start; border: 1px solid #3a3a36; border-bottom-left-radius: 3px; background: #20201d; color: #e5e4df; }
.monkster-notice { min-height: 16px; color: #e2a99f; font-size: 9px; line-height: 1.4; }
.monkster-access-card { margin: 0 0 10px; padding: 9px 11px; border: 1px solid #343430; border-radius: 11px; background: #181816; }
.monkster-quota { min-height: 13px; margin: 0; color: #aaa9a2; font-size: 9px; line-height: 1.35; letter-spacing: .03em; }
.monkster-chat.is-exhausted .monkster-access-card { border-color: #706f68; background: #22221f; box-shadow: inset 3px 0 0 #f4f3ef; }
.monkster-chat.is-exhausted .monkster-quota { color: #f4f3ef; font-weight: 700; }
.monkster-cta { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #41413c; }
.monkster-cta[hidden] { display: none; }
.monkster-cta p { flex: 1; margin: 0; color: #d2d1ca; font-size: 9px; line-height: 1.4; }
.monkster-cta button { min-height: 30px; padding: 7px 11px; border: 1px solid #686862; border-radius: 99px; background: #f4f3ef; color: #11110f; font-size: 8px; font-weight: 700; cursor: pointer; }
.monkster-form { position: relative; display: block; }
.monkster-form input { width: 100%; min-width: 0; height: 50px; padding: 0 82px 0 16px; border: 1px solid #484843; border-radius: 25px; outline: 0; background: #1b1b18; color: #f4f3ef; font: 12px Arial, sans-serif; }
.monkster-form input:focus { border-color: #888880; box-shadow: 0 0 0 2px rgba(244,243,239,.08); }
.monkster-form button { position: absolute; top: 5px; right: 5px; height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 13px 0 15px; border: 0; border-radius: 20px; background: #f0efe9; color: #11110f; font: 700 9px Arial, sans-serif; text-transform: uppercase; cursor: pointer; }
.monkster-form button span { margin: 0; font-size: 13px; }
.monkster-form button:disabled, .monkster-form input:disabled { opacity: .45; cursor: not-allowed; }
body[data-active-tab="admin"] .monkster-chat { display: none !important; }
body[data-active-tab="game"] .monkster-chat { left: max(96px, calc(env(safe-area-inset-left) + 88px)); bottom: max(84px, calc(env(safe-area-inset-bottom) + 72px)); }
body:has(.book-support-banner:not([hidden]):not(.is-collapsed)) .monkster-chat { bottom: 146px; }
@media (max-width: 700px) {
  .monkster-chat { left: 10px; bottom: max(72px, calc(env(safe-area-inset-bottom) + 12px)); }
  .monkster-panel { position: fixed; inset: auto 0 0; width: 100%; height: min(78svh, 620px); grid-template-columns: 1fr; grid-template-rows: 105px minmax(0,1fr); border-width: 1px 0 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .monkster-mascot-stage { border-right: 0; border-bottom: 1px solid #343430; }
  .monkster-avatar-wrap { width: 72px; }
  .monkster-conversation { padding: 15px 16px 10px; }
  body[data-active-tab="game"] .monkster-chat { left: 96px; bottom: 72px; }
  body:has(.book-support-banner:not([hidden]):not(.is-collapsed)) .monkster-chat { bottom: 118px; }
}
@media (max-width: 520px) { body[data-active-tab="game"] .monkster-chat { left: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .monkster-chat *, .monkster-chat *::before, .monkster-chat *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}