.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;
}

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

.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-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;
}

.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;
}