.noor-live {
    --live-ink: #183d32;
    --live-green: #18523f;
    --live-muted: #52695d;
    --live-line: #d7e1d4;
    color: var(--live-ink);
    direction: rtl;
    font: 400 16px/1.8 var(--noor-ui-font, Almarai, Tahoma, Arial, sans-serif);
    background: #fffef9;
    border: 1px solid var(--live-line);
    border-radius: 19px;
    box-shadow: 0 12px 34px #183d320b;
    box-sizing: border-box;
    margin: clamp(22px, 5vw, 58px) auto;
    max-width: min(680px, 100%);
    min-width: 0;
    padding: clamp(20px, 4.2vw, 44px);
    text-align: start;
}

.noor-live [hidden] {
    display: none !important;
}

.noor-live .noor-live-card {
    margin-block-start: clamp(18px, 3vw, 30px);
}

.noor-live h1,
.noor-live h2 {
    color: var(--live-ink);
    font: 800 clamp(26px, 4vw, 40px)/1.35 var(--noor-ui-font, Almarai, Tahoma, Arial, sans-serif);
    margin: 0 0 .55rem;
}

.noor-live p {
    color: var(--live-muted);
    margin: 0 0 .8rem;
}

.noor-live [data-live-join],
.noor-live [data-live-invite-box] {
    display: grid;
    gap: .6rem;
    margin-block: 1rem;
}

.noor-live [data-live-invite-box] {
    background: #f0f5ed;
    border: 1px solid var(--live-line);
    border-radius: 12px;
    padding: 14px;
}

.noor-live label {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.noor-live input {
    background: #fff;
    border: 1px solid #b5c9b8;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--live-ink);
    font: inherit;
    min-height: 48px;
    min-width: 0;
    padding: .55rem .8rem;
    width: 100%;
}

.noor-live [data-live-invite-url] {
    direction: ltr;
    font-size: 13px;
    text-align: left;
}

.noor-live [data-live-controls] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-block: 1rem;
}

.noor-live button {
    align-items: center;
    background: #f1f6ee;
    border: 1px solid #a9c1ad;
    border-radius: 8px;
    color: var(--live-ink);
    cursor: pointer;
    display: inline-flex;
    font: 700 14px/1.5 var(--noor-ui-font, Almarai, Tahoma, Arial, sans-serif);
    justify-content: center;
    min-height: 45px;
    padding: .55rem .9rem;
}

.noor-live [data-live-create],
.noor-live [data-live-mic],
.noor-live [type="submit"] {
    background: var(--live-green);
    border-color: var(--live-green);
    color: #fff;
}

.noor-live [data-live-end] {
    background: #fbf0ed;
    border-color: #d3b4a9;
    color: #752c23;
}

.noor-live button:hover:not(:disabled) {
    filter: brightness(.94);
}

.noor-live button:disabled {
    cursor: wait;
    opacity: .6;
}

.noor-live :focus-visible {
    outline: 3px solid #9a7534;
    outline-offset: 2px;
}

.noor-live [data-live-status],
.noor-live [data-live-peer] {
    border-radius: 8px;
    color: var(--live-ink);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.noor-live [data-live-status]:not(:empty) {
    background: #eef4ec;
    padding: 9px 12px;
}

.noor-live [data-live-status][data-tone="warning"] {
    background: #fff6db;
    color: #64481c;
}

.noor-live [data-live-status][data-tone="error"] {
    background: #f9eae6;
    color: #762a22;
}

.noor-live [data-live-status][data-tone="success"] {
    background: #e4f3e3;
    color: #20523d;
}

.noor-live audio[data-live-audio] {
    display: none;
}