/* Channel thread screen styles. */ .thread-node-card.is-rating { border-color: transparent; background: linear-gradient(180deg, rgba(112, 84, 22, 0.12), rgba(20, 25, 35, 0.58)), rgba(20, 25, 35, 0.55); box-shadow: 0 0 38px rgba(181, 136, 42, 0.14); } .thread-node-stats.is-hidden { opacity: 0; max-height: 0; overflow: hidden; margin: 0; } .thread-node-heading { color: #f1dcab; font-size: 15px; } .thread-node-meta { color: #aebddd; font-size: 12px; } .thread-node-body { color: #eef3ff; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; border-radius: 10px; padding: 8px 10px; background: linear-gradient(170deg, rgba(22, 40, 73, 0.72), rgba(12, 25, 48, 0.78)); border: 1px solid rgba(116, 141, 193, 0.24); } .thread-node-stats { color: #99acd6; font-size: 12px; } .thread-node-views { margin: 0; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, 0.58); } .thread-node-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .channels-screen--thread .thread-node-actions { display: flex; grid-template-columns: none; } .thread-node-level { --depth: 0; margin-left: calc(var(--depth) * 12px); } .channels-screen--thread .thread-node-card { padding: 14px; margin-bottom: 10px; } .thread-history-divider { height: 0; border-top: 2px solid rgba(255, 255, 255, 0.26); margin: 6px 0 10px; } .thread-block--ancestors > .section-title { color: #b9cbef; } .thread-block--ancestors { border-color: rgba(141, 166, 214, 0.26); background: linear-gradient(160deg, rgba(12, 28, 56, 0.73), rgba(7, 15, 32, 0.78)); } .thread-block--focus > .section-title { color: #f0d9a4; } .thread-block--focus { border-color: transparent; background: linear-gradient(160deg, rgba(33, 44, 72, 0.68), rgba(12, 20, 36, 0.8)); } .thread-block--replies > .section-title { color: #c8d6f5; } .thread-block--replies { border-color: rgba(161, 186, 233, 0.24); } .thread-like-btn { transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .thread-like-btn.is-long-press { transform: scale(0.96); filter: brightness(1.08) drop-shadow(0 0 8px rgba(255, 220, 100, 0.28)); box-shadow: none; } .thread-open-btn { color: rgba(255, 255, 255, 0.62); } @media (max-width: 430px) { .thread-node-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 365px) { .thread-node-actions { grid-template-columns: 1fr; } } .thread-node-card.is-own-new { box-shadow: 0 0 52px rgba(88, 69, 176, 0.2), 0 12px 24px rgba(2, 8, 16, 0.46); } @media (max-width: 420px) { .thread-node-actions { grid-template-columns: 1fr; } } .thread-block { gap: 8px; padding: 8px; background: rgba(20, 25, 35, 0.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; box-shadow: 0 0 60px rgba(80, 60, 180, 0.15); border-color: rgba(255, 255, 255, 0.07); } .thread-summary { color: #efd9a4; background: rgba(20, 25, 35, 0.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; box-shadow: 0 0 60px rgba(80, 60, 180, 0.15); border-color: rgba(255, 255, 255, 0.07); } .thread-node-card { gap: 9px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; box-shadow: 0 0 60px rgba(80, 60, 180, 0.15); padding: 20px; margin-bottom: 16px; border-color: rgba(255, 255, 255, 0.07); background: rgba(20, 25, 35, 0.55); } .thread-node-actions .secondary-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: rgba(255, 255, 255, 0.45); font-size: 12px; cursor: pointer; padding: 0; min-height: 0; white-space: nowrap; } .channels-screen--thread .channels-user-chip { background: transparent; border: none; box-shadow: none; padding: 0; margin-bottom: 0; color: rgba(255, 255, 255, 0.35); min-height: 0; font-size: 12px; } .thread-block--replies > .section-title { color: rgba(255, 255, 255, 0.4); font-size: 12px; font-weight: 500; margin: 0 0 2px; } .channels-screen .thread-node-card, .channels-screen .thread-block, .channels-screen .thread-summary { animation: breatheCard 8s ease-in-out infinite; position: relative; } .channels-screen .thread-node-card:hover, .channels-screen .thread-block:hover, .channels-screen .thread-summary:hover { transform: none; } /* Thread cards should stay fixed without breathing motion */ .channels-screen--thread .thread-node-card, .channels-screen--thread .thread-block, .channels-screen--thread .thread-summary { animation: none; }