/* =========================================================
   PONY MESSENGER — UX BUNDLE (v1.5) for v2.3.2
   - Cleaner thread list (cards)
   - Unread bold + badge
   - Mobile friendly (stacked with Back)
   - Sound toggle button (🔔)
   ========================================================= */

:root {
  --pm-border: #e5e7eb;
  --pm-muted: #6b7280;
  --pm-bg: #ffffff;
  --pm-soft: #f8fafc;
  --pm-accent: #2563eb;
}

/* Wrapper */
#pm-messenger-wrapper {
  width: 100%;
}

#pm-messenger {
  width: 100%;
  border: 1px solid var(--pm-border);
  background: var(--pm-bg);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  min-height: 320px;
  box-sizing: border-box;
}

/* Columns */
#pm-left-column {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid var(--pm-border);
  background: var(--pm-soft);
  display: flex;
  flex-direction: column;
}

#pm-right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--pm-bg);
}

/* Left header */
.pm-left-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--pm-border);
}

.pm-btn-primary {
  background: var(--pm-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pm-btn-primary:hover {
  filter: brightness(0.95);
}

.pm-btn-icon {
  margin-left: auto;
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.pm-btn-icon.pm-sound-off {
  opacity: 0.55;
}

.pm-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Thread list */
#pm-thread-list-wrapper {
  padding: 10px 10px 12px;
  overflow: auto;
  flex: 1;
}

.pm-thread-list-title {
  margin: 6px 4px 10px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pm-muted);
  font-weight: 800;
}

#pm-thread-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-thread-item {
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.pm-thread-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pm-thread-item .pm-thread-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #111827;
}

.pm-thread-item .pm-thread-meta {
  font-size: 12px;
  color: var(--pm-muted);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.pm-thread-item .pm-thread-preview {
  margin-top: 6px;
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-thread-unread {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.pm-thread-unread .pm-thread-title {
  font-weight: 900;
}

.pm-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pm-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

/* Right header */
#pm-thread-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--pm-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

#pm-thread-title {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}

/* Messages */
#pm-messages {
  flex: 1;
  overflow: auto;
  padding: 14px;
  background: #fff;
}

#pm-messages.pm-empty {
  color: var(--pm-muted);
}

.pm-message {
  border: 1px solid var(--pm-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fff;
}

.pm-message .pm-message-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--pm-muted);
}

.pm-message .pm-message-author {
  font-weight: 800;
  color: #111827;
}

.pm-message .pm-message-body {
  font-size: 13px;
  color: #111827;
  white-space: pre-wrap;
}

.pm-message .pm-attachment {
  margin-top: 8px;
  font-size: 12px;
}

/* Compose */
#pm-message-form {
  border-top: 1px solid var(--pm-border);
  padding: 10px;
  background: #fff;
}

#pm-message-input {
  width: 100%;
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  resize: vertical;
  min-height: 44px;
  box-sizing: border-box;
}

.pm-input-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-btn-small,
#pm-send-btn {
  border: 1px solid var(--pm-border);
  background: #fff;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#pm-send-btn {
  margin-left: auto;
  background: var(--pm-accent);
  border-color: var(--pm-accent);
  color: #fff;
}

#pm-send-btn:hover {
  filter: brightness(0.95);
}

.pm-mobile-only {
  display: none;
}

/* Camera / modal overlays keep existing ids */
#pm-camera-overlay,
#pm-user-select-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.pm-camera-hidden,
.pm-user-select-hidden {
  display: none !important;
}

#pm-camera-modal,
#pm-user-select-modal {

  width: min(520px, 86vw);

  background: #fff;

  border-radius: 16px;

  padding: 8px 10px;

  border: 1px solid var(--pm-border);

  max-height: 78vh;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 8px;
}

#pm-user-select-title,
#pm-user-select-modal h1,
#pm-user-select-modal h2,
#pm-user-select-modal h3,
#pm-user-select-modal h4 {

  margin: 0 0 6px !important;

  padding: 0 !important;

  font-size: 18px !important;

  line-height: 1 !important;

  font-weight: 700 !important;

  text-transform: uppercase;

  letter-spacing: 0.02em;
}

.pm-type-toggle {

  margin-top: 2px !important;

  margin-bottom: 8px !important;

  display: flex;

  gap: 12px;

  font-size: 13px;
}

#pm-user-select-modal .pm-user-select-types {

  margin-top: 2px !important;

  margin-bottom: 6px !important;
}

#pm-user-select-list {

  max-height: 38vh;

  overflow-y: auto;

  padding-right: 2px;
}

#pm-user-select-modal h2,
#pm-user-select-modal h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1;
}

#pm-user-select-modal .pm-user-select-types {
  margin-bottom: 10px;
}

#pm-user-select-list {

  max-height: 44vh;

  overflow-y: auto;

  padding-right: 2px;
}

#pm-user-select-modal {

  padding: 10px 12px !important;
}

@media (max-width:768px) {

  #pm-camera-modal,
  #pm-user-select-modal {

    width: 96vw;
    max-height: 92vh;

    border-radius: 0;
  }

}

.pm-camera-controls,
.pm-user-select-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Ops dock: stretch */
.pm-ops-dock #pm-messenger {
  width: 100%;
  max-width: none;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 768px) {
  #pm-messenger {
    flex-direction: column;
    min-height: unset;
  }

  #pm-left-column {
    width: 100%;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--pm-border);
  }

  .pm-mobile-only {
    display: inline-flex;
  }

  body.pm-mobile-view-messages #pm-left-column {
    display: none;
  }

  body.pm-mobile-view-messages #pm-right-column {
    display: flex;
  }
}

.pm-user-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;

  padding: 4px 0;
}

.pm-user-group {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.pm-user-group-title {
  background: #f3f4f6;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.pm-user-row {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 7px 10px;

  border-top: 1px solid #eee;

  cursor: pointer;
}

.pm-user-row:hover {
  background: #eff6ff;
}

.pm-user-select-actions {
  position: sticky;
  bottom: 0;

  background: #fff;

  padding-top: 12px;

  border-top: 1px solid #eee;
}