:root {
    /* Design tokens */
    --color-primary: #11808B; /* brand teal */
    --color-text: #0B3842;
    --color-secondary: #5fa8d3; /* reserved */
    --color-accent: #6fbf73; /* reserved */

    --bg-journal: #D9F1ED;
    --bg-new: #F9D0C6;
    --bg-profile: #E8E1F8;
    --bg-report: #D1E8F9;

    --radius-lg: 28px;
    --spacing-safe: 16px;
    --spacing-gap: 20px;
    --spacing-grid-top: 32px;
    --icon-size: 64px;
}

body {
    background-color: #f8f9fa;
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
}

.navbar {
    background-color: var(--color-primary);
}

.navbar .nav-link,
.navbar-brand {
    color: #fff !important;
}

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

a:hover {
    color: #3f8fb4;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: #0d6c75;
    border-color: #0d6c75;
}

form {
    max-width: 500px;
    margin: auto;
}

# microphone record button
# style as a large circle
# color uses accent variable
# active recording state uses Bootstrap text-danger class added via JS
# (no additional CSS for active state)
#
# The button is defined with class "btn" and "btn-primary" in the template.
# Here we just enforce a fixed width/height to make it round.

# Container for microphone button
# Additional margin added via JS; not defined here

# Style
# I will create custom style for record button
.btn-record {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    font-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#chat-box {
    background-color: #fff;
}
#summary {
    background-color: #fff;
}

/* Chat message bubbles */
#chat-box {
    display: flex;
    flex-direction: column;
}

.chat-message {
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    max-width: 75%;
}

.chat-message.user {
    align-self: flex-end;
    background-color: #e7f7e7; /* pale green */
}

.chat-message.bot {
    align-self: flex-start;
    background-color: #e7ecf7; /* pale blue */
}

/* Home grid */
.safe-area {
    padding: var(--spacing-safe);
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-gap);
    margin-top: var(--spacing-grid-top);
    justify-content: center;
    justify-items: center;
}

.tile {
    width: 168px;
    height: 168px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tile svg {
    width: var(--icon-size);
    height: var(--icon-size);
    stroke: var(--color-text);
}
.tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.tile:active {
    transform: scale(.98);
    transition: .1s ease;
}

.tile .label {
    margin-top: 8px;
    font-size: 16px;
    color: var(--color-text);
}

.tile-journal { background: var(--bg-journal); }
.tile-new { background: var(--bg-new); }
.tile-profile { background: var(--bg-profile); }
.tile-report { background: var(--bg-report); }

@media (prefers-color-scheme: dark) {
    body { background:#001414; }
    .tile { filter: brightness(0.9) saturate(0.9); }
    h1, .label { color:#EAF6F7; }
    .tile svg { stroke:#EAF6F7; }
}