.ai-dialog { position:fixed; inset:0; margin:0; box-sizing:border-box; width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; padding:0; border:0; border-radius:0; background:var(--panel); color:var(--text); }
.ai-dialog::backdrop { background:#0009; }
.ai-dialog > header, .ai-dialog > footer { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--panel-2); }
.ai-dialog h2 { font-size:18px; margin:0 0 5px; }
.ai-dialog header small { color:var(--muted); }
.ai-dialog header > button { margin-left:auto; }
.ai-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; height:calc(100% - 160px); min-height:220px; }
.ai-inputs { overflow:auto; padding:18px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.ai-inputs > label, .ai-inputs details label, .ai-conversation > label, #ai-fields > label { display:flex; flex-direction:column; gap:7px; font-size:12px; margin-bottom:12px; }
.ai-inputs .ai-check { flex-direction:row; align-items:flex-start; gap:9px; padding:12px; border:1px solid var(--line); border-radius:7px; background:var(--panel-2); line-height:1.5; }
.ai-dialog input[type=checkbox] { width:auto; margin:2px 0; flex:none; }
.ai-dialog textarea { resize:vertical; width:100%; min-height:50px; }
.ai-inputs select { width:100%; min-height:170px; padding:6px; border:1px solid var(--line); border-radius:6px; background:var(--panel-2); color:var(--text); font-size:12px; line-height:1.5; } .ai-inputs select option { padding:3px 6px; }
.ai-inputs p, .ai-inputs small, .ai-dialog summary, .ai-conversation small { font-size:12px; color:var(--muted); }
.ai-inputs > p { margin:0; line-height:1.6; } .ai-inputs > label, .ai-inputs details label { margin:0; line-height:1.5; } .ai-inputs .ai-selection-help { display:block; margin-top:-10px; line-height:1.5; } .ai-inputs details { margin:0; padding-top:16px; border-top:1px solid var(--line); }
.ai-inputs summary { cursor:pointer; color:var(--text); font-weight:600; margin-bottom:12px; } .ai-inputs details label { color:var(--muted); } #ai-query { min-height:140px; font:12px/1.6 Consolas,monospace; }
.ai-inputs button, .ai-dialog footer button, .ai-conversation > button { display:inline-flex; gap:7px; align-items:center; }
.ai-conversation { overflow:auto; padding:16px; }
.ai-message { border:1px solid var(--line); padding:12px; border-radius:7px; margin-bottom:12px; }
.ai-message-user { background:var(--panel-2); }
.ai-message strong { display:block; font-size:12px; margin-bottom:7px; color:var(--accent); }
.ai-message div { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.6; }
#ai-proposal { margin-top:20px; border-top:1px solid var(--line); padding-top:12px; }
#ai-proposal h3 { font-size:15px; }
#ai-fields textarea { font:12px Consolas,monospace; }
.ai-dialog footer { flex-wrap:wrap; }
.ai-dialog footer label { display:flex; gap:7px; align-items:center; font-size:12px; }
#ai-status { flex:1; min-width:180px; font-size:12px; color:var(--muted); }
#ai-preview-frame { display:block; box-sizing:border-box; width:100%; height:65vh; height:65dvh; min-height:420px; background:white; border:1px solid var(--line); margin-top:10px; }
.ai-dialog [hidden] { display:none !important; }
@media(max-width:760px) { .ai-layout { grid-template-columns:1fr; height:calc(100% - 200px); overflow:auto; } .ai-inputs,.ai-conversation { overflow:visible; } .ai-inputs { border-right:0; border-bottom:1px solid var(--line); } }

#create-with-ai, #edit-with-ai { display:inline-flex; align-items:center; gap:7px; } #create-with-ai[hidden], #edit-with-ai[hidden] { display:none; } .ai-dialog textarea { background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:5px; padding:8px; }
#ai-status { display:flex; align-items:center; gap:8px; } #ai-status > i { flex:none; color:var(--accent); }
.ai-dialog[open] { display:flex; flex-direction:column; } .ai-dialog > header, .ai-dialog > footer { flex:none; } .ai-layout { flex:1; height:auto; min-height:0; } #ai-save-message { border:1px solid #d97765; color:#c54d3a; background:var(--panel-2); padding:10px; border-radius:5px; }
@media(max-width:760px) { .ai-layout { height:auto; min-height:0; } }

.ai-dialog > header { padding:10px 18px; } .ai-dialog h2 { margin:0; }

#ai-filter-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:12px 0; }
#ai-filter-fields label { display:flex; flex-direction:column; gap:6px; font-size:12px; }
#ai-filter-fields input, #ai-filter-fields select { width:100%; padding:8px; border:1px solid var(--line); border-radius:5px; background:var(--panel-2); color:var(--text); }
.ai-preview-actions { display:flex; gap:8px; flex-wrap:wrap; }
#ai-real-message { font-size:12px; color:var(--muted); }

.ai-composer { flex:none; display:flex; flex-direction:column; gap:7px; padding:12px 18px; border-top:1px solid var(--line); background:var(--panel); }
.ai-composer > label { font-size:12px; color:var(--muted); }
.ai-composer #ai-request { min-height:64px; max-height:20dvh; margin:0; }
.ai-composer-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ai-composer-actions button { display:inline-flex; align-items:center; gap:7px; }
.ai-composer-actions small { font-size:12px; color:var(--muted); }
.ai-conversation { min-height:0; min-width:0; }
@media(max-width:760px) { .ai-composer { padding:10px 12px; } .ai-composer #ai-request { min-height:50px; } .ai-composer-actions { gap:8px; } }
@media(max-width:760px) { #ai-preview-frame { height:55vh; height:55dvh; min-height:320px; } }

.ai-main { grid-column:1; grid-row:1; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.ai-main > .ai-conversation { flex:1; overflow:auto; }
@media(max-width:760px) { .ai-layout { grid-template-rows:minmax(90px,25dvh) minmax(0,1fr); overflow:hidden; } .ai-inputs { overflow:auto; } }
.ai-inputs { grid-column:2; grid-row:1; }
@media(max-width:760px) { .ai-main { grid-column:1; grid-row:2; } .ai-inputs { grid-column:1; grid-row:1; border-left:0; } }
.ai-inputs > :not(#ai-query-section) { flex-shrink:0; }
#ai-query-section[open] { flex:1; display:flex; flex-direction:column; min-height:220px; }
#ai-query-section > summary { flex:none; }
#ai-query-section::details-content { flex:1; display:flex; flex-direction:column; min-height:0; }
#ai-query-section > label { flex:1; min-height:0; }
#ai-query { flex:1; min-height:140px; resize:none; box-sizing:border-box; }
.ai-compact-fields { display:grid; grid-template-columns:repeat(5,minmax(0,120px)); gap:12px; margin:16px 0; }
.ai-compact-fields label { display:flex; flex-direction:column; gap:7px; font-size:12px; min-width:0; }
.ai-compact-fields input { width:100%; min-width:0; box-sizing:border-box; padding:8px; background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:5px; }
#ai-fields .ai-code-field { min-height:260px; line-height:1.5; }
@media(max-width:760px) { .ai-compact-fields { gap:6px; } .ai-compact-fields label { font-size:10px; overflow-wrap:anywhere; } .ai-compact-fields input { padding:6px 3px; } }
#ai-tables { height:32vh; height:32dvh; min-height:260px; max-height:420px; }

#ai-tables option.ai-table-match { font-weight:700; color:var(--accent); text-decoration:underline; }

#ai-pending-messages { max-height:110px; overflow:auto; padding:8px 10px; border:1px solid var(--line); border-radius:5px; font-size:12px; } #ai-pending-messages ul { margin:6px 0 0; padding-left:18px; } #ai-pending-messages li { white-space:pre-wrap; overflow-wrap:anywhere; }

#ai-pending-messages li { display:flex; gap:10px; align-items:flex-start; margin:5px 0; } #ai-pending-messages li span { flex:1; } #ai-pending-messages li button { flex:none; padding:2px 6px; font-size:11px; }

#ai-chart-type { min-height:36px; height:auto; padding:8px; }

#studio-settings-dialog { width:min(660px, calc(100vw - 32px)); max-width:660px; max-height:calc(100dvh - 32px); overflow:auto; }
#studio-settings-dialog[open] { display:block; }
#studio-settings-dialog h2, #studio-settings-dialog h3 { display:flex; align-items:center; gap:9px; }
#studio-settings-dialog p { line-height:1.6; margin:12px 0; }
#studio-settings-dialog .check-line { display:flex; align-items:center; gap:8px; }
#studio-settings-dialog .check-line input { width:auto; }
#studio-settings-dialog .app-dialog-actions { flex-wrap:wrap; }

.ai-attachments { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; max-height:140px; overflow:auto; }
.ai-attachments[hidden] { display:none; }
.ai-attachment { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--panel-2); max-width:100%; }
.ai-attachment img { width:54px; height:44px; object-fit:contain; border-radius:4px; }
.ai-attachment span { max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.ai-attachment button { padding:4px 7px; font-size:11px; }

#ai-open-codex-chat { align-self:flex-start; font-size:13px; }
#ai-completed-chat { max-width:100%; height:36px; min-height:36px; flex:none; }