/* Deerbee Inbox — phone-first styles. Plain CSS with custom properties, no framework (arch §1, §11). */

:root {
    --color-bg: #fbfaf7;
    --color-surface: #ffffff;
    --color-text: #1f1d1a;
    --color-muted: #6f6a62;
    --color-border: #e4e0d8;
    --color-accent: #b5651d;
    --color-accent-text: #ffffff;
    --color-danger: #c0392b;
    --color-success: #2e7d32;
    --color-warning: #9a5b00;
    --color-highlight: #fbf1e6;

    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size-base: 1.0625rem; /* 17px: the iOS body size; also prevents zoom-on-focus in inputs */
    --line-height: 1.45;
    --font-size-h2: 1.375rem; /* 22px ≈ 1.3 × body */
    --font-size-h1: 1.75rem;  /* 28px ≈ 1.27 × h2 */
    --font-size-small: 0.875rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;

    --radius: 0.75rem;
    --tap-target: 2.75rem; /* 44px minimum touch target */

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #151412;
        --color-surface: #1f1d1a;
        --color-text: #f1eee8;
        --color-muted: #a39d93;
        --color-border: #34312c;
        --color-accent: #e08a3c;
        --color-accent-text: #151412;
        --color-danger: #ef6b5e;
        --color-success: #6abf69;
        --color-warning: #e5a64b;
        --color-highlight: #2a221a;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--color-bg); /* also behind the status bar and the overscroll bounce */
    touch-action: manipulation; /* no double-tap zoom on buttons */
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

/* Type scale (P1-06): body 17px; each heading step at least 1.25x the one below it. */
h1 {
    font-size: var(--font-size-h1);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-3);
}

.page {
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--space-4);
}

.muted {
    color: var(--color-muted);
}

.placeholder {
    padding-top: var(--space-6);
}

[hidden] {
    display: none !important;
}

h2 {
    font-size: var(--font-size-h2);
    line-height: 1.25;
    margin: 0 0 var(--space-3);
}

a {
    color: var(--color-accent);
}

.small {
    font-size: var(--font-size-small);
}

.section {
    margin-top: var(--space-6);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.stack button {
    margin-top: var(--space-2);
}

/* Forms */

label {
    font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) / 1.5);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

textarea {
    resize: vertical;
}

label.checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    font-weight: 400;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.button {
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.button:disabled {
    opacity: 0.6;
    cursor: progress;
}

.button-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.button-danger {
    color: var(--color-danger);
}

.button-block {
    width: 100%;
}

.button-small {
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    font-size: 0.875rem;
}

.badge {
    display: inline-block;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--color-muted);
}

/* Messages */

.notice {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border-radius: calc(var(--radius) / 1.5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.notice-error {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.notice-warning {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.notice-success {
    border-color: var(--color-success);
    color: var(--color-success);
}

.notice p {
    margin: 0;
}

.notice p + p {
    margin-top: var(--space-2);
}

/* Label/value facts (Settings → Instagram) */

.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4);
}

.facts dt {
    color: var(--color-muted);
}

.facts dd {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Lists of items (passkeys, settings sections) */

.item-list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-target);
}

.item + .item {
    border-top: 1px solid var(--color-border);
}

.item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nav-list a {
    flex: 1;
    color: inherit;
    text-decoration: none;
}

/* Login */

.login {
    padding-top: calc(var(--space-6) * 2);
    max-width: 24rem;
}

.login h1 {
    margin-bottom: var(--space-6);
}

.login #passkey-sign-in {
    margin-bottom: var(--space-6);
}

/* Fake Instagram controls (/dev/fake, development only) */

.fake-media {
    margin-bottom: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.fake-media summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    min-height: var(--tap-target);
    cursor: pointer;
}

.fake-media summary img {
    flex: none;
    object-fit: cover;
    border-radius: calc(var(--radius) / 2);
}

.fake-thread {
    list-style: none;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
}

.fake-thread li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-1) 0 var(--space-2);
}

.fake-thread .fake-reply {
    padding-left: var(--space-6);
}

.fake-comment {
    min-width: 0;
    overflow-wrap: break-word;
}

.fake-actions {
    display: flex;
    gap: var(--space-2);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Reply queue / workspace (arch §11): one thread per screen, actions in a sticky bottom bar. */

/* The queue fills the screen below the safe area and the reconnect banner (if shown), so the reply field and the
   action bar start at the bottom of the screen. */
body:has(.queue-page) {
    display: flex;
    flex-direction: column;
    overscroll-behavior-y: contain; /* our pull to refresh replaces the browser's own */
    padding-bottom: 0; /* the action bar pads itself for the home indicator */
}

.queue-page {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
}

.workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-4);
}

.pull-indicator {
    position: absolute;
    top: calc(-1 * var(--space-6));
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.pull-indicator.pull-visible {
    opacity: 1;
}

.pull-label {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

.pull-ready .pull-label {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.status-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-target);
    padding: var(--space-2) 0;
    font-size: var(--font-size-small);
}

.status-home {
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

.status-line {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-failed {
    color: var(--color-danger);
    font-weight: 600;
}

.refresh-button {
    min-width: var(--tap-target);
    min-height: var(--tap-target);
}

.refresh-button[aria-busy="true"] {
    opacity: 0.6;
}

.status-settings {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    color: var(--color-muted);
}

.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 20vh;
    text-align: center;
}

.post {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0 var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.post-thumb {
    flex: none;
    display: block;
    width: 3.5rem;
    height: 3.5rem;
}

.post-thumb img,
img.post-thumb {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: calc(var(--radius) / 1.5);
    background: var(--color-border);
}

.post-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-small);
}

.post-kind {
    font-weight: 600;
}

.post-caption {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-muted);
}

.thread {
    list-style: none;
    margin: 0;
    padding: var(--space-3) 0;
}

.message {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
}

.message + .message {
    margin-top: var(--space-2);
}

.message-reply {
    margin-left: var(--space-6);
}

.message-earlier {
    color: var(--color-muted);
}

.message-target {
    background: var(--color-highlight);
    border-left: 3px solid var(--color-accent);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.message-owner .message-user {
    color: var(--color-accent);
}

.sent-label {
    margin-left: auto;
    color: var(--color-accent);
    font-weight: 600;
}

.message-just-sent {
    animation: sent-highlight 2s ease-out;
}

@keyframes sent-highlight {
    from { background-color: var(--color-highlight); }
    to { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .message-just-sent {
        animation: none;
    }
}

.message-meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--font-size-small);
}

.message-text {
    margin: var(--space-1) 0 0;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.reply {
    margin-top: auto;
    padding-top: var(--space-3);
}

.reply textarea {
    min-height: 6.5rem;
}

/* A reply that did not go through (arch §7): sits right above the field, Retry replaces Send. */
.send-error {
    margin-top: auto;
    padding: var(--space-3);
    border: 1px solid var(--color-danger);
    border-radius: calc(var(--radius) / 1.5);
    background: var(--color-surface);
    color: var(--color-danger);
}

.send-error-unknown {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.send-error p {
    margin: var(--space-1) 0 0;
    color: var(--color-text);
}

.send-error + .reply {
    margin-top: 0;
}

.action-bar {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: var(--space-2);
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--safe-bottom));
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.action-bar form {
    margin: 0;
}

.action-bar .button {
    min-height: 3rem;
}

.send-button {
    grid-column: 3;
}

.action-bar-answered {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
}

.action-bar-answered .next-button:only-child {
    grid-column: 1 / -1;
}

a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* On-screen keyboard (viewport.js, iOS): the bar is pinned right above the keyboard instead of sticking to the
   bottom of the page, which the keyboard covers. The workspace gets room for the keyboard and the bar below the
   reply field, so viewport.js can always place the field in the visible part right above the bar. */

.keyboard-open .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--keyboard-inset, 0px);
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--space-2) calc(var(--space-4) + var(--safe-right)) var(--space-2) calc(var(--space-4) + var(--safe-left));
}

.keyboard-open .workspace {
    padding-bottom: calc(var(--keyboard-height, 0px) + var(--action-bar-height, 4rem) + var(--space-2));
}

/* While typing, the field follows the thread directly instead of sitting at the bottom of the screen: otherwise
   the empty gap above it is what stays visible above the keyboard, and the comment being answered scrolls away.
   On touch screens this starts on focus, before iOS decides how far to scroll for the keyboard. */
.keyboard-open .reply,
.keyboard-open .send-error {
    margin-top: 0;
}

@media (pointer: coarse) {
    .reply:focus-within,
    .send-error:has(+ .reply:focus-within) {
        margin-top: 0;
    }
}

/* "Reconnect Instagram" banner (web/ReconnectBanner), above every page */

.banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    margin: var(--space-2) max(var(--space-4), calc((100% - 40rem) / 2)) 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-danger);
    border-radius: calc(var(--radius) / 1.5);
    background: var(--color-surface);
    color: var(--color-danger);
    font-size: var(--font-size-small);
}

.banner a {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-weight: 600;
}

/* Offline page (static/offline.html, shown by the service worker) */

.offline {
    padding-top: calc(var(--space-6) * 3);
    text-align: center;
}

.offline-icon {
    border-radius: var(--radius);
}