/* Objektwerkstatt-spezifisches Layout. Die gemeinsame Basis liegt in
   ../Werkstatt-Familie/src/werkstatt.css und wird als assets/werkstatt.css
   für den Browser gebündelt. */

.toolbar { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.main-grid { display: grid; grid-template-columns: minmax(280px, 37%) 1fr; gap: 14px; min-height: 520px; }
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.code-panel { display: flex; flex-direction: column; min-width: 0; }
.message { min-height: 0; }
.message:not(:empty) { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: #e4f6eb; color: var(--success); }
.message.error { background: #ffeaed; color: var(--danger); }
#console { min-height: 120px; }

.tool-link { display: inline-block; }
.diagram-toggle, .diagram-scrim { display: none; }
.save-state { margin-left: auto; color: #53627e; font-size: .8rem; }

.repl-form { display: flex; gap: 8px; margin-top: 10px; }
.repl-form input {
  min-width: 0;
  flex: 1;
  font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.repl-status { margin: 7px 0 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 800px) {
  .main-grid, .bottom-grid { grid-template-columns: 1fr; }
  .main-grid { min-height: 0; }
  .diagram-panel { position: fixed; z-index: 45; top: 10px; bottom: 10px; left: 0; width: min(84vw, 360px); max-height: none; margin: 0; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; transform: translateX(calc(-100% + 32px)); transition: transform .22s ease; }
  .diagram-panel.is-open { transform: translateX(0); }
  .diagram-drawer-content { height: 100%; overflow: auto; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 0 8px 8px 0; box-shadow: 0 10px 30px #17234244; }
  .diagram-toggle { display: block; position: absolute; z-index: 2; top: 50%; right: -40px; width: 40px; height: 104px; padding: 8px 9px; border-radius: 0 6px 6px 0; background: var(--accent); box-shadow: 2px 3px 8px #17234233; writing-mode: vertical-rl; text-orientation: mixed; transform: translateY(-50%); }
  .diagram-scrim { display: block; position: fixed; z-index: 40; inset: 0; pointer-events: none; background: #17234255; opacity: 0; transition: opacity .22s ease; }
  body.diagram-drawer-open .diagram-scrim { opacity: 1; pointer-events: auto; }
  .diagram-panel .class-model { padding-bottom: 8px; }
  .toolbar { flex-wrap: wrap; }
  .save-state { width: 100%; margin-left: 0; order: 2; }
}

@media (max-width: 520px) {
  .repl-form { flex-direction: column; }
  .repl-form button { align-self: flex-end; }
}