/**





 * GlomaxGPT — Canvas Panel CSS





 * Sağ panel: kod görüntüleyici, markdown önizleme, artifact canvas





 * ChatGPT-style sağ panel sistemi





 */





/* ══════════════════════════════════════════════════════════





   CANVAS PANEL — Sağ panel





══════════════════════════════════════════════════════════ */





.canvas-panel {





  position: fixed;





  top: 0;





  right: 0;





  bottom: 0;





  width: var(--canvas-width, 480px);





  max-width: 90vw;





  background: var(--surface);





  border-left: 1px solid var(--border);





  display: flex;





  flex-direction: column;





  z-index: 200;





  transform: translateX(100%);





  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;





  will-change: transform;





}





.canvas-panel.open {





  transform: translateX(0);





  box-shadow: -8px 0 32px rgba(0,0,0,.12);





}





[data-theme="dark"] .canvas-panel.open {





  box-shadow: -8px 0 40px rgba(0,0,0,.35);





}





/* Ana içerik alanı canvas açıkken daralır */





.chat-main.canvas-open,





.main-content.canvas-open {





  margin-right: var(--canvas-width, 480px);





  transition: margin-right .25s cubic-bezier(.4,0,.2,1);





}





/* ── Canvas Header ── */





.canvas-header {





  display: flex;





  align-items: center;





  gap: 8px;





  padding: 10px 12px;





  border-bottom: 1px solid var(--border);





  flex-shrink: 0;





  min-height: 52px;





}





.canvas-header-left {





  display: flex;





  align-items: center;





  gap: 8px;





  flex: 1;





  min-width: 0;





}





.canvas-title {





  font-size: .84rem;





  font-weight: 600;





  color: var(--text);





  white-space: nowrap;





  overflow: hidden;





  text-overflow: ellipsis;





  flex: 1;





}





.canvas-lang-badge {





  display: inline-flex;





  align-items: center;





  padding: 2px 8px;





  border-radius: 6px;





  background: var(--surface2);





  border: 1px solid var(--border);





  font-size: .68rem;





  font-weight: 700;





  color: var(--text3);





  text-transform: uppercase;





  letter-spacing: .05em;





  flex-shrink: 0;





}





.canvas-header-right {





  display: flex;





  align-items: center;





  gap: 2px;





  flex-shrink: 0;





}





.canvas-btn {





  display: flex;





  align-items: center;





  justify-content: center;





  width: 32px;





  height: 32px;





  border-radius: 8px;





  background: none;





  border: none;





  color: var(--text3);





  cursor: pointer;





  transition: background .12s, color .12s;





  flex-shrink: 0;





}





.canvas-btn:hover {





  background: var(--surface2);





  color: var(--text);





}





.canvas-btn.active {





  background: var(--surface2);





  color: var(--text);





}





/* ── Canvas Tabs ── */





.canvas-tabs {





  display: flex;





  align-items: center;





  gap: 2px;





  padding: 6px 12px;





  border-bottom: 1px solid var(--border);





  flex-shrink: 0;





  overflow-x: auto;





  scrollbar-width: none;





}





.canvas-tabs::-webkit-scrollbar { display: none; }





.canvas-tab {





  display: flex;





  align-items: center;





  gap: 6px;





  padding: 5px 10px;





  border-radius: 7px;





  font-size: .78rem;





  font-weight: 500;





  color: var(--text3);





  cursor: pointer;





  transition: background .12s, color .12s;





  white-space: nowrap;





  border: none;





  background: none;





  flex-shrink: 0;





}





.canvas-tab:hover {





  background: var(--surface2);





  color: var(--text2);





}





.canvas-tab.active {





  background: var(--surface2);





  color: var(--text);





  font-weight: 600;





}





/* ── Canvas Body ── */





.canvas-body {





  flex: 1;





  overflow: hidden;





  position: relative;





  display: flex;





  flex-direction: column;





}





/* Kod görüntüleyici */





.canvas-code-view {





  flex: 1;





  overflow: auto;





  scrollbar-width: thin;





  scrollbar-color: var(--border2) transparent;





}





.canvas-code-view::-webkit-scrollbar { width: 6px; }





.canvas-code-view::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }





.canvas-code-view pre {





  margin: 0;





  padding: 20px;





  font-size: .84rem;





  line-height: 1.65;





  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;





  background: transparent;





  color: var(--text);





  min-height: 100%;





  tab-size: 2;





}





.canvas-code-view code {





  font-family: inherit;





  background: none;





  padding: 0;





  border-radius: 0;





  font-size: inherit;





}





/* Markdown önizleme */





.canvas-preview-view {





  flex: 1;





  overflow-y: auto;





  padding: 24px;





  scrollbar-width: thin;





  scrollbar-color: var(--border2) transparent;





}





.canvas-preview-view::-webkit-scrollbar { width: 6px; }





.canvas-preview-view::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }





.canvas-preview-view h1,





.canvas-preview-view h2,





.canvas-preview-view h3,





.canvas-preview-view h4 {





  color: var(--text);





  font-weight: 700;





  line-height: 1.3;





  margin: 1.2em 0 .5em;





}





.canvas-preview-view h1 { font-size: 1.4rem; }





.canvas-preview-view h2 { font-size: 1.15rem; }





.canvas-preview-view h3 { font-size: 1rem; }





.canvas-preview-view p { color: var(--text2); line-height: 1.7; margin: .75em 0; font-size: .9rem; }





.canvas-preview-view ul,





.canvas-preview-view ol { color: var(--text2); padding-left: 1.5em; margin: .75em 0; font-size: .9rem; }





.canvas-preview-view li { margin: .3em 0; line-height: 1.6; }





.canvas-preview-view code {





  background: var(--surface2);





  border: 1px solid var(--border);





  border-radius: 5px;





  padding: 1px 6px;





  font-size: .82rem;





  font-family: 'JetBrains Mono', 'Fira Code', monospace;





  color: var(--text);





}





.canvas-preview-view pre {





  background: var(--surface2);





  border: 1px solid var(--border);





  border-radius: 10px;





  padding: 14px 16px;





  overflow-x: auto;





  margin: 1em 0;





}





.canvas-preview-view pre code {





  background: none;





  border: none;





  padding: 0;





  font-size: .82rem;





}





.canvas-preview-view blockquote {





  border-left: 3px solid var(--border2);





  padding-left: 14px;





  margin: 1em 0;





  color: var(--text3);





  font-style: italic;





}





.canvas-preview-view table {





  width: 100%;





  border-collapse: collapse;





  margin: 1em 0;





  font-size: .85rem;





}





.canvas-preview-view th,





.canvas-preview-view td {





  padding: 8px 12px;





  border: 1px solid var(--border);





  text-align: left;





}





.canvas-preview-view th {





  background: var(--surface2);





  font-weight: 700;





  color: var(--text);





}





.canvas-preview-view td { color: var(--text2); }





.canvas-preview-view hr {





  border: none;





  border-top: 1px solid var(--border);





  margin: 1.5em 0;





}





.canvas-preview-view a {





  color: var(--text);





  text-decoration: underline;





  text-underline-offset: 2px;





}





.canvas-preview-view a:hover { opacity: .75; }





/* ── Canvas Footer ── */





.canvas-footer {





  flex-shrink: 0;





  padding: 8px 12px;





  border-top: 1px solid var(--border);





  display: flex;





  align-items: center;





  justify-content: space-between;





  gap: 8px;





}





.canvas-footer-left {





  display: flex;





  align-items: center;





  gap: 4px;





}





.canvas-footer-right {





  display: flex;





  align-items: center;





  gap: 4px;





}





.canvas-footer-info {





  font-size: .68rem;





  color: var(--text4);





  white-space: nowrap;





}





/* ── Canvas Resize Handle ── */





.canvas-resize-handle {





  position: absolute;





  left: -4px;





  top: 0;





  bottom: 0;





  width: 8px;





  cursor: col-resize;





  z-index: 10;





  display: flex;





  align-items: center;





  justify-content: center;





}





.canvas-resize-handle::after {





  content: '';





  width: 2px;





  height: 40px;





  border-radius: 1px;





  background: var(--border2);





  opacity: 0;





  transition: opacity .15s;





}





.canvas-resize-handle:hover::after,





.canvas-resize-handle.dragging::after {





  opacity: 1;





}





/* ── Canvas Artifact Chip (mesaj içinde) ── */





.canvas-artifact-chip {





  display: inline-flex;





  align-items: center;





  gap: 8px;





  padding: 8px 12px;





  background: var(--surface2);





  border: 1px solid var(--border);





  border-radius: 10px;





  cursor: pointer;





  transition: background .12s, border-color .12s;





  margin: 6px 0;





  max-width: 320px;





  width: 100%;





}





.canvas-artifact-chip:hover {





  background: var(--surface3);





  border-color: var(--border2);





}





.canvas-artifact-chip-icon {





  width: 32px;





  height: 32px;





  border-radius: 8px;





  background: var(--surface3);





  display: flex;





  align-items: center;





  justify-content: center;





  flex-shrink: 0;





  color: var(--text3);





}





.canvas-artifact-chip-info {





  flex: 1;





  min-width: 0;





}





.canvas-artifact-chip-title {





  font-size: .82rem;





  font-weight: 600;





  color: var(--text);





  white-space: nowrap;





  overflow: hidden;





  text-overflow: ellipsis;





}





.canvas-artifact-chip-meta {





  font-size: .68rem;





  color: var(--text4);





  margin-top: 1px;





}





.canvas-artifact-chip-arrow {





  color: var(--text4);





  flex-shrink: 0;





}





/* ── Canvas Empty State ── */





.canvas-empty {





  display: flex;





  flex-direction: column;





  align-items: center;





  justify-content: center;





  flex: 1;





  padding: 40px 24px;





  text-align: center;





  gap: 12px;





}





.canvas-empty-icon {





  width: 48px;





  height: 48px;





  border-radius: 12px;





  background: var(--surface2);





  display: flex;





  align-items: center;





  justify-content: center;





  color: var(--text4);





}





.canvas-empty-title {





  font-size: .9rem;





  font-weight: 600;





  color: var(--text2);





}





.canvas-empty-desc {





  font-size: .8rem;





  color: var(--text4);





  line-height: 1.5;





  max-width: 240px;





}





/* ── Canvas Loading ── */





.canvas-loading {





  display: flex;





  align-items: center;





  justify-content: center;





  flex: 1;





  gap: 6px;





}





.canvas-loading-dot {





  width: 6px;





  height: 6px;





  border-radius: 50%;





  background: var(--text4);





  animation: canvasDotBounce .8s infinite alternate;





}





.canvas-loading-dot:nth-child(2) { animation-delay: .15s; }





.canvas-loading-dot:nth-child(3) { animation-delay: .3s; }





@keyframes canvasDotBounce {





  from { opacity: .3; transform: translateY(0); }





  to   { opacity: 1;  transform: translateY(-4px); }





}





/* ── Canvas Overlay (mobil) ── */





.canvas-overlay {





  display: none;





  position: fixed;





  inset: 0;





  background: rgba(0,0,0,.4);





  z-index: 199;





  backdrop-filter: blur(2px);





}





.canvas-overlay.visible { display: block; }





/* ── Responsive ── */






/* ── Tablet ve Mobil Canvas Uyumluluğu ── */
@media (max-width: 1024px) {
  .canvas-panel {
    width: min(520px, 100vw) !important;
    z-index: 1000002 !important;
  }
  .canvas-overlay {
    z-index: 1000001 !important;
  }
  .chat-main.canvas-open,
  .main-content.canvas-open {
    margin-right: 0 !important;
  }
  .canvas-open-code-btn {
    opacity: 0.95 !important;
    display: inline-flex !important;
  }
}

@media (max-width: 768px) {
  .canvas-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    border-left: none !important;
    z-index: 1000002 !important;
  }
  .canvas-overlay {
    z-index: 1000001 !important;
  }
  .canvas-resize-handle {
    display: none !important;
  }
  .canvas-open-code-btn {
    opacity: 0.95 !important;
    padding: 5px 9px !important;
    font-size: .74rem !important;
  }
  .canvas-header {
    padding: 10px 14px !important;
  }
}

@media (hover: none) {
  .canvas-open-code-btn {
    opacity: 0.95 !important;
  }
}

/* ── Canvas Düzenleme Modu ── */





.canvas-edit-textarea {





  width: 100%; height: calc(100% - 48px);





  background: var(--surface2, #0d0d1a);





  color: var(--text, #ececec);





  border: none; outline: none; resize: none;





  font-family: 'Fira Code','Courier New',monospace;





  font-size: .83rem; line-height: 1.6;





  padding: 16px; tab-size: 2;





  box-sizing: border-box;





}





.canvas-edit-bar {





  display: flex; align-items: center; justify-content: space-between;





  padding: 6px 12px; height: 44px;





  background: var(--surface, #1a1a2e);





  border-bottom: 1px solid var(--border, rgba(255,255,255,.1));





  flex-shrink: 0;





}





.canvas-edit-status {





  font-size: .75rem; color: var(--text3, #888);





}





.canvas-edit-actions { display: flex; gap: 6px; }





.canvas-edit-cancel {





  background: transparent; border: 1px solid var(--border,rgba(255,255,255,.12));





  color: var(--text2,#bbb); font-size: .75rem; padding: 4px 10px; border-radius: 6px; cursor: pointer;





}





.canvas-edit-cancel:hover { background: var(--surface2,rgba(255,255,255,.06)); }





.canvas-btn-primary {





  background: #7c6ef2; border: none; color: #fff;





  font-size: .75rem; font-weight: 600; padding: 4px 12px; border-radius: 6px; cursor: pointer;





  transition: opacity .12s;





}





.canvas-btn-primary:hover { opacity: .85; }





.canvas-btn-primary.dirty { background: #22c55e; }





.canvas-btn.active { color: #7c6ef2 !important; }





/* ── Versiyon Paneli ── */





.canvas-version-panel {





  position: absolute; bottom: 0; left: 0; right: 0;





  background: var(--surface, #1a1a2e);





  border-top: 1px solid var(--border, rgba(255,255,255,.12));





  max-height: 260px; overflow: hidden;





  display: flex; flex-direction: column;





  z-index: 10;





}





.cvp-header {





  display: flex; align-items: center; justify-content: space-between;





  padding: 8px 14px; font-size: .78rem; font-weight: 600;





  color: var(--text, #ececec);





  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));





}





.cvp-header button {





  background: none; border: none; color: var(--text3,#888); cursor: pointer; font-size: .85rem;





}





.cvp-list { overflow-y: auto; flex: 1; }





.cvp-item {





  display: flex; align-items: center; gap: 8px;





  padding: 7px 14px; border-bottom: 1px solid var(--border,rgba(255,255,255,.05));





  font-size: .76rem;





}





.cvp-item:hover { background: var(--surface2, rgba(255,255,255,.04)); }





.cvp-label { flex: 1; color: var(--text, #ececec); }





.cvp-time { color: var(--text3,#888); font-size: .7rem; }





.cvp-restore {





  padding: 3px 8px; border-radius: 5px; border: 1px solid rgba(124,110,242,.4);





  background: rgba(124,110,242,.1); color: #a78bfa; font-size: .7rem; cursor: pointer;





}





.cvp-restore:hover { background: rgba(124,110,242,.2); }





.cvp-empty { padding: 16px 14px; font-size: .76rem; color: var(--text3,#888); }



.canvas-panel:not(.open) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.canvas-panel.open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.canvas-overlay:not(.visible) {
  display: none !important;
  pointer-events: none !important;
}