/* GiC Card Bar + Rating Times FINAL v1
   Focused UI patch only:
   - Rebuilds the 3-tab bonus bar from scratch.
   - Keeps Grammar / Pronunciation / Language Kit fully readable.
   - Places it low inside the card.
   - Replaces rating icons with real/fallback review times.
   - Does NOT touch Bell, Study Settings, FSRS rating logic, Recorder, or card swap.
*/

/* ---------- Bonus bar shell ---------- */
.gic-study-back:not([hidden]){
  position:relative !important;
  box-sizing:border-box !important;
  padding-bottom:108px !important;
}

/* Reset previous competing bar rules. */
.gic-study-back [data-gic-layer-tabs],
.gic-study-back .gic-layer-tabs{
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  bottom:13px !important;
  top:auto !important;

  width:auto !important;
  min-width:0 !important;
  max-width:none !important;

  height:76px !important;
  min-height:76px !important;
  max-height:76px !important;

  margin:0 !important;
  padding:7px !important;
  box-sizing:border-box !important;

  border-radius:24px !important;
  border:1px solid rgba(18,40,36,.13) !important;
  background:linear-gradient(180deg,#f8f4ea 0%,#f1ece1 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 22px rgba(20,54,48,.07) !important;

  overflow:hidden !important;
  z-index:10 !important;
}

/* Exactly three standard tabs: equal, stable, cross-browser. */
.gic-study-back [data-gic-layer-tabs][data-tab-count="3"],
.gic-study-back .gic-layer-tabs[data-tab-count="3"]{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
}

/* We use the selected button itself as the premium indicator. */
.gic-study-back [data-gic-layer-tabs][data-tab-count="3"] [data-gic-layer-indicator],
.gic-study-back .gic-layer-tabs[data-tab-count="3"] [data-gic-layer-indicator]{
  display:none !important;
}

/* The three buttons */
.gic-study-back [data-gic-layer-tabs][data-tab-count="3"] > button,
.gic-study-back .gic-layer-tabs[data-tab-count="3"] > button{
  position:relative !important;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  height:62px !important;
  min-height:62px !important;
  max-height:62px !important;

  margin:0 !important;
  padding:0 10px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;

  border:0 !important;
  border-radius:17px !important;
  background:transparent !important;

  color:#6c7471 !important;
  opacity:1 !important;

  font-size:13px !important;
  font-weight:820 !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;

  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  box-sizing:border-box !important;
}

/* Thin separators, matching the approved mockup. */
.gic-study-back [data-gic-layer-tabs][data-tab-count="3"] > button + button::before,
.gic-study-back .gic-layer-tabs[data-tab-count="3"] > button + button::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:1px;
  background:rgba(70,82,78,.16);
}

/* Premium selected state */
.gic-study-back [data-gic-layer-tabs][data-tab-count="3"] > button.active,
.gic-study-back .gic-layer-tabs[data-tab-count="3"] > button.active{
  background:linear-gradient(180deg,#eaf4ef 0%,#e1eee8 100%) !important;
  color:#125b51 !important;
  box-shadow:
    inset 0 0 0 1px rgba(21,89,78,.06),
    0 5px 14px rgba(21,73,64,.07) !important;
}

.gic-study-back [data-gic-layer-tabs][data-tab-count="3"] > button.active::before,
.gic-study-back .gic-layer-tabs[data-tab-count="3"] > button.active::before,
.gic-study-back [data-gic-layer-tabs][data-tab-count="3"] > button.active + button::before,
.gic-study-back .gic-layer-tabs[data-tab-count="3"] > button.active + button::before{
  opacity:.45;
}

.gic-study-back [data-gic-layer-tabs][data-tab-count="3"] > button:disabled,
.gic-study-back .gic-layer-tabs[data-tab-count="3"] > button:disabled{
  color:#a4aaa7 !important;
  opacity:.48 !important;
}

.gic-study-back [data-gic-layer-tabs][data-tab-count="3"] svg,
.gic-study-back .gic-layer-tabs[data-tab-count="3"] svg{
  width:19px !important;
  height:19px !important;
  min-width:19px !important;
  flex:0 0 19px !important;
}

/* Any extra tabs: keep the established horizontal-swipe behavior. */
.gic-study-back [data-gic-layer-tabs]:not([data-tab-count="3"]),
.gic-study-back .gic-layer-tabs:not([data-tab-count="3"]){
  display:flex !important;
  gap:6px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
}

.gic-study-back [data-gic-layer-tabs]:not([data-tab-count="3"]) > button,
.gic-study-back .gic-layer-tabs:not([data-tab-count="3"]) > button{
  flex:0 0 auto !important;
  min-width:118px !important;
}

/* ---------- Rating buttons: time instead of icon ---------- */
[data-gic-rating-bar] [data-gic-rating]{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}

/* User asked for the time to replace the decorative rating icon. */
[data-gic-rating-bar] [data-gic-rating] > svg{
  display:none !important;
}

.gic-rating-time{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
  opacity:.88 !important;
}

[data-gic-rating="again"] .gic-rating-time{color:#a84554 !important}
[data-gic-rating="hard"]  .gic-rating-time{color:#8b6924 !important}
[data-gic-rating="good"]  .gic-rating-time{color:#24745d !important}
[data-gic-rating="easy"]  .gic-rating-time{color:#ecfff8 !important}

[data-gic-rating-bar] [data-gic-rating] strong{
  line-height:1 !important;
}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  .gic-study-back:not([hidden]){
    padding-bottom:104px !important;
  }

  .gic-study-back [data-gic-layer-tabs],
  .gic-study-back .gic-layer-tabs{
    left:16px !important;
    right:16px !important;
    bottom:9px !important;

    height:74px !important;
    min-height:74px !important;
    max-height:74px !important;

    padding:6px !important;
    border-radius:22px !important;
  }

  .gic-study-back [data-gic-layer-tabs][data-tab-count="3"] > button,
  .gic-study-back .gic-layer-tabs[data-tab-count="3"] > button{
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;

    padding:0 6px !important;
    gap:5px !important;

    font-size:11.7px !important;
    letter-spacing:-.018em !important;
  }

  .gic-study-back [data-gic-layer-tabs][data-tab-count="3"] svg,
  .gic-study-back .gic-layer-tabs[data-tab-count="3"] svg{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    flex-basis:17px !important;
  }

  .gic-rating-time{
    font-size:10px !important;
  }
}

/* Very narrow phones: preserve all three labels, never collapse a tab. */
@media(max-width:380px){
  .gic-study-back [data-gic-layer-tabs],
  .gic-study-back .gic-layer-tabs{
    left:12px !important;
    right:12px !important;
  }

  .gic-study-back [data-gic-layer-tabs][data-tab-count="3"] > button,
  .gic-study-back .gic-layer-tabs[data-tab-count="3"] > button{
    padding:0 4px !important;
    gap:4px !important;
    font-size:10.6px !important;
  }

  .gic-study-back [data-gic-layer-tabs][data-tab-count="3"] svg,
  .gic-study-back .gic-layer-tabs[data-tab-count="3"] svg{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
  }
}