:root { --memo-ink: #243652; --memo-line: #dbe3ee; }
.app-shell { max-width: 1160px; }
.app-main { min-height: 62vh; }
h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.7px; margin: 6px 0 12px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #687a91; text-transform: uppercase; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.section-heading button { flex-shrink: 0; }
.connection { font-size:12px; color:#8e6444; white-space:nowrap; }
.connection[data-online=true] { color:#257459; }
.memo-tools { display:flex; gap:12px; margin:18px 0; }
.memo-tools > * { min-width:0; flex:1; }
input, textarea, select { box-sizing:border-box; max-width:100%; border:1px solid var(--memo-line); border-radius:10px; padding:12px; font:inherit; background:#fff; color:var(--memo-ink); }
textarea { width:100%; resize:vertical; }
.memo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; }
.memo-card { padding:20px; border:1px solid var(--memo-line); border-radius:14px; background:linear-gradient(135deg,#fff,#f7f9fc); min-width:0; }
.memo-card h3 { font-size:19px; margin:12px 0; overflow-wrap:anywhere; }
.memo-preview { white-space:pre-wrap; overflow-wrap:anywhere; max-height:140px; overflow:hidden; font-size:14px; line-height:1.6; }
.due-date { color:#325eb2; font-size:13px; }
.empty-state { text-align:center; padding:44px 22px; color:#78879c; max-width:420px; margin:auto; line-height:1.8; }
.messages { height: min(48vh,540px); min-height:240px; overflow-y:auto; padding:16px 4px; scroll-behavior:smooth; }
.chat-pair { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:0 0 20px; }
.bubble { padding:16px 20px; border-radius:16px; max-width:88%; box-sizing:border-box; }
.user-bubble { align-self:flex-end; background:#eaf1fd; border-bottom-right-radius:4px; }
.assistant-bubble { border:1px solid var(--memo-line); background:#fff; border-bottom-left-radius:4px; }
.bubble p { white-space:pre-wrap; overflow-wrap:anywhere; margin:7px 0 0; line-height:1.7; font-size:15px; }
.message-label { text-transform:uppercase; font-size:10px; color:#687a91; letter-spacing:1px; font-weight:700; }
.message-state { font-size:12px; color:#687a91; padding:0 12px; }
.saved-chip { display:inline-block; font-size:11px; background:#eaf7ef; color:#306c4c; border-radius:6px; padding:6px 9px; margin-top:10px; margin-right:5px; }
.composer { margin-top:16px; padding:14px; border:1px solid #cedbf0; background:#f9fbff; border-radius:16px; }
.composer textarea { background:transparent; border:none; padding:5px; outline-offset:5px; min-height:72px; }
.composer-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.composer-tools #send { margin-left:auto; width:auto; }
.tab-bar { z-index:10; }
.composer-tools button, .file-label { font-size:12px; }
.file-label { cursor:pointer; padding:8px 14px; border:1px solid var(--memo-line); border-radius:999px; }
.suggestions { display:flex; gap:8px; flex-wrap:wrap; }
.suggestions button { font-size:12px; }
dialog { border:1px solid var(--memo-line); border-radius:18px; padding:26px; width:min(600px,90vw); box-sizing:border-box; max-height:90dvh; }
dialog::backdrop { background:#13284188; backdrop-filter:blur(4px); }
dialog label { display:flex; flex-direction:column; gap:6px; margin:14px 0; font-size:13px; }
audio { max-width:100%; width:260px; margin-top:10px; }
@media(max-width:600px) { .card { padding:18px; } .app-shell { padding-left:12px; padding-right:12px; } .bubble { max-width:96%; padding:12px; } .messages { height:43vh; } .section-heading { align-items:flex-start; } .memo-tools { gap:7px; } .composer-tools .ghost { padding:8px 10px; } .tab-bar { padding-bottom:env(safe-area-inset-bottom); } }
@media(max-width:600px) {
  .app-shell:has([data-tab-view=chat].is-active):has(#main-card:not([hidden])) { height:100dvh; min-height:0; padding-top:12px; padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
  .app-shell:has([data-tab-view=chat].is-active) .app-header { margin-bottom:12px; }
  .app-shell:has([data-tab-view=chat].is-active) .app-header h1 { font-size:28px; }
  .app-shell:has([data-tab-view=chat].is-active) .app-header .subtitle { display:none; }
  #main-card:has([data-tab-view=chat].is-active) { flex:1; min-height:0; padding:14px; }
  [data-tab-view=chat].is-active { display:flex; flex-direction:column; height:100%; }
  [data-tab-view=chat] > .helper, [data-tab-view=chat] > .suggestions { display:none; }
  [data-tab-view=chat] .eyebrow { margin:0; font-size:9px; }
  [data-tab-view=chat] h2 { font-size:26px; }
  .messages { flex:1; height:auto; min-height:80px; }
  .composer { flex-shrink:0; margin-top:8px; padding:8px; }
  .composer textarea { min-height:44px; height:64px; }
  .composer-tools { gap:5px; }
  .composer-tools .ghost, .composer-tools #send { padding:8px; font-size:11px; }
  #composer-status { margin:6px 0 0; font-size:11px; max-height:36px; overflow-y:auto; }
}
@media(prefers-reduced-motion:no-preference) { .chat-pair:last-child { animation:arrive .24s ease-out; } @keyframes arrive { from {transform:translateY(7px)} to {transform:translateY(0)} } }