/* chat.html — mobile layout (≤768px) */

.chat-mobile-menu-btn {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -0.35rem 0.35rem -0.35rem 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chat-mobile-menu-btn:hover {
  background: var(--teal-subtle);
  border-color: rgba(64, 219, 241, 0.25);
  color: var(--teal);
}

.chat-mobile-menu-btn .icon-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 3px auto;
  background: currentColor;
  border-radius: 1px;
}

.chat-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(2, 4, 12, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

body.chat-page.chat-channels-open .chat-mobile-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.chat-page.chat-channels-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .chat-mobile-menu-btn {
    display: inline-flex;
  }

  body.chat-page .chat-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  body.chat-page .chat-sidebar-zones {
    flex: 0 0 56px;
    min-width: 56px;
    max-width: 56px;
    z-index: 2;
  }

  body.chat-page .chat-sidebar-main {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 56px;
    bottom: 0;
    width: min(17.5rem, calc(100vw - 56px));
    max-width: calc(100vw - 56px);
    z-index: 120;
    transform: translate3d(-108%, 0, 0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
    border-right: 1px solid var(--border);
  }

  body.chat-page.chat-channels-open .chat-sidebar-main {
    transform: translate3d(0, 0, 0);
  }

  body.chat-page .chat-main {
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  body.chat-page .chat-main-header {
    padding: max(0.65rem, var(--safe-top)) 0.75rem 0.65rem 0.65rem;
    flex-shrink: 0;
  }

  body.chat-page .chat-main-title h1 {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(42vw, 12rem);
  }

  body.chat-page .chat-main-subtitle {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.chat-page .chat-messages {
    padding: 0.75rem;
  }

  body.chat-page .chat-input-bar {
    padding: 0.65rem 0.75rem;
    padding-bottom: max(0.65rem, var(--safe-bottom));
  }

  body.chat-page .chat-input-inner {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  body.chat-page .chat-input {
    font-size: 16px;
    min-height: 44px;
  }

  body.chat-page .chat-send-btn {
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    flex-shrink: 0;
  }

  body.chat-page .chat-input-hint {
    font-size: 0.7rem;
    margin-top: 0.35rem;
  }

  body.chat-page .chat-messages {
    --msg-avatar-size: 28px;
    --msg-avatar-gap: 0.45rem;
  }

  body.chat-page .chat-messages .message-group {
    row-gap: 0.0625rem;
    margin-bottom: 0.55rem;
  }

  body.chat-page .message {
    gap: 0.5rem;
  }

  body.chat-page .message-avatar {
    width: var(--msg-avatar-size, 28px);
    height: var(--msg-avatar-size, 28px);
    min-width: var(--msg-avatar-size, 28px);
    font-size: 0.75rem;
  }

  body.chat-page .message-text {
    font-size: 0.9rem;
  }

  body.chat-page .voice-status-bar {
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem;
  }

  body.chat-page .voice-status-actions {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  body.chat-page .voice-status-btn {
    min-width: 40px;
    min-height: 40px;
  }

  body.chat-page .chat-user-footer {
    padding: 0.5rem;
  }

  body.chat-page .dm-pill {
    width: 40px;
    height: 40px;
  }

  body.chat-page .zone-pill {
    width: 38px;
    height: 38px;
  }

  body.chat-page .channel-item {
    min-height: 44px;
    padding: 0.55rem 0.65rem;
    font-size: 0.9rem;
  }

  body.chat-page .modal-overlay .modal-content {
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
    margin: 0.75rem;
    margin-bottom: max(0.75rem, var(--safe-bottom));
    max-height: min(88vh, 88dvh);
  }
}

@media (max-width: 480px) {
  body.chat-page .chat-main-title h1 {
    max-width: 36vw;
  }

  body.chat-page .chat-send-btn {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .clyr-boot-lumi {
    width: min(98vw, 480px);
    max-height: min(58vh, 480px);
  }

  .clyr-boot-status {
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.chat-page .chat-sidebar-main,
  .chat-mobile-backdrop {
    transition: none !important;
  }
}