/* The Tool Bakery - Timeline Builder for Presentations (Modern Theme) */
:root{
  --ttb-bg: #0f1115;
  --ttb-card: #161a22;
  --ttb-muted: #9aa3b2;
  --ttb-text: #e6e8ec;
  --ttb-accent: #7aa2ff;
  --ttb-accent-2: #7ff0d9;
  --ttb-line: #2a2f3a;
  --ttb-border: #1f2430;
  --ttb-danger: #ff7182;
  --ttb-shadow: 0 10px 30px rgba(0,0,0,.35);
}

html, body{ background: var(--ttb-bg); color: var(--ttb-text); }
.ttb-tool{ max-width: 980px; margin: 32px auto; padding: 0 16px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.ttb-title{ font-size: 28px; margin: 0 0 6px; }
.ttb-subtitle{ color: var(--ttb-muted); margin: 0 0 16px; }

.ttb-card{
  background: var(--ttb-card);
  border: 1px solid var(--ttb-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--ttb-shadow);
  margin-bottom: 18px;
}
.ttb-h2{ margin: 0 0 12px; font-size: 20px; color: #FFF;}
.ttb-divider{ height: 1px; background: var(--ttb-border); margin: 22px 0; }

.ttb-upload-row{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ttb-help{ color: var(--ttb-muted); margin-top: 8px; font-size: 14px; }
.ttb-msg{ margin-top: 8px; font-size: 14px; color: var(--ttb-accent-2); }

/* Buttons */
.ttb-actions, .ttb-actions-row{ display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.ttb-btn{
  background: #232a36;
  color: var(--ttb-text);
  border: 1px solid var(--ttb-border);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
  font-weight: 600;
}
.ttb-btn:hover{ background: #2a3240; border-color: #2f3746; }
.ttb-btn:active{ transform: translateY(1px); }
.ttb-btn.primary{ background: linear-gradient(135deg, var(--ttb-accent), var(--ttb-accent-2)); color: #081015; border-color: transparent; }
.ttb-btn.ghost{ background: transparent; border: 1px dashed var(--ttb-border); color: var(--ttb-muted); }

/* Sections */
.ttb-sections{ display: grid; grid-template-columns: 1fr; gap: 14px; }
.ttb-tl-section{
  background: #12161e;
  border: 1px solid var(--ttb-border);
  border-radius: 14px;
  padding: 12px;
}
.ttb-tl-sec-head{ display:flex; justify-content: space-between; align-items:center; margin-bottom:8px; }
.ttb-tl-sec-label{ font-weight:700; color: #FFF;}
.ttb-icon-btn{
  background: transparent; color: var(--ttb-muted);
  border: 1px solid var(--ttb-border); width: 32px; height: 32px; border-radius: 10px;
  cursor:pointer;
}
.ttb-icon-btn:hover{ color: var(--ttb-text); border-color: #364057; }
.ttb-icon-btn.ttb-remove{ border-color: #3b2327; color: #ff9aa8; display: flex; justify-content: center; align-items: center; }
.ttb-icon-btn.ttb-remove:hover{ background: #2a1418; color: #ffc0c8; }

.ttb-field{ display:flex; gap:10px; align-items:center; margin:8px 0; flex-wrap:wrap; }
.ttb-field label{ width: 150px; color: var(--ttb-muted); }
.ttb-input, .ttb-textarea, .ttb-input-file{
  flex:1; min-width: 220px;
  background:#0f131a; color:var(--ttb-text);
  border:1px solid var(--ttb-border); border-radius:10px; padding:10px 12px;
}
.ttb-textarea{ resize: vertical; }
.ttb-image-preview{
  display:flex; align-items:center; justify-content:center; width:72px; height:72px;
  border-radius: 12px; border:1px dashed var(--ttb-border); background:#0b0f15; overflow:hidden;
}
.ttb-img-ph{ color: var(--ttb-muted); font-size: 12px; }
.ttb-img-el{ width:100%; height:100%; object-fit: cover; display:block; }

/* Modal */
.ttb-modal{ position: fixed; inset:0; background: #000; display:none; z-index: 9999; }
.ttb-modal.open{ display:block; }
.ttb-modal-inner{ position: relative; width: 100vw; height: 100vh; padding: 24px; box-sizing: border-box; }
.ttb-modal-close{
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 44px; height: 44px; border-radius: 14px;
  background: #202633; border: 1px solid #2b3344; color: #fff; font-size: 26px; line-height: 44px; text-align:center;
  cursor:pointer;
   display: flex; justify-content: center; align-items: center; 
}
.ttb-modal-close:hover{ background:#283144; }
.ttb-no-scroll{ overflow: hidden; }

/* Presentation Canvas */
.ttb-tl-canvas{
  position: relative;
  width: 100%; height: 100%;
  overflow: auto;
  padding: 40px 28px 28px 28px;
  box-sizing: border-box;
}
.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 26px 6px;
  margin: 0;
}

/* Base horizontal line (drawn behind bubbles) */
.tl-row::before {
  content: "";
  position: absolute;
  top: 160px;
  height: 4px;
  background: var(--ttb-line);
  transform: translateY(-2px);
}

/* Odd row horizontal line (row 1 special case) */
.tl-row.tl-odd-row::before {
  width: 85%;
  right: auto;
  left: auto;
}

/* Every odd row after the first */
.tl-row.tl-odd-row:not(:first-child)::before {
  width: 70%;
  right: auto;
  left: 15%;
}

/* RTL rows – shorter line, inset from right */
.tl-row.rtl::before {
  width: 70%;
  right: 15%;
  left: auto;
}

.tl-row.rtl{ direction: rtl; } /* flips grid item order visually */

/* Bubbles */
.tl-bubble{
  position: relative;
  padding: 10px 8px;
  text-align: center;
  direction: ltr; /* keep text normal even if row is rtl */
}
.tl-bubble.tl-empty{ opacity: 0; pointer-events: none; }

.tl-date{ font-weight:700; margin-bottom: 8px; color: #e9f1ff; text-shadow: 0 2px 10px rgba(122,162,255,.25); }
.tl-bubble-img{
  width: 150px; height: 150px; border-radius: 50%;
  margin: 0 auto;
  border: 5px solid #1c2230;
  box-shadow: 0 12px 30px rgba(0,0,0,.4), inset 0 0 0 2px rgba(122,162,255,.35);
  overflow: hidden;
  background: #0a0f16;
}
.tl-bubble-img img{ width:100%; height:100%; object-fit: cover; display:block; }
.tl-bubble-ph{ display:inline-block; width:100%; height:100%; line-height:140px; font-size:48px; color:#2f3a52; }

.tl-title{ margin-top: 10px; font-size: 18px; font-weight: 800; color: #EEEEEE; background-color: #000;}
.tl-desc{ padding-top: 6px; color: var(--ttb-muted); max-width: 360px; margin-left:auto; margin-right:auto; background-color: #000;}

/* Vertical connector down from the "end" bubble to next row */
.tl-bubble.connect-down::after{
  content:"";
  position: absolute;
  left: 50%; transform: translateX(-2px);
  bottom: -42px;
  width: 4px; height: 42px;
  background: var(--ttb-line);
  height:100%;
  z-index: -1;
}

/* Responsive */
@media (max-width: 920px){
  .tl-bubble-img{ width: 120px; height: 120px; }
}
@media (max-width: 720px){
  .tl-row{
    grid-template-columns: 1fr;
    padding: 18px 6px;
  }

  /* Remove horizontal lines */
  .tl-row::before{ display: none; }
  /*.tl-bubble.connect-down::after{ display: none; }

  /* Add vertical connectors to every bubble except the last overall */
  .tl-bubble{
    position: relative;
    padding-bottom: 32px;
  }
  .tl-bubble:not(:last-of-type)::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 100px;
    width: 4px;
    height: 70%;
    background: var(--ttb-line);
    transform: translateX(-50%);
	z-index: -1;
  }
  .tl-bubble.connect-down:not(:last-of-type)::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 100px;
    width: 4px;
    height: 70%;
    background: var(--ttb-line);
    transform: translateX(-50%);
	z-index: -1;
  }
}

@media (max-width: 520px){
  .tl-row{ grid-template-columns: 1fr; }
  .tl-bubble.connect-down::after{ display: none; } /* stacked, no need */
}

/* Utility text */
.ttb-empty{ color: var(--ttb-muted); text-align:center; padding: 20px; }

#ttb-tl-json { color: #FFF; }