.chat-drawing,
.drawing-view-canvas-wrap {
 border: 1px solid var(--border);
 border-radius: 12px;
 background: var(--card);
 overflow: hidden;
}

.chat-drawing {
 margin-top: 12px;
}

.chat-drawing-header,
.drawing-view-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
 padding: 12px 14px;
 border-bottom: 1px solid var(--border);
}

.chat-drawing-title-row,
.drawing-view-title-row {
 display: flex;
 align-items: center;
 gap: 8px;
}

.drawing-view-title-row {
 width: 100%;
}

.chat-drawing-title,
.drawing-view-title {
 font-size: var(--text-sm);
 font-weight: 600;
}

.drawing-view-title {
 min-width: 0;
}

.drawing-expand {
 margin-left: auto;
 flex-shrink: 0;
}

.drawing-expand-exit {
 display: none;
}

.chat-drawing-meta,
.drawing-view-meta {
 margin: 4px 0 0;
 font-size: var(--text-xs);
 color: var(--muted-foreground);
}

.chat-drawing-actions,
.drawing-view-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}

.chat-drawing-menu-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border: 1px solid var(--border);
 background: var(--background);
 color: var(--foreground);
 border-radius: 8px;
 padding: 6px 10px;
 font-size: var(--text-xs);
 cursor: pointer;
}

.chat-drawing-menu-btn:hover {
 background: var(--muted);
}

.chat-drawing-frame,
.drawing-view-canvas-wrap {
 background:
  linear-gradient(
    45deg,
    color-mix(
      in srgb,
      var(--muted) 70%,
      transparent
     )
     25%,
    transparent 25%
   )
   0 0 / 16px 16px,
  linear-gradient(
    45deg,
    transparent 75%,
    color-mix(
      in srgb,
      var(--muted) 70%,
      transparent
     )
     75%
   )
   0 0 / 16px 16px,
  linear-gradient(
    45deg,
    transparent 75%,
    color-mix(
      in srgb,
      var(--muted) 70%,
      transparent
     )
     75%
   )
   8px 8px / 16px 16px,
  linear-gradient(
    45deg,
    color-mix(
      in srgb,
      var(--muted) 70%,
      transparent
     )
     25%,
    transparent 25%
   )
   8px 8px / 16px 16px,
  #9a9a9a;
 padding: 12px;
}

.chat-drawing-canvas,
.drawing-view-canvas {
 width: 100%;
 max-height: 420px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.chat-drawing-canvas svg,
.drawing-view-canvas svg {
 width: 100%;
 height: 100%;
 max-height: 420px;
 background: #fff;
 border-radius: 4px;
}

.chat-drawing-empty {
 padding: 24px;
 text-align: center;
}

.drawing-shell,
.drawing-page {
 display: flex;
 flex-direction: column;
 gap: 16px;
 min-height: 100%;
}

.drawing-toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
}

.drawing-toolbar-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-left: auto;
}

.drawing-submit-clicks {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
}

.drawing-submit-clicks[hidden] {
 display: none;
}

.drawing-submit-clicks-label {
 font-size: var(--text-sm);
 font-weight: 600;
 white-space: nowrap;
}

.drawing-submit-clicks .select-trigger {
 width: auto;
 min-width: 11rem;
}

.drawing-submit-count {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: var(--text-sm);
 color: var(--muted-foreground);
}

.drawing-submit-count[hidden] {
 display: none;
}

.drawing-submit-count .input {
 width: 4.5rem;
}

.drawing-view-canvas-wrap {
 max-width: min(100%, 960px);
}

.chat-drawing-open {
 display: block;
 width: 100%;
 margin: 0;
 padding: 0;
 border: 0;
 background: transparent;
 color: inherit;
 font: inherit;
 cursor: zoom-in;
 text-align: inherit;
}

.chat-drawing-open:focus-visible {
 outline: 2px solid var(--foreground);
 outline-offset: 2px;
}

.drawing-page .chat-drawing-canvas,
.drawing-page .chat-drawing-canvas svg {
 max-height: min(70vh, 960px);
}

.drawing-page.diagram-markable
 .chat-drawing-canvas
 svg {
 cursor: crosshair;
}

/* Expanded library drawing: the diagram
   covers div.main edge to edge. The page
   chrome stays mounted underneath so Exit
   can restore it. */
.main:has(
 .drawing-page.drawing-expanded
) {
 /* Paint over the fixed toolbar, collapse
    toggle, and feedback button so the
    diagram owns div.main. The chats
    sidebar sits beside main and stays
    usable. Mobile drawer stays above. */
 z-index: 41;
}

.main:has(
  .drawing-page.drawing-expanded
 )
 > .content {
 overflow: hidden;
}

.app-shell:has(
  .drawing-page.drawing-expanded
 )
 .portal-toolbar {
 visibility: hidden;
 pointer-events: none;
}

.drawing-page.drawing-expanded
 .drawing-preview-host {
 position: absolute;
 z-index: 35;
 inset: 0;
 overflow: hidden;
 background: var(--background);
}

.drawing-page.drawing-expanded
 .drawing-expand-exit {
 display: inline-flex;
 position: absolute;
 z-index: 2;
 top: max(
  12px,
  env(safe-area-inset-top)
 );
 right: max(
  12px,
  env(safe-area-inset-right)
 );
 background: var(--card);
 box-shadow: 0 8px 24px
  rgba(16, 23, 41, 0.18);
}

.drawing-page.drawing-expanded
 .drawing-view-canvas-wrap,
.drawing-page.drawing-expanded
 .chat-drawing,
.drawing-page.drawing-expanded
 .chat-drawing-frame {
 border: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
}

.drawing-page.drawing-expanded
 .drawing-view-canvas-wrap {
 width: 100%;
 max-width: none;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow-x: hidden;
 overflow-y: auto;
 overscroll-behavior: contain;
 /* A classic scrollbar would inset the
    SVG. Hide it so the diagram stays
    edge to edge; the wrap still scrolls. */
 scrollbar-width: none;
}

.drawing-page.drawing-expanded
 .drawing-view-canvas-wrap::-webkit-scrollbar {
 width: 0;
 height: 0;
}

.drawing-page.drawing-expanded
 .chat-drawing {
 margin: 0;
 overflow: visible;
}

.drawing-page.drawing-expanded
 .chat-drawing-header {
 display: none;
}

.drawing-page.drawing-expanded
 .chat-drawing-frame {
 padding: 0;
}

.drawing-page.drawing-expanded
 .chat-drawing-canvas,
.drawing-page.drawing-expanded
 .chat-drawing-canvas
 svg {
 width: 100%;
 max-width: none;
 max-height: none;
 height: auto;
 display: block;
 border-radius: 0;
 background: transparent;
}

.drawing-page.drawing-expanded
 .chat-drawing-canvas
 svg {
 height: 100%;
}

.drawing-preview
 .chat-file-preview-content {
 padding: 0;
 overflow: hidden;
}

.drawing-preview-stage {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 overflow: hidden;
 cursor: grab;
 touch-action: none;
 background: repeating-conic-gradient(
   hsl(0, 0%, 45%) 0% 25%,
   hsl(0, 0%, 55%) 0% 50%
  )
  0 0 / 16px 16px;
}

.drawing-preview-stage.is-dragging {
 cursor: grabbing;
}

.drawing-preview-canvas {
 display: flex;
 align-items: center;
 justify-content: center;
 width: min(92vw, 1100px);
 transform-origin: center center;
}

.drawing-preview-canvas svg {
 width: 100%;
 height: auto;
 max-height: calc(100dvh - 96px);
 background: #fff;
 border-radius: 4px;
}

.drawing-preview-zoom {
 min-width: 52px;
 text-align: center;
 font-size: var(--text-xs);
 font-variant-numeric: tabular-nums;
 color: rgba(255, 255, 255, 0.8);
}

.drawing-preview-fit {
 width: auto;
 padding: 0 12px;
 font-size: var(--text-xs);
 font-weight: 600;
}

.drawing-preview
 .chat-file-preview-action:disabled {
 opacity: 0.35;
 cursor: default;
}