/* Demons Alpha 2.2.5 — mobile chat drawers */

@media (max-width: 640px) {
  /* Both social windows use about half of the phone screen. */
  .global-chat .chat-panel {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 50dvh !important;
    min-height: 320px !important;
    max-height: 54dvh !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .global-chat .chat-panel.open {
    display: grid !important;
    grid-template-rows: 48px minmax(0, 1fr) auto auto !important;
  }

  .global-chat .chat-head {
    min-height: 48px;
    padding: 10px 14px;
  }

  .global-chat .chat-messages {
    min-height: 0;
    padding: 8px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .global-chat .chat-row {
    padding: 8px 38px 8px 0;
    gap: 6px;
    font-size: 14px;
  }

  .global-chat .chat-delete {
    width: 34px;
    height: 34px;
    top: 4px;
    border-radius: 10px;
  }

  /* On a phone the message field and Send button are always visible. */
  .global-chat .chat-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-height: 104px !important;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
    background: #0e1422;
  }

  .global-chat .chat-form textarea {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 76px !important;
    box-sizing: border-box;
    resize: none !important;
    font-family: inherit;
    line-height: 1.35;
    font-size: 16px !important;
  }

  .global-chat .chat-form button {
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    align-items: center;
    justify-content: center;
  }

  .global-chat .chat-error {
    padding: 0 12px 8px;
    max-height: 38px;
    overflow: auto;
  }

  /* Private messages: compact conversation strip above the active thread. */
  .private-chat .private-panel {
    position: absolute !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 50dvh !important;
    min-height: 330px !important;
    max-height: 54dvh !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .private-chat .private-head {
    min-height: 48px;
    padding: 10px 14px;
  }

  .private-chat .private-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: calc(100% - 48px) !important;
    min-height: 0;
  }

  .private-chat .private-conversations {
    display: flex !important;
    gap: 7px;
    width: 100%;
    max-height: 62px;
    padding: 7px 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    scrollbar-width: thin;
  }

  .private-chat .private-conversation {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 180px;
    min-height: 44px;
    margin: 0 !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
  }

  .private-chat .private-thread {
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) auto auto !important;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .private-chat .private-thread-title {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .private-chat .private-thread-messages {
    min-height: 0;
    padding: 9px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .private-chat .private-msg {
    max-width: 88%;
    padding: 8px 10px;
    font-size: 13px;
  }

  .private-chat .private-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-height: 104px !important;
    padding: 9px 12px max(9px, env(safe-area-inset-bottom)) !important;
    background: #0e1422;
  }

  .private-chat .private-form textarea {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 72px !important;
    box-sizing: border-box;
    resize: none !important;
    font-size: 16px !important;
  }

  .private-chat .private-form button {
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    align-items: center;
    justify-content: center;
  }

  .private-chat .private-error {
    padding: 0 12px 7px;
    max-height: 34px;
    overflow: auto;
  }
}

/* Very short phone screens keep controls usable without covering everything. */
@media (max-width: 640px) and (max-height: 650px) {
  .global-chat .chat-panel,
  .private-chat .private-panel {
    height: 56dvh !important;
    max-height: 60dvh !important;
    min-height: 300px !important;
  }
}


/* Keep the composer visible when the Android/iOS keyboard changes the visual viewport. */
@media (max-width: 640px) {
  .global-chat .chat-panel,
  .private-chat .private-panel {
    bottom: max(8px, env(safe-area-inset-bottom), var(--chat-keyboard-offset, 0px)) !important;
  }

  .global-chat textarea[data-chat-input],
  .private-chat textarea[data-private-input] {
    -webkit-text-size-adjust: 100%;
    appearance: none;
  }
}