.tcs-versions { display: grid; gap: 16px; }
.tcs-toolbar {display: block; margin-bottom: 12px; margin: 0 auto;}

.tcs-version { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px; background: rgba(255,255,255,.03); }
.tcs-version-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tcs-version-head input {max-width: 150px;}
.tcs-version-title {color: #fff; font-family: 'Bender', sans-serif; font-size: 20pt;}
    
.tcs-version-input {font-family: 'Bender', sans-serif; font-size: 20pt; font-size: 18px; padding: 6px 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; border-radius: 6px;}
.tcs-status-badge { font-size: 12px; padding: 4px 8px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75);  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; }

.tcs-change-list { list-style: disc inside; margin: 8px 0 0 0; padding: 0; display: grid; gap: 10px; }
.tcs-change { display: flex; align-items: center; gap: 8px; }
.tcs-change-text { flex: 1; }

.tcs-add-change { display: flex; gap: 8px; margin-top: 8px; }
.tcs-change-input { flex: 1; padding: 8px 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; border-radius: 6px; }

.tcs-status-actions { display: flex; gap: 8px; margin-top: 10px; }
.btn-danger { border-color: rgba(255,0,0,.35); }
    
/* Центральная линия — как было */
.tcs-timeline{
  position: relative;
  padding: 24px 0;
}
.tcs-timeline::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  pointer-events: none;
}

/* Половинки */
.tcs-timeline-item{
  position: relative;
  width: 50%;
  padding: 12px 24px;
  box-sizing: border-box;
}
.tcs-side-left  { left: 0;  text-align: right; padding-right: 20px; }  /* отступ до линии */
.tcs-side-right { left: 50%; text-align: left; padding-left:  20px; }  /* отступ до линии */

/* Точка: пришиваем к краю, который у линии */
.tcs-timeline-dot{
  position: absolute;
  top: 28px;
  width: 12px;
  height: 12px;
  background: #ffe66d;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
  z-index: 2;
}
.tcs-side-left  .tcs-timeline-dot { right: -6px; } /* половина точки на линии */
.tcs-side-right .tcs-timeline-dot { left:  -6px; }

/* Карточки */
.tcs-version{
  display: inline-block;
  min-width: 420px;
  max-width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 40px 12px 12px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(2px);
  text-align: left;
}
.tcs-version-input { font-size: 18px; padding: 6px 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; border-radius: 6px; width: 140px; }
.tcs-side-left  .tcs-version{ margin-right: 24px; }
.tcs-side-right .tcs-version{ margin-left:  24px; }
    
.tcs-change-text[contenteditable="true"] { outline: none; border-bottom: 1px dashed transparent; }
.tcs-change-text[contenteditable="true"]:hover,
.tcs-change-text[contenteditable="true"]:focus { border-bottom-color: rgba(255,255,255,.25); }
.tcs-change-del.confirm, #tcsPurgeAll.confirm { background: rgba(255,0,0,.25); border-color: rgba(255,0,0,.5); }
.tcs-change-input { flex: 1; padding: 8px 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; border-radius: 6px; }

#tcsCreateVersion {position: absolute; bottom: 40px; right: 40px;}
    
/* ==== Mobile timeline fix ==== */
@media screen and (max-width: 860px){
    
  #tcsCreateVersion {position: absolute; bottom: auto; right: auto; top: 40%; left: 50%; transform: translate(-50%, -50%);}

  /* линия строго у левого края */
  .tcs-timeline{ padding: 16px 0; }
  .tcs-timeline::before{
    left: 16px;                /* линия слева */
    transform: none;
    width: 2px;
  }

  /* каждый элемент занимает всю ширину и имеет отступ от линии */
  .tcs-timeline-item{
    width: 100%;
    left: 0;
    padding: 12px 12px 24px 36px;   /* 56px: 16 (линия) + 12 (пол-точки) + 28 запас */
    text-align: left;               /* сброс правого/левого выравнивания */
    box-sizing: border-box;
  }

  /* точка ровно на линии */
  .tcs-timeline-dot{
    left: 16px !important;          /* поверх side-правил */
    right: auto !important;
    top: 28px;
    transform: translate(-50%, -50%);
    z-index: 1;                      /* под карточкой, чтобы кнопки не прыгали */
  }

  /* карточка — на всю ширину, без боковых маргинов из десктопа */
  .tcs-version{
    margin: 0;
    min-width: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }
  .tcs-side-left  .tcs-version{ margin: 0; }
  .tcs-side-right .tcs-version{ margin: 0; }

  /* заголовок/бейджи переносятся корректно */
  .tcs-version-head{
    flex-wrap: wrap;
    gap: 8px;
  }

  /* кнопки не «плывут»: разрешаем перенос и равномерную ширину */
  .tcs-status-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }
  .tcs-status-actions .btn{
    flex: 1 1 calc(50% - 8px);   /* по две в ряд; при нехватке места перенесутся */
    min-width: 140px;            /* чтобы подписи не ломались слишком рано */
  }

  /* поле ввода изменения тянется на всю ширину */
  .tcs-add-change{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
}