html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
}

.app-shell {
    min-height: 100vh;
    background: #f8f9fa;
}

.app-header {
    background: #1d2a44;
    color: #ffffff;
    font-weight: 600;
    padding: 1rem 1.5rem;
}

.app-header a {
    color: inherit;
    margin-right: 1rem;
    text-decoration: none;
}

.app-header form {
    display: inline;
}

.app-header button {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.app-main {
    margin: 0 auto;
    max-width: 960px;
    padding: 2rem 1.5rem;
}

.home-actions,
.form-panel form,
.message-form {
    display: grid;
    gap: 0.75rem;
}

.home-actions {
    grid-auto-flow: column;
    justify-content: start;
}

.form-panel,
.chat-panel,
.task-panel section {
    background: #ffffff;
    border: 1px solid #d8dee9;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.form-panel {
    max-width: 34rem;
}

input,
textarea,
select {
    border: 1px solid #9ba8ba;
    border-radius: 0.25rem;
    box-sizing: border-box;
    font: inherit;
    padding: 0.6rem;
    width: 100%;
}

.primary-action,
.task-list button {
    background: #185abc;
    border: 0;
    border-radius: 0.25rem;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    padding: 0.65rem 1rem;
    text-decoration: none;
    width: fit-content;
}

.field-description,
.message-meta,
.task-list span {
    color: #526175;
    font-size: 0.875rem;
    margin: 0;
}

.validation-message {
    color: #b3261e;
}

.checkbox-label {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.checkbox-label input {
    width: auto;
}

.workspace-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
}

.task-panel {
    display: grid;
    gap: 1rem;
}

.message-list,
.task-list,
.project-list,
.attention-list {
    display: grid;
    gap: 0.75rem;
    padding-left: 1.25rem;
}

.message-list li,
.task-list li {
    border-bottom: 1px solid #e4e8ef;
    padding-bottom: 0.75rem;
}

.message-body,
.task-comment {
    white-space: pre-wrap;
}

.task-list form {
    margin-top: 0.5rem;
}

.compact-form {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.summary-card {
    background: #f5f8fc;
    border-left: 3px solid #185abc;
    margin-top: 0.75rem;
    padding: 0.75rem;
}

.summary-card h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.summary-card pre {
    font: inherit;
    margin: 0;
    white-space: pre-wrap;
}

@media (max-width: 760px) {
    .workspace-grid {
        grid-template-columns: 1fr;
    }
}