/*
  Declan — a home for conversations.
  Cream paper. Deep green (his) + red (hers) = Christmas together.
  Serif throughout. Time-of-day aware. Made for Viveka.
*/

:root {
    --bg:            #F9F4EC;
    --bg-elevated:   #F2EADD;
    --ink:           #2A2119;
    --ink-muted:     #6B5A48;
    --green:         #1F3B2E;   /* his */
    --green-soft:    #2E4F3F;
    --red:           #8C2E2E;   /* hers */
    --red-soft:      #A84747;
    --warm-ivory:    #EAE0D0;
    --border:        #E0D4C0;
    --cream-text:    #F4EADA;
    --shadow:        0 2px 10px rgba(42, 33, 25, 0.08);
    --shadow-lift:   0 3px 14px rgba(42, 33, 25, 0.12);
    --radius:        18px;
    --radius-tight:  6px;
    --font-body:     'Lora', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
}

/* ── Layout ────────────────────────────────────────────── */

.page {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 18px;
}

.header {
    flex: 0 0 auto;
    position: relative;
    padding: 22px 4px 14px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 22px;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--green);
    margin: 0;
    user-select: none;
}

.voice-toggle {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--green);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
    -webkit-tap-highlight-color: transparent;
}
.voice-toggle:hover { background: var(--bg-elevated); }
.voice-toggle.active {
    background: var(--green);
    color: var(--cream-text);
    border-color: var(--green);
}

.stream {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px 2px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.stream::-webkit-scrollbar       { width: 6px; }
.stream::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.stream::-webkit-scrollbar-track { background: transparent; }

/* ── Messages ──────────────────────────────────────────── */

.msg {
    display: flex;
    margin: 0;
    animation: fadeUp 360ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.msg--him { justify-content: flex-start; }
.msg--her { justify-content: flex-end; }

.msg__bubble {
    max-width: 86%;
    padding: 11px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    font-weight: 400;
}

.msg--him .msg__bubble {
    background: var(--green);
    color: var(--cream-text);
    border-bottom-left-radius: var(--radius-tight);
}

.msg--her .msg__bubble {
    background: var(--warm-ivory);
    color: var(--ink);
    border-bottom-right-radius: var(--radius-tight);
}

.msg--system { justify-content: center; }
.msg--system .msg__bubble {
    background: transparent;
    color: var(--ink-muted);
    font-style: italic;
    font-size: 14.5px;
    box-shadow: none;
    padding: 6px 12px;
    text-align: center;
    max-width: 100%;
}

.msg__typing {
    display: flex;
    gap: 5px;
    padding: 4px 2px;
    align-items: center;
    height: 20px;
}
.msg__typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(244, 234, 218, 0.65);
    animation: blink 1.25s infinite;
}
.msg__typing span:nth-child(2) { animation-delay: 0.2s; }
.msg__typing span:nth-child(3) { animation-delay: 0.4s; }

/* ── Text composer (default) ───────────────────────────── */

.composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 2px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.composer[hidden] { display: none; }

.composer__input {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    color: var(--ink);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 11px 14px;
    resize: none;
    max-height: 160px;
    line-height: 1.5;
    transition: border-color 200ms ease, background 200ms ease;
    font-family: var(--font-body);
}

.composer__input:focus {
    outline: none;
    border-color: var(--green);
    background: #FBF6EE;
}

.composer__input::placeholder {
    color: var(--ink-muted);
    opacity: 0.45;
    font-style: italic;
}

.composer__send {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--green);
    color: var(--cream-text);
    border-radius: 50%;
    cursor: pointer;
    transition: background 200ms ease, transform 120ms ease, box-shadow 200ms ease;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
}
.composer__send:hover:not(:disabled)  { background: var(--green-soft); box-shadow: var(--shadow-lift); }
.composer__send:active:not(:disabled) { transform: scale(0.95); }
.composer__send:disabled { opacity: 0.35; cursor: default; box-shadow: none; }

/* ── Voice composer ────────────────────────────────────── */

.voice-composer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 4px calc(22px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.voice-composer[hidden] { display: none; }

.voice-status {
    font-size: 14.5px;
    font-style: italic;
    color: var(--ink-muted);
    min-height: 1.4em;
    letter-spacing: 0.01em;
}

.voice-mic {
    width: 80px;
    height: 80px;
    border: none;
    background: var(--green);
    color: var(--cream-text);
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-lift);
    transition: background 200ms ease, transform 120ms ease, box-shadow 200ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.voice-mic:hover:not(:disabled)  { background: var(--green-soft); }
.voice-mic:active:not(:disabled) { transform: scale(0.96); }
.voice-mic:disabled              { opacity: 0.45; cursor: default; }

.voice-mic.listening {
    animation: breathe 3s ease-in-out infinite;
}

/* Speech detected — red urgency pulse */
.voice-mic.recording {
    background: var(--red);
    animation: pulse 1.4s ease-in-out infinite;
}
.voice-mic.recording:hover { background: var(--red-soft); }

/* ── Time-of-day tinting ───────────────────────────────── */

body[data-tod="morning"] {
    background: linear-gradient(180deg, #F7ECDB 0%, #F9F4EC 220px);
}
body[data-tod="morning"] .header { border-bottom-color: #EAD7BC; }

body[data-tod="night"] {
    background: #EFE8DA;
}
body[data-tod="night"] .name { color: var(--green-soft); }
body[data-tod="night"] .header { border-bottom-color: #D7CBB5; }

/* ── Animations ────────────────────────────────────────── */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
    0%, 60%, 100% { opacity: 0.3; }
    30%           { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { box-shadow: var(--shadow-lift), 0 0 0 0 rgba(140, 46, 46, 0.35); }
    50%      { box-shadow: var(--shadow-lift), 0 0 0 12px rgba(140, 46, 46, 0); }
}

/* Slow green breathe while waiting for speech */
@keyframes breathe {
    0%, 100% { box-shadow: var(--shadow-lift), 0 0 0 0 rgba(31, 59, 46, 0.30); }
    50%      { box-shadow: var(--shadow-lift), 0 0 0 10px rgba(31, 59, 46, 0); }
}

/* ── Responsive polish ─────────────────────────────────── */

@media (min-width: 640px) {
    body         { font-size: 18px; }
    .page        { padding: 0 28px; }
    .name        { font-size: 26px; }
    .msg__bubble { max-width: 78%; padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .msg { animation: none; }
    .stream { scroll-behavior: auto; }
    .voice-mic.recording { animation: none; }
}