.points-shortcut{display:flex;align-items:center;gap:10px;border:1px solid #dceafb;border-radius:13px;background:#eff8ff;padding:14px 18px;margin-bottom:21px;color:#5988b6;font-size:12px}.points-shortcut>svg{color:#3a94e9}.points-shortcut b{color:#2c82d2;font-weight:800}.points-shortcut button{margin-left:auto;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.chat-panel{padding:0!important;overflow:visible}
.chat-toolbar{position:relative;z-index:4;overflow:visible}
.model-picker{position:relative;min-width:0;max-width:calc(100% - 110px)}
.model-picker-toggle{display:flex;align-items:center;gap:10px;max-width:100%;background:white;border:1px solid #d6e6f5;border-radius:12px;color:#436c8e;padding:8px 12px;cursor:pointer;text-align:left;font:inherit;transition:.2s}
.model-picker-toggle:hover,.model-picker-toggle[aria-expanded=true]{border-color:#8abff1;box-shadow:0 5px 15px #478ac015}
.model-picker-toggle svg{width:18px;height:18px;color:#3499e7;flex-shrink:0}
.model-picker-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.model-picker-title b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-picker-title small{font-size:10px;color:#91a9be}
.model-chevron{color:#7d99ae;display:inline-flex;align-items:center;transition:transform .2s ease}.model-chevron svg{height:16px;width:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.model-picker-toggle[aria-expanded="true"] .model-chevron{transform:rotate(180deg)}
.model-picker-menu{position:absolute;left:0;top:calc(100% + 9px);width:min(420px,calc(100vw - 46px));max-height:min(65dvh,520px);overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid #d9e8f5;box-shadow:0 15px 35px #27547923;border-radius:16px;z-index:100}
.model-picker-menu[hidden]{display:none}
.picker-heading{padding:14px 15px;border-bottom:1px solid #ecf1f6;display:flex;align-items:center;justify-content:space-between;color:#8ea1b1;font-size:12px}
.picker-heading button{cursor:pointer;background:#edf7ff;color:#317ab6;border:0;padding:7px 10px;border-radius:8px;font:inherit;display:inline-flex;align-items:center;gap:6px}.picker-heading button svg{height:15px;width:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.picker-heading button:hover svg{transform:rotate(40deg);transition:transform .2s}
.model-picker-items{overflow-y:auto;padding:8px 0}
.picker-group{padding:5px 10px 9px}
.picker-group+.picker-group{border-top:1px solid #f0f3f8}
.picker-group-title{padding:9px 10px;display:flex;justify-content:space-between;gap:10px;align-items:center;color:#6989a5}
.picker-group-title strong{font-size:12px}
.picker-group-title small{font-size:10px;color:#b1becc}
.picker-option{width:100%;border:0;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding:10px 12px;border-radius:9px;background:transparent;color:#46647f;font-size:12px;cursor:pointer;overflow-wrap:anywhere}
.picker-option:hover{background:#edf6ff}
.picker-option.picked{background:#ebf6ff;color:#277fc9;font-weight:700}
.picker-check{opacity:0;color:#3297e3;display:inline-flex;flex-shrink:0}.picker-check svg{height:16px;width:16px}
.picker-option.picked .picker-check{opacity:1}
.picker-empty{font-size:11px;color:#a2aebc;padding:5px 10px}
@media(max-width:700px){.model-picker{max-width:calc(100% - 70px)}.model-picker-toggle{padding:7px}.model-picker-title b{max-width:170px}.chat-toolbar #chat-provider-label{max-width:95px;font-size:9px;text-align:right}}

.chat-toolbar{padding:17px 22px;border-bottom:1px solid #e7eff8;display:flex;align-items:center;gap:12px;justify-content:space-between;background:#fbfdff}
.chat-model{display:flex;align-items:center;gap:8px;font:700 12px 'Plus Jakarta Sans',sans-serif;color:#5485b4}.chat-model svg{color:#4aa1ed;width:17px;height:17px}
.real-chat-log{min-height:360px;max-height:520px;overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:15px;overscroll-behavior:contain}
.chat-greeting{display:flex;flex:1;min-height:290px;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:18px}
.chat-greeting .chat-mark{width:54px;height:54px;border-radius:17px;margin-bottom:14px}.chat-greeting h2{font-size:19px;margin:8px 0;color:#34516e}
.chat-greeting p{font-size:12px;line-height:2;color:#92a9c1;margin:2px 0}
.real-chat-message{max-width:85%;padding:15px 19px;border:1px solid #e5eff7;border-radius:16px;background:#fff;box-shadow:0 5px 19px #4e92cc09;overflow-wrap:anywhere}
.real-chat-message strong{display:block;font-size:12px;color:#3879b7;margin-bottom:7px}
.real-chat-message p{margin:0;white-space:pre-wrap;font-size:13px;line-height:1.85;color:#446884}
.real-chat-message small{display:block;color:#99b0c5;font-size:10px;margin-top:8px}
.real-chat-message.mine{margin-left:auto;background:#e9f5ff;border-color:#d3e9fc}
.real-chat-message.theirs{margin-right:auto}
.chat-message-actions{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:9px}
.chat-message-icon{border:1px solid transparent;border-radius:9px;width:31px;height:31px;display:grid;place-items:center;color:#7e9cb7;background:transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.chat-message-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-message-icon:hover,.chat-message-icon:focus-visible{background:#fff;border-color:#c9def2;color:#2586db;outline-color:#74b5f2}
.chat-edit-panel{margin-top:12px;border-top:1px solid #d4e6f8;padding-top:12px}
.chat-edit-panel textarea{box-sizing:border-box;display:block;width:100%;min-width:min(290px,65vw);min-height:96px;resize:vertical;padding:11px 13px;background:#fff;border:1px solid #9bcaf3;border-radius:12px;color:#335c80;font:500 13px/1.7 'IBM Plex Sans Thai',sans-serif;outline:none}
.chat-edit-panel textarea:focus{box-shadow:0 0 0 3px #bfe3ff70}
.chat-edit-actions{margin-top:9px;display:flex;justify-content:flex-end;gap:8px}
.chat-edit-actions button{border-radius:10px;border:1px solid #cfe2f4;background:#fff;color:#577995;padding:8px 14px;font:700 12px 'IBM Plex Sans Thai',sans-serif;cursor:pointer}
.chat-edit-actions .chat-edit-submit{border-color:#388fe7;background:#398fee;color:#fff}
.chat-stop-button{background:#fdf2f2;color:#b33b42;border:1px solid #f1c1c5;display:inline-flex;gap:9px;align-items:center;justify-content:center;border-radius:12px;padding:11px 17px;font-weight:700;cursor:pointer;min-height:44px}
.chat-stop-button:hover{background:#ffe7e9}.chat-stop-button:disabled{opacity:.55}
.chat-stop-square{width:12px;height:12px;border-radius:3px;background:currentColor;flex:none}
.real-chat-form{margin:0 22px;border:1px solid #d6e7f7;border-radius:15px;background:#f9fcff;overflow:hidden}
.real-chat-form:focus-within{border-color:#96cafa;box-shadow:0 0 0 3px #cce8ff77}
.real-chat-form textarea{display:block;border:0;outline:0;resize:vertical;background:transparent;color:#365a7b;font:500 13px 'IBM Plex Sans Thai',sans-serif;width:100%;min-height:85px;padding:15px 17px}
.chat-send-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px 11px}
.chat-send-row span{color:#95afc6;font-size:11px}
.real-chat-form+.form-status{margin:10px 23px 15px}
.inline-form{display:flex;flex-direction:column;align-items:stretch;gap:11px}
.inline-form label,.grant-form label{color:#7891a6;font-size:12px;font-weight:600}
.inline-form input,.grant-form input{width:100%;background:#fbfdff;border:1px solid #dceafa;outline:0;border-radius:11px;padding:13px 15px;font:500 13px 'IBM Plex Sans Thai',sans-serif;color:#355b7c}
.inline-form input:focus,.grant-form input:focus{border-color:#75b7f9}
.inline-form .button{align-self:flex-start;margin-top:8px}
.fresh-key{border-radius:13px;padding:15px;margin:20px 0 0;background:#ecf7ff;border:1px solid #cce7fc;display:flex;flex-direction:column;gap:11px}
.fresh-key[hidden]{display:none}.fresh-key strong{font-size:12px;color:#4289c5}.fresh-key code{font:600 12px ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all;color:#315e84}
.fresh-key .button{align-self:flex-start}
.revoke-key{border:1px solid #ecbdc3;background:#fff5f6;color:#bc6370;padding:8px 10px;border-radius:9px;font-size:11px;font-weight:700}
.revoke-key:disabled{opacity:.35}
.grant-form{display:grid;grid-template-columns:.7fr .7fr 1.5fr auto;gap:12px;align-items:end}
.grant-form label{display:flex;flex-direction:column;gap:6px}.grant-form .button{height:44px}
.form-status.error{color:#d06d79}

/* Instantly active DubdibAi! keys and Hermes/OpenAI-compatible setup */
.api-key-live{display:flex;align-items:center;gap:9px;min-width:0}
.api-key-live strong{color:#218562;font-size:12px}
.api-status-dot{width:9px;height:9px;border-radius:50%;background:#35ba86;box-shadow:0 0 0 4px #dbf9ec;flex:none}
.api-client-setup .connection-field{display:grid;gap:9px}
.api-client-setup .connection-field label{font-size:11px;font-weight:700;color:#7e9db6}
.api-client-copyrow{display:flex;align-items:center;gap:10px;min-width:0}
.api-client-copyrow strong{flex:1;min-width:0;overflow-wrap:anywhere}
.api-copy-icon{width:33px;height:33px;border:1px solid #d7e9f8;background:#fff;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:#368fdb;flex:none}
.api-copy-icon:hover,.api-copy-icon:focus-visible{background:#eaf6ff;outline-color:#90c5f3}
.api-copy-icon svg{width:15px;height:15px}
#api-client-model-picker{width:100%;max-width:100%;padding:10px 12px;background:#f7fbff;border:1px solid #d7e6f4;border-radius:10px;min-width:0;color:#37658e;font:600 12px 'IBM Plex Sans Thai',sans-serif}
#api-client-model-picker:focus-visible{outline:2px solid #86bded}
.api-client-example{display:grid;gap:9px;margin-top:17px;padding:13px;border-radius:13px;border:1px solid #d7e8f8;background:#f7fbff}
.api-client-example>span{font-size:11px;font-weight:700;color:#6b93b4}
.api-client-example pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:600 11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;color:#315a7d}
.api-client-example .button{justify-self:start}
@media(max-width:660px){.api-client-copyrow{align-items:flex-start}.api-client-example pre{font-size:10px}}

@media(max-width:860px){.grant-form{grid-template-columns:1fr 1fr}.grant-form label:nth-child(3){grid-column:1/-1}.grant-form .button{justify-self:start}}
@media(max-width:700px){.chat-toolbar{padding:14px 15px}.real-chat-log{padding:15px;min-height:270px;max-height:50dvh}.chat-greeting{min-height:220px}.real-chat-message{max-width:96%}.real-chat-form{margin:0 12px}.chat-send-row{flex-wrap:wrap}.chat-send-row span{width:100%}.inline-form .button{align-self:stretch}.grant-form{grid-template-columns:1fr}.grant-form label:nth-child(3){grid-column:auto}.grant-form .button{justify-self:stretch}}

/* OpenCode per-key model scopes and export */
.oc-model-panel{min-width:0;margin:10px 0 3px;padding:15px;border:1px solid #cfe2f3;border-radius:13px;background:#f7fbff}
.oc-model-panel legend{padding:0 7px;color:#386e9e;font-weight:750;font-size:12px}
.oc-model-panel>small,.oc-ready>small{display:block;color:#7394b2;line-height:1.8;font-size:11px;margin-top:11px}
.oc-model-list{display:grid;gap:7px;max-height:295px;overflow:auto}
.oc-model-option{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #e0eaf4;border-radius:10px;background:#fff;cursor:pointer}
.oc-model-option:hover{border-color:#8cc7f5}
.oc-model-option input{width:17px;height:17px;flex:none;accent-color:#2893df}
.oc-model-option span{min-width:0;flex:1;display:grid;gap:3px}
.oc-model-option strong{font-weight:750;font-size:12px;color:#365c80;overflow-wrap:anywhere}
.oc-model-option small{font-size:10px;color:#879cae;overflow-wrap:anywhere}
.oc-model-option em{font-size:10px;font-style:normal;color:#359b75;white-space:nowrap}
.oc-model-option.oc-unavailable{opacity:.6;cursor:not-allowed}
.oc-model-option.oc-unavailable em{color:#bd7b52}
.oc-ready{margin:15px 0;padding:16px;border-radius:13px;border:1px solid #b6def8;background:linear-gradient(135deg,#f1faff,#fff)}
.oc-ready[hidden]{display:none}
.oc-ready h3{margin:0 0 7px;font-size:16px;color:#315f88}
.oc-ready p{color:#678eac;font-size:12px;line-height:1.8}
.oc-actions{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.oc-actions .button{font-size:11px;line-height:1.45}
.oc-config-preview{white-space:pre-wrap;overflow-wrap:anywhere;max-height:290px;overflow:auto;background:#132338;color:#c8e9fc;border-radius:11px;padding:15px;font:11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}
@media(max-width:640px){.oc-actions{display:grid;grid-template-columns:1fr}.oc-actions .button{width:100%;justify-content:center}.oc-model-option{gap:7px;padding:9px}}

/* Shared crystal mark in navigation and chat. */
.brand-mark{overflow:visible!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(39,142,220,.24))}

.inline-form .oc-model-option input[type=checkbox]{width:17px;height:17px;max-width:17px;min-width:17px;padding:0;margin:0;appearance:auto;border:0;background:transparent;flex:0 0 17px;box-shadow:none}