/* ============================================================
   MPLB — MediaPort LiveBlog Styles v0.3
   Targets Automattic Liveblog 1.12.x DOM structure
   ============================================================ */

/* ---------- Verification badges (kept from v0.1) ---------- */
.mplb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    margin-right: 6px;
    letter-spacing: 0.02em;
    cursor: default;
    vertical-align: middle;
}

.mplb-badge--unverified  { background: #fef3c7; color: #92400e; }
.mplb-badge--checking    { background: #dbeafe; color: #1e40af; }
.mplb-badge--verified    { background: #d1fae5; color: #065f46; }
.mplb-badge--disproved   { background: #fee2e2; color: #991b1b; text-decoration: line-through; }

/* ---------- Live indicator wrapper (injected by mplb-frontend.js) ---------- */
.mplb-liveblog-wrapper {
    max-width: 720px;
    margin: 0 auto;
    font-family: Georgia, "Times New Roman", serif;
}

.mplb-liveblog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 16px;
    border-bottom: 2px solid #000;
    margin-bottom: 24px;
}

.mplb-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #c00;
    color: #fff;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    line-height: 1;
}

.mplb-live-indicator::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: mplb-blink 1.4s ease-in-out infinite;
}

@keyframes mplb-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

/* ---------- Modern editor (Liveblog 1.12 React app) ---------- */
.liveblog-editor-container {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #c00;
    padding: 16px;
    margin-bottom: 28px;
}

.liveblog-editor-inner-container {
    background: #fff;
}

.liveblog-input,
.liveblog-form-entry,
.liveblog-form-rich-entry {
    width: 100%;
    min-height: 80px;
    border: 1px solid #ccc;
    border-radius: 0 !important;
    padding: 10px 12px;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    background: #fff;
}

.liveblog-input:focus,
.liveblog-form-entry:focus,
.liveblog-form-rich-entry:focus {
    outline: none;
    border-color: #000;
}

.liveblog-editor-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.liveblog-editor-tab {
    padding: 6px 12px;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
}

.liveblog-editor-tab:hover { color: #000; }
.liveblog-editor-tab.active,
.liveblog-editor-tab[aria-selected="true"] {
    color: #000;
    border-bottom-color: #c00;
}

/* Publish (modern + legacy) */
.liveblog-publish-btn,
.liveblog-btn-primary,
.liveblog-form-entry-submit {
    background: #c00 !important;
    color: #fff !important;
    border: none;
    padding: 8px 20px;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0 !important;
    letter-spacing: 0.03em;
    transition: background 0.15s;
}

.liveblog-publish-btn:hover,
.liveblog-btn-primary:hover,
.liveblog-form-entry-submit:hover {
    background: #a00 !important;
}

/* Secondary / cancel / delete */
.liveblog-btn,
.liveblog-btn-small,
.liveblog-btn-cancel,
.liveblog-editor-cancel-btn,
.liveblog-cancel-btn {
    background: transparent;
    border: 1px solid #ccc;
    color: #555;
    padding: 7px 14px;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 12px;
    cursor: pointer;
    border-radius: 0 !important;
    transition: border-color 0.15s, color 0.15s;
}

.liveblog-btn:hover,
.liveblog-btn-cancel:hover,
.liveblog-editor-cancel-btn:hover {
    border-color: #000;
    color: #000;
}

.liveblog-btn-delete,
.liveblog-editor-delete {
    color: #c00;
    border-color: #c00;
}

.liveblog-btn-delete:hover,
.liveblog-editor-delete:hover {
    background: #c00;
    color: #fff;
}

/* "New entries available" notifier */
.liveblog-update-btn,
.liveblog-update-btn-container {
    background: #c00;
    color: #fff;
    border: none;
    padding: 8px 16px;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0;
    letter-spacing: 0.03em;
}

/* ---------- Entries list / feed ---------- */
#liveblog-entries,
.liveblog-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.liveblog-entry {
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    list-style: none;
}

.liveblog-entry:first-child {
    border-top: 1px solid #e8e8e8;
}

/* Meta header: avatar + author + timestamp */
.liveblog-entry .liveblog-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.liveblog-author-avatar,
.liveblog-meta-author-avatar {
    flex: 0 0 auto;
}

.liveblog-author-avatar img,
.liveblog-meta-author-avatar img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: block;
}

.liveblog-author-name,
.liveblog-meta-author,
.liveblog-meta-authors {
    font-family: -apple-system, Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #555;
}

.liveblog-author-name a,
.liveblog-meta-author a {
    color: inherit;
    text-decoration: none;
}

.liveblog-author-name a:hover,
.liveblog-meta-author a:hover {
    text-decoration: underline;
}

.liveblog-meta-time,
.liveblog-time-update {
    font-family: -apple-system, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    margin-left: auto;
}

.liveblog-meta-time .date,
.liveblog-meta-time .time { color: inherit; }
.liveblog-meta-time .date + .time::before { content: " • "; opacity: 0.6; }

/* Entry body */
.liveblog-entry-text {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.65;
    color: #111;
}

.liveblog-entry-text p { margin: 0 0 0.8em; }
.liveblog-entry-text p:last-child { margin-bottom: 0; }

.liveblog-entry-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 12px 0;
}

.liveblog-entry-text iframe {
    max-width: 100%;
    display: block;
    margin: 12px 0;
}

/* Responsive embed wrapper */
.wp-block-embed__wrapper,
.mplb-embed-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 12px 0;
}

.wp-block-embed__wrapper iframe,
.mplb-embed-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    margin: 0;
}

/* ---------- Entry type variants ---------- */
.liveblog-entry.mplb-type-breaking {
    background: #fff8f8;
    border-bottom-color: #f0c0c0;
    padding-left: 14px;
    border-left: 3px solid #c00;
}

.mplb-breaking-badge {
    display: inline-block;
    background: #c00;
    color: #fff;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    margin-bottom: 6px;
    margin-right: 6px;
    vertical-align: middle;
}

.liveblog-entry.mplb-type-key {
    padding-left: 14px;
    border-left: 3px solid #000;
}

.mplb-source-telegram {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 10px;
    color: #888;
    margin-left: 6px;
}

/* ---------- New-entry animation ---------- */
.liveblog-entry.liveblog-entry-new {
    animation: mplb-entry-in 0.4s ease-out;
}

@keyframes mplb-entry-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Edit / delete tools ---------- */
.liveblog-entry-actions,
.liveblog-entry-tools {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.15s;
    list-style: none;
    padding: 0;
}

.liveblog-entry:hover .liveblog-entry-actions,
.liveblog-entry:hover .liveblog-entry-tools {
    opacity: 1;
}

.liveblog-entry-actions a,
.liveblog-entry-actions button,
.liveblog-entry-tools a,
.liveblog-entry-tools button,
.liveblog-entry-edit,
.liveblog-entry-delete {
    font-family: -apple-system, Arial, sans-serif;
    font-size: 11px;
    color: #888;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.1s;
}

.liveblog-entry-actions a:hover,
.liveblog-entry-actions button:hover,
.liveblog-entry-tools a:hover,
.liveblog-entry-tools button:hover,
.liveblog-entry-edit:hover,
.liveblog-entry-delete:hover {
    color: #c00;
}

/* ---------- Archived state ---------- */
.liveblog-archived-message {
    text-align: center;
    padding: 20px 0;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 12px;
    color: #aaa;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-top: 1px solid #e8e8e8;
    margin-top: 8px;
}

/* ---------- Pagination / load more ---------- */
.liveblog-pagination,
.liveblog-load-more {
    text-align: center;
    padding: 16px 0;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 12px;
}

.liveblog-pagination-btn,
.liveblog-load-more {
    background: transparent;
    color: #000;
    border: none;
    border-bottom: 1px solid #000;
    padding: 4px 2px;
    cursor: pointer;
    font-size: 12px;
}

.liveblog-pagination-pages {
    color: #888;
    margin: 0 12px;
}

.liveblog-loader {
    text-align: center;
    color: #888;
    padding: 20px 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .mplb-liveblog-wrapper { padding: 0 16px; }
    .liveblog-editor-container { padding: 12px; }
    .liveblog-entry-text { font-size: 15px; }
    .liveblog-publish-btn,
    .liveblog-btn-primary { width: 100%; text-align: center; }
    .liveblog-entry .liveblog-meta { gap: 6px; }
    .liveblog-meta-time { margin-left: 0; width: 100%; }
}

/* ---------- v0.3b: hide duplicate pagination, calm update bar ---------- */
#wpcom-liveblog-container .liveblog-pagination:first-of-type {
    display: none;
}

.liveblog-update-number {
    font-family: -apple-system, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px;
    cursor: pointer;
}

/* ============================================================
   v0.4: oEmbed wrappers
   ============================================================ */

.mplb-embed {
    margin: 12px 0;
    max-width: 100%;
}

/* Responsive 16:9 video (YouTube, Vimeo, etc.) */
.mplb-embed--video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.mplb-embed--video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
}

/* Telegram post widget */
.mplb-embed--telegram {
    border-left: 3px solid #2AABEE;
    padding-left: 0;
    background: transparent;
}

/* Telegram channel link */
.mplb-embed--telegram-link {
    display: inline-block;
}

.mplb-telegram-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f0f8ff;
    border: 1px solid #2AABEE;
    color: #2AABEE;
    text-decoration: none;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 14px;
    transition: background 0.15s;
}

.mplb-telegram-link:hover {
    background: #e0f0ff;
}

.mplb-telegram-link__icon {
    font-size: 16px;
}

.mplb-telegram-link__name {
    font-weight: 600;
}

.mplb-telegram-link__label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Twitter/X embed */
.mplb-embed .twitter-tweet {
    margin: 0 !important;
}

/* Uploaded video (HTML5 player) */
.mplb-entry video,
.liveblog-entry-text video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 12px 0;
}

/* v0.7: hide theme's native comments section on liveblog posts —
   entries are already shown in the liveblog block above */
.liveblog-enabled #comments,
.liveblog-enabled .comments-area,
.liveblog-enabled #respond,
.liveblog-enabled .wp-block-comments,
.liveblog-enabled .wp-block-post-comments-form {
    display: none !important;
}

/* v0.6: Editor hint — clarify URL → embed behavior */
.liveblog-editor-container::after {
    content: 'Порада: YouTube посилання на окремому рядку — автоматично стає відео';
    display: block;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 11px;
    color: #aaa;
    padding: 4px 0 0;
    font-style: italic;
}