body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #eaf7f1; color: #103126; }
.app-shell { min-height: 100vh; max-width: 980px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.card { background: rgba(255,255,255,.9); border: 1px solid rgba(15,159,110,.14); border-radius: 24px; box-shadow: 0 16px 40px rgba(13,81,58,.12); }
.compact-header { padding: 4px 2px 0; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand h1 { margin: 0; }
.brand p { margin: 4px 0 0; color: #4a6a5f; }
.brand-icon { position: relative; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(160deg, #33d19b, #0f9f6e); flex-shrink: 0; }
.brand-icon::before, .brand-icon::after { content: ""; position: absolute; background: #fff; border-radius: 3px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.brand-icon::before { width: 24px; height: 10px; }
.brand-icon::after { width: 10px; height: 24px; }
.main-card { flex: 1; }
.main-inner { padding: 14px; display: flex; flex-direction: column; gap: 14px; min-height: calc(100vh - 165px); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tab-btn { border: 1px solid rgba(15,159,110,.14); border-radius: 18px; padding: 13px 16px; font-weight: 700; background: #fff; color: #4a6a5f; cursor: pointer; }
.tab-btn.active { background: linear-gradient(180deg,#18b57d,#0f9f6e); color: white; }
.chat-window { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.messages { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px; }
.bubble-row.user { display: flex; justify-content: flex-end; }
.bubble { max-width: 82%; border-radius: 20px; padding: 12px 14px; white-space: pre-wrap; line-height: 1.45; }
.bubble.assistant { background: #fff; border: 1px solid rgba(15,159,110,.12); }
.bubble.user { background: linear-gradient(180deg,#16b47d,#0f9f6e); color: white; }
.bubble-label { font-size: .74rem; font-weight: 700; opacity: .76; margin-bottom: 5px; }
.composer { display: flex; gap: 10px; align-items: end; border: 1px solid rgba(15,159,110,.14); border-radius: 22px; padding: 10px; background: #fff; }
.composer textarea { flex: 1; resize: none; min-height: 48px; border: 0; outline: none; }
.send-btn,.primary-btn,.danger-btn { border: 0; border-radius: 18px; font-weight: 700; cursor: pointer; }
.send-btn,.primary-btn { background: linear-gradient(180deg,#18b57d,#0f9f6e); color: #fff; padding: 14px 16px; }
.primary-btn.small { padding: 10px 16px; font-size: .9rem; }
.list { display: flex; flex-direction: column; gap: 12px; }
.item { padding: 15px; border-radius: 18px; background: #fff; border: 1px solid rgba(15,159,110,.14); }
.item-head { display: flex; justify-content: space-between; gap: 10px; }
.danger-btn { background: rgba(220,38,38,.1); color: #b91c1c; padding: 10px 14px; }
.meta { color: #4a6a5f; font-size: .92rem; }
.hidden { display: none; }

/* Push notification banner */
.push-banner { background: linear-gradient(135deg, #0f9f6e, #18b57d); border-radius: 18px; padding: 14px 18px; color: #fff; box-shadow: 0 4px 16px rgba(15,159,110,.25); }
.push-banner-content { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.push-banner-content span { flex: 1; min-width: 200px; font-size: .95rem; line-height: 1.4; }
.dismiss-btn { background: none; border: none; color: rgba(255,255,255,.8); font-size: 1.4rem; cursor: pointer; padding: 4px 8px; line-height: 1; }
.dismiss-btn:hover { color: #fff; }