:root{--paper:#eef1f4;--panel:#fff;--ink:#233044;--muted:#667386;--line:#d7dde5;--accent:#a80036;--uml:#fefecf;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:var(--paper)}header{height:80px;background:var(--panel);border-bottom:2px solid var(--accent);padding:16px 24px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center}.brand strong{font-size:22px;letter-spacing:-.7px}.brand small{display:block;color:var(--muted)}.logo{background:var(--uml);border:1.5px solid var(--accent);color:var(--accent);font-weight:700;font-size:22px;padding:3px 10px}.header-actions{display:flex;align-items:center;gap:12px}#saveStatus{margin-left:auto;font-size:12px}main{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(320px,1.35fr) minmax(240px,1fr) minmax(290px,1.1fr);height:auto;min-height:500px}section{min-width:0;min-height:0;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel)}section:last-child{border:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 14px;border-bottom:1px solid var(--line);min-height:65px}.panel-head>div:first-child{display:flex;align-items:center;gap:8px}h2{font-size:14px;margin:0;font-weight:650}h3{font-size:14px;margin:0 0 8px}.step{font:11px var(--mono);color:#8b97a9}.scroll{overflow:auto;flex:1;padding:16px}.hint,.muted,small{color:var(--muted)}.hint{font-size:12px;margin:0 0 16px}input,select,textarea,button{font:inherit;color:inherit}button,a,input,select,textarea{border-radius:4px}input,select,textarea{border:1px solid var(--line);background:#fff;padding:8px;min-width:0}button{border:1px solid var(--line);background:#fff;padding:7px 10px;cursor:pointer;font-size:12px}button:hover{border-color:var(--accent);color:var(--accent)}button.primary{background:var(--accent);color:white;border-color:var(--accent)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}label{display:grid;gap:5px;font-size:12px}label small{font-size:11px}.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.relation{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;display:grid;gap:12px}.element{border:1px solid var(--accent);background:var(--uml);margin-bottom:12px}.element-head{padding:8px 10px;display:flex;justify-content:space-between;align-items:center;gap:6px}.element-head strong{overflow-wrap:anywhere}.element-head small{font-size:10px;display:block}.element-actions{display:flex;gap:3px}.element-actions button{background:transparent;border:0;padding:2px 4px}.element pre{font:12px/1.7 var(--mono);padding:10px;margin:0;border-top:1px solid var(--accent);white-space:pre-wrap;overflow-wrap:anywhere}.error{color:var(--accent);font-size:12px;white-space:pre-wrap}.error:empty{display:none}.tabs{display:flex;padding:2px;background:var(--paper);border-radius:5px}.tabs button{border:0;background:transparent}.tabs button[aria-selected=true]{background:white;box-shadow:0 1px 3px #0001}.diagram-tools{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px}.diagram-tools>div{display:flex;gap:8px;align-items:center}a{color:var(--accent);text-decoration:none;font-size:12px}.diagram-tools button{font-size:10px;padding:4px}#preview{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:24px 16px;background:radial-gradient(circle,#d7dde5 1px,transparent 1px) 0 0/18px 18px}#diagramImage{max-width:100%;background:white;border:1px solid var(--line);padding:12px}#previewEmpty{background:white;padding:12px;margin-top:12px}#previewEmpty:empty{display:none}#codeView{flex:1;min-height:0;display:flex;flex-direction:column}#code{flex:1;border:0;border-radius:0;resize:none;font:13px/1.8 var(--mono);white-space:pre;padding:16px}#lines{padding:6px 16px;font-size:11px}.panel-footer{border-top:1px solid var(--line);padding:10px 14px;margin:0;color:var(--muted);font-size:10px}.exercise-tools{padding:10px 14px;display:flex;gap:6px;border-bottom:1px solid var(--line)}.exercise-tools button{font-size:11px}#exerciseInput{flex:1;min-height:100px;border:0;border-radius:0;resize:none;padding:18px;line-height:1.8}.exercise-content{line-height:1.9;font-size:14px;overflow-wrap:anywhere}.exercise-content p{white-space:pre-wrap;margin:0 0 16px}.legend{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;font-size:10px}.legend span,mark{padding:2px 4px;border-radius:3px}.requirement{background:#fff0b5;color:#694d00}.actor{background:#d9ebff;color:#164c7c}.ambiguity{background:#f9dcec;color:#803051}mark{cursor:help}mark.uncovered{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:2px}.assistant-info{padding:12px 16px;background:#fafbfc;border-bottom:1px solid var(--line);font-size:12px}.assistant-info small{display:block;margin-top:5px;font-size:11px}.online-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px}.message{margin-bottom:18px}.message-label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}.bubble{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.message.user .bubble{background:var(--paper);padding:10px;border-radius:5px}.message button{margin-top:8px;font-size:10px}#chatForm{border-top:1px solid var(--line);padding:12px}#chatInput{width:100%;resize:vertical;font-size:13px;max-height:220px}.chat-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}.chat-actions small{font-size:10px}#chatError{padding:0 14px}dialog{width:min(520px,94vw);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:8px;color:var(--ink);padding:0;max-height:90dvh}dialog::backdrop{background:#17223777}dialog form{display:grid;gap:16px;padding:24px}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{font-size:18px}.dialog-head button{border:0;font-size:22px;padding:0 4px}details{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}details label,details .row{margin-top:10px}[hidden]{display:none!important}@media(max-width:1200px){main{grid-template-columns:1fr 1.2fr;height:auto}section{height:650px;border-bottom:1px solid var(--line)}}@media(max-width:650px){header{padding:12px;height:auto;gap:12px}.brand small{font-size:10px}.header-actions{gap:4px}.header-actions select{max-width:85px}#saveStatus{width:100%;margin:0}main{grid-template-columns:1fr}section{height:560px}.designer{height:650px}}
#elementDialog{width:min(760px,96vw)}#classMemberFields{display:grid;gap:16px}#elementForm fieldset{margin:0;border:1px solid var(--line);border-radius:4px;padding:12px}#elementForm legend{font-size:13px;font-weight:600;padding:0 5px}.member-row{display:grid;grid-template-columns:140px minmax(100px,1fr) minmax(100px,1fr) 28px;gap:8px;align-items:end;margin-bottom:12px}.member-row.method-row{grid-template-columns:140px minmax(90px,1fr) minmax(130px,1.4fr) minmax(90px,1fr) 28px}.member-row label{font-size:11px;min-width:0}.member-row input,.member-row select{width:100%;padding:7px;font-size:12px}.member-remove{font-size:20px;padding:1px 5px;border:0;background:transparent;height:34px}.member-add{border:0;color:var(--accent);padding:4px 0}.element-form-actions{display:flex;justify-content:space-between;gap:12px}#elementAdvanced{margin:0;padding:0;border:0}#elementAdvanced label{margin-top:12px}@media(max-width:650px){.member-row,.member-row.method-row{grid-template-columns:1fr 1fr}.member-remove{justify-self:end;grid-column:2}.member-row label{font-size:12px}#elementForm{padding:18px}}
.zoom-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line)}.zoom-buttons{display:flex;align-items:center;gap:6px}.zoom-buttons button{min-width:30px}.zoom-buttons output{font:11px var(--mono);text-align:center;min-width:42px}.zoom-toolbar small{font-size:10px}#preview{display:block;position:relative;min-height:0;padding:0;overflow:auto;overscroll-behavior:contain;touch-action:none}#diagramCanvas{position:relative;min-width:100%;min-height:100%}#diagramImage{position:absolute;max-width:none;border:0;padding:0;user-select:none;-webkit-user-drag:none}#preview.can-pan{cursor:grab}#preview.panning{cursor:grabbing;user-select:none}#previewEmpty{position:absolute;top:16px;left:16px;right:16px;pointer-events:none}
main.assistant-hidden{grid-template-columns:minmax(240px,.95fr) minmax(320px,1.5fr) minmax(240px,1fr)}main.assistant-hidden .exercise-panel{border-right:0}.chat-panel-actions{display:flex;gap:6px;align-items:center}#closeAssistant{font-size:20px;line-height:1;padding:4px 6px;border-color:transparent}#assistantToggle[aria-expanded=true]{color:var(--accent);border-color:var(--accent)}@media(max-width:950px){main.assistant-hidden{grid-template-columns:1fr 1.2fr}main.assistant-hidden .exercise-panel{grid-column:1/-1;height:450px}}@media(max-width:650px){main.assistant-hidden{grid-template-columns:1fr}main.assistant-hidden .exercise-panel{grid-column:auto;height:560px}}

.assistant-launcher{position:fixed;right:24px;bottom:20px;z-index:20;display:flex;align-items:center;gap:10px;padding:0;border:0;background:transparent;color:var(--accent);border-radius:28px}
.launcher-label{background:#fff;color:var(--ink);padding:8px 13px;border:1px solid var(--line);border-radius:18px;font-size:13px;font-weight:600;box-shadow:0 2px 8px #2330440d}
.tutor-avatar{display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 3px 12px #2330441a}
.tutor-avatar img{width:62px;height:62px;object-fit:contain;border-radius:50%;display:block}.assistant-launcher:hover .tutor-avatar{border-color:var(--accent);box-shadow:0 4px 14px #a800361f}.assistant-launcher:hover .launcher-label{color:var(--accent);border-color:#d9a9b8}.assistant-launcher[aria-expanded=true]{display:none}main.assistant-hidden .exercise-panel{padding-bottom:100px}
.procedure-step{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-size:12px}.procedure-step select{font-size:12px;padding:4px 6px;flex:1;min-width:0}
.designer-group{margin:0 0 24px;padding:0;border:0}.group-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 12px;cursor:pointer;list-style:none}.group-heading::-webkit-details-marker,.element-head::-webkit-details-marker{display:none}.group-title{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px}.group-title::before,.card-title::before{content:'▸';color:var(--muted);font-size:12px}.designer-group[open]>.group-heading .group-title::before,.element[open]>.element-head .card-title::before{content:'▾'}.count-badge{font:10px var(--mono);border:1px solid var(--line);padding:1px 5px;border-radius:9px;color:var(--muted)}.diagram-warning{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#f5c445;color:#5a4200;font-size:10px;font-weight:700;cursor:help}
.element.cited{outline:3px solid #2f6fb3;outline-offset:2px;transition:outline-color .3s}.group-heading button{font-size:11px;white-space:nowrap}.element{margin:0 0 12px;padding:0;border:1px solid var(--accent)}.element-head{list-style:none;cursor:pointer}.card-title{min-width:0;display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:4px;align-items:center}.card-title strong{font-size:12px}.card-title small{grid-column:2}.element-actions{flex-shrink:0}.element-actions button{font-size:10px}.element-body{border-top:1px solid var(--accent);padding:10px}.element-body pre{border:0;padding:0}.element-body .hint{margin:0}.relationship-properties{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px 10px;font-size:11px;margin:0}.relationship-properties dt{color:var(--muted);font-size:10px}.relationship-properties dd{margin:0;overflow-wrap:anywhere}#relationDialog .relation{border:0;margin:0;padding:0}#relationDialogFields:empty{display:none}#relationDialogActions #addRelation{background:var(--accent);border-color:var(--accent);color:white}summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.chat-avatar{width:40px;height:40px;object-fit:contain;border-radius:50%;flex-shrink:0}

/* UMLBuddy shares the workspace; it never floats over another panel. */
#chatPanel{position:static;width:auto;height:auto;border-radius:0;box-shadow:none;overflow:hidden}
#chatPanel .panel-head{flex-shrink:0}#chatPanel #messages{min-height:0}
@media(min-width:651px) and (max-width:1200px){
  main,main.assistant-hidden{grid-template-columns:1fr 1.2fr;grid-template-rows:repeat(2,minmax(400px,1fr));height:auto;min-height:800px}
  main>section{height:auto}
  main .exercise-panel{grid-column:auto;height:auto;padding-bottom:0;border-right:1px solid var(--line)}
  main.assistant-hidden .exercise-panel{grid-column:1/-1;padding-bottom:100px;border-right:0}
  main .diagram-panel{border-right:0}
  .assistant-launcher{right:20px;bottom:16px}
}
@media(max-width:650px){
  main,main.assistant-hidden{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  main>section,#chatPanel{height:560px;border-right:0}
  main .designer{height:650px}
  main .exercise-panel{grid-column:auto;height:560px;padding-bottom:0}
  main.assistant-hidden .exercise-panel{padding-bottom:100px}
  .assistant-launcher{right:16px;bottom:16px}
}

header{padding:4px 24px}.site-logo{width:210px;height:70px;object-fit:contain;display:block;flex-shrink:0}.brand small{font-size:12px}
.relationship-card .card-title{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.relationship-card .card-title::before{display:none}.relationship-label{font-size:12px;font-weight:600;overflow-wrap:anywhere}.relationship-card .card-title strong{font-size:11px;font-weight:500}.relationship-card .card-title small{font-size:10px}.relationship-card .element-head{cursor:default;padding:10px}
@media(max-width:650px){header{padding:8px 12px;min-height:80px}.site-logo{width:150px;height:50px}.brand small{display:none}}

#settingsDialog{width:min(600px,94vw)}
#settingsForm{gap:16px;padding:24px}
#settingsForm .dialog-head{position:sticky;top:0;background:var(--panel);z-index:2;padding:8px 0}
#settingsForm .settings-intro,#settingsForm .key-note{margin:0}
.settings-group{border:1px solid var(--line);border-radius:6px;margin:0;padding:16px;display:grid;gap:14px;min-width:0}
.settings-group legend{font-size:12px;font-weight:650;padding:0 6px}
.settings-group input,.settings-group select{width:100%}
.key-input{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.model-discovery-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.model-discovery-head .hint{margin:0;max-width:300px}
.model-discovery-head button{flex-shrink:0;color:var(--accent);font-weight:600}
.models-status{margin:0;font-size:12px;color:var(--muted)}
.models-status.error{color:var(--accent)}
.model-settings>small{font-size:11px}
.settings-rendering{margin:0;padding-top:12px}
.settings-rendering summary{cursor:pointer;font-size:12px;font-weight:600}
.settings-actions{display:flex;justify-content:space-between;gap:12px;position:sticky;bottom:0;background:var(--panel);padding:12px 0;border-top:1px solid var(--line)}
@media(max-width:650px){#settingsForm{padding:18px}.settings-group{padding:12px}.model-discovery-head{align-items:flex-start;flex-direction:column}.settings-actions{flex-wrap:wrap}}

/* Global settings stay in the app header; diagram controls belong to Designer. */
body{display:flex;flex-direction:column;height:100dvh}
header.app-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:4px 20px;flex-shrink:0;height:80px}
.app-header .brand{gap:10px;min-width:0}
.app-header .brand small{max-width:150px;font-size:11px}
.designer .designer-head{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;align-items:stretch;gap:10px;padding:12px 14px;flex-shrink:0}
.designer-heading{justify-content:space-between;width:100%}
.designer-toolbar{display:flex;align-items:center;gap:8px;min-width:0}
.diagram-choice{display:block;flex:1;min-width:0}
.diagram-choice>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.app-header select,.app-header button{height:36px;border-radius:8px;font-size:12px}
#diagramType{width:100%;height:36px;border-radius:8px;font-size:12px;background:#f8f9fb;padding:6px 8px;border-color:#e1e5ec}
.control-icon{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.designer-toolbar .new-diagram{display:flex;align-items:center;gap:5px;height:36px;border-radius:8px;border-color:var(--line);background:white;padding:6px 10px;font-weight:500;white-space:nowrap;flex-shrink:0}
.designer-toolbar .new-diagram:hover{background:#f7f0f3;border-color:#f0dce3}
#saveStatus.save-status{margin:0;font-size:11px;white-space:nowrap;color:var(--muted);width:auto;display:flex;align-items:center;gap:5px}
.save-status::before{content:'✓';color:#42745e;font-size:12px}
#saveStatus.save-error{color:var(--accent);white-space:normal;max-width:180px}
.save-status.save-error::before{content:'!';color:var(--accent)}
.app-header .header-actions{gap:8px}
.language-control{position:relative;display:flex;align-items:center;height:36px;border-radius:8px;background:#f8f9fb;border:1px solid #e1e5ec}
.language-control>.control-icon{position:absolute;left:10px;pointer-events:none;color:var(--muted);width:16px;height:16px}
.app-header #language{width:116px;max-width:none;background:transparent;border:0;padding:6px 7px 6px 32px;cursor:pointer}
.language-control:hover{border-color:#c3cbd7}
.app-header .llm-settings-button{display:flex;align-items:center;gap:7px;background:#fdf1f5;border-color:#efd3dd;color:var(--accent);padding:6px 12px;font-weight:600;white-space:nowrap}
.app-header .llm-settings-button:hover{background:#f9e4ec;border-color:#d39aad}
.settings-label-short{display:none}
main,main.assistant-hidden{height:auto;flex:1}
@media(max-width:700px){.app-header .brand small{display:none}}
@media(max-width:1100px){
  header.app-header{height:auto;grid-template-columns:1fr auto;row-gap:4px;padding:4px 16px 8px}
  .app-header .site-logo{width:180px;height:60px}
  .app-header .header-actions{grid-column:2;grid-row:1}
}
@media(max-width:650px){
  body{height:auto;min-height:100dvh}
  header.app-header{min-height:0;padding:4px 12px 8px;column-gap:8px;row-gap:4px}
  .app-header .site-logo{width:150px;height:50px}
  .app-header .header-actions{gap:6px}
  .app-header #language{width:106px;font-size:11px;padding-left:29px}
  .language-control>.control-icon{left:8px;width:15px;height:15px}
  .app-header .llm-settings-button{padding:6px 9px;gap:5px}
  .settings-label{display:none}.settings-label-short{display:inline}
  #saveStatus.save-status{font-size:10px}
  main,main.assistant-hidden{flex:none;min-height:0}
}
@media(max-width:380px){.app-header .site-logo{width:120px;height:46px}.app-header #language{width:98px}.app-header .header-actions{gap:4px}.app-header .llm-settings-button{padding-inline:8px}}

.element-metadata{margin:0;font-size:11px;display:grid;gap:3px}
.element-metadata dt{color:var(--muted);font-size:10px}
.element-metadata dd{margin:0;overflow-wrap:anywhere;font-family:var(--mono)}
.group-heading{flex-wrap:wrap;row-gap:8px}
.sequence-tools-body{display:grid;gap:12px}
.sequence-tools-body label,.sequence-tools-body .row{margin:0}
.sequence-tools-body input,.sequence-tools-body select{width:100%}
#sequenceTools .group-heading{padding-bottom:8px}

/* Connection readiness and streaming tutor replies. */
.app-header .llm-settings-button{background:#183454;border-color:#183454;color:#fff}
.app-header .llm-settings-button:hover{background:#102641;border-color:#102641;color:#fff}
.app-header .llm-settings-button:focus-visible{outline-color:#183454}
.connection-line{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12px}
.assistant-info .online-dot{width:8px;height:8px;margin:0;flex-shrink:0;background:#c13845;box-shadow:0 0 0 3px #c1384514}
.assistant-info[data-state=ready] .online-dot{background:#238455;box-shadow:0 0 0 3px #23845517}
.assistant-info[data-state=busy] .online-dot{background:#b87715;box-shadow:0 0 0 3px #b8771517;animation:tutor-pulse 1.2s ease-in-out infinite}
.model-detail{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere;margin-top:3px}
.chat-keyboard-hint{display:block;margin-top:5px;font-size:10px;color:var(--muted)}
.tutor-avatar{position:relative}
.assistant-launcher .tutor-avatar::after{content:'';position:absolute;right:0;bottom:2px;width:13px;height:13px;background:#c13845;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #d7dde5}
.assistant-launcher[data-connection=ready] .tutor-avatar::after{background:#238455}
.assistant-launcher[data-connection=busy] .tutor-avatar::after{background:#b87715}
.assistant-launcher[data-nudge=true] .tutor-avatar::before{content:'';position:absolute;left:-2px;top:-2px;width:12px;height:12px;background:#2f6fb3;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #d7dde5;animation:tutor-pulse 1.4s ease-in-out infinite}
.streaming .bubble:not(.thinking)::after{content:'';display:inline-block;width:6px;height:14px;margin-left:4px;vertical-align:middle;background:#183454;animation:tutor-pulse 1s ease-in-out infinite}
.thinking{color:var(--muted);animation:tutor-pulse 1.2s ease-in-out infinite}
@keyframes tutor-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.thinking,.streaming .bubble::after,.assistant-info[data-state=busy] .online-dot{animation:none}}