/* ── Welcome screen ─────────────────────────────────────────────── */
.wpcc-welcome-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px; text-align: center; box-sizing: border-box; user-select: none; color: var(--ch-muted); background: var(--ch-page); overflow: hidden; }
.wpcc-welcome-icon   { font-size: 36px; line-height: 1; margin-bottom: 10px; opacity: .65; flex-shrink: 0; }
.wpcc-welcome-title  { font-size: 16px; font-weight: 800; color: var(--ch-text); margin: 0 0 8px; }
.wpcc-welcome-body   { font-size: 12px; line-height: 1.55; color: var(--ch-muted); max-width: 100%; margin: 0 0 12px; }
.wpcc-welcome-tips   { list-style: none; padding: 0; margin: 0; width: 100%; text-align: left; }
.wpcc-welcome-tips li { font-size: 11.5px; color: var(--ch-muted); padding: 5px 0 5px 2px; border-bottom: 1px solid var(--ch-border); line-height: 1.4; }
.wpcc-welcome-tips li:last-child { border-bottom: none; }

/* ── Boot overlay ───────────────────────────────────────────────── */
#wpcc-boot-overlay {
  position: absolute; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--ch-page); border-radius: var(--ch-radius);
  pointer-events: none; opacity: 1; transition: opacity .4s ease;
}
.wpcc-boot-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--ch-border);
  border-top-color: var(--ch-primary, #4f46e5);
  border-radius: 50%;
  animation: wpcc-spin .7s linear infinite;
  flex-shrink: 0;
}
.wpcc-boot-label {
  font-size: 13px; color: var(--ch-muted);
  font-weight: 500; letter-spacing: .03em;
  transition: opacity .2s ease;
}
.wpcc-boot-overlay-fade { opacity: 0 !important; pointer-events: none; }

/* ── Chat-switch overlay ────────────────────────────────────────── */
#wpcc-chat-switch-overlay {
  position: absolute; inset: 0; z-index: 50;
  background: var(--ch-card); display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 1; transition: opacity .25s ease;
}
#wpcc-chat-switch-overlay::before { content: ''; width: 28px; height: 28px; border: 2.5px solid var(--ch-border); border-top-color: var(--ch-primary, #4f46e5); border-radius: 50%; animation: wpcc-spin .65s linear infinite; }
.wpcc-chat-switch-fade { opacity: 0 !important; }

/* ── Mobile (≤600px): sidebar/main toggle ──────────────────────── */
@media (max-width: 600px) {
  /* Default: show sidebar, hide main */
  #wpcc-app #wpcc-sidebar {
    width: 100% !important; min-width: 100% !important; max-width: 100% !important;
  }
  #wpcc-app #wpcc-main { display: none; }

  /* When a chat is open, JS adds wpcc-in-chat to #wpcc-app */
  #wpcc-app.wpcc-in-chat #wpcc-sidebar { display: none !important; }
  #wpcc-app.wpcc-in-chat #wpcc-main    { display: flex !important; width: 100%; flex: 1; flex-direction: column; }

  .wpcc-member-panel-wide { flex-direction: column; }
  .wpcc-panel-left  { width: 100%; border-bottom: 1px solid var(--ch-border); max-height: 40vh; }
  .wpcc-panel-divider { display: none; }
  .wpcc-panel-right { flex: unset; height: 40vh; }

  .wpcc-my-name          { font-size: 15px; }
  #wpcc-search           { font-size: 15px; padding: 10px 16px; }
  #wpcc-sidebar h3       { font-size: 11px !important; }
  .wpcc-search-item,
  .wpcc-user-row         { font-size: 15px; padding: 11px 14px; }
  .wpcc-user-row-name,
  .wpcc-search-name      { font-size: 15px; }
  .wpcc-chat-item-name,
  .wpcc-chat-row-name    { font-size: 15px; }
  .wpcc-chat-item-last,
  .wpcc-chat-row-snippet { font-size: 13px; }
  .wpcc-group-row, .wpcc-chat-item { font-size: 15px; padding: 11px 14px; }
  .wpcc-no-groups        { font-size: 13px; }
  #wpcc-chat-title       { font-size: 17px; }
  .wpcc-bubble           { font-size: 16px; }
  .wpcc-ts               { font-size: 11px; }
  .wpcc-sender-name      { font-size: 13px; }
  .wpcc-reply-quote      { font-size: 13px; }
  .wpcc-reply-quote-name { font-size: 12px; }
  .wpcc-day-sep-label    { font-size: 12px; }
  #wpcc-text             { font-size: 16px; }
  .wpcc-btn-attach,
  .wpcc-btn-mic          { font-size: 22px; width: 44px; height: 44px; }
  #wpcc-send             { width: 56px; height: 56px; font-size: 18px; }
  .wpcc-reaction-chip    { font-size: 17px; min-height: 34px; }
  .wpcc-reaction-count   { font-size: 13px; }
  .wpcc-welcome-title    { font-size: 22px; }
  .wpcc-welcome-body     { font-size: 15px; }
  .wpcc-welcome-tips li  { font-size: 14px; }

  /* Hide emoji picker on mobile — native keyboard has emojis */
  .wpcc-btn-emoji { display: none !important; }
}

/* ── Tablet (601–1024px): both panes always visible ─────────────── */
@media (min-width: 601px) and (max-width: 1024px) {
  /* Sidebar and main are always both visible on tablet */
  #wpcc-app #wpcc-sidebar { display: flex !important; }
  #wpcc-app #wpcc-main    { display: flex !important; }
  /* Back button hidden on tablet since sidebar stays visible */
  #wpcc-back-btn { visibility: hidden !important; }
}

@media (max-width: 768px) {
  #wpcc-sidebar { width: 220px !important; min-width: 220px !important; max-width: 220px !important; }
  .wpcc-chat-item-name,
  .wpcc-chat-row-name { font-size: 15px; }
  .wpcc-group-row     { font-size: 15px; }
  .wpcc-search-item,
  .wpcc-user-row      { font-size: 15px; }
  #wpcc-chat-title    { font-size: 17px; }
}

/* ── Tablet font tweaks ──────────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 1024px) {
  .wpcc-bubble      { font-size: 15px; }
  .wpcc-sender-name { font-size: 12px; }
  .wpcc-ts          { font-size: 11px; }
  .wpcc-member-panel-wide { width: min(860px,97vw); }
}

/* ── Desktop ─────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  #wpcc-app {
    height: 100dvh; min-height: 0;
    border-radius: 0; box-shadow: none; border: none;
  }
  .ch-pane #wpcc-app {
    position: static !important; height: 100% !important; inset: auto !important;
    border-radius: 0 !important; box-shadow: none !important; border: none !important;
  }
  .wpcc-welcome-screen { padding: 48px 40px; justify-content: center; gap: 0; }
  .wpcc-welcome-icon   { font-size: 72px; margin-bottom: 22px; opacity: .7; }
  .wpcc-welcome-title  { font-size: 26px; margin-bottom: 14px; }
  .wpcc-welcome-body   { font-size: 15px; line-height: 1.7; max-width: 480px; margin-bottom: 28px; }
  .wpcc-welcome-tips   { max-width: 460px; }
  .wpcc-welcome-tips li { font-size: 14px; padding: 9px 0 9px 4px; line-height: 1.55; }
}

/* ── Hub integration: inside .ch-pane, always stay in normal flow ────
   Our position:fixed on mobile/tablet would escape the pane and overlap
   the hub tab bar. When inside .ch-pane the hub itself handles fixed
   positioning of the outer shell — the chat app just needs to fill the pane. */
.ch-pane #wpcc-app {
  position: relative !important;
  height: 100% !important;
  inset: auto !important;
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0;
}

/* ── Hub integration: inside .ch-pane on ALL screen sizes ────────────
   Lock the pane from scrolling on both mobile and tablet.
   Only #wpcc-messages scrolls internally; the outer shell is rigid.
   JS touchmove blocker handles iOS rubber-band at scroll boundaries. */
.ch-pane.ch-pane-active {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
}

/* ── Mobile hub (≤640px) ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .ch-pane #wpcc-app {
    display: flex !important;
    flex-direction: column !important;
    /* height set via JS setProperty('important') to beat hub's height:100% !important */
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  /* Only messages may scroll; contain stops rubber-band propagating up */
  .ch-pane #wpcc-messages {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Safe-area padding for notched phones */
  .ch-pane #wpcc-input-area {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}