/* =====================================================================
   ProfiloPolitics — 2nd Amendment Chat Room (PROPOSED FIX)
   Exact visual and behavioral match to layout-fix-mockup.png:
   - Desktop: Chat stands FULL HEIGHT, always out on the right.
              The CASE side is the scrollable part — ONE scroll, no container.
   - Phone: ONE scroll — the whole page scrolls!
            Floating navy "Chat" button; tap -> chat opens FULL SCREEN.
   ===================================================================== */

:root {
  --pp-navy: #0c1b33;
  --pp-red: #c92a2a;
  --pp-red-2: #a42d2d;
  --pp-red-3: #d92323;
  --pp-chat-navy: #0c1b33;
  --pp-chat-bg: #0a1424;
  --pp-chat-bubble: #18283e;
  --pp-chat-bubble-hover: #1c2e48;
  --pp-sans: "Plus Jakarta Sans", Inter, system-ui, -apple-system, sans-serif;
  --pp-serif: Merriweather, Georgia, serif;
}

/* =====================================================================
   DESKTOP LAYOUT (min-width: 861px)
   Chat stands FULL HEIGHT, always out. Case side is ONE scroll.
   ===================================================================== */
@media (min-width: 861px) {
  html:has(.pp-chat-shell),
  body:has(.pp-chat-shell) {
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tac-root:has(.pp-chat-shell),
  .tac-root.tac-home-split {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fbfaf7 !important;
  }

  .tac-root:has(.pp-chat-shell) .site-header,
  .tac-root.tac-home-split .site-header {
    flex: 0 0 auto !important;
    width: 100% !important;
    background: #ffffff !important;
    border-bottom: 2px solid #b3202a !important;
    z-index: 50 !important;
  }
  .tac-root:has(.pp-chat-shell) .masthead,
  .tac-root.tac-home-split .masthead {
    max-width: 100% !important;
    padding: 12px 32px !important;
  }
  .tac-root:has(.pp-chat-shell) .main-menu,
  .tac-root.tac-home-split .main-menu {
    max-width: 100% !important;
    padding: 0 32px 10px !important;
  }

  .tac-root:has(.pp-chat-shell) .page,
  .tac-root.tac-home-split .page {
    flex: 1 1 auto !important;
    height: calc(100vh - 102px) !important;
    height: calc(100dvh - 102px) !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
  }

  /* Hide the outer footer on desktop split view — footer sits at bottom of the cases */
  .tac-root:has(.pp-chat-shell) > .site-footer,
  .tac-root.tac-home-split > .site-footer {
    display: none !important;
  }

  .pp-chat-shell {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fbfaf7 !important;
    font-family: var(--pp-sans) !important;
  }

  /* Left: Writing Side — THE ONLY SCROLL ON DESKTOP */
  .pp-writing-side {
    flex: 1 1 auto !important;
    height: 100% !important;
    overflow-y: auto !important;
    background: #fbfaf7 !important;
    padding: 28px 40px 60px !important;
    box-sizing: border-box !important;
  }
  .pp-writing-content {
    max-width: 820px !important;
    margin: 0 auto !important;
  }

  /* Right: Chat Side — STANDS FULL HEIGHT ALWAYS */
  .pp-chat-side {
    flex: 0 0 420px !important;
    width: 420px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--pp-chat-navy) !important;
    border-left: 3px solid var(--pp-red-3) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .pp-chat-side [data-chat-dock],
  .pp-chat-side .chat.pp-chat {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--pp-chat-navy) !important;
    border: none !important;
    margin: 0 !important;
  }

  .tac-desktop-scroll-hint {
    display: block !important;
    color: #b3202a !important;
    font-weight: 800 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-top: 28px !important;
  }
  .tac-mobile-scroll-hint {
    display: none !important;
  }
  .tac-mobile-chat-close-bar {
    display: none !important;
  }
  .tac-mobile-chat-fab {
    display: none !important;
  }
}

/* =====================================================================
   TYPOGRAPHY & CASE ELEMENTS
   ===================================================================== */
.pp-room-title {
  font-family: var(--pp-sans) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  color: var(--pp-navy) !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.15 !important;
}
.pp-room-desc {
  font-family: var(--pp-serif) !important;
  font-size: 15px !important;
  color: #52525b !important;
  margin: 0 0 22px 0 !important;
  line-height: 1.45 !important;
}

/* Trending section */
.pp-trending-section {
  margin-bottom: 24px !important;
}
.pp-trending-heading {
  font-family: var(--pp-sans) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  color: var(--pp-navy) !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.pp-trending-cards {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
}
.pp-trending-box {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: var(--pp-chat-navy) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(12, 27, 51, 0.15) !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.pp-trending-box:hover {
  background: #17263c !important;
  transform: translateY(-1px) !important;
}
.pp-trend-rank {
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #ffffff !important;
  flex: 0 0 auto !important;
}
.pp-trend-name {
  font-family: var(--pp-sans) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Cases Section */
.pp-cases-heading-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}
.pp-cases-title {
  font-family: var(--pp-sans) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--pp-navy) !important;
  margin: 0 !important;
}

/* Search bar */
.tac-root .tac-case-search {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}
.tac-root .tac-case-search input[type="search"] {
  flex: 1 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: #ffffff !important;
}
.tac-root .tac-case-search button {
  background: var(--pp-navy) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

/* Flowing cases list, NO inner scroll */
.tac-root .case-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
  padding: 0 !important;
}

/* Case Card (Matching layout-fix-mockup.png) */
.tac-root .case-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.tac-root .case-box:hover {
  border-color: var(--pp-red) !important;
  box-shadow: 0 4px 12px rgba(201, 42, 42, 0.08) !important;
}
.case-box-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}
.case-box-top-badges {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}
.case-box-title {
  font-family: var(--pp-serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--pp-red-2) !important;
  margin: 6px 0 4px 0 !important;
  line-height: 1.35 !important;
}
.case-box-meta {
  font-size: 12.5px !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* Stage Badge (Matching mockup: navy badge, white bold text) */
.tac-stage, .pp-stage {
  display: inline-block !important;
  background: var(--pp-navy) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
}
.tac-stage[data-stage="closed"], .tac-stage.stage-closed, .pp-stage.pp-closed {
  background: #991b1b !important;
}
.case-fresh {
  background: var(--pp-red) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.case-fresh-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}

/* Side Footer inside content */
.tac-side-footer {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e2e8f0 !important;
  text-align: center !important;
  color: #64748b !important;
  font-size: 13px !important;
}

/* =====================================================================
   CHAT ROOM STYLING (Matching layout-fix-mockup.png)
   ===================================================================== */
.pp-chat-head {
  padding: 16px 20px !important;
  background: var(--pp-chat-bg) !important;
  border-bottom: 1px solid #16243a !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}
.pp-chat-title {
  font-family: var(--pp-sans) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.pp-chat-sub {
  display: none !important;
}
.pp-chat-online {
  color: #10b981 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.pp-chat-online .dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
}
.tac-close-chat {
  display: none !important;
}

/* Chat Messages List */
.pp-chat-list {
  background: var(--pp-chat-navy) !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

/* Chat Message Bubbles: Author above, bubble below (Exact Mockup Match) */
.tac-root .chat-msg.pp-msg {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
  width: 100% !important;
  box-shadow: none !important;
}
.tac-root .chat-msg.pp-msg .who,
.tac-root .pp-msg-name {
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--pp-sans) !important;
  display: block !important;
}
.tac-root .chat-msg.pp-msg .when,
.tac-root .pp-msg-when {
  display: none !important; /* Hide timestamp like mockup */
}
.tac-root .chat-msg.pp-msg .text,
.tac-root .pp-msg-body {
  background: var(--pp-chat-bubble) !important;
  color: #f8fafc !important;
  font-family: var(--pp-sans) !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
}
.tac-root .chat-msg.pp-msg:hover .text {
  background: var(--pp-chat-bubble-hover) !important;
}
.tac-root .chat-msg.pp-msg .tac-reply-btn {
  color: #64748b !important;
  font-size: 11px !important;
  margin-top: 3px !important;
}

/* Chat Form Pill Composer (Exact Mockup Match) */
.pp-chat .chat-form {
  padding: 14px 16px !important;
  background: var(--pp-chat-bg) !important;
  border-top: 1px solid #16243a !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}
.pp-chat .chat-form input[type="text"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-size: 13.5px !important;
  font-family: var(--pp-sans) !important;
  flex: 1 1 auto !important;
  outline: none !important;
}
.pp-chat .chat-form input[type="text"]::placeholder {
  color: #94a3b8 !important;
}
.pp-chat .chat-form button[type="submit"] {
  background: var(--pp-red) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  font-family: var(--pp-sans) !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  transition: background 0.15s ease !important;
}
.pp-chat .chat-form button[type="submit"]:hover {
  background: #b3202a !important;
}
.pp-chat .chat-as {
  display: none !important;
}

/* =====================================================================
   PHONE / MOBILE FORMAT (max-width: 860px)
   Single scroll — the whole page scrolls!
   Tap Chat -> opens full screen!
   ===================================================================== */
@media (max-width: 860px) {
  .pp-chat-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .pp-writing-side {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 16px 14px 80px !important;
    background: #fbfaf7 !important;
  }
  .pp-room-title {
    font-size: 24px !important;
    margin-bottom: 6px !important;
  }
  .pp-room-desc {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
  }

  /* Trending cards on mobile: 3 boxes side by side */
  .pp-trending-cards {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .pp-trending-box {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 10px 8px !important;
    border-radius: 6px !important;
  }
  .pp-trend-rank {
    font-size: 11.5px !important;
  }
  .pp-trend-name {
    font-size: 11.5px !important;
  }

  /* Cases flow naturally down the page */
  .pp-cases-title {
    font-size: 20px !important;
  }
  .tac-root .case-box {
    padding: 14px 16px !important;
  }
  .case-box-title {
    font-size: 15.5px !important;
  }

  .tac-desktop-scroll-hint {
    display: none !important;
  }
  .tac-mobile-scroll-hint {
    display: block !important;
    color: #b3202a !important;
    font-weight: 800 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-top: 24px !important;
  }

  /* Chat: Closed by default on mobile until tapped */
  .pp-chat-side {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: var(--pp-chat-navy) !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    flex-direction: column !important;
  }
  .pp-chat-side.mobile-chat-open {
    display: flex !important;
  }
  .tac-mobile-chat-close-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: var(--pp-chat-bg) !important;
    border-bottom: 1px solid #16243a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
  }
  .tac-mobile-chat-close-btn {
    background: #18283e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }

  /* Floating dark navy Chat button at bottom-right per mockup */
  .tac-mobile-chat-fab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    bottom: 22px !important;
    right: 20px !important;
    z-index: 9000 !important;
    background: var(--pp-chat-navy) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(12, 27, 51, 0.4) !important;
    cursor: pointer !important;
  }
}