/* ============================================================
   PREMIUM ULTRALIGHT RESPONSIVE ENGINE (order-ui.css)
   ============================================================ */

:root {
    --fiverr-bg: #060913;
    --fiverr-card: #0c1222;
    --fiverr-border: rgba(255, 255, 255, 0.05);
    --fiverr-accent-blue: #0070f3;
    --fiverr-accent-green: #00df89;
    --fiverr-text-main: #f8fafc;
    --fiverr-text-muted: #94a3b8;
    --glow-blue: rgba(0, 112, 243, 0.15);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── INITIAL LOAD SPINNER OVERLAY ── */
.oms-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--fiverr-bg);
    text-align: center;
    transition: opacity 0.25s ease;
}

.oms-loading-screen.oms-loading-hidden {
    opacity: 0;
    pointer-events: none;
}

.oms-loading-spinner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--fiverr-border);
    border-top-color: var(--fiverr-accent-blue);
    border-right-color: var(--fiverr-accent-blue);
    animation: oms-spin 0.85s linear infinite;
    box-shadow: 0 0 24px var(--glow-blue);
}

.oms-loading-text {
    color: var(--fiverr-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0;
}

@keyframes oms-spin {
    to { transform: rotate(360deg); }
}

body.fiverr-oms-body {
    background-color: var(--fiverr-bg);
    margin: 0;
    padding: 0 0 40px 0;
    color: var(--fiverr-text-main);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* ── DUPLICATED USER DASHBOARD TOP NAVIGATION HEADER BAR ── */
.studio-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #090e1a;
    border-bottom: 1px solid var(--fiverr-border);
    padding: 16px 40px;
    margin-bottom: 30px;
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.logo-orb {
    width: 14px;
    height: 14px;
    background: var(--fiverr-accent-blue);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--fiverr-accent-blue);
}
.brand-text {
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 1rem;
}
.text-accent { color: var(--fiverr-accent-blue); }
.nav-actions-area { display: flex; align-items: center; gap: 24px; }
.system-status-indicator { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; color: var(--fiverr-text-muted); }
.pulse-dot { width: 6px; height: 6px; background: var(--fiverr-accent-green); border-radius: 50%; animation: pulse-glow 2s infinite; }

.nav-back-button {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--fiverr-border);
    color: var(--fiverr-text-main);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
}
.nav-back-button:hover {
    background: var(--fiverr-accent-blue);
    border-color: var(--fiverr-accent-blue);
    box-shadow: 0 4px 12px var(--glow-blue);
}

/* ── LAYOUT MAIN FRAME (RESPONSIVE GRID MIX) ── */
.fiverr-oms-wrapper {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
}

/* ── RESPONSIVE MEDIA QUERIES (FLUID LAYOUT CONTROL) ── */
@media (max-width: 1024px) {
    .fiverr-oms-wrapper {
        grid-template-columns: 1fr;
    }
    .fiverr-oms-right-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
}
@media (max-width: 640px) {
    .studio-nav-bar { padding: 16px 20px; }
    .system-status-indicator { display: none; }
    .fiverr-oms-right-sidebar { grid-template-columns: 1fr; }
    .fiverr-tab-nav { gap: 4px; overflow-x: auto; white-space: nowrap; }
    .fiverr-countdown-grid { gap: 10px; }
}

/* ── ANIMATED COMPONENT DECK CARDS ── */
.fiverr-side-card, .fiverr-main-panel, .fiverr-banner-alert, .fiverr-chat-box {
    background: var(--fiverr-card);
    border: 1px solid var(--fiverr-border);
    border-radius: 12px;
    padding: 24px;
    transition: var(--transition-smooth);
}

.hover-lift:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Tab Headers Nav Struct */
.fiverr-tab-nav {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--fiverr-border);
    padding-bottom: 2px;
    margin-bottom: 24px;
}
.fiverr-tab-btn {
    background: transparent;
    border: none;
    color: var(--fiverr-text-muted);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 12px 4px;
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
}
.fiverr-tab-btn:hover { color: var(--fiverr-text-main); }
.fiverr-tab-btn.active { color: var(--fiverr-accent-blue); }
.fiverr-tab-btn.active::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: var(--fiverr-accent-blue); border-radius: 4px; animation: slide-stretch 0.3s ease;
}

/* Chat Module UI System Override */
.fiverr-chat-box {
    display: flex;
    flex-direction: column;
    height: 520px;
    padding: 0;
    overflow: hidden;
}
.fiverr-chat-messages-scroll {
    flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; background: #080d1a;
}
.fiverr-chat-bubble-container {
    display: flex; flex-direction: column; max-width: 70%; padding: 14px 18px; border-radius: 12px; background: var(--fiverr-card); border: 1px solid var(--fiverr-border); animation: message-pop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
.fiverr-chat-bubble-container.me { align-self: flex-end; background: #0c1730; border-right: 4px solid var(--fiverr-accent-blue); transform-origin: right bottom; }
.fiverr-chat-bubble-container.them { align-self: flex-start; border-left: 4px solid var(--fiverr-accent-green); transform-origin: left bottom; }

.fiverr-chat-dock-input-bar { padding: 16px 24px; background: var(--fiverr-card); border-top: 1px solid var(--fiverr-border); display: flex; align-items: center; gap: 16px; }
.fiverr-chat-dock-input-bar input { flex: 1; background: #060913; border: 1px solid var(--fiverr-border); padding: 14px 18px; border-radius: 8px; color: var(--fiverr-text-main); font-size: 0.9rem; transition: var(--transition-smooth); }
.fiverr-chat-dock-input-bar input:focus { outline: none; border-color: var(--fiverr-accent-blue); box-shadow: 0 0 14px var(--glow-blue); }

.fiverr-chat-circle-action-btn { background: var(--fiverr-accent-blue); border: none; width: 46px; height: 46px; border-radius: 8px; color: white; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: var(--transition-smooth); }
.fiverr-chat-circle-action-btn:hover { transform: scale(1.05); background: #1d4ed8; box-shadow: 0 4px 12px var(--glow-blue); }

/* Countdown Digits View Grid */
.fiverr-countdown-grid { display: flex; align-items: center; justify-content: space-between; text-align: center; background: #080d19; padding: 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.02); }
.fiverr-time-unit-box span { font-size: 1.6rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--fiverr-text-main); }
.fiverr-time-unit-box label { font-size: 0.7rem; color: var(--fiverr-text-muted); text-transform: uppercase; font-weight: 700; margin-top: 4px; display: block; }
.fiverr-time-divider { color: rgba(255,255,255,0.05); font-weight: 300; font-size: 1.2rem; }

/* Invoicing Structural Grid Tables */
.fiverr-invoice-table { width: 100%; border-collapse: collapse; }
.fiverr-invoice-table th { text-align: left; padding: 12px; font-size: 0.75rem; color: var(--fiverr-text-muted); text-transform: uppercase; border-bottom: 1px solid var(--fiverr-border); letter-spacing: 0.5px; }
.fiverr-invoice-table td { padding: 20px 12px; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.02); }
.fiverr-invoice-table tr.total-row td { border-top: 2px solid var(--fiverr-border); font-weight: 800; font-size: 1.1rem; color: var(--fiverr-text-main); }

/* Active Pipeline Tracking Stepper Links Line */
.fiverr-stepper-container { display: flex; flex-direction: column; gap: 20px; position: relative; padding-left: 28px; }
.fiverr-stepper-container::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: rgba(255,255,255,0.05); }
.fiverr-step-node { position: relative; font-size: 0.85rem; color: var(--fiverr-text-muted); padding-left: 4px; transition: var(--transition-smooth); }
.fiverr-step-node::before { content: ''; position: absolute; left: -26px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: #1e293b; border: 2px solid var(--fiverr-bg); transition: var(--transition-smooth); z-index: 5; }
.fiverr-step-node.done { color: var(--fiverr-text-main); font-weight: 600; }
.fiverr-step-node.done::before { background: var(--fiverr-accent-green); box-shadow: 0 0 10px rgba(0, 223, 137, 0.4); }

/* Banner Alerts */
.fiverr-banner-alert { display: flex; gap: 16px; align-items: flex-start; border-left: 4px solid var(--fiverr-accent-blue); }
.fiverr-banner-circle-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,112,243,0.1); color: var(--fiverr-accent-blue); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }

/* ── ANIMATION KEYFRAME LIBRARIES ── */
@keyframes pulse-glow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.5; } }
@keyframes slide-stretch { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes message-pop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.animate-fade-in { animation: message-pop 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

/* ── DELIVERY ACTION BUTTONS ── */
.fiverr-delivery-btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}
.fiverr-delivery-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 8px;
    border-radius: 8px;
    border: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
    letter-spacing: 0.3px;
}
.fiverr-btn-icon {
    font-size: 1rem;
    line-height: 1;
}
.fiverr-accept-btn {
    background: rgba(0, 223, 137, 0.1);
    color: var(--fiverr-accent-green);
    border: 1px solid rgba(0, 223, 137, 0.25);
}
.fiverr-accept-btn:hover {
    background: var(--fiverr-accent-green);
    color: #020c0a;
    border-color: var(--fiverr-accent-green);
    box-shadow: 0 4px 16px rgba(0, 223, 137, 0.3);
    transform: translateY(-2px);
}
.fiverr-revision-btn {
    background: rgba(249, 115, 22, 0.08);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.2);
}
.fiverr-revision-btn:hover {
    background: #f97316;
    color: #fff;
    border-color: #f97316;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.3);
    transform: translateY(-2px);
}

.oms-error-screen { text-align: center; padding: 40px; background: var(--fiverr-card); border: 1px solid var(--fiverr-border); border-radius: 16px; max-width: 440px; margin: 15vh auto; }
.error-return-btn { background: var(--fiverr-accent-blue); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; margin-top: 16px; transition: var(--transition-smooth); }
.error-return-btn:hover { background: #1d4ed8; }
/* ══════════════════════════════════════════════════
   IMPROVED CHAT — grouped messages + profile pics
   ══════════════════════════════════════════════════ */

/* Kill the old timestamp everywhere */
.fiverr-chat-meta-time { display: none !important; }

/* Group wrapper */
.das-msg-group {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 20px;
    animation: message-pop 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
.das-group-me    { flex-direction: row-reverse; }
.das-group-admin { flex-direction: row; }

/* Avatar */
.das-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    overflow: hidden;
}
.das-avatar-me {
    background: linear-gradient(135deg, #0070f3, #1d4ed8);
    color: #fff;
    box-shadow: 0 0 14px rgba(0,112,243,0.4);
    border: 2px solid rgba(0,112,243,0.4);
}
.das-avatar-admin {
    background: #0c1222;
    border: 2px solid rgba(0,223,137,0.25);
    padding: 0;
}
.das-avatar-admin img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Group body */
.das-group-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 65%;
}
.das-group-me    .das-group-body { align-items: flex-end; }
.das-group-admin .das-group-body { align-items: flex-start; }

/* Sender name */
.das-sender-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
    padding: 0 6px;
}
.das-group-me    .das-sender-name { color: #60a5fa; text-align: right; }
.das-group-admin .das-sender-name { color: #00df89; }

/* Bubble */
.das-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.55;
    word-break: break-word;
}
.das-bubble-me {
    background: linear-gradient(135deg, #0c1a40, #0e2050);
    border: 1px solid rgba(0,112,243,0.3);
    border-bottom-right-radius: 4px;
    color: #dbeafe;
}
.das-bubble-admin {
    background: #0c1222;
    border: 1px solid rgba(0,223,137,0.15);
    border-bottom-left-radius: 4px;
    color: #d1fae5;
}
.das-bubble-text { margin: 0; }

/* ==========================================
   DELIVERY ROLLOUT STRIP
========================================== */

.delivery-rollout-strip{
    display:flex;
    align-items:center;
    gap:12px;

    margin:0 auto 24px auto;
    max-width:1340px;

    padding:16px 24px;

    background:linear-gradient(
        90deg,
        rgba(0,223,137,.15),
        rgba(0,112,243,.15)
    );

    border:1px solid rgba(0,223,137,.25);
    border-radius:12px;

    color:#fff;
    font-weight:600;

    animation:deliverySlideDown .45s ease;
}

.delivery-icon{
    font-size:1.3rem;
}

@keyframes deliverySlideDown{
    from{
        opacity:0;
        transform:translateY(-20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.delivery-rollout-card{
    margin-top:24px;
    margin-bottom:20px;

    background:rgba(0,223,137,.08);
    border:1px solid rgba(0,223,137,.25);

    border-left:4px solid #00df89;

    border-radius:12px;

    padding:16px 18px;

    animation:deliveryAppear .35s ease;
}

.delivery-rollout-card strong{
    display:block;
    color:#00df89;
    font-size:15px;
    margin-bottom:4px;
}

.delivery-rollout-card p{
    margin:0;
    color:#cbd5e1;
    font-size:14px;
    line-height:1.5;
}

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


.delivery-rollout-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.delivery-rollout-content{
    display:none;
    margin-top:15px;
    padding-top:15px;
    border-top:1px solid rgba(0,223,137,.2);
}

.delivery-rollout-content.open{
    display:block;
}

/* ── COMPLETION ROLLOUT STRIP (purple) ── */
.completion-rollout-card {
    margin-top: 24px;
    margin-bottom: 20px;

    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-left: 4px solid #8b5cf6;

    border-radius: 12px;
    padding: 16px 18px;

    animation: deliveryAppear .35s ease;
}

.completion-rollout-card strong {
    display: block;
    color: #a78bfa;
    font-size: 15px;
    margin-bottom: 4px;
}

.completion-rollout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.completion-rollout-header strong {
    color: #a78bfa;
}

.completion-rollout-content {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.completion-rollout-content.open {
    display: block;
}

/* ── REVISION ROLLOUT STRIP (amber/orange) ── */
.revision-rollout-card {
    margin-top: 24px;
    margin-bottom: 20px;

    background: rgba(249, 115, 22, 0.07);
    border: 1px solid rgba(249, 115, 22, 0.28);
    border-left: 4px solid #f97316;

    border-radius: 12px;
    padding: 16px 18px;

    animation: deliveryAppear .35s ease;
}

.revision-rollout-card strong {
    display: block;
    color: #fb923c;
    font-size: 15px;
    margin-bottom: 4px;
}

.revision-rollout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.revision-rollout-header strong {
    color: #fb923c;
}

.revision-rollout-content {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(249, 115, 22, 0.2);
}

.revision-rollout-content.open {
    display: block;
}


/* ── MODAL OVERLAY ── */
.da-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    animation: modal-fade-in 0.2s ease;
    margin: 0;
    padding: 0;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.da-modal {
    width: 480px;
    max-width: 95vw;
    background: #0c1222;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 32px 28px 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    animation: modal-slide-up 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    box-sizing: border-box;
}

@keyframes modal-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Icon badge */
.da-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 18px;
}
.da-modal-icon--accept {
    background: rgba(0, 223, 137, 0.12);
    color: var(--fiverr-accent-green);
    border: 1px solid rgba(0, 223, 137, 0.25);
    box-shadow: 0 0 20px rgba(0, 223, 137, 0.15);
}
.da-modal-icon--revision {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.22);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.12);
}

/* Title + desc */
.da-modal-title {
    margin: 0 0 8px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fiverr-text-main);
}
.da-modal-desc {
    margin: 0 0 20px 0;
    font-size: 0.875rem;
    color: var(--fiverr-text-muted);
    line-height: 1.6;
}

/* Inputs */
.da-modal-input,
.da-modal-textarea {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    background: #060913;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--fiverr-text-main);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.da-modal-input:focus,
.da-modal-textarea:focus {
    outline: none;
    border-color: var(--fiverr-accent-blue);
    box-shadow: 0 0 12px var(--glow-blue);
}
.da-modal-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Action row */
.da-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
}

.da-modal-btn {
    padding: 11px 22px;
    border-radius: 8px;
    border: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
}
.da-modal-btn--cancel {
    background: rgba(255,255,255,0.04);
    color: var(--fiverr-text-muted);
    border: 1px solid rgba(255,255,255,0.08);
}
.da-modal-btn--cancel:hover {
    background: rgba(255,255,255,0.08);
    color: var(--fiverr-text-main);
}
.da-modal-btn--confirm {
    background: var(--fiverr-accent-green);
    color: #020c0a;
    box-shadow: 0 4px 14px rgba(0, 223, 137, 0.25);
}
.da-modal-btn--confirm:hover {
    background: #00c97a;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 223, 137, 0.35);
}
.da-modal-btn--revision {
    background: #f97316;
    color: #fff;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25);
}
.da-modal-btn--revision:hover {
    background: #ea6c0a;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
}
/* ══════════════════════════════════════════════════
   STATUS PILLS — Revision / Delivered / Completed
   ══════════════════════════════════════════════════ */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
    transition: all 0.25s ease;
}

/* ── In Progress – blue pulse ── */
.status-pill--inprogress {
    background: rgba(0, 112, 243, 0.12);
    color: #60a5fa;
    border-color: rgba(0, 112, 243, 0.3);
    box-shadow: 0 0 10px rgba(0, 112, 243, 0.15);
}
.status-pill--inprogress::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.8);
    animation: pulse-glow 2s infinite;
}

/* ── Delivered – green with checkmark ── */
.status-pill--delivered {
    background: rgba(0, 223, 137, 0.12);
    color: #00df89;
    border-color: rgba(0, 223, 137, 0.35);
    box-shadow: 0 0 10px rgba(0, 223, 137, 0.15);
}
.status-pill--delivered::before {
    content: '✓';
    font-size: 0.65rem;
    font-weight: 900;
    color: #00df89;
}

/* ── Revision – amber/orange ── */
.status-pill--revision {
    background: rgba(249, 115, 22, 0.12);
    color: #fb923c;
    border-color: rgba(249, 115, 22, 0.35);
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.15);
}
.status-pill--revision::before {
    content: '↺';
    font-size: 0.75rem;
    font-weight: 900;
    color: #fb923c;
}

/* ── Completed – purple/violet ── */
.status-pill--completed {
    background: rgba(139, 92, 246, 0.14);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.18);
}
.status-pill--completed::before {
    content: '★';
    font-size: 0.65rem;
    color: #a78bfa;
}

/* ── Cancelled – red/rose ── */
.status-pill--cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}
.status-pill--cancelled::before {
    content: '✕';
    font-size: 0.65rem;
    color: #f87171;
}

/* ── Default fallback ── */
.status-pill--default {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.2);
}

/* ══════════════════════════════════════════════════
   ADMIN ORDER CARD STATUS PILLS  (aoc-pill)
   Same visual language as .status-pill on the client side.
   ══════════════════════════════════════════════════ */

.aoc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
}

.aoc-pill--submitted {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.25);
}

.aoc-pill--accepted {
    background: rgba(0, 112, 243, 0.1);
    color: #60a5fa;
    border-color: rgba(0, 112, 243, 0.25);
}

.aoc-pill--inprogress {
    background: rgba(0, 112, 243, 0.12);
    color: #60a5fa;
    border-color: rgba(0, 112, 243, 0.3);
    box-shadow: 0 0 8px rgba(0, 112, 243, 0.12);
}
.aoc-pill--inprogress::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #60a5fa;
    animation: pulse-glow 2s infinite;
}

/* ── In Revision — amber/orange ── */
.aoc-pill--revision {
    background: rgba(249, 115, 22, 0.12);
    color: #fb923c;
    border-color: rgba(249, 115, 22, 0.35);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.12);
}
.aoc-pill--revision::before {
    content: '↺';
    font-size: 0.7rem;
    font-weight: 900;
}

/* ── Delivered — green ── */
.aoc-pill--delivered {
    background: rgba(0, 223, 137, 0.12);
    color: #00df89;
    border-color: rgba(0, 223, 137, 0.35);
    box-shadow: 0 0 8px rgba(0, 223, 137, 0.12);
}
.aoc-pill--delivered::before {
    content: '✓';
    font-size: 0.65rem;
    font-weight: 900;
}

/* ── Completed — purple ── */
.aoc-pill--completed {
    background: rgba(139, 92, 246, 0.14);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.15);
}
.aoc-pill--completed::before {
    content: '★';
    font-size: 0.6rem;
}

/* ── Cancelled — red ── */
.aoc-pill--cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.25);
}
.aoc-pill--cancelled::before {
    content: '✕';
    font-size: 0.6rem;
}
/* ── Sidebar Gig Info Card — Redesigned ── */
.fiverr-gig-info-block {
    padding: 0 !important;
    overflow: hidden;
}

.gig-card-banner {
    position: relative;
    height: 72px;
    background: linear-gradient(135deg, rgba(99,102,241,0.25) 0%, rgba(139,92,246,0.2) 50%, rgba(59,130,246,0.15) 100%);
    border-bottom: 1px solid rgba(139,92,246,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gig-card-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(139,92,246,0.2) 0%, transparent 70%);
}

.gig-card-accent-line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #818cf8, #a78bfa, transparent);
    opacity: 0.8;
}

.gig-card-icon {
    font-size: 2rem;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 12px rgba(139,92,246,0.6));
}

.gig-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gig-card-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #6366f1;
    text-transform: uppercase;
}

.gig-card-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    line-height: 1.3;
    word-break: break-word;
    letter-spacing: -0.2px;
}

.logo-img {
    height: 48px;
    max-width: 320px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ══════════════════════════════════════════════════
   FIX: Client-side "me" chat bubble rendering as a tall,
   narrow card instead of a normal compact bubble.

   Append this AFTER order-ui.css (it overrides the
   .das-group-me / .das-group-body / .das-bubble rules).
   ══════════════════════════════════════════════════ */

/* Root cause: .das-group-me is `flex: 0 0 auto` (sized to its
   own content), but its child .das-group-body sets
   `max-width: 65%` — a percentage of a parent whose own width
   is content-based. That's circular, so the browser can't
   resolve it and instead collapses the bubble to a near-zero
   width, which forces the text to wrap and the bubble to
   stretch vertically instead of laying out as a normal
   single/few-line chat bubble. */

.das-group-body {
    /* Stop depending on a percentage of an auto-sized parent.
       Size to content instead, capped by the viewport-relative
       chat width so long messages still wrap sensibly. */
    width: fit-content;
    max-width: min(65%, 420px);
    min-width: 60px;
}

.das-bubble-wrap {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;
}

.das-bubble {
    display: block;
    width: fit-content;
    max-width: 100%;
    height: auto;      /* kill any inherited stretch height */
    flex: 0 0 auto;
}

/* Belt-and-suspenders: make sure nothing upstream stretches
   the bubble's cross-axis (height) inside the row-flex groups */
.das-msg-group,
.das-group-me,
.das-group-admin {
    align-items: flex-end; /* keep bottom-alignment, no stretch */
}

/* ══════════════════════════════════════════════════
   FIX 2: avatar rendering on the wrong side of "me"
   bubbles, and missing reply/edit/delete buttons.
   Append after the previous chat-bubble-fix block.
   ══════════════════════════════════════════════════ */

/* order-page-controller.js emits [ .das-group-body, avatar ]
   in that DOM order for "me" messages. row-reverse was flipping
   that so the avatar landed on the LEFT instead of the right.
   Plain row order matches the actual DOM and puts the avatar
   back on the right, after the bubble. */
.das-group-me {
    flex-direction: row;
    justify-content: flex-end;
}

/* Reply / Edit / Delete action row — controller.js outputs
   .chat-msg-actions-row / .chat-msg-action-btn but neither class
   existed in the stylesheet, so they rendered with no size. */
.chat-msg-actions-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Reveal the action row when hovering the message */
.das-bubble-wrap:hover .chat-msg-actions-row {
    opacity: 1;
}

.chat-msg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--fiverr-text-muted);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.chat-msg-action-btn:hover {
    background: var(--fiverr-accent-blue);
    color: #fff;
    border-color: var(--fiverr-accent-blue);
    box-shadow: 0 2px 8px var(--glow-blue);
}