/**
 * POSH 푸시 알림 — 앞쪽 화면
 *
 * 클래스에 전부 posh- 를 붙여 테마·다른 플러그인과 부딪히지 않게 한다.
 * 테마가 전역 div/p 여백을 걸어 두는 경우가 있어 안쪽을 한 번 씻어낸다.
 */

.posh-panel,
.posh-toggle-wrap {
    --posh-fg: #1f2328;
    --posh-muted: #626871;
    --posh-line: #dcdfe4;
    --posh-bg: #fff;
    --posh-accent: #1a73e8;
    --posh-accent-fg: #fff;
    --posh-danger: #d93025;

    font-family: inherit;
    color: var(--posh-fg);
}

.posh-panel div,
.posh-panel p,
.posh-panel ul,
.posh-panel li,
.posh-panel h3 {
    margin: 0;
    padding: 0;
}

.posh-panel ul,
.posh-panel li {
    list-style: none;
}

.posh-panel li:before {
    content: none;
}

/* 상자 */
.posh-panel {
    box-sizing: border-box;
    border: 1px solid var(--posh-line);
    border-radius: 12px;
    background: var(--posh-bg);
    padding: 18px 20px;
    max-width: 620px;
}

.posh-panel .posh-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 14px;
}

.posh-panel .posh-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.posh-panel .posh-row-main {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--posh-line);
}

.posh-panel .posh-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.posh-panel .posh-hint {
    font-size: 0.82rem;
    color: var(--posh-muted);
}

/* 종류 목록 */
.posh-panel .posh-types {
    margin: 14px 0 0;
}

.posh-panel .posh-type + .posh-type {
    margin-top: 10px;
}

.posh-panel .posh-type label {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 2px 10px;
    align-items: start;
    cursor: pointer;
}

.posh-panel .posh-type input {
    grid-row: span 2;
    margin: 3px 0 0;
    width: 16px;
    height: 16px;
    accent-color: var(--posh-accent);
}

.posh-panel .posh-type-label {
    font-weight: 600;
    line-height: 1.4;
}

.posh-panel .posh-type-desc {
    font-size: 0.82rem;
    color: var(--posh-muted);
    line-height: 1.45;
}

/* 단추 */
.posh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid var(--posh-accent);
    border-radius: 999px;
    background: var(--posh-accent);
    color: var(--posh-accent-fg);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.posh-btn:hover {
    opacity: 0.9;
}

.posh-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

/* 켜진 상태는 끄기 단추가 되므로 조용한 색으로 */
.posh-btn.is-on {
    background: transparent;
    color: var(--posh-fg);
    border-color: var(--posh-line);
}

.posh-btn-ghost {
    background: transparent;
    color: var(--posh-accent);
}

.posh-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--posh-line);
}

.posh-msg {
    font-size: 0.85rem;
    color: var(--posh-muted);
    line-height: 1.4;
}

.posh-msg.is-error {
    color: var(--posh-danger);
}

.posh-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.posh-panel-guest p {
    margin: 0;
    color: var(--posh-muted);
}

/* 어두운 화면 — 사이트 토글(body.dark-mode)과 기기 설정 양쪽 */
body.dark-mode .posh-panel,
body.dark-mode .posh-toggle-wrap {
    --posh-fg: #e6e6e6;
    --posh-muted: #9aa0a6;
    --posh-line: #3a3f45;
    --posh-bg: #23272e;
    --posh-accent: #4dabf7;
    --posh-accent-fg: #10131a;
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .posh-panel,
    body:not(.light-mode) .posh-toggle-wrap {
        --posh-fg: #e6e6e6;
        --posh-muted: #9aa0a6;
        --posh-line: #3a3f45;
        --posh-bg: #23272e;
        --posh-accent: #4dabf7;
        --posh-accent-fg: #10131a;
    }
}

@media (max-width: 600px) {
    .posh-panel {
        padding: 16px;
    }

    .posh-panel .posh-row {
        align-items: stretch;
        flex-direction: column;
    }

    .posh-panel .posh-row .posh-btn,
    .posh-actions .posh-btn {
        width: 100%;
    }
}


/* ─────────────────────────────────────────────
   허용 막대
   브라우저가 허용 창을 대신 눌러 버렸을 때만 나온다.

   자리: 화면 위쪽 가운데.
   오른쪽 아래는 실시간 채팅 단추, 왼쪽 아래는 CODA 단추가 쓰고 있어 비켜 둔다.
   ───────────────────────────────────────────── */
.posh-banner {
    --posh-fg: #1f2328;
    --posh-muted: #626871;
    --posh-line: #dcdfe4;
    --posh-bg: #fff;
    --posh-accent: #1a73e8;
    --posh-accent-fg: #fff;

    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 99991;
    box-sizing: border-box;
    width: min(440px, calc(100vw - 24px));
    padding: 14px 16px;
    border: 1px solid var(--posh-line);
    border-radius: 12px;
    background: var(--posh-bg);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    color: var(--posh-fg);
    font-family: inherit;
    transform: translate(-50%, -14px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.posh-banner.is-in {
    transform: translate(-50%, 0);
    opacity: 1;
}

.posh-banner .posh-banner-text {
    margin: 0 0 12px;
    padding: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    word-break: keep-all;
}

.posh-banner .posh-banner-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.posh-banner .posh-banner-no {
    padding: 8px 12px;
    border: 0;
    background: none;
    color: var(--posh-muted);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}

.posh-banner .posh-banner-no:hover {
    color: var(--posh-fg);
}

.posh-banner .posh-banner-yes {
    min-height: 36px;
    padding: 8px 18px;
    font-size: 0.88rem;
}

body.dark-mode .posh-banner {
    --posh-fg: #e6e6e6;
    --posh-muted: #9aa0a6;
    --posh-line: #3a3f45;
    --posh-bg: #23272e;
    --posh-accent: #4dabf7;
    --posh-accent-fg: #10131a;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
    .posh-banner {
        top: 10px;
        padding: 14px;
    }

    .posh-banner .posh-banner-yes {
        flex: 1;
    }
}