/* =========================================================
   PREVIEWS.CSS — мини-превью тем для карточек интерфейса
   =========================================================
   Этот файл подключён ВСЕГДА (не зависит от активной темы).
   Нужен, чтобы на карточках в окне «Интерфейс» были видны
   превью ВСЕХ тем одновременно, а не только активной.

   КАК ДОБАВИТЬ ПРЕВЬЮ НОВОЙ ТЕМЫ:
   1. Скопируй любой блок ниже (например, CYBER).
   2. Переименуй .theme-preview--XXX на id своей темы.
   3. Поменяй цвета под свою тему.

   id темы должен совпадать:
     - с id в массиве SHIZ_THEMES (theme-switcher.js)
     - с именем файла styles/<id>.css
   ========================================================= */

/* =========================================================
   КАРКАС ПРЕВЬЮ (общий для всех тем)
   ========================================================= */
.theme-preview {
    width: 100%;
    height: 110px;
    padding: 8px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    background: var(--pv-bg, #1a1a1a);
    transition: transform 0.2s ease;
}

.theme-preview .tp-header {
    height: 14px;
    border-radius: 5px;
    background: var(--pv-header, #2a2a2a);
    flex-shrink: 0;
}

.theme-preview .tp-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-height: 0;
}

.theme-preview .tp-msg {
    max-width: 65%;
    padding: 4px 7px;
    border-radius: 8px;
    font-size: 8px;
    line-height: 1.2;
    color: var(--pv-text, #fff);
    font-family: Arial, sans-serif;
    word-break: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.theme-preview .tp-msg--other {
    align-self: flex-start;
    background: var(--pv-msg-other, #2a2a2a);
    border-bottom-left-radius: 3px;
}

.theme-preview .tp-msg--mine {
    align-self: flex-end;
    background: var(--pv-msg-mine, #4a4a4a);
    border-bottom-right-radius: 3px;
}

.theme-preview .tp-input {
    height: 12px;
    border-radius: 6px;
    background: var(--pv-input, #2a2a2a);
    flex-shrink: 0;
    position: relative;
}

.theme-preview .tp-input::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pv-accent, rgba(255, 255, 255, 0.3));
}

/* =========================================================
   CLASSIC — как сейчас выглядит SHIZ
   ========================================================= */
.theme-preview--classic {
    --pv-bg:          #0c0f13;
    --pv-header:      #111419;
    --pv-msg-other:   #1c2026;
    --pv-msg-mine:    #343941;
    --pv-text:        #eeeeef;
    --pv-input:       #181c21;
    --pv-accent:      #ffffff;
    border: 1px solid #252a31;
}

/* =========================================================
   DARK — глубокий чёрный с холодным оттенком
   ========================================================= */
.theme-preview--dark {
    --pv-bg:          #050608;
    --pv-header:      #0a0c10;
    --pv-msg-other:   #12151a;
    --pv-msg-mine:    #1e2228;
    --pv-text:        #e8eaed;
    --pv-input:       #0e1014;
    --pv-accent:      #6fdc8b;
    border: 1px solid #1a1d22;
}

/* =========================================================
   GLASS — прозрачное стекло
   ========================================================= */
.theme-preview--glass {
    /* Непрозрачная тёмная подложка: на светлых темах прозрачное превью пропадало */
    --pv-bg:          #232a35;
    --pv-header:      rgba(255, 255, 255, 0.1);
    --pv-msg-other:   rgba(255, 255, 255, 0.08);
    --pv-msg-mine:    rgba(120, 180, 255, 0.35);
    --pv-text:        #ffffff;
    --pv-input:       rgba(255, 255, 255, 0.08);
    --pv-accent:      #a8d0ff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
}


/* =========================================================
   SAKURA — превью («Сакура-буря»: ночь, луна, розовые лепестки)
   ========================================================= */
.theme-preview--sakura {
    --pv-bg:          #1c0b1d;
    --pv-header:      #2a1230;
    --pv-msg-other:   #2a1230;
    --pv-msg-mine:    #4a1a45;
    --pv-text:        #fff0f6;
    --pv-input:       #241027;
    --pv-accent:      #ff8fc0;
    border: 1px solid #6a2c5c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-image:
        radial-gradient(circle at 80% 15%, rgba(255, 200, 225, 0.25) 0%, transparent 30%),
        radial-gradient(3px 2px at 22% 34%, #ffc1dc 60%, transparent 70%),
        radial-gradient(3px 2px at 64% 58%, #ffb0d0 60%, transparent 70%),
        radial-gradient(2px 2px at 40% 80%, #ffc1dc 60%, transparent 70%),
        linear-gradient(170deg, #16081a 0%, #43183a 100%);
}

.theme-preview--sakura .tp-header {
    background: linear-gradient(135deg, #3d1b42 0%, #241027 100%);
    border-bottom: 1px solid #6e2350;
}

.theme-preview--sakura .tp-msg--other {
    border: 1px solid #3d1b42;
    color: #fff0f6;
}

.theme-preview--sakura .tp-msg--mine {
    border: 1px solid #7a2f66;
    color: #fff0f6;
}

.theme-preview--sakura .tp-input {
    border: 1px solid #4a2350;
    background: #241027;
}

.theme-preview--sakura .tp-input::after {
    background: #e0498f;
    box-shadow: 0 0 6px rgba(255, 143, 192, 0.8);
}



/* =========================================================
   WINDOWS XP — превью
   ========================================================= */
.theme-preview--windowsxp {
    --pv-bg:          #ECE9D8;
    --pv-header:      #0054E3;
    --pv-msg-other:   #FFFFFF;
    --pv-msg-mine:    #C5DCF5;
    --pv-text:        #000000;
    --pv-input:       #FFFFFF;
    --pv-accent:      #003C74;
    border: 2px solid #0054E3;
    border-radius: 4px 4px 0 0;
    background-image: linear-gradient(
        180deg,
        #0054E3 0%,
        #0054E3 14px,
        #ECE9D8 14px,
        #ECE9D8 100%
    );
}

.theme-preview--windowsxp .tp-header {
    background: transparent;
}

.theme-preview--windowsxp .tp-msg--other {
    border: 1px solid #ACA899;
    color: #000000;
}

.theme-preview--windowsxp .tp-msg--mine {
    border: 1px solid #7DA2CE;
    color: #000000;
}

.theme-preview--windowsxp .tp-input {
    border: 1px inset #7F9DB9;
}

/* =========================================================
   PIP-BOY 3000 — превью
   ========================================================= */
.theme-preview--pipboy {
    --pv-bg:          #0d0800;
    --pv-header:      #1a1200;
    --pv-msg-other:   rgba(255, 176, 0, 0.06);
    --pv-msg-mine:    rgba(255, 176, 0, 0.15);
    --pv-text:        #ffb000;
    --pv-input:       rgba(255, 176, 0, 0.04);
    --pv-accent:      #ffb000;
    border: 1px solid #ffb000;
    box-shadow:
        0 0 12px rgba(255, 176, 0, 0.4),
        inset 0 0 12px rgba(255, 176, 0, 0.06);
    font-family: 'Courier New', monospace;
}

.theme-preview--pipboy .tp-header {
    background: rgba(255, 176, 0, 0.15);
    border-bottom: 1px solid rgba(255, 176, 0, 0.35);
    box-shadow: 0 0 6px rgba(255, 176, 0, 0.3);
}

.theme-preview--pipboy .tp-msg--other {
    border: 1px solid rgba(255, 176, 0, 0.4);
    text-shadow: 0 0 3px rgba(255, 176, 0, 0.5);
}

.theme-preview--pipboy .tp-msg--mine {
    border: 1px solid #ffb000;
    color: #ffb000;
    text-shadow: 0 0 4px rgba(255, 176, 0, 0.8);
}

.theme-preview--pipboy .tp-input {
    border: 1px solid rgba(255, 176, 0, 0.4);
    background: rgba(255, 176, 0, 0.02);
}

.theme-preview--pipboy .tp-input::after {
    background: #ffb000;
    box-shadow: 0 0 6px rgba(255, 176, 0, 0.9);
}


/* =========================================================
   MEIJI — превью
   ========================================================= */
.theme-preview--meiji {
    --pv-bg:          #1a0e0e;
    --pv-header:      #2e1c1c;
    --pv-msg-other:   #1f1414;
    --pv-msg-mine:    #3a2020;
    --pv-text:        #e8dcc4;
    --pv-input:       #261616;
    --pv-accent:      #d4af37;
    border: 1px solid #c93030;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.theme-preview--meiji .tp-header {
    background: linear-gradient(135deg, #2e1c1c 0%, #1a0e0e 100%);
    border-bottom: 1px solid #6b1e1e;
}

.theme-preview--meiji .tp-msg--other {
    border: 1px solid #2e1c1c;
    color: #e8dcc4;
}

.theme-preview--meiji .tp-msg--mine {
    border: 1px solid #5c2c2c;
    color: #e8dcc4;
}

.theme-preview--meiji .tp-input {
    border: 1px solid #3a2424;
    background: #1a0e0e;
}

.theme-preview--meiji .tp-input::after {
    background: #c93030;
    box-shadow: 0 0 6px rgba(201, 48, 48, 0.8);
}


/* =========================================================
   GLITCH — превью
   ========================================================= */
.theme-preview--glitch {
    --pv-bg:          #0a0a0a;
    --pv-header:      #161616;
    --pv-msg-other:   #141414;
    --pv-msg-mine:    #1f1f1f;
    --pv-text:        #e5e5e5;
    --pv-input:       #1a1a1a;
    --pv-accent:      #ffffff;
    border: 1px solid #404040;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
    font-family: 'Courier New', monospace;
    background-image: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.15) 3px,
        rgba(0, 0, 0, 0.15) 4px
    );
}

.theme-preview--glitch .tp-header {
    background: #161616;
    border-bottom: 1px solid #404040;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

.theme-preview--glitch .tp-msg--other {
    border: 1px solid #262626;
    color: #e5e5e5;
}

.theme-preview--glitch .tp-msg--mine {
    border: 1px solid #3a3a3a;
    color: #e5e5e5;
}

.theme-preview--glitch .tp-input {
    border: 1px solid #2a2a2a;
    background: #0a0a0a;
}

.theme-preview--glitch .tp-input::after {
    background: #ffffff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}


/* =========================================================
   VK 2008 — превью
   ========================================================= */
.theme-preview--vk2008 {
    --pv-bg:          #ffffff;
    --pv-header:      #4a76a8;
    --pv-msg-other:   #ffffff;
    --pv-msg-mine:    #dae2ea;
    --pv-text:        #000000;
    --pv-input:       #ffffff;
    --pv-accent:      #4a76a8;
    border: 1px solid #c3ccd6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-family: Tahoma, sans-serif;
    background-image: linear-gradient(180deg, #4a76a8 0%, #4a76a8 14px, #ffffff 14px, #ffffff 100%);
}

.theme-preview--vk2008 .tp-header {
    background: transparent;
}

.theme-preview--vk2008 .tp-msg--other {
    border: 1px solid #dce1e6;
    color: #000000;
}

.theme-preview--vk2008 .tp-msg--mine {
    border: 1px solid #c3ccd6;
    color: #000000;
}

.theme-preview--vk2008 .tp-input {
    border: 1px solid #c3ccd6;
    background: #f0f2f5;
}

.theme-preview--vk2008 .tp-input::after {
    background: #4a76a8;
}


/* =========================================================
   ОДНОКЛАССНИКИ 2008 — превью
   ========================================================= */
.theme-preview--ok2008 {
    --pv-bg:          #ffffff;
    --pv-header:      #ff9900;
    --pv-msg-other:   #ffffff;
    --pv-msg-mine:    #fff3d6;
    --pv-text:        #000000;
    --pv-input:       #ffffff;
    --pv-accent:      #ff9900;
    border: 1px solid #c5ccd3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-family: Arial, sans-serif;
    background-image: linear-gradient(180deg, #ff9900 0%, #ff9900 14px, #ffffff 14px, #ffffff 100%);
}

.theme-preview--ok2008 .tp-header {
    background: transparent;
}

.theme-preview--ok2008 .tp-msg--other {
    border: 1px solid #dde3e8;
    color: #000000;
}

.theme-preview--ok2008 .tp-msg--mine {
    border: 1px solid #ffcc66;
    color: #000000;
}

.theme-preview--ok2008 .tp-input {
    border: 1px solid #c5ccd3;
    background: #ffffff;
}

.theme-preview--ok2008 .tp-input::after {
    background: #ff9900;
    box-shadow: 0 0 6px rgba(255, 153, 0, 0.7);
}


/* =========================================================
   WINDOWS 95 — превью
   ========================================================= */
.theme-preview--win95 {
    --pv-bg:          #c0c0c0;
    --pv-header:      #000080;
    --pv-msg-other:   #ffffcc;
    --pv-msg-mine:    #c0c0c0;
    --pv-text:        #000000;
    --pv-input:       #ffffff;
    --pv-accent:      #000080;
    border: none;
    box-shadow:
        inset -1px -1px 0 #0a0a0a,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    border-radius: 0;
}

.theme-preview--win95 .tp-header {
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    border-radius: 0;
}

.theme-preview--win95 .tp-msg--other {
    background: #ffffcc;
    border: 1px solid #808080;
    border-radius: 0;
    color: #000000;
}

.theme-preview--win95 .tp-msg--mine {
    background: #c0c0c0;
    border: 1px solid #808080;
    border-radius: 0;
    color: #000000;
}

.theme-preview--win95 .tp-input {
    background: #ffffff;
    border: 1px solid #808080;
    border-radius: 0;
}

.theme-preview--win95 .tp-input::after {
    background: #000080;
    box-shadow: none;
    border-radius: 0;
}
/* Light — светлая тема */
.theme-preview--light {
    --pv-bg:          #f2f2f4;
    --pv-header:      #ffffff;
    --pv-msg-other:   #ffffff;
    --pv-msg-mine:    #dcdce0;
    --pv-text:        #1c1c1e;
    --pv-input:       #ffffff;
    --pv-accent:      #1c1c1e;
    border: 1px solid #e2e2e5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.theme-preview--light .tp-header {
    border-bottom: 1px solid #e2e2e5;
}

/* =========================================================
   МАТРИЦА — превью: чёрный фон, зелёные «струи» дождя
   ========================================================= */
.theme-preview--matrix {
    --pv-bg:          #040604;
    --pv-header:      rgba(0, 255, 65, 0.08);
    --pv-msg-other:   #1d201d;
    --pv-msg-mine:    #2c312c;
    --pv-text:        #e8ffe9;
    --pv-input:       rgba(0, 255, 65, 0.06);
    --pv-accent:      #00ff41;
    border: 1px solid rgba(0, 255, 65, 0.45);
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.18);
    background-image:
        linear-gradient(to bottom, transparent 0%, #040604 92%),
        repeating-linear-gradient(90deg,
            transparent 0, transparent 7px,
            rgba(0, 255, 65, 0.22) 7px, rgba(0, 255, 65, 0.22) 9px,
            transparent 9px, transparent 15px,
            rgba(0, 255, 65, 0.1) 15px, rgba(0, 255, 65, 0.1) 16px,
            transparent 16px, transparent 23px);
}

.theme-preview--matrix .tp-header {
    border: 1px solid rgba(0, 255, 65, 0.4);
}

.theme-preview--matrix .tp-input {
    border: 1px solid rgba(0, 255, 65, 0.35);
}

.theme-preview--matrix .tp-input::after {
    box-shadow: 0 0 6px rgba(0, 255, 65, 0.9);
}


/* =========================================================
   СОЛНЕЧНАЯ СИСТЕМА — превью (Classic в космосе: Солнце, орбиты)
   ========================================================= */
.theme-preview--solar {
    --pv-bg:          #07070c;
    --pv-header:      rgba(255, 255, 255, 0.07);
    --pv-msg-other:   #2c2c30;
    --pv-msg-mine:    #46443f;
    --pv-text:        #ffffff;
    --pv-input:       rgba(20, 20, 24, 0.8);
    --pv-accent:      #ffb547;
    border: 1px solid #3a3326;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    background-image:
        radial-gradient(circle at 50% 46%, #fff3d0 0, #ffc25a 5%, rgba(255, 150, 60, 0.35) 9%, transparent 22%),
        radial-gradient(ellipse 34% 11% at 50% 46%, transparent 92%, rgba(255, 255, 255, 0.22) 94%, transparent 97%),
        radial-gradient(ellipse 46% 16% at 50% 46%, transparent 95%, rgba(255, 255, 255, 0.16) 96.5%, transparent 98%),
        radial-gradient(3px 3px at 72% 52%, #d9b98a 60%, transparent 70%),
        radial-gradient(2px 2px at 33% 42%, #6aa4ff 60%, transparent 70%),
        radial-gradient(1px 1px at 18% 20%, #fff 60%, transparent 70%),
        radial-gradient(1px 1px at 84% 28%, #fff 60%, transparent 70%),
        radial-gradient(1px 1px at 62% 82%, #fff 60%, transparent 70%),
        linear-gradient(160deg, #05050a 0%, #0d0c16 100%);
}

.theme-preview--solar .tp-header {
    border-bottom: 1px solid rgba(255, 200, 120, 0.18);
    backdrop-filter: blur(4px);
}

.theme-preview--solar .tp-input::after {
    background: #ffb547;
    box-shadow: 0 0 6px rgba(255, 181, 71, 0.8);
}