:root{color-scheme:light;--ink:#000000;--muted:#000000;--paper:#ffffff;--canvas:#e6f2ff;--brand:#78adc4;--brand-dark:#78adc4;--highlight:#ffcc66;--line:#78adc4;--danger:#000000;}*{box-sizing:border-box;}html,body{min-height:100%;}body{margin:0;background:var(--canvas);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}button,textarea{font:inherit;}button{cursor:pointer;}.hidden{display:none !important;}.chat-app{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh;}.chat-sidebar{padding:24px 16px;background:var(--brand);color:#000;}.chat-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px;}.chat-brand img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#fff;}.chat-brand strong{display:block;font-size:1.25rem;}.chat-brand span{color:#000;font-size:.85rem;}.chat-new{width:100%;padding:11px 14px;border:0;border-radius:10px;background:var(--highlight);color:#000;font-weight:700;}.chat-new:hover{background:var(--highlight);filter:brightness(.96);}.chat-list{display:grid;gap:7px;margin-top:18px;}.chat-list-item{display:flex;gap:4px;}.chat-select{flex:1;min-width:0;padding:10px;overflow:hidden;border:0;border-radius:8px;background:transparent;color:#000;text-align:left;text-overflow:ellipsis;white-space:nowrap;}.chat-list-item.is-active .chat-select,.chat-select:hover{background:rgba(255,255,255,.12);}.chat-delete{border:0;background:transparent;color:#000;border-radius:8px;}.chat-delete:hover{color:#000;background:rgba(255,255,255,.22);}.chat-main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100vh;}.chat-header{padding:20px clamp(18px,4vw,48px);border-bottom:1px solid var(--line);background:rgba(255,255,255,.9);}.chat-header h1{margin:0;font-size:1.15rem;}.chat-messages{overflow-y:auto;padding:28px clamp(18px,6vw,90px);}.chat-message{display:flex;gap:12px;max-width:760px;margin:0 auto 20px;}.chat-message.user{flex-direction:row-reverse;}.message-avatar{flex:0 0 38px;width:38px;height:38px;border-radius:50%;object-fit:cover;background:#ebe9f8;}.message-user-avatar{display:grid;place-items:center;background:var(--brand);color:#000;font-weight:800;}.message-bubble{max-width:min(620px,calc(100vw - 130px));padding:12px 15px;border-radius:4px 16px 16px;background:var(--paper);box-shadow:0 2px 10px rgba(31,37,58,.08);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;}.user .message-bubble{border-radius:16px 4px 16px 16px;background:var(--brand);color:#000;}.chat-welcome{max-width:650px;margin:8vh auto 0;text-align:center;}.chat-welcome img{width:120px;height:120px;object-fit:cover;border-radius:50%;background:#fff;}.chat-welcome h2{margin-bottom:8px;}.chat-welcome p{color:var(--muted);line-height:1.5;}.chat-typing{color:var(--muted);font-size:.9rem;}.chat-error{max-width:760px;margin:0 auto 10px;color:var(--danger);}.chat-composer-wrap{padding:12px clamp(18px,6vw,90px) 20px;background:linear-gradient(transparent,var(--canvas) 18%);}.chat-composer{display:flex;max-width:760px;margin:auto;padding:8px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 25px rgba(31,37,58,.09);}.chat-input{flex:1;min-height:46px;max-height:150px;padding:11px;resize:none;border:0;outline:0;}.chat-send{align-self:flex-end;padding:11px 18px;border:0;border-radius:11px;background:var(--highlight);color:#000;font-weight:700;}.chat-send:disabled{cursor:default;opacity:.5;}.chat-hint{max-width:760px;margin:7px auto 0;color:var(--muted);font-size:.75rem;text-align:center;}@media (max-width:720px){.chat-app{grid-template-columns:1fr;}.chat-sidebar{padding:10px;}.chat-brand{display:none;}.chat-new{width:auto;}.chat-list{display:flex;margin-top:8px;overflow-x:auto;}.chat-list-item{flex:0 0 190px;}.chat-main{height:calc(100vh - 94px);}.message-bubble{max-width:calc(100vw - 88px);}}
#example{display:block;padding:10px;background-color:#f0f0f0;border:1px solid #ccc;margin-bottom:10px;}