@media (max-width:700px) {
  .cabina-panel {
    position:fixed;
    z-index:5000;
    right:34px;
    bottom:150px;
    display:flex;
    flex-direction:column;
    width:min(390px,calc(100vw - 68px));
    height:min(620px,calc(100vh - 185px));
    min-height:500px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.84);
    border-radius:28px;
    background:rgba(247,252,255,.96);
    box-shadow:
      0 28px 75px rgba(2,35,105,.28),
      0 5px 20px rgba(7,115,200,.12);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(18px) scale(.965);
    transform-origin:right bottom;
    transition:
      opacity .26s ease,
      transform .32s cubic-bezier(.22,.61,.36,1),
      visibility 0s linear .32s;
  }

  .cabina-panel.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
    transition:
      opacity .26s ease,
      transform .32s cubic-bezier(.22,.61,.36,1),
      visibility 0s;
  }

  .cabina-panel-head {
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:25px 25px 22px;
    color:#fff;
    background:
      radial-gradient(circle at 88% 10%,
        rgba(42,184,242,.35),
        transparent 37%),
      linear-gradient(135deg,#073f9e,#0879c9);
  }

  .cabina-panel-kicker {
    display:block;
    margin-bottom:1px;
    color:#8fdbff;
    font-size:.63rem;
    font-weight:950;
    letter-spacing:.2em;
  }

  .cabina-panel-head h2 {
    margin:0;
    color:#fff;
    font-size:1.65rem;
    font-weight:950;
    line-height:1;
    letter-spacing:-.025em;
  }

  .cabina-panel-status {
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:7px;
    color:#d8f2ff;
    font-size:.72rem;
    font-weight:800;
  }

  .cabina-panel-status i {
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
    background:#39df78;
    box-shadow:0 0 9px rgba(57,223,120,.85);
  }

  .cabina-panel-status b {
    color:rgba(255,255,255,.55);
  }

  .cabina-panel-close {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0 0 3px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:1.55rem;
    font-weight:400;
    line-height:1;
    transition:
      background .2s ease,
      transform .2s ease;
  }

  .cabina-panel-close:hover {
    background:rgba(255,255,255,.22);
    transform:rotate(5deg);
  }

  .cabina-live {
    display:grid;
    gap:3px;
    padding:18px 24px 17px;
    border-bottom:1px solid rgba(7,115,200,.09);
    background:
      linear-gradient(90deg,
        rgba(7,115,200,.075),
        rgba(255,255,255,.45));
  }

  .cabina-live-label {
    color:#ef8b19;
    font-size:.58rem;
    font-weight:950;
    letter-spacing:.16em;
  }

  .cabina-live strong {
    overflow:hidden;
    color:#073f9e;
    font-size:1.05rem;
    font-weight:950;
    line-height:1.15;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .cabina-live > span:last-child {
    overflow:hidden;
    color:#6485a5;
    font-size:.75rem;
    font-weight:750;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .cabina-conversation {
    flex:1;
    min-height:0;
    overflow:auto;
    padding:22px 20px;
  }

  .cabina-bot-message {
    display:flex;
    align-items:flex-end;
    gap:9px;
  }

  .cabina-bot-mark {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:0 0 32px;
    border-radius:50%;
    background:linear-gradient(135deg,#073f9e,#1298db);
    color:#fff;
    box-shadow:0 5px 12px rgba(7,63,158,.18);
    font-size:.58rem;
    font-weight:950;
    letter-spacing:.04em;
  }

  .cabina-bot-message > div {
    max-width:285px;
    padding:13px 15px;
    border:1px solid rgba(7,115,200,.09);
    border-radius:18px 18px 18px 5px;
    background:#fff;
    box-shadow:0 6px 18px rgba(7,63,158,.07);
  }

  .cabina-bot-message p {
    margin:0;
    color:#294f75;
    font-size:.82rem;
    font-weight:650;
    line-height:1.45;
  }

  .cabina-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:17px 0 0 41px;
  }

  .cabina-actions button {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    min-height:42px;
    padding:9px 11px;
    border:1px solid rgba(7,115,200,.13);
    border-radius:13px;
    background:#fff;
    color:#0873c8;
    box-shadow:0 4px 12px rgba(7,63,158,.055);
    font-size:.7rem;
    font-weight:900;
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease;
  }

  .cabina-actions button:last-child {
    grid-column:1/-1;
  }

  .cabina-actions button:hover {
    border-color:rgba(7,115,200,.35);
    box-shadow:0 7px 15px rgba(7,63,158,.09);
    transform:translateY(-1px);
  }

  .cabina-actions button span {
    display:grid;
    place-items:center;
    width:23px;
    height:23px;
    flex:0 0 23px;
    border-radius:50%;
    background:rgba(7,115,200,.08);
    color:#ef8b19;
    font-size:.8rem;
  }

  .cabina-compose {
    padding:15px 18px 17px;
    border-top:1px solid rgba(7,115,200,.09);
    background:rgba(255,255,255,.78);
  }

  .cabina-input-shell {
    display:grid;
    grid-template-columns:1fr 40px;
    align-items:center;
    gap:7px;
    padding:5px 6px 5px 14px;
    border:1px solid rgba(7,115,200,.16);
    border-radius:999px;
    background:#fff;
    box-shadow:inset 0 1px 3px rgba(7,63,158,.04);
  }

  .cabina-input-shell input {
    width:100%;
    min-width:0;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:#294f75;
    font:inherit;
    font-size:.78rem;
  }

  .cabina-input-shell input::placeholder {
    color:#91a9be;
  }

  .cabina-input-shell button {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    padding:0 2px 1px 0;
    border-radius:50%;
    background:linear-gradient(135deg,#073f9e,#0879c9);
    color:#fff;
    font-size:1rem;
    opacity:.55;
  }

  .cabina-compose small {
    display:block;
    margin-top:9px;
    color:#6f8ca6;
    font-size:.72rem;
    font-weight:700;
    line-height:1.45;
    text-align:center;
  }

  .cabina-entry.cabina-is-open .cabina-invite {
    opacity:0;
    transform:translateY(7px) rotate(-4deg);
    transition:
      opacity .18s ease,
      transform .18s ease;
  }

  .cabina-entry.cabina-is-open .cabina-launcher {
    transform:scale(.92);
    opacity:.72;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

#cabinaPanel {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', sans-serif;
}

#cabinaPanel .cabina-chat-message p,
#cabinaPanel .cabina-user-message p {
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.01em;
    white-space: pre-line;
}

#cabinaPanel button,
#cabinaPanel input {
    font-family: inherit;
}

/* Unified typography */
#cabinaPanel,
#cabinaPanel * {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

#cabinaPanel {
  background:rgba(248,252,255,.98);
  border:1px solid rgba(255,255,255,.9);
  border-radius:25px;
  box-shadow:0 22px 65px rgba(7,63,158,.17);
  overflow:hidden;
}

/* Quick actions */
#cabinaPanel .cabina-actions {
  background:rgba(244,250,255,.85);
  border-top:1px solid #e2edf7;
}

#cabinaPanel .cabina-actions button {
  background:#fff;
  color:#0c599d;
  border:1px solid #dceaf6;
  border-radius:13px;
  font-weight:550;
  box-shadow:0 2px 7px rgba(7,63,158,.035);
}

#cabinaPanel .cabina-actions button:hover:not(:disabled) {
  background:#edf8ff;
  border-color:#7ac9eb;
}

#cabinaPanel .cabina-actions button:disabled {
  opacity:.35 !important;
  filter:grayscale(1);
  cursor:not-allowed;
}

/* Input and send button */
#cabinaPanel .cabina-input-shell {
  background:#fff;
  border:1px solid #d8e8f5;
  border-radius:18px;
  box-shadow:0 3px 12px rgba(7,63,158,.045);
}

#cabinaPanel .cabina-input-shell input {
  font-size:14px;
  font-weight:400;
  color:#154c82;
}

#cabinaPanel .cabina-input-shell button {
  background:linear-gradient(135deg,#0c68bc,#13a3df);
  border-radius:13px;
}

/* Footer and restart */
#cabinaPanel footer,
#cabinaPanel .cabina-footer {
  background:#f5fbff;
  color:#6487a6;
  border-top:1px solid #e4eff8;
  font-weight:400;
}

#cabinaPanel button {
  transition:background .2s,border-color .2s,box-shadow .2s;
}

@media(max-width:700px) {
  #cabinaPanel {
    border-radius:20px 20px 0 0;
  }
}

#cabinaPanel .cabina-live strong {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
}

#cabinaPanel .cabina-live #cabinaDj {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

#cabinaPanel .cabina-bot-message p,
#cabinaPanel .cabina-user-message p,
#cabinaPanel #cabinaGreeting {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.01em;
}

#cabinaPanel .cabina-actions button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#cabinaPanel .cabina-input-shell:has(#cabinaInput:disabled) {
  background:#e4e8ed !important;
  border-color:#cbd2da !important;
  box-shadow:none !important;
}

#cabinaPanel #cabinaInput:disabled {
  background:transparent !important;
  color:#89939e !important;
  -webkit-text-fill-color:#89939e;
  cursor:not-allowed;
}

#cabinaPanel #cabinaInput:disabled::placeholder {
  color:#929ca7 !important;
  opacity:1;
}

#cabinaPanel #cabinaSend {
  transition:transform .2s ease,box-shadow .2s ease,
             filter .2s ease,opacity .2s ease;
}

#cabinaPanel #cabinaSend:hover:not(:disabled) {
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 5px 15px rgba(12,104,188,.3);
  filter:brightness(1.12);
  cursor:pointer;
}

#cabinaPanel #cabinaSend:active:not(:disabled) {
  transform:scale(.94);
}

#cabinaPanel #cabinaSend:disabled {
  background:#b3bdc8 !important;
  opacity:.5 !important;
  box-shadow:none !important;
  filter:grayscale(1);
  cursor:not-allowed;
}

#cabinaPanel .cabina-panel-status i {
  animation:cabinaOnlinePulse 2.8s ease-in-out infinite;
}

@keyframes cabinaOnlinePulse {
  0%,100% {
    box-shadow:0 0 0 0 rgba(57,223,120,.12);
  }
  50% {
    box-shadow:0 0 0 5px rgba(57,223,120,.12),
               0 0 12px rgba(57,223,120,.45);
  }
}

@media (prefers-reduced-motion:reduce) {
  #cabinaPanel .cabina-panel-status i {
    animation:none;
  }
  #cabinaPanel #cabinaSend {
    transition:none;
  }
}

#cabinaPanel .cabina-input-shell:has(#cabinaInput:disabled) {
  background:#d8dde4 !important;
  border-color:#b9c1cb !important;
  box-shadow:none !important;
}

#cabinaPanel #cabinaInput:disabled {
  background:#d8dde4 !important;
  color:#87919d !important;
  -webkit-text-fill-color:#87919d !important;
  opacity:1 !important;
}

#cabinaPanel #cabinaInput:disabled::placeholder {
  color:#87919d !important;
  opacity:1 !important;
}

#cabinaPanel #cabinaSend:disabled {
  background:#aab3bf !important;
  opacity:1 !important;
  box-shadow:none !important;
  filter:grayscale(1) !important;
}

#cabinaPanel .cabina-input-shell:has(#cabinaInput:disabled) {
  background:#e1e5ea !important;
  border-color:#cbd2da !important;
  box-shadow:none !important;
}

#cabinaPanel #cabinaInput:disabled {
  background:transparent !important;
  color:#929ba6 !important;
  -webkit-text-fill-color:#929ba6 !important;
  cursor:not-allowed !important;
}

#cabinaPanel #cabinaInput:disabled::placeholder {
  color:#929ba6 !important;
  opacity:1 !important;
}

#cabinaPanel #cabinaSend:disabled {
  background:#b8c0ca !important;
  color:#e7eaee !important;
  opacity:1 !important;
  box-shadow:none !important;
  filter:none !important;
  cursor:not-allowed !important;
}

/* cabina-actions-two-column-layout */
#cabinaPanel .cabina-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

#cabinaPanel .cabina-actions button {
  grid-column: auto;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  height: 100%;
  box-sizing: border-box;
  white-space: normal;
  justify-content: flex-start;
  text-align: left;
  line-height: 1.3;
  padding: 8px;
}

#cabinaPanel .cabina-actions button:last-child {
  grid-column: auto;
}

#cabinaPanel .cabina-actions button[hidden] {
  display: none !important;
}

#cabinaPanel .cabina-actions:has(button[data-cabina-action="song"][hidden]) {
  grid-template-columns: minmax(0, 1fr);
}