/* =========================
   THEME TOKENS
   ========================= */

:root{
    /* typography / motion */
    --font-ui: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --ease: cubic-bezier(.2,.8,.2,1);
    
    /* core surfaces */
    --bg: linear-gradient(#40484f, #41454f, #30373c);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.75);
    
    --glass: rgba(255,255,255,.07);
    --glass-strong: rgba(255,255,255,.10);
    --ink: rgba(0,0,0,.10);
    
    --border: rgba(255,255,255,.18);
    --border-soft: rgba(255,255,255,.12);
    
    --shadow-lg: 0 20px 60px rgba(0,0,0,.35);
    --shadow-md: 0 14px 40px rgba(0,0,0,.35);
    --shadow-sm: 0 12px 26px rgba(0,0,0,.18);
    
    --btn-bg: rgba(255,255,255,.12);
    --btn-bg-hover: rgba(255,255,255,.16);
    --btn-border: rgba(255,255,255,.14);
    
    --input-bg: rgba(0,0,0,.18);
    --input-border: rgba(255,255,255,.18);
    --input-text: rgba(255,255,255,.92);
    --placeholder: rgba(255,255,255,.65);
    
    /* overlay */
    --overlay: rgba(0,0,0,.35);
    
    /* backdrop */
    --blur: blur(14px) saturate(140%);
    
    /* menu deco opacity (so we can tune per theme) */
    --menu-deco-a: .25;
    --menu-deco-b: .40;
    
    /* backMat defaults */
    --mat-opacity: 0;
    --mat-bg: radial-gradient(#a3cdec 0.55px, rgba(0,0,0,0) 0.55px);
    --mat-size: 11px 11px;
}

/* Light theme */
html[data-theme="light"]{
    --bg: linear-gradient(#f2f5f7, #e8edf1, #dde4ea);
    
    --text: rgba(15,18,20,.92);
    --muted: rgba(15,18,20,.72);
    
    --glass: rgba(255,255,255,.55);
    --glass-strong: rgba(255,255,255,.70);
    --ink: rgba(0,0,0,.05);
    
    --border: rgba(0,0,0,.10);
    --border-soft: rgba(0,0,0,.08);
    
    --shadow-lg: 0 20px 60px rgba(0,0,0,.18);
    --shadow-md: 0 14px 40px rgba(0,0,0,.16);
    --shadow-sm: 0 12px 26px rgba(0,0,0,.12);
    
    --btn-bg: rgba(0,0,0,.06);
    --btn-bg-hover: rgba(0,0,0,.09);
    --btn-border: rgba(0,0,0,.10);
    
    --input-bg: rgba(255,255,255,.70);
    --input-border: rgba(0,0,0,.10);
    --input-text: rgba(15,18,20,.92);
    --placeholder: rgba(15,18,20,.55);
    
    --overlay: rgba(255,255,255,.45);
    
    /* backMat for light */
    --mat-opacity: .80;
    --mat-bg: radial-gradient(#4ca9bf 0.5px, #f4f4f4 0.5px);
    --mat-size: 10px 10px;
    
    --menu-deco-a: .16;
    --menu-deco-b: .22;
}

/* Classic theme */
html[data-theme="classic"]{
    --bg: none; /* body uses image */
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.75);
    
    /* classic wants a slightly “warmer” glass to sit on photo */
    --glass: rgba(255,255,255,.10);
    --glass-strong: rgba(255,255,255,.14);
    --ink: rgba(0,0,0,.16);
    
    --border: rgba(255,255,255,.20);
    --border-soft: rgba(255,255,255,.14);
    
    --shadow-lg: 0 24px 70px rgba(0,0,0,.45);
    --shadow-md: 0 16px 46px rgba(0,0,0,.40);
    --shadow-sm: 0 12px 26px rgba(0,0,0,.25);
    
    --btn-bg: rgba(255,255,255,.12);
    --btn-bg-hover: rgba(255,255,255,.18);
    --btn-border: rgba(255,255,255,.16);
    
    --input-bg: rgba(0,0,0,.22);
    --input-border: rgba(255,255,255,.20);
    --input-text: rgba(255,255,255,.92);
    --placeholder: rgba(255,255,255,.60);
    
    --overlay: rgba(0,0,0,.30);
    
    /* backMat for classic */
    --mat-opacity: 1;
    --mat-bg: radial-gradient(#626262db 0.55px, rgba(47,47,47,.75) 0.55px);
    --mat-size: 11px 11px;
    
    --menu-deco-a: .30;
    --menu-deco-b: .42;
}


/* ======== STYLES =========*/
html { height: 100%; width: 100%; }

body{
    width: 100%;
    height: 100%;
    background: var(--bg);
    margin: 0;
    overflow: hidden;
    transition: background .3s var(--ease), color .3s var(--ease);
    font-family: var(--font-ui);
    color: var(--text);
}

html[data-theme="classic"] body{
    background-image: url('https://email.fabri.cc/imgs/fabric-mail-moose-bg-1.jpg');
    background-size: cover;
    background-position: center;
}

.backMat{
    width: 100%;
    height: 100%;
    opacity: var(--mat-opacity);
    background-image: var(--mat-bg);
    background-size: var(--mat-size);
    pointer-events: none;
    transition: opacity .3s var(--ease);
}

/* =========================
   THEME LOADER (during theme switch)
   ========================= */

html.theme-loading .backMat{
    opacity: 1 !important;
    background: rgba(90, 90, 90, 0.85) !important; /* grey wash */
    background-image: none !important;
}

/* spinner */
html.theme-loading .backMat::after{
    content: "";
    position: fixed;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-left: -21px;
    margin-top: -21px;
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.22);
    border-top-color: rgba(255,255,255,.92);
    animation: deskSpin .75s linear infinite;
    z-index: 9999;
    pointer-events: none;
}

@keyframes deskSpin{
    to{ transform: rotate(360deg); }
}

/* AUTH overlay */
.authSection{
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    z-index: 5000;
    background: var(--overlay);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    }

.authCard{
    width: min(420px, 92vw);
    border-radius: 18px;
    padding: 18px;
    background: var(--glass);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

.authTitle{ margin: 0 0 12px 0; font-size: 18px; letter-spacing: .2px; }

.authLabel{
    display:block;
    font-size: 12px;
    opacity: .85;
    margin-top: 10px;
    margin-bottom: 6px;
}

.authCard input{
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    outline: none;
    box-sizing: border-box;
}

.authCard input::placeholder{ color: var(--placeholder); }

.authBtns{
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.authBtns{ display:flex; gap:10px; margin-top:12px; }

.authBtns button, .googleBtn{
    flex: 1;
    border: 1px solid var(--btn-border);
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    background: var(--btn-bg);
    color: var(--text);
    transition: transform .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease);
}

.authBtns button:hover, .googleBtn:hover{
    transform: translateY(-1px);
    background: var(--btn-bg-hover);
}

.googleBtn{ margin-top:10px; width:100%; }

.authFinePrint{ margin:12px 0 0 0; font-size:12px; color: var(--muted); }

/* Alert toast */
.alertDiv{
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    z-index: 6000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--glass-strong);
    color: var(--text);
    border: 1px solid var(--border);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s var(--ease);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}

.alertDiv.showAlert{ opacity: 1; pointer-events: auto; }

#closeAlert{
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
}

.logoutBtn{
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 4000;
    border: 1px solid var(--btn-border);
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--btn-bg);
    color: var(--text);
    cursor: pointer;
}

.desktop{ position: fixed; inset: 0; }

.dock{
    position: fixed;
    left: 14px;
    bottom: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 2000;
}

.dockApps button{ margin-right: 8px; }   

.dockTray{
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 18px;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s var(--ease), opacity .18s var(--ease);
}

body.dock-open .dockTray{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.menuClick{
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    border-radius: 14px;
    cursor: pointer;
    padding: 10px 12px;
    transition: transform .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease);
}

.menuClick:hover{
    transform: translateY(-1px);
    background: var(--btn-bg-hover);
}

/* reveal tray */
body.dock-open .dockTray{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* touch devices: tray always visible */
@media (max-width: 860px){
    .dockTray{
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .dockHotZone{ display:none; }
}

.menu{
    position: absolute;
    height: calc(100% - 110px);
    bottom: 0;
    width: min(260px, 92vw);
    transform: translate(-100%, 100%);
    transition: transform .28s var(--ease);
    background: var(--glass);
    border-right: .6px solid var(--border);
    box-shadow: -18px 0 40px rgba(0,0,0,.25);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    overflow: hidden;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 18px;
    border-top: .5px solid var(--border-soft);
    z-index: 1900;
}

.menu.is-open{ transform: translate(0,0); }

.menu::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--menu-deco-a);
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.35), transparent 50%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) .25px, rgba(0,0,0,.03) .5px, rgba(255,255,255,0) .5px),
        repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) .5px, rgba(0,0,0,.02) .75px, rgba(255,255,255,0) 1.7px);
    mix-blend-mode: overlay;
}

.menu::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--menu-deco-b);
    background:
        linear-gradient(180deg, rgba(255,255,255,.22), transparent 22%),
        linear-gradient(90deg, rgba(255,255,255,.16), transparent 30%);
}

/* Fallback if backdrop-filter isn’t supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.menu {
		background: rgba(30,30,30,.72); /* or rgba(255,255,255,.18) depending on your theme */
	}
}

.appIcon {
    width: 30px;
    height: 30px;
}

/* --------- BOPS (windows) ---------- */
.bop{
    position: absolute;
    width: 520px;
    height: 420px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--glass);
    border: 1px solid var(--border);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow-md);
    color: var(--text);
}

html[data-theme="classic"] .bop{
  background: var(--glass-strong);
}

.bop.is-min{ display: none; }

.bopHeader{
    height: 44px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 0 10px;
    cursor: grab;
    user-select: none;
    background: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.04));
    border-bottom: 1px solid var(--border-soft);
}

.bopHeader:active{ cursor: grabbing; }

.bopTitle{ font-size: 13px; opacity: .92; color: var(--text); }

.bopBtns button{
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    border-radius: 10px;
    padding: 6px 10px;
    margin-left: 6px;
    cursor: pointer;
}

.bopBody{
    height: calc(100% - 44px);
}

/* panel layouts */
.bopBody.panels-1{ display:block; }
.bopBody.panels-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
}
.bopBody.panels-3{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* iFrame fills a panel */
.bopPanel, .bopPanel iframe{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 0;
}

.shortcut {
    display:none;
}

/* =========================
   MENU — PREMIUM ACCORDION
   ========================= */

.menuInner{
    position: relative;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 14px 6px 16px 8px;
    gap: 12px;
    z-index: 2; /* above ::before/::after */
}

/* top title row */
.menuInner h3{ margin:0; font-size:13px; letter-spacing:.25px; opacity:.92; color: var(--text); }

/* optional "search / quick actions" area */
.menuTopRow{
    display: flex;
    gap: 10px;
    align-items: center;
}

.menuSearch{
    flex: 1;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--btn-border);
    background: var(--input-bg);
    color: var(--input-text);
    outline: none;
}
.menuSearch::placeholder{ color: var(--placeholder); }

.menuPills{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.menuPill{
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: transform .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease);
}

.menuPill:hover{
    transform: translateY(-1px);
    background: var(--btn-bg-hover);
    border-color: var(--border);
}

/* scroll area for app list */
.menuScroll{
    overflow: auto;
    padding-right: 15px;
    height: 100%;
    width: calc(100% + 8px);
    box-sizing: border-box;
}

.menuScroll::-webkit-scrollbar{ width: 10px; }
.menuScroll::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.12);
    border: 3px solid rgba(0,0,0,0);
    background-clip: padding-box;
    border-radius: 999px;
}
.menuScroll::-webkit-scrollbar-track{ background: transparent; }

/* accordion blocks */
.acc{
    border: .5px solid var(--border-soft);
    background: var(--glass);
    border-radius: 18px;
    overflow: hidden;
    /* box-shadow: var(--shadow-sm); */
}

.accHeader{
    width: 100%;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px;
    border: 0;
    cursor: pointer;
    background: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.01));
    color: var(--text);
}

.accChevron{
    width: 28px;
    height: 28px;
    border-radius: 12px;
    display:grid;
    place-items:center;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    transition: transform .18s var(--ease);
}

.accHeader .accTitle{
    display:flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.accHeader .accTitle strong{
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
}

.accHeader .accTitle span{
    font-size: 11px;
    opacity: .75;
}

.acc[aria-expanded="true"] .accChevron{
    transform: rotate(90deg);
}

.accPanel{
    max-height: 0;
    overflow: hidden;
    transition: all .22s var(--ease);
    border-top: 0px solid var(--border-soft);
}

.acc[aria-expanded="true"] .accPanel{
    max-height: 1000px; /* plenty for list; keeps animation */
    border-top: 1px solid var(--border-soft);
}

.accList{
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* app row buttons */
.appRow{
    display:flex;
    gap: 10px;
    align-items:center;
    padding: 6px 8px 7px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: var(--ink);
    color: var(--text);
    cursor: pointer;
    transition: transform .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease);
}

.appRow:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.10);
    border-color: var(--border);
}

.appRow:active{ transform: translateY(0); }

.appMeta{
    flex: 1;
    display:flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.appMeta .name{
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appMeta .desc{
    font-size: 11px;
    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 0;
    transition: all .2s ease;
}

.appRow:hover .appMeta .desc{
    line-height: 1;
}

.pinBtn{
    background:none;
    border:none;
    color: var(--text);
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    opacity:.5;
}

.pinBtn:hover{
    opacity:.9;
}

/* locked rows */
.appRow.is-locked{
    opacity: .55;
    cursor: default;
}

.appRow.is-locked:hover{
    transform: none;
    background: rgba(0,0,0,.10);
    border-color: rgba(255,255,255,.12);
}

.lockTag{
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    opacity: .9;
}

/* =========================
   MENU SETTINGS TOGGLE
   ========================= */

#menuApps{
    max-height: 100%;
    transition: max-height .22s ease, opacity .18s ease;
    opacity: 1;
    overflow: hidden;
}

.menu.is-settings #menuApps{
    max-height: 0;
    opacity: 0;
}

.menuSettings{
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .22s ease, opacity .18s ease;
    pointer-events: none;
}

.menu.is-settings .menuSettings{
    max-height: 520px; /* enough to show content; can be bigger */
    opacity: 1;
    pointer-events: auto;
}

.menuFooter{
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    display:flex;
    gap:10px;
    align-items:center;
    flex-direction: row-reverse;
}

.menuSettingsHeader{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 2px;
}

.menuSettingsHeader h3{
    margin: 0;
    font-size: 13px;
    letter-spacing: .25px;
    opacity: .92;
    color: rgba(255,255,255,.92);
}

.settingsBack{
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
}

/* Settings accordions */
.disclosurePanel{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height .18s ease, opacity .18s ease, transform .18s ease;
    margin-top: 8px;
    margin-bottom: 8px;
    pointer-events: none;
}

.disclosurePanel.is-open{
    max-height: 240px; /* plenty for 3 options */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.themeOptions{
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
}

.themeOpt{
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
}

.themeOpt.is-active{
    background: var(--btn-bg-hover);
    border-color: var(--border);
}

.settingsCard{
    padding: 10px;
    border-radius: 16px;
}

.themeOptions,
.settingsCard{
  border: 1px solid var(--border-soft);
  background: var(--ink);
}

.settingsLabel{
    display:block;
    font-size: 12px;
    opacity: .8;
    margin-bottom: 6px;
}

.settingsInput{
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--input-border);
    background: rgba(255,255,255,.06);
    color: var(--input-text);
    outline: none;
    box-sizing: border-box;
}

.toggleRow{
    display:flex;
    gap:10px;
    align-items:center;
    font-size: 13px;
    opacity: .92;
}

html[data-tutorial="true"] .someHint { display:block; }
html[data-tutorial="false"] .someHint { display:none; }

/* =========================================================
   PIGEON — DARK GLASS MODE
   Triggered by: .pigeonWrap[data-mode="dark"]
   ========================================================= */

.pigeonWrap[data-mode="dark"] {
    --glass-bg: rgba(12, 14, 18, 0.72);
    --glass-soft: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(120, 150, 255, 0.18);
    --glass-border-strong: rgba(140, 170, 255, 0.32);
    --glass-glow: rgba(120, 150, 255, 0.12);
    --glass-text: rgba(240, 244, 255, 0.92);
    --glass-muted: rgba(200, 210, 255, 0.55);
}

.pigeonWrap {
    position: absolute;
    width: 100%;
    transition: background 160ms ease, box-shadow 160ms ease;
}


/* ---- main panels ---- */

.pigeonWrap[data-mode="dark"] .pPanel {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.04),
            rgba(255,255,255,0.00)
        ),
        var(--glass-bg);

    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);

    border: 1px solid var(--glass-border);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 18px 40px rgba(0,0,0,0.45);
}

/* left divider glow */
.pigeonWrap[data-mode="dark"] .pLeft {
    border-right: 1px solid var(--glass-border-strong);
    box-shadow: inset -1px 0 0 var(--glass-glow);
}

/* ---- top bars ---- */

.pigeonWrap[data-mode="dark"] .pTop {
    background:
        linear-gradient(
            180deg,
            rgba(140,170,255,0.12),
            rgba(0,0,0,0.00)
        );
    border-bottom: 1px solid var(--glass-border);
}

/* ---- mode tag ---- */

.pigeonWrap[data-mode="dark"] .pTag {
    background: rgba(120,150,255,0.18);
    border-color: rgba(140,170,255,0.45);
    color: #e6ecff;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 0 12px rgba(120,150,255,0.35);
}

/* ---- inputs ---- */

.pigeonWrap[data-mode="dark"] .pInput {
    background: rgba(10,12,18,0.65);
    color: var(--glass-text);
    border-color: rgba(140,170,255,0.25);
}

.pigeonWrap[data-mode="dark"] .pInput::placeholder {
    color: var(--glass-muted);
}

/* ---- conversation rows ---- */

.pigeonWrap[data-mode="dark"] .cRow {
    background: rgba(255,255,255,0.04);
    border-color: transparent;
}

.pigeonWrap[data-mode="dark"] .cRow:hover {
    background: rgba(140,170,255,0.12);
}

.pigeonWrap[data-mode="dark"] .cRow.is-active {
    background: rgba(140,170,255,0.18);
    border-color: rgba(140,170,255,0.45);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* ---- message bubbles ---- */

.pigeonWrap[data-mode="dark"] .mBubble {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.06),
            rgba(255,255,255,0.02)
        ),
        rgba(12,14,20,0.85);
    
    color: var(--glass-text);
    border-color: rgba(140,170,255,0.28);
    
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 8px 24px rgba(0,0,0,0.45);
}

/* outgoing messages — subtle differentiation */
.pigeonWrap[data-mode="dark"] .mRow.me .mBubble {
    background:
        linear-gradient(
            180deg,
            rgba(160,190,255,0.22),
            rgba(80,110,200,0.18)
        );
    border-color: rgba(160,190,255,0.55);
}

/* ---- meta text ---- */

.pigeonWrap[data-mode="dark"] .mMeta,
.pigeonWrap[data-mode="dark"] .cSmall,
.pigeonWrap[data-mode="dark"] .pKeyHint {
    color: var(--glass-muted);
}

/* ---- composer ---- */

.pigeonWrap[data-mode="dark"] .pComposer {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.04),
            rgba(0,0,0,0.00)
        );
    border-top: 1px solid var(--glass-border);
}


/* =========================
   MEDIA MOLE
   ========================= */
   
.mm{ padding: 12px; height: 100%; box-sizing: border-box; overflow:auto; }
.mmHead{ margin-bottom: 10px; }
.mmTitle{ margin:0 0 4px; font-size: 15px; letter-spacing:.2px; }
.mmSub{ margin:0; font-size: 12px; opacity: .75; }

.mmRow{ margin: 10px 0; }
.mmLabel{ display:block; font-size: 12px; opacity: .85; margin: 0 0 6px; }
.mmHint{ margin: 6px 0 0; font-size: 12px; color: var(--muted); }

.mmInput, .mmSelect{
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    outline: none;
    box-sizing: border-box;
}
.mmInput::placeholder{ color: var(--placeholder); }

.mmGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 650px){ .mmGrid{ grid-template-columns: 1fr; } }

.mmSeg{ display:flex; gap:10px; }
.mmSegBtn{
    flex:1;
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 14px;
    cursor:pointer;
    transition: transform .12s var(--ease), background .12s var(--ease);
}
.mmSegBtn:hover{ transform: translateY(-1px); background: var(--btn-bg-hover); }
.mmSegBtn.is-active{ background: var(--btn-bg-hover); border-color: var(--border); }

.mmActions{ display:flex; gap:10px; margin: 12px 0 6px; }

.mmBtn{
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 14px;
    cursor:pointer;
    transition: transform .12s var(--ease), background .12s var(--ease);
}
.mmBtn:hover{ transform: translateY(-1px); background: var(--btn-bg-hover); }
.mmBtn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.mmGhost{ background: transparent; }
.mmTiny{ padding: 6px 10px; border-radius: 12px; font-size: 12px; }

.mmJob{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}
.mmJobTop{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
}
.mmStatusLine{ font-size: 12px; opacity: .9; }
.mmPill{
    display:inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--ink);
    margin-right: 8px;
}
.mmPct{ margin-right: 8px; }
.mmMeta{ opacity:.75; }

.mmProgBar{
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin: 10px 0;
}
.mmProgFill{ height: 100%; background: rgba(255,255,255,.24); }

.mmLogTop{ display:flex; align-items:center; gap:10px; margin: 8px 0; }
.mmLogTitle{ margin-right:auto; font-size:12px; opacity:.8; }
.mmCopied{ display:none; font-size:12px; opacity:.75; }
.mmCopied.show{ display:inline; }

.mmLog{
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text);
    max-height: 200px;
    overflow:auto;
    white-space: pre-wrap;
}
.mmLegal{ margin-top: 10px; font-size: 12px; opacity: .75; }



/* =========================
   SNIPE EMBEDDER (commonSnipe)
   ========================= */

.snipeWrap h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    letter-spacing: .2px;
}

.tabBar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.tabBtn {
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
}

.tabBtn.active {
    background: var(--btn-bg-hover);
    border-color: var(--border);
}

.tabContent {
    display: none;
    border: 1px solid var(--border-soft);
    background: var(--ink);
    border-radius: 16px;
    padding: 10px;
}

.tabContent.active {
    display: block;
}

.tabContent input,
.tabContent textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    padding: 10px 12px;
    margin: 6px 0;
    outline: none;
}

.tabContent button {
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 8px;
}

.outputBox {
    margin-top: 10px;
    border: 1px solid var(--border-soft);
    background: var(--glass);
    border-radius: 16px;
    padding: 10px;
}

.notesArea {
    min-height: 150px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: rgba(0,0,0,.10);
    padding: 10px;
    outline: none;
}

.toolbar {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.toolbar .format-btn {
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
}

.snipeItem {
    border: 1px solid var(--border-soft);
    background: rgba(0,0,0,.10);
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 8px;
}

.snipeItemTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.snipeItemBtns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.snipeItemBtns button {
    margin-top: 0;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.manageHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.snipeModal {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: grid;
    place-items: center;
    z-index: 50;
    padding: 14px;
}

.snipeModal-content {
    width: min(640px, 96vw);
    max-height: 80vh;
    overflow: auto;
    border-radius: 18px;
    background: var(--glass);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 12px;
}

.snipeModal-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.bopBody > .owlWrap{
    grid-column: 1 / -1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}