/*
 * GhostChat style, taken from the Android app (ui/theme/Theme.kt, ThemeSettings.kt).
 * Pixel look: Press Start 2P font, square corners everywhere, flat colors, 2-3px borders.
 *
 * Use: <link rel="stylesheet" href="css/ghostchat.css"> and build with the gc-* classes,
 * or just use the --gc-* variables in your own CSS.
 * Palettes: set data-palette="mint" (cherry, amber, ocean, black, light) on <html> or any
 * element; without it you get Ghost Purple, the app's default.
 */

@font-face {
    font-family: "Press Start 2P";
    src: url("../assets/fonts/PressStart2P-Regular.ttf") format("truetype");
    font-display: swap;
}

/* ---------- Colors: the app's seven palettes ---------- */

:root,
[data-palette="ghost"] {
    --gc-primary: #9B7BFF;          /* buttons, own messages, selected borders, links */
    --gc-on-primary: #14102B;       /* text on primary */
    --gc-secondary: #5CF2C6;        /* accent: unread badges, highlights */
    --gc-background: #14102B;       /* page */
    --gc-on-background: #EDE7FF;    /* main text */
    --gc-surface: #1F1A3D;          /* top bar, option rows */
    --gc-surface-variant: #2A2350;  /* cards, received messages, row borders */
    --gc-on-surface-variant: #B9A8F0; /* secondary text, timestamps */
    --gc-error: #FF6B8B;
    color-scheme: dark;
}

[data-palette="mint"] {
    --gc-primary: #3DDC97;
    --gc-on-primary: #0B1F18;
    --gc-secondary: #9B7BFF;
    --gc-background: #0E1A16;
    --gc-on-background: #E6FFF4;
    --gc-surface: #16281F;
    --gc-surface-variant: #1F3A2D;
    --gc-on-surface-variant: #9FD9BE;
    --gc-error: #FF6B8B;
    color-scheme: dark;
}

[data-palette="cherry"] {
    --gc-primary: #FF6B9D;
    --gc-on-primary: #2B0A16;
    --gc-secondary: #FFC857;
    --gc-background: #1F0F17;
    --gc-on-background: #FFE6EF;
    --gc-surface: #2E1722;
    --gc-surface-variant: #43212F;
    --gc-on-surface-variant: #F0A8C2;
    --gc-error: #FF6B8B;
    color-scheme: dark;
}

[data-palette="amber"] {
    --gc-primary: #FFB347;
    --gc-on-primary: #241500;
    --gc-secondary: #5CF2C6;
    --gc-background: #1A1408;
    --gc-on-background: #FFF1DC;
    --gc-surface: #2A2010;
    --gc-surface-variant: #3D2F18;
    --gc-on-surface-variant: #E0C08A;
    --gc-error: #FF6B8B;
    color-scheme: dark;
}

[data-palette="ocean"] {
    --gc-primary: #4DA3FF;
    --gc-on-primary: #04101F;
    --gc-secondary: #5CF2C6;
    --gc-background: #0A1424;
    --gc-on-background: #E3F0FF;
    --gc-surface: #111F36;
    --gc-surface-variant: #1A2E4D;
    --gc-on-surface-variant: #9CC4F0;
    --gc-error: #FF6B8B;
    color-scheme: dark;
}

[data-palette="black"] {
    --gc-primary: #B39BFF;
    --gc-on-primary: #000000;
    --gc-secondary: #5CF2C6;
    --gc-background: #000000;
    --gc-on-background: #FFFFFF;
    --gc-surface: #0A0A0A;
    --gc-surface-variant: #1C1C1C;
    --gc-on-surface-variant: #BDBDBD;
    --gc-error: #FF6B8B;
    color-scheme: dark;
}

[data-palette="light"] {
    --gc-primary: #6B4DFF;
    --gc-on-primary: #FFFFFF;
    --gc-secondary: #00A886;
    --gc-background: #F6F3FF;
    --gc-on-background: #1B1530;
    --gc-surface: #FFFFFF;
    --gc-surface-variant: #E6DFFF;
    --gc-on-surface-variant: #4A3F7A;
    --gc-error: #D02050;
    color-scheme: light;
}

/* ---------- Type, spacing, borders ---------- */

:root {
    --gc-font-pixel: "Press Start 2P", ui-monospace, monospace;
    /* The app's "Sans" font option; better than pixel text for long paragraphs */
    --gc-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Press Start 2P is drawn on an 8px grid: sizes in multiples of 4/8px stay sharp */
    --gc-text-xs: 8px;
    --gc-text-sm: 12px;
    --gc-text-md: 16px;
    --gc-text-lg: 24px;
    --gc-text-xl: 32px;
    --gc-text-2xl: 48px;
    --gc-line: 1.6;

    --gc-space-1: 4px;
    --gc-space-2: 8px;
    --gc-space-3: 12px;
    --gc-space-4: 16px;
    --gc-space-5: 24px;
    --gc-space-6: 32px;
    --gc-space-8: 48px;

    --gc-border: 2px;          /* app: option rows and inputs */
    --gc-border-strong: 3px;   /* app: selected row */
    --gc-radius: 0;            /* app: every shape is square */
}

/* ---------- Base ---------- */

.gc-page,
body.gc {
    margin: 0;
    background: var(--gc-background);
    color: var(--gc-on-background);
    font-family: var(--gc-font-pixel);
    font-size: var(--gc-text-sm);
    line-height: var(--gc-line);
    -webkit-font-smoothing: none;   /* keep the pixel font crisp */
}

.gc-pixelated,
img.gc-pixel-art {
    image-rendering: pixelated;     /* scale pixel art without blurring */
}

.gc-title    { font-family: var(--gc-font-pixel); font-size: var(--gc-text-2xl); color: var(--gc-primary); line-height: 1.3; margin: 0; }
.gc-heading  { font-family: var(--gc-font-pixel); font-size: var(--gc-text-lg); color: var(--gc-on-background); line-height: 1.4; margin: 0; }
.gc-label    { font-family: var(--gc-font-pixel); font-size: var(--gc-text-sm); color: var(--gc-primary); margin: 0; }
.gc-text     { font-family: var(--gc-font-body); font-size: 17px; line-height: 1.6; color: var(--gc-on-background); }
.gc-muted    { color: var(--gc-on-surface-variant); }
.gc-accent   { color: var(--gc-secondary); }

.gc-link {
    color: var(--gc-primary);
    text-decoration: none;
    border-bottom: var(--gc-border) solid currentColor;
}
.gc-link:hover { color: var(--gc-secondary); }

/* ---------- Components (as they look in the app) ---------- */

/* Filled square button: "Contacts", "Settings", "Login" */
.gc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gc-space-2);
    min-height: 48px;
    padding: 0 var(--gc-space-5);
    border: 0;
    border-radius: var(--gc-radius);
    background: var(--gc-primary);
    color: var(--gc-on-primary);
    font-family: var(--gc-font-pixel);
    font-size: var(--gc-text-sm);
    text-decoration: none;
    cursor: pointer;
}
.gc-button:hover { filter: brightness(1.1); }
.gc-button:active { transform: translate(2px, 2px); }
.gc-button:focus-visible { outline: var(--gc-border-strong) solid var(--gc-secondary); outline-offset: 3px; }

/* Text-only button: "Add Friend", "Create Account" */
.gc-button--text {
    background: transparent;
    color: var(--gc-primary);
    padding: 0 var(--gc-space-3);
}

/* Bordered button: "Reject" */
.gc-button--outline {
    background: transparent;
    color: var(--gc-primary);
    box-shadow: inset 0 0 0 var(--gc-border) var(--gc-primary);
}

/* Red button: "Delete account" */
.gc-button--danger { background: var(--gc-error); color: var(--gc-background); }

/* Settings-style row: surface background, thin border; .is-selected = thick primary border */
.gc-row {
    display: flex;
    align-items: center;
    gap: var(--gc-space-2);
    padding: 14px;
    background: var(--gc-surface);
    border: var(--gc-border) solid var(--gc-surface-variant);
}
.gc-row.is-selected { border: var(--gc-border-strong) solid var(--gc-primary); }

/* Card: contact list entries, feature boxes */
.gc-card {
    background: var(--gc-surface-variant);
    color: var(--gc-on-background);
    padding: var(--gc-space-4);
    border-radius: var(--gc-radius);
}

/* Top app bar */
.gc-topbar {
    display: flex;
    align-items: center;
    gap: var(--gc-space-4);
    min-height: 64px;
    padding: 0 var(--gc-space-4);
    background: var(--gc-surface);
    font-family: var(--gc-font-pixel);
    font-size: var(--gc-text-md);
}

/* Input: outlined, square */
.gc-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--gc-space-3) var(--gc-space-4);
    background: transparent;
    color: var(--gc-on-background);
    border: var(--gc-border) solid var(--gc-on-surface-variant);
    border-radius: var(--gc-radius);
    font-family: var(--gc-font-pixel);
    font-size: var(--gc-text-sm);
}
.gc-input::placeholder { color: var(--gc-on-surface-variant); }
.gc-input:focus { outline: none; border-color: var(--gc-primary); }

/* Unread counter on a contact */
.gc-badge {
    display: inline-block;
    padding: var(--gc-space-1) var(--gc-space-2);
    background: var(--gc-secondary);
    color: var(--gc-background);
    font-family: var(--gc-font-pixel);
    font-size: var(--gc-text-xs);
}

/* Chat: column of bubbles with a small time above each */
.gc-chat {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-3);
}
.gc-message { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.gc-message--mine { align-items: flex-end; }
.gc-message__time { font-size: var(--gc-text-xs); color: var(--gc-on-surface-variant); }
.gc-bubble {
    max-width: 260px;
    padding: 10px;
    background: var(--gc-surface-variant);
    color: var(--gc-on-background);
    font-family: var(--gc-font-pixel);
    font-size: var(--gc-text-sm);
    line-height: var(--gc-line);
}
.gc-message--mine .gc-bubble { background: var(--gc-primary); color: var(--gc-on-primary); }
/* Unread message before it is tapped: "Tap to reveal message" */
.gc-bubble--hidden { font-style: italic; color: var(--gc-on-surface-variant); }

/* 22px colour square from the palette picker */
.gc-swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: var(--gc-border) solid color-mix(in srgb, var(--gc-on-background) 40%, transparent);
    box-sizing: border-box;
}

/* Hard pixel shadow and frame, for hero images and screenshots */
.gc-pixel-frame {
    border: 4px solid var(--gc-primary);
    box-shadow: 8px 8px 0 var(--gc-surface-variant);
}

/* Dotted pixel-grid background (as on the share image) */
.gc-grid-bg {
    background-color: var(--gc-background);
    background-image: radial-gradient(var(--gc-surface) 1.5px, transparent 1.6px);
    background-size: 24px 24px;
}

/* Icons in assets/icons/ use currentColor: inline them, or use them as a mask like this */
.gc-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: var(--gc-icon) center / contain no-repeat;
    mask: var(--gc-icon) center / contain no-repeat;
    image-rendering: pixelated;
}
.gc-icon--camera { --gc-icon: url("../assets/icons/camera.svg"); }
.gc-icon--ghost { --gc-icon: url("../assets/icons/ghost-silhouette.svg"); }
.gc-icon--ghost-outline { --gc-icon: url("../assets/icons/ghost-outline.svg"); }

@media (prefers-reduced-motion: no-preference) {
    .gc-button { transition: filter 0.1s steps(2); }
}