/**
 * ttpv.css - Enhanced Apple Standard CSS Suite with Fully Fluid Immersive Stories Systems
 */

:root {
    --apple-canvas-bg: #f5f5f7;
    --apple-card-bg: #ffffff;
    --apple-text-primary: #1d1d1f;
    --apple-text-secondary: #86868b;
    --apple-border-color: #e5e5ea;
    --apple-pink-accent: #ce0a6c;
    --apple-pink-hover: #b0075a;
    --apple-gray-btn: #f5f5f7;
    --apple-gray-btn-hover: #e8e8ed;
}

.apple-ui-wrapper {
    background-color: var(--apple-canvas-bg);
    color: var(--apple-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    padding: 10px 5px;
    border-radius: 20px;
    max-width: 1100px;
    margin: 30px auto;
    box-sizing: border-box;
}

.apple-ui-wrapper *, .apple-ui-wrapper *::before, .apple-ui-wrapper *::after { box-sizing: border-box; }

.apple-search-container { width: 100%; margin-bottom: 32px; }
.apple-search-form { width: 100%; }

.apple-search-form-inner { display: flex; gap: 12px; align-items: stretch; width: 100%; }
.apple-input-field-group {
    flex: 1; display: flex; background-color: var(--apple-card-bg); border: 1px solid var(--apple-border-color);
    border-radius: 14px; padding: 10px 14px; align-items: center; gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); transition: all 0.3s ease; min-width: 0;
}
.apple-input-field-group:focus-within { border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15); }
.search-lens-icon { width: 22px; height: 22px; fill: var(--apple-text-secondary); flex-shrink: 0; }
.apple-input-field-group input[type="text"] { flex: 1; background: transparent; border: none; color: var(--apple-text-primary); font-size: 16px; padding: 10px 4px; outline: none; min-width: 0; }

.tt-search-btn { background-color: var(--apple-pink-accent); color: #ffffff; border: none; font-size: 15px; font-weight: 600; padding: 12px 28px; border-radius: 14px; cursor: pointer; transition: background 0.2s ease; white-space: nowrap; flex-shrink: 0; }
.tt-search-btn:hover { background-color: var(--apple-pink-hover); }

.tt-paste-btn { background: transparent; border: none; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--apple-text-secondary); transition: color 0.2s; outline: none; flex-shrink: 0; }
.tt-paste-btn:hover { background-color:#fff; color: #ce0a6c; }
.tt-paste-btn svg { width: 20px; height: 20px; fill: currentColor; }


.apple-card { background-color: var(--apple-card-bg); border: 1px solid var(--apple-border-color); border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03); padding: 30px; margin-bottom: 24px; }
.profile-meta-box { display: flex; align-items: center; gap: 32px; }
.profile-avatar-column { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; }
.profile-avatar-column img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 1px solid var(--apple-border-color); }
.micro-btn { padding: 6px 14px !important; font-size: 12px !important; border-radius: 6px !important; width: 100%; }
.profile-details-column h2 { margin: 0 0 8px 0; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.profile-details-column p { margin: 0; font-size: 15px; color: var(--apple-text-secondary); line-height: 1.5; }

.analytics-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.metric-card-node { background-color: var(--apple-card-bg); border: 1px solid var(--apple-border-color); border-radius: 14px; padding: 20px; display: flex; align-items: center; gap: 16px; }
.node-icon-wrap { width: 44px; height: 44px; border-radius: 10px; background-color: var(--apple-canvas-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.node-icon-wrap svg { width: 22px; height: 22px; fill: var(--apple-text-primary); }
.node-data h4 { margin: 0 0 2px 0; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
.node-data p { margin: 0; font-size: 13px; color: var(--apple-text-secondary); font-weight: 500; }

.stories-section-container { padding: 24px 30px; }
.stories-section-heading { font-size: 17px; font-weight: 700; color: var(--apple-text-primary); margin: 0 0 16px 0; letter-spacing: -0.3px; }
.stories-tray-track { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none; }
.stories-tray-track::-webkit-scrollbar { display: none; }

.story-bubble-node { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; width: 78px; flex-shrink: 0; }
.story-avatar-ring-wrap { width: 68px; height: 68px; border-radius: 50%; padding: 2px; background: linear-gradient(220deg, var(--apple-pink-accent) 0%, #ff455b 50%, #ffac30 100%); display: flex; align-items: center; justify-content: center; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.story-bubble-node:hover .story-avatar-ring-wrap { transform: scale(1.04); }
.story-avatar-ring-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #ffffff; background-color: #f5f5f7; }
.story-bubble-node span { font-size: 11px; font-weight: 600; color: var(--apple-text-primary); margin-top: 6px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* INLINE VIEWER CORE CSS */
.story-viewport-wrapper { position: relative; width: 100%; max-width: 400px; aspect-ratio: 9/14; background-color: #000000; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); border: 1px solid var(--apple-border-color); display: flex; flex-direction: column; z-index: 10; margin: 0 auto; }
.story-content-render-frame { width: 100%; flex: 1; position: relative; display: flex; align-items: center; justify-content: center; }
.story-content-render-frame video, .story-content-render-frame img { width: 100%; height: 100%; object-fit: cover; }

.story-inline-close-trigger { position: absolute; top: 20px; right: 16px; font-size: 28px; line-height: 1; color: #ffffff !important; background-color: rgba(0,0,0,0.5) !important; border-radius: 50% !important; width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; cursor: pointer !important; opacity: 0.8 !important; transition: opacity 0.2s !important; z-index: 100 !important; padding: 0 !important; font-family: sans-serif !important; }
.story-inline-close-trigger:hover { opacity: 1 !important; background-color: rgba(0,0,0,0.8) !important; }

.story-progress-indicator-track { display: flex; gap: 4px; padding: 12px 16px; position: absolute; top: 0; left: 0; width: 100%; z-index: 30; }
.story-progress-bar-segment { height: 3px; flex: 1; background-color: rgba(255, 255, 255, 0.35); border-radius: 2px; overflow: hidden; position: relative; }
.story-progress-bar-fill-node { height: 100%; width: 0%; background-color: #ffffff; border-radius: 2px; }

.story-viewport-header-meta { display: flex; align-items: center; gap: 10px; position: absolute; top: 20px; left: 0; width: 100%; padding: 0 16px; z-index: 30; pointer-events: none; }
.story-viewport-header-meta img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.2); }
.story-meta-text-box { display: flex; flex-direction: column; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.story-meta-text-box .user-heading { font-size: 13px; font-weight: 700; color: #ffffff; }
.story-meta-text-box .time-label { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.75); }

.story-sidebar-metrics { position: absolute; bottom: 80px; right: 16px; display: flex; flex-direction: column; gap: 20px; z-index: 40; }
.metric-item { display: flex; flex-direction: column; align-items: center; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.metric-item svg { width: 32px; height: 32px; drop-shadow: 0 2px 4px rgba(0,0,0,0.5); margin-bottom: 4px; }
.metric-item span { font-size: 13px; font-weight: 600; }

.story-directional-nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 24px; font-weight: 300; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.2s ease; z-index: 40; outline: none; }
.story-directional-nav-arrow:hover { background-color: rgba(255, 255, 255, 0.3); transform: translateY(-50%) scale(1.05); }
.story-directional-nav-arrow.axis-left { left: 12px; }
.story-directional-nav-arrow.axis-right { right: 12px; }

.single-preview-box { display: flex; gap: 32px; margin-top:15px; }
.media-preview-container { width: 280px; aspect-ratio: 9 / 16; background-color: #000000; border-radius: 14px; overflow: hidden; position: relative; flex-shrink: 0; z-index: 1; }
.media-preview-container video, .media-preview-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; pointer-events: auto; }

.preview-audio-controls { position: absolute; bottom: 12px; left: 12px; z-index: 99999 !important; background-color: rgba(0,0,0,0.7) !important; padding: 6px !important; border-radius: 30px !important; display: flex !important; gap: 8px !important; backdrop-filter: blur(8px) !important; pointer-events: auto !important; }

.story-playback-controls { position: absolute; bottom: 20px; right: 20px; display: flex !important; gap: 12px !important; z-index: 99999 !important; pointer-events: auto !important; }

.preview-audio-controls button, 
.story-playback-controls button { 
    background-color: transparent !important; 
    background-image: none !important;
    border: none !important; 
    color: white !important; 
    width: 36px !important; 
    height: 36px !important; 
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    outline: none !important; 
    transition: background 0.2s !important; 
    padding: 0 !important; 
    box-shadow: none !important;
}

.story-playback-controls button {
    background-color: rgba(0,0,0,0.6) !important;
    width: 40px !important; 
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(10px) !important;
}

.preview-audio-controls button:hover { background-color: rgba(255,255,255,0.2) !important; }
.story-playback-controls button:hover { background-color: rgba(255,255,255,0.2) !important; transform: scale(1.05) !important; }

.preview-audio-controls button svg, 
.story-playback-controls button svg { 
    width: 20px !important; 
    height: 20px !important; 
    display: block !important; 
    flex-shrink: 0 !important; 
    fill: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.preview-audio-controls button svg path, 
.story-playback-controls button svg path { fill: #ffffff !important; }

.ttpv-spinner { width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid #ffffff; border-radius: 50%; animation: ttpv-spin 1s linear infinite; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -20px; z-index: 999999; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
@keyframes ttpv-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.media-details-container { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.video-caption-label { font-size: 20px; font-weight: 700; margin: 0 0 16px 0; }
.single-video-mini-metrics { display: flex; gap: 20px; margin-bottom: 24px; font-size: 14px; color: var(--apple-text-secondary); font-weight: 500; }
.apple-action-btn { display: inline-flex; align-items: center; justify-content: center; border: none; font-size: 15px; font-weight: 600; border-radius: 10px; padding: 12px 24px; cursor: pointer; text-decoration: none !important; transition: all 0.2s ease; }
.pink-tint { background-color: var(--apple-pink-accent); color: #ffffff !important; }
.pink-tint:hover { background-color: var(--apple-pink-hover); }
.gray-tint { background-color: var(--apple-gray-btn); color: var(--apple-text-primary) !important; }
.gray-tint:hover { background-color: var(--apple-gray-btn-hover); }
.action-buttons-group { display: flex; gap: 12px; flex-wrap: wrap; }

.feed-matrix-container { margin-top: 40px; background-color: var(--apple-card-bg); border: 1px solid var(--apple-border-color); border-radius: 16px; padding: 30px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03); }
.feed-section-heading { font-size: 22px; font-weight: 700; margin: 0 0 20px 0; letter-spacing: -0.5px; }

.feed-grid-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 28px; }
.feed-grid-item { background-color: var(--apple-canvas-bg); border: 1px solid var(--apple-border-color); border-radius: 12px; aspect-ratio: 9 / 16; overflow: hidden; position: relative; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.02); transition: transform 0.2s ease; }
.feed-grid-item:hover { transform: scale(1.02); }
.feed-grid-item img { width: 100%; height: 100%; object-fit: cover; }
.item-play-icon-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.item-play-icon-overlay::after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #000000; margin-left: 2px; }
.item-metrics-badge { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.6); color: #ffffff; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.feed-pagination-row { display: flex; justify-content: center; margin-top: 20px; }
.dynamic-large-btn { padding: 16px 40px; font-size: 16px; border-radius: 12px; }
.apple-toast-container { position: fixed; bottom: 30px; right: 30px; padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 14px; z-index: 999999; background-color: rgba(29, 29, 31, 0.95); color: #ffffff; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,0.15); }

@media(min-width: 480px) { .feed-grid-layout { grid-template-columns: repeat(3, 1fr); } }
@media(min-width: 768px) { .feed-grid-layout { grid-template-columns: repeat(4, 1fr); } }
@media(min-width: 1024px) { .feed-grid-layout { grid-template-columns: repeat(6, 1fr); } }

@media(max-width: 900px) {
    .analytics-dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    .single-preview-box { flex-direction: column; align-items: center; }
    .media-preview-container { width: 100%; max-width: 300px; }
}

@media(max-width: 600px) {
    .apple-search-form-inner { flex-direction: column; gap: 16px; }
    .tt-search-btn { width: 100%; padding: 16px; font-size: 16px; border-radius: 14px; }
    
    .analytics-dashboard-grid { grid-template-columns: 1fr; }
    .profile-meta-box { flex-direction: column; text-align: center; }
    .story-viewport-wrapper { max-width: 100%; border-radius: 12px; }
}