/* Mindex Smooth cards/groups stylesheet
   付箋カード、グループ枠、ドラッグ反応、削除演出、付箋/枠メニュー。
*/

/* ── Smooth v0.6: thought cards + soft group areas ── */
/* 付箋を「文具の付箋」から「思考カード」寄りにする */
.card{
  width:178px;
  min-height:88px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,252,243,.86)) !important;
  border:1px solid rgba(30,27,22,.07);
  border-radius:22px;
  box-shadow:
    0 10px 24px rgba(30,27,22,.10),
    inset 0 1px 0 rgba(255,255,255,.70);
  overflow:hidden;
  backdrop-filter:blur(10px);
}

.card::before{
  content:"";
  position:absolute;
  left:10px;
  top:9px;
  width:28px;
  height:5px;
  border-radius:999px;
  background:rgba(47,111,115,.34);
  z-index:2;
}

.card.c1::before{background:rgba(200,150,58,.48)}
.card.c2::before{background:rgba(76,151,176,.48)}
.card.c3::before{background:rgba(105,157,82,.46)}
.card.c4::before{background:rgba(190,94,132,.42)}
.card.c5::before{background:rgba(124,101,188,.40)}

.card.c1,
.card.c2,
.card.c3,
.card.c4,
.card.c5{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,252,243,.88)) !important;
}

.cardHead{
  padding:18px 10px 7px 12px;
  border-bottom:0;
  background:transparent;
}

.cardTitle{
  font-size:13px;
  line-height:1.22;
  letter-spacing:.01em;
  color:rgba(30,27,22,.92);
}

.grab{
  font-size:14px;
  color:rgba(107,96,80,.32);
}

.editBtn{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(30,27,22,.07);
  box-shadow:none;
  color:rgba(30,27,22,.55);
}

.cardBody{
  padding:4px 12px 12px;
  font-size:12px;
  line-height:1.45;
  color:rgba(30,27,22,.78);
  max-height:112px;
}

.chips{
  gap:4px;
  margin-top:9px;
}

.chip{
  background:rgba(47,111,115,.07);
  border:1px solid rgba(47,111,115,.10);
  color:rgba(47,111,115,.82);
  font-size:9.5px;
  padding:2px 6px;
}

.miniStatus,
.miniGroup{
  color:rgba(107,96,80,.74);
  font-size:9.5px;
}

.miniGroup{
  color:rgba(47,111,115,.82);
}

/* ドラッグ・吸着時の思考カード感 */
.card.isDragging{
  transform:scale(1.045);
  box-shadow:
    0 22px 42px rgba(30,27,22,.22),
    0 0 0 4px rgba(47,111,115,.10),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.card.isGliding{
  transform:scale(1.02);
  box-shadow:
    0 18px 34px rgba(30,27,22,.17),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.card.inGroupNow{
  outline:0;
  box-shadow:
    0 16px 32px rgba(30,27,22,.15),
    0 0 0 5px rgba(47,111,115,.10),
    inset 0 1px 0 rgba(255,255,255,.72);
}

/* グループ枠を「囲み線」から「やわらかい領域」へ */
.group{
  border:1.5px solid rgba(47,111,115,.18) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.42), transparent 34%),
    rgba(47,111,115,.055) !important;
  border-radius:30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 12px 28px rgba(30,27,22,.055);
  backdrop-filter:blur(8px);
}

.group.g1,
.group.g2,
.group.g3,
.group.g4,
.group.g5{
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.42), transparent 34%),
    rgba(47,111,115,.055) !important;
  border-color:rgba(47,111,115,.18) !important;
}

.group.g2{
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.44), transparent 34%),
    rgba(200,150,58,.070) !important;
  border-color:rgba(200,150,58,.20) !important;
}

.group.g3{
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.44), transparent 34%),
    rgba(105,157,82,.070) !important;
  border-color:rgba(105,157,82,.20) !important;
}

.group.g4{
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.44), transparent 34%),
    rgba(190,94,132,.060) !important;
  border-color:rgba(190,94,132,.18) !important;
}

.group.g5{
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.44), transparent 34%),
    rgba(124,101,188,.060) !important;
  border-color:rgba(124,101,188,.18) !important;
}

.groupHead{
  top:-18px;
  min-height:36px;
  padding:6px 7px 6px 12px;
  background:rgba(255,252,243,.86);
  border:1px solid rgba(30,27,22,.08);
  box-shadow:
    0 8px 18px rgba(30,27,22,.10),
    inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter:blur(12px);
}

.groupTitle{
  font-size:13px;
  letter-spacing:.01em;
  color:rgba(30,27,22,.86);
}

.groupCount{
  color:rgba(107,96,80,.70);
  font-size:10.5px;
}

.groupBtn{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(30,27,22,.07);
  color:rgba(30,27,22,.55);
}

.resizeHandle{
  width:32px;
  height:32px;
  right:-8px;
  bottom:-8px;
  border-radius:14px;
  background:rgba(255,252,243,.86);
  border:1px solid rgba(30,27,22,.10);
  box-shadow:0 8px 18px rgba(30,27,22,.10);
  backdrop-filter:blur(10px);
}

.resizeHandle::before{
  color:rgba(107,96,80,.58);
  font-size:16px;
}

/* 枠に入った時の反応を、線ではなく“面の呼吸”に寄せる */
.group.dropActive{
  border-color:rgba(47,111,115,.46) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(47,111,115,.15), transparent 60%),
    rgba(47,111,115,.090) !important;
  box-shadow:
    0 0 0 7px rgba(47,111,115,.08),
    0 18px 38px rgba(47,111,115,.15),
    inset 0 1px 0 rgba(255,255,255,.68) !important;
  transform:scale(1.008);
}

.group.dropActive .groupHead{
  background:rgba(255,252,243,.94);
  border-color:rgba(47,111,115,.22);
}

.group.dropActive .groupTitle{
  color:var(--accent);
}

/* AI除外は“違う領域”として静かに分かるように */
.group.aiExcluded{
  border-style:dashed!important;
  border-color:rgba(178,59,59,.30)!important;
  background:
    repeating-linear-gradient(135deg, rgba(178,59,59,.038) 0 8px, transparent 8px 16px),
    rgba(178,59,59,.040)!important;
  box-shadow:
    0 0 0 3px rgba(178,59,59,.06),
    0 12px 28px rgba(30,27,22,.055);
}

.group.aiExcluded .groupCount{
  background:rgba(178,59,59,.86);
  color:#fff;
  border-radius:999px;
  padding:3px 7px;
}

/* 色選択もカード系の落ち着いた色に寄せる */
.colorDot.c1{background:linear-gradient(180deg,#fffaf0,#fff2bb)}
.colorDot.c2{background:linear-gradient(180deg,#f7fdff,#cfeefa)}
.colorDot.c3{background:linear-gradient(180deg,#fbfff7,#d9f1cd)}
.colorDot.c4{background:linear-gradient(180deg,#fff8fb,#f5d2df)}
.colorDot.c5{background:linear-gradient(180deg,#fbf8ff,#ded5f3)}

@media (max-width:520px){
  .card{
    width:164px;
    border-radius:20px;
  }
  .cardHead{
    padding-top:17px;
  }
}


/* ── Smooth v0.6.1: group boundary refinement ── */
/* Appleっぽい静かな面は残しつつ、グループ境界だけ少し見やすくする */
.group{
  border:2px solid rgba(47,111,115,.30) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.46), transparent 34%),
    rgba(47,111,115,.060) !important;
  border-radius:30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 12px 28px rgba(30,27,22,.060);
}

/* グループ色ごとの境界線を少しだけ強める */
.group.g1{
  border-color:rgba(47,111,115,.32) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.46), transparent 34%),
    rgba(47,111,115,.060) !important;
}

.group.g2{
  border-color:rgba(200,150,58,.34) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.48), transparent 34%),
    rgba(200,150,58,.075) !important;
}

.group.g3{
  border-color:rgba(105,157,82,.34) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.48), transparent 34%),
    rgba(105,157,82,.075) !important;
}

.group.g4{
  border-color:rgba(190,94,132,.31) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.48), transparent 34%),
    rgba(190,94,132,.066) !important;
}

.group.g5{
  border-color:rgba(124,101,188,.31) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.48), transparent 34%),
    rgba(124,101,188,.066) !important;
}

/* ラベル部分は少しだけ締めて、枠の見出しとして分かりやすくする */
.groupHead{
  background:rgba(255,252,243,.92);
  border:1px solid rgba(30,27,22,.095);
  box-shadow:
    0 8px 18px rgba(30,27,22,.115),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.groupTitle{
  color:rgba(30,27,22,.90);
}

.groupCount{
  color:rgba(107,96,80,.76);
}

/* リサイズハンドルも枠の一部として少しだけ視認性を上げる */
.resizeHandle{
  border:1px solid rgba(30,27,22,.14);
  box-shadow:0 8px 18px rgba(30,27,22,.12);
}

/* 付箋が枠内に入った時は、境界がさらに軽く反応する */
.group.dropActive{
  border-color:rgba(47,111,115,.58) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(47,111,115,.16), transparent 60%),
    rgba(47,111,115,.095) !important;
  box-shadow:
    0 0 0 7px rgba(47,111,115,.085),
    0 18px 38px rgba(47,111,115,.17),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
  transform:scale(1.008);
}

.group.dropActive .groupHead{
  background:rgba(255,252,243,.96);
  border-color:rgba(47,111,115,.28);
}

.group.dropActive .groupTitle{
  color:var(--accent);
}

/* AI除外枠は、除外領域として分かる程度に破線を少し見やすくする */
.group.aiExcluded{
  border:2px dashed rgba(178,59,59,.36)!important;
  background:
    repeating-linear-gradient(135deg, rgba(178,59,59,.040) 0 8px, transparent 8px 16px),
    rgba(178,59,59,.045)!important;
  box-shadow:
    0 0 0 3px rgba(178,59,59,.070),
    0 12px 28px rgba(30,27,22,.060);
}

.group.aiExcluded .groupHead{
  border-color:rgba(178,59,59,.22);
}

.group.aiExcluded .groupCount{
  background:rgba(178,59,59,.88);
  color:#fff;
  border-radius:999px;
  padding:3px 7px;
}


/* ── Smooth v1.008: delete disappearance animation ── */
.card.removing{
  pointer-events:none;
  animation:cardRemove .24s cubic-bezier(.4,0,.2,1) forwards;
  transform-origin:center center;
}

.group.removing{
  pointer-events:none;
  animation:groupRemove .24s cubic-bezier(.4,0,.2,1) forwards;
  transform-origin:center center;
}

.card.groupRemoving{
  pointer-events:none;
  animation:cardRemove .24s cubic-bezier(.4,0,.2,1) forwards;
  transform-origin:center center;
}

@keyframes cardRemove{
  0%{
    opacity:1;
    transform:scale(1) rotate(0deg);
    filter:blur(0);
  }
  55%{
    opacity:.72;
    transform:scale(.92) rotate(-1deg);
    filter:blur(.4px);
  }
  100%{
    opacity:0;
    transform:scale(.72) rotate(-2deg);
    filter:blur(2px);
  }
}

@keyframes groupRemove{
  0%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:scale(.96);
    filter:blur(1.5px);
  }
}


/* ── Smooth v1.029: place first, edit later ── */
/* 付箋/枠は先にボードへ置く。編集は「…」から行う。 */

.card.justCreated,
.group.justCreatedGroup{
  cursor:pointer;
}

/* 空の新規付箋が「編集できるもの」だと分かるように少しだけ案内 */
.card.justCreated .cardBody:empty::before{
  content:"…から編集";
  color:rgba(47,111,115,.62);
  font-size:11px;
  font-weight:900;
}

/* 空の新規グループも、タイトル未入力でも存在が分かるように */
.group.justCreatedGroup .groupTitle:empty::before{
  content:"新しい枠";
  color:rgba(47,111,115,.72);
}

/* 作成直後の着地感を少しだけ長く見せる */
.card.justCreated{
  animation:cardLand .50s cubic-bezier(.18,1.25,.24,1) both;
}

.group.justCreatedGroup{
  animation:groupLand .52s cubic-bezier(.18,1.22,.24,1) both;
}


/* ── Smooth v1.031: card corner action menu ── */
.card{
  overflow:visible;
}

.cardBody{
  overflow:auto;
}

.cardActionMenu{
  position:absolute;
  right:8px;
  top:36px;
  z-index:30;
  display:none;
  flex-direction:column;
  gap:4px;
  min-width:92px;
  padding:6px;
  border-radius:16px;
  background:rgba(255,252,243,.96);
  border:1px solid rgba(30,27,22,.10);
  box-shadow:
    0 14px 32px rgba(30,27,22,.18),
    inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  transform-origin:top right;
}

.cardActionMenu.show{
  display:flex;
  animation:cardMenuIn .18s cubic-bezier(.18,1.12,.22,1) both;
}

.cardActionMenu button{
  border:0;
  border-radius:12px;
  background:transparent;
  color:rgba(30,27,22,.82);
  min-height:34px;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  text-align:left;
  box-shadow:none;
}

.cardActionMenu button:active{
  background:rgba(47,111,115,.08);
  transform:scale(.98);
}

.cardActionMenu .dangerAction{
  color:#9b3030;
}

.cardMenuBtn{
  position:relative;
  z-index:31;
}

@keyframes cardMenuIn{
  from{
    opacity:0;
    transform:translateY(-6px) scale(.94);
    filter:blur(2px);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}


/* ── Smooth v1.032: group corner action menu ── */
.group{
  overflow:visible;
}

.groupActionMenu{
  position:absolute;
  right:10px;
  top:26px;
  z-index:32;
  display:none;
  flex-direction:column;
  gap:4px;
  min-width:104px;
  padding:6px;
  border-radius:16px;
  background:rgba(255,252,243,.96);
  border:1px solid rgba(30,27,22,.10);
  box-shadow:
    0 14px 32px rgba(30,27,22,.18),
    inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  transform-origin:top right;
}

.groupActionMenu.show{
  display:flex;
  animation:cardMenuIn .18s cubic-bezier(.18,1.12,.22,1) both;
}

.groupActionMenu button{
  border:0;
  border-radius:12px;
  background:transparent;
  color:rgba(30,27,22,.82);
  min-height:34px;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  text-align:left;
  box-shadow:none;
}

.groupActionMenu button:active{
  background:rgba(47,111,115,.08);
  transform:scale(.98);
}

.groupActionMenu .dangerAction{
  color:#9b3030;
}

.groupMenuBtn{
  position:relative;
  z-index:33;
}


/* ── Smooth v1.033: action menu front layer ── */
/* 枠/付箋のメニューが他の付箋に隠れないよう、親ごと最前面へ上げる */
.card.menuOpen{
  z-index:1200!important;
  overflow:visible!important;
}

.group.menuOpen{
  z-index:1300!important;
  overflow:visible!important;
}

/* メニュー本体も明示的に上げる */
.card.menuOpen .cardActionMenu{
  z-index:1210!important;
}

.group.menuOpen .groupActionMenu{
  z-index:1310!important;
}

/* メニューを開いたボタンも手前へ */
.card.menuOpen .cardMenuBtn,
.group.menuOpen .groupMenuBtn{
  z-index:1320!important;
}

/* 付箋メニュー/枠メニューがボード外観の影に沈まないよう軽く強調 */
.cardActionMenu.show,
.groupActionMenu.show{
  box-shadow:
    0 18px 38px rgba(30,27,22,.22),
    inset 0 1px 0 rgba(255,255,255,.78)!important;
}