/* TTB Comic Builder from Images - Styles */
.ttb-cbf-wrap { max-width: 1100px; margin: 20px auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #111; }
.ttb-cbf-controls { background:#f8fafc; border:1px solid #e5e7eb; padding:12px; border-radius:12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ttb-cbf-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.ttb-cbf-uploads { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.ttb-cbf-upload { border:2px dashed #d1d5db; background:#fff; border-radius:12px; padding:12px; }
.ttb-cbf-upload h4 { margin:0 0 8px; font-size:14px; }
.ttb-cbf-upload input[type="file"] { width:100%; display:block; }
.ttb-cbf-btn { padding:8px 12px; border:1px solid #111; background:#fff; border-radius:10px; cursor:pointer; font-weight:600; color: #000; }
.ttb-cbf-btn.primary { background:#111; color:#fff; }
.ttb-cbf-btn.danger { border-color:#b91c1c; color:#b91c1c; }
.ttb-cbf-btn:hover { transform: translateY(-1px); }
.ttb-cbf-fit-label { margin-left:10px; }
.ttb-cbf-export-bar { margin-top:10px; display:flex; gap:10px; }

.ttb-cbf-stage-wrap { margin:18px 0 8px; display:flex; justify-content:center; }
.ttb-cbf-stage { position:relative; width: 960px; height: 1200px; background:#fff; border: 10px solid #000; box-shadow: 0 8px 28px rgba(0,0,0,.15); }
.ttb-cbf-grid { position:absolute; inset:0; display:grid; gap:10px; padding:10px; background:#fff; }
.ttb-cbf-panel { background:#f3f4f6 center/cover no-repeat; border: 6px solid #000; min-height:100px; }

/* Panels layouts */
.ttb-cbf-grid.panels-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ttb-cbf-grid.panels-2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.ttb-cbf-grid.panels-3 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; }
.ttb-cbf-grid.panels-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Bubbles */
.ttb-cbf-bubbles-layer { position:absolute; inset:0; pointer-events:none; }
.ttb-cbf-bubble {
  position:absolute; max-width: 80%; max-height: 80%;
  background:#fff; border:3px solid #000; border-radius:18px;
  padding:10px; box-shadow: 2px 2px 0 #000;
  pointer-events:auto; overflow: visible; cursor: move;
  min-height: 50px; min-width: 100px;
}
.ttb-cbf-bubble .ttb-cbf-inner { width:100%; height:100%; outline:none; }
.ttb-cbf-bubble.selected { box-shadow: 0 0 0 3px #3b82f6, 2px 2px 0 #000; }

/* Resize handle (matches JS class) */
.ttb-cbf-resize{
  position:absolute;
  right:-6px; bottom:-6px;
  width:14px; height:14px;
  background:#fff;
  border:3px solid #000;
  border-radius:50%;
  box-shadow: 1px 1px 0 #000;
  cursor:nwse-resize;
}

/* Bubble toolbar layout */
.ttb-cbf-bubble-toolbar { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.ttb-cbf-bubble .ttb-cbf-inner {
  font-family: "Bangers", "Comic Neue", "Impact", system-ui, Arial, sans-serif;
  font-size: 20px; line-height: 1.25; color:#111;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
  cursor: text; user-select: text; -webkit-user-select: text;
}

/* Inline SVG outline behind the text */
.ttb-bubble-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;           /* behind the text */
  overflow: visible;    /* allow tail drawn outside to show */
  filter: drop-shadow(2px 2px 0 #000); /* Move the box-shadow to a filter on the SVG */
}
.ttb-bubble-svg path {
  fill: #fff;
  stroke: #000;
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Make sure text is painted above the SVG */
.ttb-cbf-bubble .ttb-cbf-inner { position: relative; z-index: 1; overflow: hidden; }

/* Downloads list */
.ttb-cbf-downloads a { display:inline-block; margin-right:10px; margin-bottom:6px; }

/* Responsive */
@media (max-width: 1024px) {
  .ttb-cbf-stage { width: 90vw; height: calc(90vw * 1.25); }
}

.ttb-cbf-top-bar { display: flex; flex-direction: column; }

.ttb-cbf-bubble-toolbar-clear { display: flex; flex-direction: row;}

#ttb-cbf-delete, #ttb-cbf-reset { flex-grow: 1; }