#view-experience { --ex-accent:#4277ee; }
.ex-sources { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px; }
.ex-tab { padding:8px 13px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--t3);font:inherit;font-size:12px;cursor:pointer; }
.ex-tab.active { background:var(--card);border-color:var(--border);box-shadow:var(--shadow);color:var(--primary-dark);font-weight:600; }
.ex-tab:hover { color:var(--primary-dark); }
.ex-status { color:var(--t3);font-size:12px;margin-bottom:12px; }
.ex-status:empty { display:none; }
.ex-list-head,.ex-model { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(80px,.65fr) 156px;align-items:center;gap:16px;padding:16px 18px; }
.ex-model { grid-template-areas:"identity traits status actions"; }
.ex-model-head { grid-area:identity; }.ex-traits { grid-area:traits; }.ex-card-status { grid-area:status; }.ex-actions { grid-area:actions; }
.ex-list-head { padding-top:0;padding-bottom:12px;color:var(--t3);font-size:12px; }
.ex-grid { display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.ex-grid[hidden] { display:none; }
.ex-model { min-width:0;border-bottom:1px solid var(--divider);transition:background .18s; }
.ex-model:last-child { border-bottom:0; }
.ex-model:hover { background:var(--primary-light); }
.ex-model-head { display:flex;align-items:center;gap:11px;min-width:0; }
.ex-logo { width:38px;height:38px;object-fit:contain;background:#fff;padding:6px;border-radius:11px;flex-shrink:0;box-sizing:border-box;border:1px solid #eef2f6; }
.ex-identity { min-width:0;flex:1; }
.ex-identity h3 { font-size:14px;line-height:1.4;color:var(--t1);font-weight:600;margin:0 0 3px;overflow-wrap:anywhere; }
.ex-source { color:var(--t3);font-size:11px; }
.ex-model-id { display:block;max-width:100%;text-align:left;font-family:inherit;font-size:11px;line-height:1.6;color:var(--t3);margin:3px 0 0;padding:2px 0;overflow-wrap:anywhere;background:none;border:0;cursor:copy; }
.ex-model-id:hover { color:var(--primary-dark); }
.ex-model button:focus-visible,.ex-tab:focus-visible { outline:2px solid var(--primary);outline-offset:3px; }
.ex-traits { display:flex;gap:6px;flex-wrap:wrap;min-width:0; }
.ex-traits span { padding:3px 7px;font-size:11px;line-height:1.5;background:var(--bg);border:1px solid var(--divider);border-radius:5px;color:var(--t2); }
.ex-try { min-height:36px;border:1px solid var(--primary);border-radius:8px;background:var(--primary-light);color:var(--primary-dark);font:inherit;font-size:12px;font-weight:550;cursor:pointer; }
.ex-try:hover:not(:disabled) { background:var(--primary-light);border-color:var(--primary); }
.ex-try:disabled { cursor:default;color:var(--t3);background:var(--bg);opacity:.8; }
.ex-empty { padding:60px 20px;text-align:center;color:var(--t3);font-size:14px; }
.ex-footnote { margin:20px 0 0;font-size:11px;line-height:1.8;color:var(--t3); }
.ex-backdrop { position:fixed;inset:0;background:rgba(18,25,38,.24);backdrop-filter:blur(2px);z-index:119; }
.ex-drawer { position:fixed;right:0;top:0;bottom:0;z-index:120;width:min(540px,100vw);display:flex;flex-direction:column;background:var(--card);box-shadow:-8px 0 40px rgba(18,25,38,.1); }
.ex-drawer[hidden],.ex-backdrop[hidden],.ex-empty[hidden],.ex-drawer [hidden] { display:none!important; }
.ex-chat-header { border-bottom:1px solid var(--divider);padding:22px 24px; }
.ex-chat-top { display:flex;justify-content:space-between;gap:12px;align-items:center; }
.ex-chat-identity { display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;color:var(--t1);overflow-wrap:anywhere; }
.ex-chat-price { font-size:10px;color:var(--t3);line-height:1.8;margin-top:12px; }
.ex-icon-button { width:32px;height:32px;flex-shrink:0;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--t2);font-size:18px;cursor:pointer; }
.ex-messages { flex:1;min-height:0;overflow:auto;padding:24px;scroll-behavior:smooth; }
.ex-chat-welcome { display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 0;color:var(--t1); }
.ex-welcome-mark { font-size:36px;color:var(--primary);margin-bottom:14px; }
.ex-chat-welcome h3 { margin:0 0 10px;font-size:20px;font-weight:600; }
.ex-chat-welcome p { font-size:12px;color:var(--t3);line-height:1.8;margin:0 0 26px; }
.ex-suggestion { background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:12px 15px;text-align:left;width:100%;font:inherit;font-size:12px;color:var(--t2);margin-bottom:10px;cursor:pointer; }
.ex-suggestion:hover { border-color:var(--primary);color:var(--primary-dark); }
.ex-message { margin-bottom:22px; }
.ex-message-label { display:block;font-size:11px;font-weight:600;color:var(--t3);margin-bottom:8px; }
.ex-message-text { white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.85;color:var(--t1); }
.ex-message.user .ex-message-text { background:var(--primary-light);border-radius:12px;padding:12px 16px; }
.ex-message-meta { display:block;margin-top:10px;color:var(--t3);font-size:10px; }
.ex-thinking { color:var(--primary-dark);font-size:12px;padding:10px 0; }
.ex-chat-form { border-top:1px solid var(--divider);padding:16px 24px 20px; }
.ex-chat-options { display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:11px;color:var(--t3); }
.ex-chat-options select { border:1px solid var(--border);border-radius:5px;padding:4px;background:var(--card);color:var(--t2);font-size:11px; }
.ex-clear { background:none;border:0;color:var(--t3);font:inherit;font-size:11px;cursor:pointer; }
.ex-compose { padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg); }
.ex-compose:focus-within { border-color:var(--primary); }
.ex-compose textarea { width:100%;resize:vertical;min-height:74px;max-height:180px;border:0;outline:0;background:none;font:inherit;font-size:13px;line-height:1.6;color:var(--t1); }
.ex-compose-footer { display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--t3); }
.ex-send { background:var(--primary-800);color:white;border:0;border-radius:7px;padding:8px 16px;font:inherit;font-size:12px;cursor:pointer; }
.ex-send:disabled { opacity:.55;cursor:wait; }
.ex-chat-error { font-size:12px;line-height:1.6;color:var(--error);margin-bottom:10px; }
.ex-chat-error:empty { display:none; }
@media(prefers-reduced-motion:reduce) { .ex-model{transition:none}.ex-messages{scroll-behavior:auto} }
@media(max-width:600px) { .ex-chat-header,.ex-chat-form{padding:16px}.ex-messages{padding:18px} }
.ex-free { flex-shrink:0;font-size:10px;font-weight:600;color:#168369;background:rgba(25,155,113,.09);padding:4px 7px;border-radius:6px; }
.ex-card-status { font-size:11px;line-height:1.6;color:var(--t3);min-width:0;overflow-wrap:anywhere; }
.ex-card-status.success { color:#168369; }.ex-card-status.failure { color:var(--error); }
.ex-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.ex-api-button { border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--t2);padding:8px 10px;font:inherit;font-size:12px;cursor:pointer; }
.ex-api-button:hover { color:var(--primary-dark);border-color:var(--primary); }
.ex-api-button:disabled { opacity:.5;cursor:default; }
.ex-modes { display:flex;gap:4px;padding:10px 24px;border-bottom:1px solid var(--divider); }
.ex-mode { padding:9px 14px;background:none;border:0;border-radius:8px;color:var(--t3);font:inherit;font-size:12px;cursor:pointer; }
.ex-mode.active { background:var(--primary-light);color:var(--primary-dark);font-weight:600; }
.ex-api-panel { overflow:auto;flex:1;padding:24px; }
.ex-api-field { margin-bottom:22px; }.ex-api-field label { display:block;font-size:11px;color:var(--t3);margin-bottom:8px; }.ex-api-field > div { display:flex;align-items:center;gap:10px;justify-content:space-between; }
.ex-api-field code { display:block;font-size:12px;color:var(--t1);overflow-wrap:anywhere; }
.ex-api-note { padding:12px 14px;border-radius:9px;background:var(--bg);font-size:12px;color:var(--t3);line-height:1.8;margin-bottom:26px; }
.ex-example-head { display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--t2); }
.ex-api-example { white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--t2);font-size:11px;line-height:1.8; }
.ex-test-options { display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--t3);margin-bottom:14px; }
.ex-test-options select { margin-left:6px;background:var(--card);color:var(--t1);border:1px solid var(--border);padding:6px 8px;border-radius:6px; }
.ex-image-input { display:block;font-size:11px;color:var(--t3);margin-bottom:12px; }.ex-image-input input { display:block;width:100%;box-sizing:border-box;padding:9px 10px;margin-top:6px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--t1);font:inherit;font-size:12px; }
@media(max-width:1100px) and (min-width:761px) { .ex-list-head,.ex-model{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) 156px;gap:10px 16px}.ex-model{grid-template-areas:"identity traits actions" "identity status actions"}.ex-list-head span:nth-child(3){display:none}.ex-traits{align-self:end}.ex-card-status{align-self:start} }
@media(max-width:760px) { .ex-list-head{display:none}.ex-model{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"identity identity" "traits traits" "status actions";gap:12px;padding:16px}.ex-actions{min-width:156px}.ex-try,.ex-actions .ex-api-button{min-height:44px}.ex-model-id{min-height:30px}.ex-modes{padding:10px 16px}.ex-api-panel{padding:18px} }
.ex-compose-actions{display:flex;gap:8px;align-items:center}.ex-stop{border:1px solid var(--border);background:var(--card);color:var(--t1);border-radius:10px;padding:9px 12px;cursor:pointer;white-space:nowrap}.ex-stop:hover{color:var(--primary)}.ex-reasoning{font-size:12px;color:var(--t3);margin:8px 0}.ex-reasoning summary{cursor:pointer}.ex-reasoning .ex-message-text{margin-top:8px;font-size:12px}