/* ==========================================================================
   Thread Detail Page Styles
   채팅 UI 레이아웃, 엔트리, 입력창
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Page Layout Overrides
   --------------------------------------------------------------------------- */

/* Remove main padding for thread-detail (full viewport page) */
main:has(.thread-detail) {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* Fallback for browsers without :has() support */
.thread-detail-page main {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* Thread detail page - 채팅 UI 레이아웃 */
body.thread-detail-page,
body:has(.thread-detail) {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  padding-top: 0;
}

html:has(.thread-detail) {
  overflow: hidden;
  height: 100%;
}

/* wrapper div + main 높이 체인 (body → create-menu wrapper → main → thread-detail) */
body.thread-detail-page > div,
body:has(.thread-detail) > div {
  height: 100%;
}

/* NOTE: "> div > div" 제거 — #flash 등 sibling div에 height:100%가 적용되어
   main을 viewport 아래로 밀어내는 버그 발생. main은 아래에서 직접 타겟. */

body.thread-detail-page main,
body:has(.thread-detail) main {
  height: 100%;
  overflow: hidden;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Thread Detail Container
   --------------------------------------------------------------------------- */
.thread-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Add the section padding back inside */
  padding-left: var(--spacing-section);
  padding-right: var(--spacing-section);
}

/* ---------------------------------------------------------------------------
   Cover Image Header
   --------------------------------------------------------------------------- */
.thread-detail-cover {
  /* main 패딩 벗어나서 전체 너비 (project-cover와 동일) */
  margin-left: calc(-1 * var(--spacing-section));
  margin-right: calc(-1 * var(--spacing-section));
  width: calc(100% + var(--spacing-section) * 2);
  /* safe area 포함한 높이 */
  min-height: calc(40px + env(safe-area-inset-top));
  height: calc(40px + env(safe-area-inset-top));
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden;
}

.thread-detail-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gradient overlay removed — native nav bar buttons are already visible */

/* Mobile web: taller cover without safe-area pull */
@media (max-width: 767px) {
  .web-layout .thread-detail-cover {
    height: 140px;
    min-height: 140px;
  }

  .web-layout .thread-detail-header {
    top: var(--spacing-4);  /* 16px from cover top — matches other pages */
  }
}

/* Web (desktop): taller cover image & smaller entry images */
@media (min-width: 768px) {
  .web-layout .thread-detail-cover {
    height: 120px;
    min-height: 120px;
    border-radius: 0;
  }

  .web-layout .thread-entry-image {
    max-width: 50%;
  }
}

/* iOS: hide web header when native nav bar is active (cover image stays visible) */
[data-bridge-components~="nav-bar"] .thread-detail-header {
  display: none !important;
}

/* iOS without cover image: the 40px web header space is unused — shrink to safe area only */
[data-bridge-components~="nav-bar"] .thread-detail-cover:not(.thread-detail-cover--has-image) {
  height: env(safe-area-inset-top);
  min-height: env(safe-area-inset-top);
}

/* ---------------------------------------------------------------------------
   Header (Back, Title, Menu)
   Uses .header-btn from components/button.css (glass style)
   --------------------------------------------------------------------------- */
.thread-detail-header {
  position: absolute;
  /* 다른 페이지 헤더와 동일한 위치 */
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-section);
  z-index: 1;
}

/* Default: show back, hide close (desktop panel overrides in desktop_two_column.css) */
.thread-detail-close-btn {
  display: none;
}

/* ---------------------------------------------------------------------------
   Pinned Entry
   --------------------------------------------------------------------------- */
.thread-detail-pinned {
  padding: 0;
}

.thread-detail-pinned:not(:empty) {
  padding-top: var(--spacing-section);
}

.thread-detail-pinned:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
   Entries Container - Scrollable area
   --------------------------------------------------------------------------- */
.thread-detail-entries {
  flex: 1 1 0; /* Explicit flex-grow, flex-shrink, flex-basis */
  min-height: 0; /* Critical for flex child with overflow */
  padding-top: var(--spacing-section);
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
}

/* Inner wrapper - min-height: 100%+1px forces iOS bounce scroll even with short content */
.thread-detail-entries-inner {
  display: flex;
  flex-direction: column;
  min-height: calc(100% + 1px);
}

/* When pinned entry exists, pinned margin-bottom handles the gap */
.thread-detail-pinned:not(:empty) + .thread-detail-entries {
  padding-top: 0 !important;
}

.thread-detail-empty {
  text-align: center;
  padding: var(--spacing-10);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------------------
   Date Group
   --------------------------------------------------------------------------- */
.thread-entry-date-group {
  margin-bottom: var(--spacing-6);
}

.thread-entry-date-group:last-child {
  margin-bottom: 0;
}

.thread-entry-date-header {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-3);
}

/* ---------------------------------------------------------------------------
   Entry Item
   --------------------------------------------------------------------------- */
@keyframes entry-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.thread-entry {
  margin-bottom: var(--spacing-6);  /* 24px */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  animation: entry-fade-in 0.2s ease-out;
}

/* 마지막 엔트리는 margin 제거 */
.thread-entry-date-group:last-child .thread-entry:last-child {
  margin-bottom: 0;
}

.thread-entry--pinned {
  padding-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: var(--spacing-6);
}

.thread-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-1);
}

.thread-entry-time {
  font-size: var(--font-size-sm);  /* 13px */
  color: var(--color-text-secondary);
  opacity: var(--opacity-dimmed);
}

.thread-entry-pin-indicator {
  margin-left: var(--spacing-1);
  font-size: var(--font-size-xs);
}

.thread-entry-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -8px -8px -8px 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-border-soft);
}

.thread-entry-more:active {
  background: var(--color-hover-subtle);
}

@media (min-width: 768px) {
  .web-layout .thread-entry-more {
    margin-right: var(--spacing-2);
  }
}

.thread-entry-content {
  font-size: var(--font-size-md);  /* 15px */
  color: var(--color-text-primary);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.thread-entry-content p {
  margin: 0 0 var(--spacing-2);
}

.thread-entry-content p:last-child {
  margin-bottom: 0;
}

.thread-entry-image {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-width: 70%;
  aspect-ratio: 3 / 2;
}

.thread-entry-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Entry Action Sheet (Long Press Menu)
   --------------------------------------------------------------------------- */
.entry-action-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.entry-action-sheet.open {
  display: block;
}

.entry-action-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
}

.entry-action-sheet__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--spacing-section);
  padding-bottom: calc(var(--spacing-section) + env(safe-area-inset-bottom));
}

.entry-action-sheet__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
  padding: var(--spacing-4);
  background: transparent;
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  text-align: left;
}

.entry-action-sheet__item:active {
  background: var(--color-hover-subtle);
}

.entry-action-sheet__item--danger {
  color: var(--color-danger);
}

.entry-action-sheet__cancel {
  width: 100%;
  padding: var(--spacing-4);
  margin-top: var(--spacing-2);
  background: var(--color-bg-secondary);
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ---------------------------------------------------------------------------
   Entry Input Sheet (fixed at bottom, JS positions for keyboard)
   --------------------------------------------------------------------------- */
.thread-entry-sheet {
  position: fixed;
  left: var(--spacing-list-sm);
  right: var(--spacing-list-sm);
  bottom: calc(env(safe-area-inset-bottom) / 2 + var(--spacing-section));
  z-index: var(--z-modal);
  /* No CSS transition — visualViewport fires at ~60fps during keyboard
     animation, so JS updates style.bottom every frame for smooth movement.
     A CSS transition here causes getBoundingClientRect() to return
     mid-animation values, breaking padding and scroll calculations. */
}

/* Web (desktop): constrain input sheet to content area */
@media (min-width: 768px) {
  .web-layout .thread-entry-sheet {
    left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width) - 900px) / 2) + var(--spacing-4));
    right: calc(((100vw - var(--sidebar-width) - 900px) / 2) + var(--spacing-4));
    bottom: var(--spacing-6);
  }
}

/* Thread entry input container — uses shared .create-menu-content class.
   textarea text rendering fixed via translateZ(0) on .chat-input-field-simple */

/* Simple text input — matches .chat-input (contenteditable) exactly */
.chat-input-field-simple {
  display: block;
  width: 100%;
  font-size: var(--font-size-xl);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  color: var(--color-text-primary);
  -webkit-text-fill-color: var(--color-text-primary);
  /* Force GPU compositing layer — WKWebView doesn't render textarea text
     inside position:fixed parents without this */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  z-index: 1;
  margin-bottom: var(--spacing-5);
  min-height: var(--avatar-size-sm);
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}

.chat-input-field-simple::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
  -webkit-text-fill-color: var(--color-text-secondary);
}


/* ---------------------------------------------------------------------------
   Detail Card Extensions for Thread Edit
   --------------------------------------------------------------------------- */
.detail-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.detail-card__info {
  flex: 1;
}

.detail-card__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: block;
  margin-top: var(--spacing-1);
}

.detail-card--error {
  background: var(--color-danger-light);
  padding: var(--spacing-3);
  border-radius: var(--radius-lg);
  color: var(--color-danger);
}

.detail-card--error p {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* ---------------------------------------------------------------------------
   Thread Edit Toggle
   --------------------------------------------------------------------------- */
.thread-edit-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.thread-edit-toggle__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.thread-edit-toggle__info .form-field__label {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Thread Delete Button
   --------------------------------------------------------------------------- */
.thread-delete-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: transparent;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-full);
  color: var(--color-danger);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.thread-delete-btn:hover {
  background: var(--color-danger-light);
}

.thread-delete-btn--filled {
  background: var(--color-danger);
  border: none;
  color: var(--color-text-inverse);
}

.thread-delete-btn--filled:hover {
  background: var(--color-danger-text);
}

.thread-delete-btn svg {
  flex-shrink: 0;
}

/* Entry Edit Page — uses create-project / create-form / cover-thumb from form.css */