:root { color-scheme: light; font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; background: #f5f7f9; color: #17212b; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button { border: 1px solid #175e8a; border-radius: 7px; background: #176999; color: white; padding: .55rem .85rem; cursor: pointer; }
button:hover:not(:disabled) { background: #12557d; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #73b6de; outline-offset: 2px; }
.topbar { min-height: 64px; padding: .8rem 1.3rem; background: #142c3f; color: white; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar strong { font-size: 1.08rem; }
.eyebrow { margin-left: .6rem; font-size: .72rem; letter-spacing: .08em; opacity: .7; }
.top-actions { display: flex; align-items: center; gap: .8rem; font-size: .85rem; }
.top-actions button { background: transparent; border-color: #8ca7b8; }
.layout { display: grid; grid-template-columns: minmax(255px, 310px) minmax(0, 1fr); min-height: calc(100vh - 64px); }
.sidebar { padding: 1.25rem; background: #fff; border-right: 1px solid #dce3e8; overflow-y: auto; }
.sidebar section + section { border-top: 1px solid #e1e7eb; margin-top: 1.4rem; padding-top: 1.4rem; }
.section-title h2 { margin: 0 0 .8rem; font-size: 1rem; }
.stack { display: grid; gap: .55rem; margin-top: 1rem; }
label { font-size: .82rem; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid #b6c5cf; border-radius: 7px; background: #fff; padding: .55rem .65rem; }
.nav-list, .file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.nav-list button, .file-list button { width: 100%; text-align: left; background: #f0f5f8; color: #1f3748; border-color: transparent; overflow-wrap: anywhere; }
.nav-list button[aria-current="true"] { background: #d9ecf7; border-color: #5c9fc2; }
.file-list li { display: grid; gap: .2rem; }
.text-editor { display: grid; gap: .4rem; margin-top: .4rem; }
.text-editor textarea { min-height: 140px; }
.file-list small { color: #637786; padding-left: .25rem; }
.selection-status { color: #476173; font-size: .78rem; }
.chat { display: flex; flex-direction: column; min-width: 0; }
.chat-head { padding: 1.15rem 1.4rem; background: #fff; border-bottom: 1px solid #dce3e8; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.chat-head h1 { margin: 0; font-size: 1.18rem; }
.chat-head p { margin: .3rem 0 0; color: #5a6c79; font-size: .83rem; }
.messages { flex: 1; padding: 1.5rem max(1rem, calc((100% - 760px)/2)); overflow-y: auto; display: flex; flex-direction: column; gap: .9rem; }
.message { max-width: 95%; border-radius: 12px; padding: .85rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; box-shadow: 0 1px 4px #19384a12; }
.message.user { align-self: flex-end; background: #dceefa; }
.message.assistant { align-self: flex-start; background: #fff; }
.message.notice { align-self: center; background: #fff8e5; border: 1px solid #ead895; font-size: .86rem; }
.artifact { align-self: flex-start; }
.artifact button + button { margin-left: .5rem; }
.promotion-form { display: grid; gap: .4rem; margin-top: .8rem; }
.promotion-card { display: grid; gap: .6rem; margin-top: .8rem; }
.promotion-card p { white-space: pre-wrap; margin: 0; font-size: .78rem; }
.promotion-diff { max-height: 340px; overflow: auto; margin: 0; padding: .6rem; background: #fff; border: 1px solid #dce3e8; white-space: pre-wrap; overflow-wrap: anywhere; }
.promotion-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.promotion-comparison section { min-width: 0; }
.promotion-comparison pre { max-height: 340px; overflow: auto; background: #f3f6f8; padding: .6rem; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 750px) { .promotion-comparison { grid-template-columns: 1fr; } }
.composer { border-top: 1px solid #dce3e8; background: #fff; padding: .9rem max(1rem, calc((100% - 760px)/2)); }
.composer-row { display: flex; align-items: end; gap: .6rem; }
.composer-row button { height: 42px; }
.attachment-row { margin-top: .65rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: .8rem; }
.attachment-row input { max-width: 250px; padding: .25rem; }
.attachment-row span { color: #5a6c79; }
textarea { min-height: 76px; resize: vertical; }
[hidden] { display: none !important; }
@media (max-width: 750px) { .layout { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid #dce3e8; max-height: 45vh; } .topbar { align-items: flex-start; } .chat { min-height: 65vh; } .chat-head { align-items: flex-start; } }