:root{
  font-family:"Yu Gothic UI","Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  font-size:16px;
  line-height:1.6;

  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --ivory:#F5F0E8;
  --ivory-deep:#E8E0D0;
  --brown:#3D2B1F;
  --brown-dark:#2C1A0E;
  --brown-soft:#8B7355;
  --gold:#C9A96E;
  --gold-dark:#A88952;
  --line:#E8E0D0;
  --muted:#85796D;
  --shadow:0 10px 35px rgba(61,43,31,.09);
  --shadow-soft:0 4px 18px rgba(61,43,31,.06);
}


/* ==================================================
   BASE
================================================== */

*{
  box-sizing:border-box;
}

html{
  background:var(--bg);
}

body{
  margin:0;
  color:var(--brown);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

button,
input,
textarea,
select{
  font:inherit;
}

button,
a,
input,
textarea,
select{
  -webkit-tap-highlight-color:transparent;
}

button{
  cursor:pointer;
  border:0;
  border-radius:12px;
  padding:11px 17px;
  font-weight:700;
  color:inherit;
  transition:.18s ease;
}

button:disabled{
  opacity:.5;
  cursor:wait;
}

button:hover{
  filter:brightness(.98);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid rgba(201,169,110,.40);
  outline-offset:2px;
}

a{
  color:var(--gold-dark);
}

input,
textarea,
select{
  width:100%;
  padding:13px 14px;
  border:1px solid #DDD3C4;
  border-radius:12px;
  background:#FFF;
  color:var(--brown);
  transition:.18s ease;
}

textarea{
  resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
  outline:0;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,169,110,.14);
}

label{
  display:block;
  margin:17px 0 8px;
  font-size:.9rem;
  font-weight:700;
}

label input,
label textarea,
label select{
  margin-top:7px;
}

h1,
h2,
h3,
p{
  margin-top:0;
}

h1{
  font-size:1.65rem;
  line-height:1.35;
  margin-bottom:0;
}

h2{
  font-size:1.15rem;
  margin-bottom:4px;
}

h3{
  font-size:1rem;
  margin-bottom:4px;
}

p{
  margin-bottom:16px;
}

.muted{
  color:var(--muted);
}

.small{
  font-size:.84rem;
}

.eyebrow{
  margin-bottom:5px;
  color:var(--gold-dark);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.17em;
}

.primary{
  color:#FFF;
  background:var(--brown-dark);
  box-shadow:0 5px 15px rgba(44,26,14,.13);
}

.primary:hover{
  background:#453024;
}

.secondary{
  color:var(--brown);
  background:var(--ivory);
  border:1px solid var(--line);
}

.quiet{
  padding:7px 9px;
  color:var(--muted);
  background:transparent;
  font-size:.875rem;
}

[hidden]{
  display:none!important;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* ==================================================
   LOGIN
================================================== */

.welcome{
  width:100%;
  min-height:100vh;
  min-height:100dvh;

  display:grid;
  grid-template-columns:minmax(540px,1.12fr) minmax(430px,.88fr);

  background:#FFF;
}


/* ==================================================
   LOGIN PHOTO
================================================== */

.welcome-brand{
  position:relative;
  overflow:hidden;

  min-height:100vh;
  min-height:100dvh;

  background:#F5F0E8;
}


/*
   実店舗写真
   左手前4席を大きく見せる
   天井を減らす
   右側を少し切る
*/

.welcome-brand-bg{
  position:absolute;

  top:-12%;
  right:-17%;
  bottom:-17%;
  left:-10%;

  z-index:0;

  background-image:url("tg-salon-bg.png");
  background-repeat:no-repeat;
  background-size:cover;

  background-position:19% 82%;

  filter:
    brightness(1.03)
    contrast(1.02)
    saturate(.98);

  transform:scale(1.20);
  transform-origin:30% 75%;
}


/* 写真を暗くせず、右側だけ薄く整える */

.welcome-brand-overlay{
  position:absolute;
  inset:0;
  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(250,250,248,0) 0%,
      rgba(250,250,248,0) 47%,
      rgba(245,240,232,.04) 65%,
      rgba(245,240,232,.16) 100%
    );

  pointer-events:none;
}

.welcome-brand::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:none;
  pointer-events:none;
}


/* ==================================================
   LOGIN PHOTO CONTENT
================================================== */

.welcome-brand-content{
  position:absolute;
  inset:0;
  z-index:3;

  width:100%;
  max-width:none;

  padding:0;
}


/* ==================================================
   LEFT TOP LOGO
================================================== */

.welcome-logo{
  position:absolute;

  top:5.5%;
  left:6.5%;

  width:106px;
  height:106px;

  margin:0;
  object-fit:contain;

  filter:
    sepia(.62)
    saturate(.72)
    hue-rotate(345deg)
    brightness(.68)
    contrast(1.04);

  opacity:.94;
}


/* ==================================================
   TG WORKS
================================================== */

.welcome-app-name{
  position:absolute;

  top:7%;
  right:6.5%;

  margin:0;

  color:#8B7355;

  font-size:.74rem;
  font-weight:700;
  letter-spacing:.30em;

  text-align:right;

  text-shadow:
    0 1px 6px rgba(255,255,255,.75);
}


/* ==================================================
   MAIN COPY
   今回：上へ移動
================================================== */

.welcome-brand-content h1{
  position:absolute;

  top:12.5%;
  right:6.5%;

  width:48%;

  margin:0;

  color:#3D2B1F;

  text-align:right;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size:clamp(2rem,2.85vw,3.2rem);
  font-weight:500;

  line-height:1.52;
  letter-spacing:.025em;

  text-shadow:
    0 1px 3px rgba(255,255,255,.96),
    0 0 18px rgba(255,255,255,.78);
}


/* ==================================================
   SUB COPY
   今回：少し左へ移動
================================================== */

.welcome-copy{
  position:absolute;

  right:13%;
  bottom:14%;

  width:43%;

  margin:0;

  color:#4E392B;

  text-align:right;

  font-size:.89rem;
  font-weight:600;

  line-height:1.9;
  letter-spacing:.02em;

  text-shadow:
    0 1px 3px rgba(255,255,255,1),
    0 0 14px rgba(255,255,255,.90);
}


/* ==================================================
   PHOTO FOOTER
================================================== */

.welcome-footer{
  position:absolute;

  right:6.5%;
  bottom:6.5%;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:13px;

  margin:0;
}

.welcome-footer span{
  display:block;

  width:42px;
  height:1px;

  background:#C9A96E;
}

.welcome-footer p{
  margin:0;

  color:#8B7355;

  font-size:.67rem;
  font-weight:700;
  letter-spacing:.23em;

  text-shadow:
    0 1px 5px rgba(255,255,255,.9);
}


/* ==================================================
   LOGIN RIGHT SIDE
================================================== */

.login-card{
  position:relative;

  width:min(450px,76%);

  margin:auto;

  padding:55px 0;
}

.login-logo-mobile{
  display:none;
}

.login-card .eyebrow{
  margin-bottom:9px;

  color:var(--gold-dark);

  font-size:.68rem;
  font-weight:700;
  letter-spacing:.20em;
}

.login-card h2{
  margin:7px 0 12px;

  color:var(--brown-dark);

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size:1.85rem;
  font-weight:600;

  line-height:1.4;
  letter-spacing:.035em;
}

.login-intro{
  margin-bottom:32px;

  color:#887A6D;

  font-size:.93rem;
  line-height:1.85;
}

.login-card label{
  color:#4D392C;

  font-size:.88rem;
  font-weight:700;
}

.login-card input{
  min-height:54px;

  padding:14px 15px;

  color:var(--brown-dark);
  background:#FCFBF9;

  border:1px solid #DED5C9;
  border-radius:12px;

  font-size:16px;
}

.login-card input:hover{
  border-color:#CDBB9F;
}

.login-card input:focus{
  background:#FFF;

  border-color:var(--gold);

  box-shadow:
    0 0 0 3px rgba(201,169,110,.12);
}

.login-card>.primary{
  width:100%;

  min-height:55px;

  margin:29px 0 18px;

  border-radius:12px;

  background:var(--brown-dark);
  color:#FFF;

  font-size:.96rem;
  font-weight:700;
  letter-spacing:.08em;

  box-shadow:
    0 8px 20px rgba(44,26,14,.12);
}

.login-help{
  margin-bottom:0;

  color:#95887B;

  text-align:center;

  font-size:.76rem;
  line-height:1.7;
}

.mobile-break{
  display:none;
}


/* ==================================================
   WORKSPACE
================================================== */

.workspace{
  display:grid;

  grid-template-columns:250px minmax(0,1fr);

  min-height:100vh;
  min-height:100dvh;

  background:var(--bg);
}


/* ==================================================
   SIDEBAR
================================================== */

.sidebar{
  position:sticky;
  top:0;

  z-index:30;

  height:100vh;
  height:100dvh;

  display:flex;
  flex-direction:column;

  padding:28px 18px 22px;

  color:#FFF;

  background:
    linear-gradient(
      180deg,
      #3D2B1F 0%,
      #2C1A0E 100%
    );
}

.brand{
  display:flex;
  align-items:center;

  gap:13px;

  padding:0 9px;

  color:#FFF;

  text-decoration:none;
  font-weight:800;
  line-height:1.15;
}

.sidebar-logo{
  display:block;

  width:52px;
  height:52px;

  flex-shrink:0;

  object-fit:contain;

  filter:
    sepia(.5)
    saturate(.7)
    brightness(1.45);
}

.brand>span{
  font-size:.9rem;
  letter-spacing:.06em;
}

.brand small{
  display:block;

  margin-top:5px;

  color:#D8C8B5;

  font-size:.64rem;
  letter-spacing:.15em;
}

.mark{
  display:inline-grid;
  place-items:center;

  width:54px;
  height:54px;

  flex-shrink:0;

  border-radius:16px;

  color:var(--brown-dark);
  background:#FFF;

  border:1px solid rgba(201,169,110,.4);

  box-shadow:var(--shadow-soft);

  font-size:1.15rem;
  font-weight:900;
}

.sidebar-label{
  margin:42px 10px 13px;

  color:#BBA995;

  font-size:.7rem;
  letter-spacing:.08em;
}

.sidebar nav{
  display:grid;
  gap:5px;
}

.nav{
  position:relative;

  display:flex;

  justify-content:space-between;
  align-items:center;

  width:100%;

  margin:0;
  padding:14px 16px;

  color:#E2D8CD;
  background:transparent;

  border-radius:12px;

  text-align:left;
}

.nav:hover{
  background:rgba(255,255,255,.06);
}

.nav.active{
  color:#FFF;

  background:rgba(201,169,110,.17);

  box-shadow:inset 3px 0 0 var(--gold);
}

.nav span:not(:empty){
  min-width:24px;
  height:22px;

  padding:1px 7px;

  color:var(--brown-dark);
  background:var(--gold);

  border-radius:20px;

  text-align:center;

  font-size:.75rem;
  font-weight:900;
}

.sidebar-bottom{
  display:grid;
  gap:4px;

  margin-top:auto;

  padding:28px 10px 0;

  font-size:.88rem;
}

.sidebar-bottom>strong{
  color:#FFF;
}

.sidebar-bottom>span{
  color:#C9B9A7;
}

.sidebar-bottom>.quiet{
  padding-left:0;

  color:#C9B9A7;

  text-align:left;
}


/* ==================================================
   TOPBAR
================================================== */

.topbar{
  min-height:92px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:22px 34px;

  background:rgba(255,255,255,.94);

  border-bottom:1px solid var(--line);

  backdrop-filter:blur(10px);
}

.topbar h1{
  color:var(--brown-dark);
}

.team-tag{
  padding:5px 13px;

  color:var(--brown-soft);
  background:var(--ivory);

  border:1px solid #DFD2BD;
  border-radius:20px;

  font-size:.76rem;
  white-space:nowrap;
}


/* ==================================================
   CHAT
================================================== */

.chat-layout{
  display:grid;

  grid-template-columns:300px minmax(0,1fr);

  height:calc(100vh - 92px);
  height:calc(100dvh - 92px);

  min-height:550px;
}

.room-panel{
  overflow-y:auto;

  background:#FFF;

  border-right:1px solid var(--line);
}

.section-head{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:12px;

  margin-bottom:24px;
}

.section-head p{
  margin-bottom:0;
}

.room-panel>.section-head{
  position:sticky;
  top:0;

  z-index:5;

  margin:0;

  padding:20px 18px 14px;

  background:rgba(255,255,255,.96);

  border-bottom:1px solid #F1ECE5;
}

.room-panel button.secondary{
  padding:8px 12px;

  font-size:.82rem;
}

.room{
  display:flex;

  align-items:center;

  gap:12px;

  width:100%;

  padding:16px 15px;

  background:#FFF;

  border-radius:0;

  border-left:3px solid transparent;
  border-bottom:1px solid #F2EEE8;

  text-align:left;
}

.room:hover{
  background:#FCFAF7;
}

.room.selected{
  background:var(--ivory);

  border-left-color:var(--gold);
}

.avatar{
  display:inline-grid;
  place-items:center;

  flex-shrink:0;

  width:44px;
  height:44px;

  color:var(--brown);

  background:
    linear-gradient(
      145deg,
      #F3EADC,
      #E8DCC8
    );

  border:1px solid #E3D5C1;
  border-radius:50%;

  font-weight:800;
}

.room-text{
  flex:1;
  min-width:0;
}

.room-text strong{
  display:block;

  color:var(--brown-dark);

  overflow-wrap:anywhere;
}

.room-text small{
  display:block;

  color:var(--muted);

  font-size:.73rem;
  font-weight:400;
}

.badge{
  min-width:23px;

  padding:2px 6px;

  color:var(--brown-dark);
  background:var(--gold);

  border-radius:12px;

  text-align:center;

  font-size:.72rem;
  font-weight:900;
}


/* ==================================================
   CONVERSATION
================================================== */

.conversation{
  display:flex;
  flex-direction:column;

  min-width:0;
  min-height:0;

  background:#F8F5F0;
}

.conversation-head{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:12px;

  min-height:76px;

  padding:17px 26px;

  background:#FFF;

  border-bottom:1px solid var(--line);
}

.conversation-head h2{
  color:var(--brown-dark);
}

.conversation-head p{
  margin:2px 0 0;
}

.messages{
  flex:1;

  min-height:200px;

  overflow:auto;

  padding:25px 30px;

  scroll-behavior:smooth;
}

.empty{
  display:grid;

  place-items:center;
  align-content:center;

  min-height:280px;

  padding:25px;

  color:var(--muted);

  text-align:center;
}

.empty-symbol{
  display:grid;
  place-items:center;

  width:68px;
  height:68px;

  margin-bottom:15px;

  color:var(--gold-dark);
  background:var(--ivory);

  border:1px solid var(--line);
  border-radius:50%;

  font-size:1.5rem;
  font-weight:900;
}

.message{
  max-width:78%;

  margin:0 0 19px;

  overflow-wrap:anywhere;
}

.message.mine{
  margin-left:auto;
}

.message-name{
  margin:0 4px 5px;

  color:var(--muted);

  font-size:.76rem;
}

.message.mine .message-name{
  text-align:right;
}

.bubble{
  padding:11px 15px;

  white-space:pre-wrap;

  background:#FFF;

  border:1px solid #E7DFD4;
  border-radius:5px 17px 17px 17px;

  box-shadow:0 2px 7px rgba(61,43,31,.04);
}

.mine .bubble{
  background:#EADFCF;

  border-color:#DFD0BB;

  border-radius:17px 5px 17px 17px;
}

.message-meta{
  margin:4px 4px 0;

  color:#9A8E82;

  font-size:.7rem;
}

.mine .message-meta{
  text-align:right;
}

.attachment{
  display:block;

  margin-top:8px;

  padding:9px 12px;

  background:#FFF;

  border:1px solid var(--line);
  border-radius:9px;

  font-size:.84rem;

  overflow-wrap:anywhere;
}


/* ==================================================
   COMPOSER
================================================== */

.composer{
  padding:13px 22px 14px;

  background:#FFF;

  border-top:1px solid var(--line);
}

.composer textarea{
  min-height:64px;
  max-height:150px;

  background:#FAF8F5;

  border:1px solid #E2D9CC;
  border-radius:15px;
}

.composer-actions{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:12px;

  margin-top:8px;
}

.composer-actions>.primary{
  flex-shrink:0;

  min-width:76px;

  white-space:nowrap;
}

.composer p{
  margin:7px 0 0;
}

.file-label{
  margin:0;

  color:var(--muted);

  font-size:.77rem;
  font-weight:500;
}

.file-label input{
  max-width:280px;

  margin:0;
  padding:0;

  background:transparent;

  border:0;

  font-size:.76rem;
}


/* ==================================================
   BOARD
================================================== */

.content-view{
  max-width:1180px;

  margin:0 auto;

  padding:32px 36px 60px;
}

.posts{
  display:grid;
  gap:15px;
}

.post{
  padding:22px 24px;

  background:#FFF;

  border:1px solid var(--line);
  border-radius:17px;

  box-shadow:var(--shadow-soft);
}

.post summary{
  color:var(--brown-dark);

  cursor:pointer;

  list-style-position:inside;

  font-size:1.05rem;
  font-weight:800;

  overflow-wrap:anywhere;
}

.post summary .meta{
  display:block;

  margin-top:8px;

  color:var(--muted);

  font-size:.77rem;
  font-weight:400;
}

.post-body{
  margin-top:17px;

  padding-top:18px;

  border-top:1px solid var(--line);

  white-space:pre-wrap;

  overflow-wrap:anywhere;
}


/* ==================================================
   STAFF
================================================== */

.staff-grid{
  display:grid;

  grid-template-columns:
    repeat(auto-fill,minmax(245px,1fr));

  gap:15px;
}

.staff-card{
  padding:21px;

  background:#FFF;

  border:1px solid var(--line);
  border-radius:17px;

  box-shadow:var(--shadow-soft);

  overflow-wrap:anywhere;
}

.staff-card .avatar{
  width:48px;
  height:48px;

  margin-bottom:12px;
}

.staff-card p{
  margin-bottom:6px;
}

.staff-card button{
  margin-top:12px;
}

.staff-card.inactive{
  opacity:.55;

  background:#F5F3EF;
}


/* ==================================================
   DIALOG
================================================== */

dialog{
  width:min(540px,94vw);

  max-height:90vh;
  max-height:90dvh;

  overflow:auto;

  padding:28px;

  color:var(--brown);
  background:#FFF;

  border:1px solid var(--line);
  border-radius:20px;

  box-shadow:
    0 25px 90px rgba(44,26,14,.22);
}

dialog::backdrop{
  background:rgba(44,26,14,.46);

  backdrop-filter:blur(3px);
}

dialog .primary{
  margin-top:20px;
}

fieldset{
  margin-top:20px;

  border:1px solid var(--line);
  border-radius:12px;
}

.member-options{
  max-height:220px;

  overflow:auto;
}

.member-options label{
  display:flex;

  align-items:center;

  gap:10px;

  margin:10px 0;

  font-weight:400;
}

.member-options input{
  width:auto;

  margin:0;
}


/* ==================================================
   NOTICE
================================================== */

#notice{
  position:fixed;

  top:16px;
  left:50%;

  z-index:1000;

  max-width:90vw;

  padding:12px 20px;

  color:var(--brown);
  background:#FFF;

  border:2px solid var(--gold);
  border-radius:12px;

  box-shadow:var(--shadow);

  transform:translateX(-50%);
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:1000px) and (min-width:761px){

  .welcome{
    grid-template-columns:
      minmax(410px,1.05fr)
      minmax(370px,.95fr);
  }

  .welcome-brand-bg{
    top:-12%;
    right:-18%;
    bottom:-17%;
    left:-11%;

    background-position:18% 82%;

    transform:scale(1.19);
    transform-origin:30% 75%;
  }

  .welcome-logo{
    top:5.5%;
    left:6%;

    width:88px;
    height:88px;
  }

  .welcome-app-name{
    top:7%;
    right:6%;
  }

  .welcome-brand-content h1{
    top:12.5%;
    right:6%;

    width:54%;

    font-size:2.25rem;
  }

  .welcome-copy{
    right:11%;
    bottom:14%;

    width:50%;
  }

  .welcome-footer{
    right:6%;
    bottom:6%;
  }

  .login-card{
    width:82%;
  }

  .workspace{
    grid-template-columns:
      200px minmax(0,1fr);
  }

  .sidebar{
    padding:24px 10px;
  }

  .sidebar-logo{
    width:45px;
    height:45px;
  }

  .brand{
    gap:9px;
  }

  .brand>span{
    font-size:.8rem;
  }

  .chat-layout{
    grid-template-columns:
      240px minmax(0,1fr);
  }

  .topbar{
    padding:20px 24px;
  }

  .messages{
    padding:20px;
  }

  .conversation-head{
    padding:17px 20px;
  }

  .message{
    max-width:90%;
  }
}


/* ==================================================
   SMARTPHONE
================================================== */

@media(max-width:760px){

  html,
  body{
    min-height:100%;
    background:var(--bg);
  }


  /* MOBILE LOGIN */

  .welcome{
    display:block;

    min-height:100dvh;

    background:#FFF;
  }

  .welcome-brand{
    width:100%;

    min-height:350px;

    height:43dvh;

    max-height:440px;
  }

  .welcome-brand-bg{
    top:-12%;
    right:-18%;
    bottom:-17%;
    left:-10%;

    background-size:cover;
    background-position:18% 82%;

    filter:
      brightness(1.03)
      contrast(1.02)
      saturate(.98);

    transform:scale(1.18);
    transform-origin:30% 75%;
  }

  .welcome-brand-overlay{
    background:
      linear-gradient(
        90deg,
        rgba(250,250,248,0) 0%,
        rgba(250,250,248,0) 45%,
        rgba(245,240,232,.10) 100%
      );
  }

  .welcome-logo{
    top:6%;
    left:6%;

    width:70px;
    height:70px;
  }

  .welcome-app-name{
    top:8%;
    right:6%;

    color:#8B7355;

    font-size:.62rem;
    letter-spacing:.22em;
  }

  .welcome-brand-content h1{
    top:auto;

    right:6%;
    bottom:11%;

    width:72%;

    color:#3D2B1F;

    font-size:1.5rem;
    font-weight:500;

    line-height:1.5;

    text-align:right;

    text-shadow:
      0 1px 3px rgba(255,255,255,.98),
      0 0 14px rgba(255,255,255,.75);
  }

  .welcome-copy,
  .welcome-footer{
    display:none;
  }


  /* MOBILE LOGIN FORM */

  .login-card{
    width:auto;

    margin:0;

    padding:
      29px
      7%
      calc(42px + env(safe-area-inset-bottom));
  }

  .login-logo-mobile{
    display:none;
  }

  .login-card .eyebrow{
    margin-bottom:3px;

    font-size:.65rem;
  }

  .login-card h2{
    margin:5px 0 8px;

    font-size:1.55rem;
  }

  .login-intro{
    margin-bottom:23px;

    font-size:.87rem;
  }

  .mobile-break{
    display:block;
  }

  .login-card label{
    margin-top:17px;

    font-size:.84rem;
  }

  .login-card input{
    min-height:52px;

    font-size:16px;
  }

  .login-card>.primary{
    min-height:54px;

    margin-top:25px;

    font-size:.96rem;
  }

  .login-help{
    font-size:.74rem;
  }


  /* MOBILE WORKSPACE */

  .workspace{
    display:block;

    min-height:100dvh;

    padding-bottom:
      calc(70px + env(safe-area-inset-bottom));
  }

  .workspace>main{
    min-width:0;
  }


  /* MOBILE BOTTOM NAV */

  .sidebar{
    position:fixed;

    top:auto;
    right:0;
    bottom:0;
    left:0;

    z-index:100;

    width:100%;

    height:
      calc(70px + env(safe-area-inset-bottom));

    min-height:0;

    padding:
      0 0 env(safe-area-inset-bottom);

    display:block;

    background:rgba(255,255,255,.97);

    border-top:1px solid var(--line);

    box-shadow:
      0 -5px 24px rgba(61,43,31,.08);

    backdrop-filter:blur(12px);
  }

  .sidebar>.brand,
  .sidebar-label,
  .sidebar-bottom{
    display:none;
  }

  .sidebar nav{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:0;

    height:70px;

    margin:0;
  }

  .nav{
    position:relative;

    height:70px;

    margin:0;

    padding:30px 3px 7px;

    justify-content:center;

    color:#8D8176;
    background:transparent;

    border-radius:0;

    text-align:center;

    font-size:.74rem;
    font-weight:700;

    line-height:1;
  }

  .nav::before{
    position:absolute;

    top:9px;
    left:50%;

    color:#9A8D80;

    font-size:1.22rem;

    line-height:1;

    transform:translateX(-50%);
  }

  .nav[data-view="chat"]::before{
    content:"●";
  }

  .nav[data-view="board"]::before{
    content:"▤";
  }

  .nav[data-view="staff"]::before{
    content:"";

    width:14px;
    height:14px;

    border:2px solid currentColor;
    border-radius:50%;
  }

  .nav.active{
    color:var(--brown-dark);

    background:transparent;

    box-shadow:
      inset 0 3px 0 var(--gold);
  }

  .nav.active::before{
    color:var(--gold-dark);
  }

  .nav span:not(:empty){
    position:absolute;

    top:5px;
    left:calc(50% + 8px);

    min-width:18px;
    height:18px;

    padding:1px 5px;

    color:#FFF;
    background:#B98B45;

    border-radius:20px;

    font-size:.64rem;
  }


  /* MOBILE TOPBAR */

  .topbar{
    position:sticky;

    top:0;

    z-index:40;

    min-height:62px;

    padding:11px 16px;

    background:rgba(255,255,255,.96);

    border-bottom:1px solid var(--line);

    backdrop-filter:blur(12px);
  }

  .topbar .eyebrow{
    margin-bottom:1px;

    font-size:.61rem;
  }

  .topbar h1{
    font-size:1.25rem;
  }

  .team-tag{
    padding:4px 9px;

    font-size:.67rem;
  }


  /* MOBILE CHAT */

  .chat-layout{
    display:flex;

    flex-direction:column;

    height:calc(100dvh - 132px);

    min-height:0;

    background:#FFF;
  }

  .room-panel{
    flex:none;

    max-height:190px;

    overflow:hidden;

    background:#FFF;

    border:0;
    border-bottom:1px solid var(--line);
  }

  .room-panel>.section-head{
    position:static;

    min-height:48px;

    padding:10px 14px 8px;
  }

  .room-panel>.section-head h2{
    font-size:.95rem;
  }

  .room-panel button.secondary{
    min-height:34px;

    padding:7px 11px;

    font-size:.76rem;
  }

  #room-list{
    display:flex;

    max-height:132px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:0 8px 8px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
  }

  #room-list::-webkit-scrollbar{
    display:none;
  }

  .room{
    min-width:165px;
    max-width:190px;
    min-height:70px;

    margin:0 4px;

    padding:10px;

    background:#FFF;

    border:1px solid var(--line);
    border-radius:14px;
  }

  .room.selected{
    background:var(--ivory);

    border-color:#DAC6A7;

    box-shadow:
      inset 0 0 0 1px #DAC6A7;
  }

  .room .avatar{
    width:38px;
    height:38px;

    font-size:.8rem;
  }

  .room-text strong{
    font-size:.82rem;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
  }

  .room-text small{
    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
  }

  .conversation{
    flex:1;

    height:auto;

    min-height:0;

    background:#F8F5F0;
  }

  .conversation-head{
    min-height:58px;

    padding:10px 15px;
  }

  .conversation-head h2{
    font-size:1rem;
  }

  .conversation-head p{
    max-width:70vw;

    font-size:.7rem;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
  }

  #sync-state{
    font-size:.65rem;
  }

  #older-messages{
    flex:none;

    padding:7px;

    font-size:.72rem;
  }

  .messages{
    flex:1;

    min-height:0;

    padding:15px 12px 12px;
  }

  .empty{
    min-height:180px;

    padding:18px;
  }

  .empty-symbol{
    width:54px;
    height:54px;

    font-size:1.2rem;
  }

  .message{
    max-width:86%;

    margin-bottom:14px;
  }

  .message-name{
    font-size:.7rem;
  }

  .bubble{
    padding:10px 13px;

    border-radius:
      4px 16px 16px 16px;

    font-size:.93rem;

    line-height:1.55;
  }

  .mine .bubble{
    border-radius:
      16px 4px 16px 16px;
  }

  .message-meta{
    font-size:.65rem;
  }

  .composer{
    flex:none;

    padding:
      9px
      11px
      calc(9px + env(safe-area-inset-bottom));
  }

  .composer textarea{
    min-height:46px;
    max-height:95px;

    padding:11px 12px;

    font-size:16px;
  }

  .composer-actions{
    align-items:center;

    margin-top:7px;
  }

  .composer-actions>.primary{
    min-width:68px;
    min-height:42px;

    padding:9px 14px;
  }

  .file-label{
    max-width:65%;

    overflow:hidden;
  }

  .file-label input{
    max-width:190px;

    font-size:.7rem;
  }

  .composer>p{
    display:none;
  }


  /* BOARD / STAFF MOBILE */

  .content-view{
    width:100%;

    margin:0;

    padding:19px 14px 30px;
  }

  .content-view>.section-head{
    align-items:flex-start;

    margin-bottom:17px;
  }

  .content-view>.section-head h2{
    font-size:1.08rem;
  }

  .content-view>.section-head p{
    font-size:.76rem;
  }

  .content-view>.section-head .primary{
    flex-shrink:0;

    padding:9px 11px;

    font-size:.76rem;
  }

  .posts{
    gap:11px;
  }

  .post{
    padding:17px;

    border-radius:15px;

    box-shadow:none;
  }

  .post summary{
    font-size:.95rem;

    line-height:1.5;
  }

  .post-body{
    margin-top:14px;

    padding-top:14px;

    font-size:.9rem;
  }

  .staff-grid{
    grid-template-columns:1fr;

    gap:10px;
  }

  .staff-card{
    position:relative;

    min-height:90px;

    padding:15px 15px 15px 70px;

    border-radius:15px;

    box-shadow:none;
  }

  .staff-card .avatar{
    position:absolute;

    top:16px;
    left:15px;

    width:43px;
    height:43px;

    margin:0;
  }

  .staff-card p{
    margin:3px 0;

    font-size:.8rem;
  }

  .staff-card button{
    margin-top:8px;

    padding:7px 11px;

    font-size:.75rem;
  }


  /* DIALOG MOBILE */

  dialog{
    width:calc(100vw - 22px);

    max-width:none;
    max-height:88dvh;

    padding:20px 17px;

    border-radius:20px;
  }

  dialog .section-head{
    margin-bottom:15px;
  }

  dialog input,
  dialog textarea,
  dialog select{
    font-size:16px;
  }

  dialog .primary{
    width:100%;

    min-height:48px;
  }

  #notice{
    top:10px;

    width:calc(100% - 24px);

    padding:10px 14px;

    text-align:center;

    font-size:.85rem;
  }
}


/* ==================================================
   VERY SMALL SMARTPHONE
================================================== */

@media(max-width:380px){

  .welcome-brand{
    min-height:330px;

    height:42dvh;
  }

  .welcome-brand-bg{
    top:-12%;
    right:-19%;
    bottom:-18%;
    left:-11%;

    background-position:17% 83%;

    transform:scale(1.18);
    transform-origin:30% 75%;
  }

  .welcome-logo{
    top:6%;
    left:5%;

    width:62px;
    height:62px;
  }

  .welcome-app-name{
    right:5%;
  }

  .welcome-brand-content h1{
    top:auto;

    right:5%;
    bottom:11%;

    width:73%;

    font-size:1.4rem;
  }

  .login-card{
    padding-left:6%;
    padding-right:6%;
  }

  .team-tag{
    display:none;
  }

  .room{
    min-width:150px;
  }

  .message{
    max-width:90%;
  }

  .file-label{
    max-width:60%;
  }
}

/* ==================================================
   TG WORKS LOGIN FINAL
   2026-09-16
================================================== */

.login-catch{
  margin:8px 0 5px;
  color:var(--brown-dark);
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","MS PMincho",serif;
  font-size:clamp(1.25rem,1.55vw,1.55rem);
  font-weight:500;
  line-height:1.5;
  letter-spacing:.025em;
}

.login-guide{
  margin:0 0 12px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.6;
}

/* PC側も写真上のコピーは出さず、写真を主役にする */
#login .welcome-brand-content h1,
#login .welcome-copy{
  display:none;
}

@media (max-width:760px){

  #login.welcome{
    display:flex;
    flex-direction:column;
    width:100%;
    min-height:100svh;
    height:100svh;
    overflow:hidden;
    background:#fff;
  }

  /* 写真の厚みを増やす */
  #login .welcome-brand{
    position:relative;
    flex:0 0 clamp(250px,38svh,330px);
    width:100%;
    min-height:0;
    height:auto;
    max-height:none;
    overflow:hidden;
  }

  /* 左手前の椅子を大きく。右側は切れてOK */
  #login .welcome-brand-bg{
    position:absolute;
    top:-7%;
    right:-8%;
    bottom:-7%;
    left:-8%;
    width:auto;
    height:auto;
    background-image:url("tg-salon-bg.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:8% 78%;
    filter:brightness(1.03) contrast(1.01) saturate(.96);
    transform:scale(1.13);
    transform-origin:18% 76%;
  }

  #login .welcome-brand-overlay{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.01) 65%,
      rgba(255,255,255,.12) 100%
    );
  }

  #login .welcome-logo{
    top:16px;
    left:17px;
    width:56px;
    height:56px;
  }

  #login .welcome-app-name{
    top:20px;
    right:18px;
    margin:0;
    font-size:.62rem;
    letter-spacing:.24em;
  }

  #login .welcome-footer{
    display:none;
  }

  #login .login-card{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    width:min(100%,480px);
    margin:0 auto;
    padding:12px 20px calc(9px + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  #login .login-logo-mobile{
    display:none;
  }

  #login .login-card .eyebrow{
    margin:0 0 1px;
    color:var(--gold-dark);
    font-size:.59rem;
    font-weight:700;
    line-height:1.3;
    letter-spacing:.18em;
  }

  #login .login-card h2{
    margin:0 0 1px;
    color:var(--brown-dark);
    font-family:"Yu Gothic UI","Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
    font-size:.88rem;
    font-weight:700;
    line-height:1.3;
    letter-spacing:.10em;
  }

  #login .login-catch{
    margin:2px 0 2px;
    font-size:1.15rem;
    line-height:1.4;
  }

  #login .login-guide{
    margin:0 0 2px;
    color:#887A6D;
    font-size:.70rem;
    line-height:1.4;
  }

  #login .login-card label{
    margin:5px 0 0;
    font-size:.75rem;
    line-height:1.35;
  }

  #login .login-card label input{
    margin-top:3px;
  }

  #login .login-card input{
    min-height:40px;
    padding:8px 12px;
    border-radius:10px;
    font-size:16px;
  }

  /* パスワード下の無駄な余白を抑える */
  #login .login-help{
    order:10;
    margin:auto 0 5px;
    color:#95887B;
    text-align:center;
    font-size:.64rem;
    line-height:1.35;
  }

  #login .login-card > .primary{
    order:11;
    flex:0 0 auto;
    width:100%;
    min-height:46px;
    margin:0;
    border-radius:11px;
    font-size:.91rem;
  }
}

/* 高さが低いスマホでも1画面に収める */
@media (max-width:760px) and (max-height:700px){
  #login .welcome-brand{
    flex-basis:clamp(220px,34svh,245px);
  }

  #login .welcome-brand-bg{
    transform:scale(1.10);
    background-position:8% 78%;
  }

  #login .login-card{
    padding-top:8px;
    padding-bottom:calc(7px + env(safe-area-inset-bottom));
  }

  #login .login-catch{
    font-size:1.05rem;
    line-height:1.3;
  }

  #login .login-guide{
    font-size:.66rem;
    line-height:1.3;
  }

  #login .login-card label{
    margin-top:3px;
  }

  #login .login-card input{
    min-height:38px;
    padding-top:6px;
    padding-bottom:6px;
  }

  #login .login-help{
    margin-bottom:3px;
    font-size:.60rem;
  }

  #login .login-card > .primary{
    min-height:43px;
  }
}

@media (max-width:380px){
  #login .welcome-brand{
    flex-basis:clamp(215px,34svh,255px);
  }

  #login .welcome-logo{
    width:51px;
    height:51px;
  }

  #login .login-card{
    padding-left:17px;
    padding-right:17px;
  }

  #login .login-catch{
    font-size:1.04rem;
  }
}

/* ==================================================
   TG WORKS LOGIN - PORTRAIT TUNING
   2026-09-16
   縦画面優先：写真を大きく、左手前の椅子を強調
================================================== */

@media (max-width:760px) and (orientation:portrait){

  #login .welcome-brand{
    flex-basis:clamp(275px,42svh,355px);
  }

  #login .welcome-brand-bg{
    top:-10%;
    right:-12%;
    bottom:-10%;
    left:-12%;
    background-size:cover;
    background-position:4% 80%;
    transform:scale(1.22);
    transform-origin:14% 78%;
  }

  #login .welcome-logo{
    top:17px;
    left:18px;
    width:58px;
    height:58px;
  }

  #login .welcome-app-name{
    top:21px;
    right:18px;
  }

  #login .login-card{
    padding-top:13px;
    padding-bottom:calc(13px + env(safe-area-inset-bottom));
  }

  #login .login-card h2{
    margin-bottom:2px;
  }

  /* キャッチコピーを約25%拡大 */
  #login .login-catch{
    margin:3px 0 4px;
    font-size:1.44rem;
    line-height:1.38;
    letter-spacing:.025em;
  }

  #login .login-guide{
    margin-bottom:4px;
  }

  #login .login-card label{
    margin-top:6px;
  }

  #login .login-help{
    margin:8px 0 6px;
  }

  /* 最下端に張り付けず、少し上に余白を残す */
  #login .login-card > .primary{
    margin:0 0 5px;
  }
}

/* 縦が短い端末では写真の存在感を残しつつ入力欄を確保 */
@media (max-width:760px) and (orientation:portrait) and (max-height:700px){

  #login .welcome-brand{
    flex-basis:clamp(235px,36svh,265px);
  }

  #login .welcome-brand-bg{
    background-position:4% 80%;
    transform:scale(1.18);
    transform-origin:14% 78%;
  }

  #login .login-catch{
    margin:2px 0 2px;
    font-size:1.27rem;
    line-height:1.32;
  }

  #login .login-guide{
    margin-bottom:2px;
  }

  #login .login-card label{
    margin-top:3px;
  }

  #login .login-help{
    margin:4px 0 4px;
  }

  #login .login-card > .primary{
    margin-bottom:2px;
  }
}

/* ==================================================
   TG WORKS LOGIN - FORM POLISH
   2026-09-16
   写真のサイズ・トリミングは変更しない
================================================== */

/* スマホ縦画面 */
@media (max-width:760px) and (orientation:portrait){

  /* TG WORKSを右上から右下へ */
  #login .welcome-app-name{
    top:auto;
    right:18px;
    bottom:17px;
    margin:0;
    color:rgba(44,26,14,.82);
    font-size:.66rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.25em;
    text-shadow:0 1px 8px rgba(255,255,255,.72);
  }

  /* ログインエリアに少し呼吸感を出す */
  #login .login-card{
    padding-top:17px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }

  #login .login-card .eyebrow{
    margin:0 0 4px;
    font-size:.62rem;
    line-height:1.35;
    letter-spacing:.22em;
  }

  #login .login-card h2{
    margin:0 0 7px;
    font-size:.94rem;
    line-height:1.4;
    letter-spacing:.12em;
  }

  #login .login-catch{
    margin:0 0 7px;
    font-size:1.44rem;
    line-height:1.42;
    letter-spacing:.03em;
  }

  #login .login-guide{
    margin:0 0 10px;
    font-size:.73rem;
    line-height:1.55;
  }

  #login .login-card label{
    margin:9px 0 0;
    font-size:.77rem;
    font-weight:600;
    line-height:1.4;
    letter-spacing:.015em;
  }

  #login .login-card label input{
    margin-top:5px;
  }

  #login .login-card input{
    min-height:43px;
    padding:9px 13px;
    border-radius:11px;
  }

  #login .login-card input:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,169,110,.14);
  }

  #login .login-help{
    margin:10px 0 7px;
    font-size:.65rem;
    line-height:1.45;
  }

  #login .login-card > .primary{
    min-height:47px;
    margin:0 0 5px;
    border-radius:12px;
    font-size:.93rem;
    font-weight:700;
    letter-spacing:.06em;
    box-shadow:0 7px 18px rgba(44,26,14,.12);
  }
}

/* 高さが低い縦スマホでは少しだけ詰める */
@media (max-width:760px) and (orientation:portrait) and (max-height:700px){

  #login .login-card{
    padding-top:10px;
  }

  #login .login-card .eyebrow{
    margin-bottom:2px;
  }

  #login .login-card h2{
    margin-bottom:3px;
  }

  #login .login-catch{
    margin-bottom:3px;
    font-size:1.27rem;
  }

  #login .login-guide{
    margin-bottom:4px;
    line-height:1.4;
  }

  #login .login-card label{
    margin-top:4px;
  }

  #login .login-card label input{
    margin-top:3px;
  }

  #login .login-help{
    margin:5px 0 4px;
  }
}

/* スマホ横画面：写真下に出るTEN GROUPを消す */
@media (max-width:760px) and (orientation:landscape){
  #login .login-card > .eyebrow{
    display:none;
  }
}

/* ==================================================
   TG WORKS LOGIN - RELAXED SPACING
   2026-09-16
   写真部分は変更しない
================================================== */

@media (max-width:760px) and (orientation:portrait){

  /* 写真直下のTEN GROUPから少しゆとりを作る */
  #login .login-card{
    padding-top:24px;
    padding-bottom:calc(17px + env(safe-area-inset-bottom));
  }

  #login .login-card .eyebrow{
    margin:0 0 6px;
  }

  #login .login-card h2{
    margin:0 0 9px;
  }

  #login .login-catch{
    margin:0 0 10px;
  }

  /* 説明文とログインIDの間をしっかり空ける */
  #login .login-guide{
    margin:0 0 17px;
    line-height:1.6;
  }

  /* ログインID / パスワードそれぞれに余白 */
  #login .login-card label{
    margin:0;
  }

  #login .login-card label + label{
    margin-top:16px;
  }

  #login .login-card label input{
    margin-top:6px;
  }

  /* パスワード欄から案内文まで余白 */
  #login .login-help{
    margin:17px 0 13px;
    line-height:1.5;
  }

  /* 案内文からログインボタンまでさらに余白 */
  #login .login-card > .primary{
    margin:0 0 9px;
    min-height:48px;
  }
}

/* 縦が短い端末だけは、1画面に収まりやすいよう少し圧縮 */
@media (max-width:760px) and (orientation:portrait) and (max-height:700px){

  #login .login-card{
    padding-top:14px;
    padding-bottom:calc(9px + env(safe-area-inset-bottom));
  }

  #login .login-card .eyebrow{
    margin-bottom:3px;
  }

  #login .login-card h2{
    margin-bottom:4px;
  }

  #login .login-catch{
    margin-bottom:5px;
  }

  #login .login-guide{
    margin-bottom:8px;
  }

  #login .login-card label + label{
    margin-top:8px;
  }

  #login .login-help{
    margin:8px 0 6px;
  }

  #login .login-card > .primary{
    margin-bottom:3px;
  }
}

/* ==================================================
   TG WORKS - MOBILE TALK UI
   2026-09-16
   LINEのように「一覧 → トーク → 戻る」を明確化
   ログイン画面・掲示板の既存デザインは変更しない
================================================== */

.chat-list-guide{
  margin:.2rem 0 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.5;
}

/* トーク一覧カードを、押す場所が一目で分かる形へ */
#room-list{
  display:grid;
  gap:7px;
}

#room-list .room{
  width:100%;
  min-height:68px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 11px;
  border:1px solid rgba(232,224,208,.9);
  border-radius:15px;
  background:var(--surface);
  text-align:left;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

#room-list .room:hover{
  border-color:rgba(201,169,110,.72);
  box-shadow:0 7px 20px rgba(44,26,14,.07);
}

#room-list .room:active{
  transform:scale(.985);
}

#room-list .room.selected{
  border-color:var(--gold);
  background:rgba(245,240,232,.72);
}

#room-list .room .avatar{
  flex:0 0 44px;
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--ivory);
  color:var(--brown);
  font-weight:700;
  font-size:1rem;
}

#room-list .room-text{
  min-width:0;
  flex:1;
  display:grid;
  gap:3px;
}

#room-list .room-text strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--brown-dark);
  font-size:.94rem;
}

#room-list .room-text small{
  color:var(--muted);
  font-size:.72rem;
}

#room-list .badge{
  flex:0 0 auto;
  min-width:23px;
  height:23px;
  padding:0 6px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--brown);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
}

/* 会話ヘッダー */
.conversation-head{
  position:relative;
}

.mobile-chat-back{
  display:none;
}

/* 新規トーク画面 */
#room-dialog #member-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

#room-dialog #member-options label{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}

#room-dialog #member-options label span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.8rem;
}

/* ==================================================
   SMARTPHONE
================================================== */
@media (max-width:760px){

  /* 上の大きなページ見出しを消し、トーク自身を主役に */
  #chat-view{
    position:relative;
    display:block;
    min-height:0;
  }

  #chat-view .room-panel{
    display:block;
    width:100%;
    min-width:0;
    border-right:0;
  }

  #chat-view .conversation{
    display:none;
  }

  /* 相手を押したら会話を全面表示 */
  #chat-view.mobile-room-open .room-panel{
    display:none;
  }

  #chat-view.mobile-room-open .conversation{
    display:flex;
    width:100%;
    min-width:0;
    min-height:calc(100dvh - 132px);
  }

  .mobile-chat-back{
    display:inline-flex;
    align-items:center;
    gap:3px;
    flex:0 0 auto;
    min-height:38px;
    padding:5px 8px 5px 3px;
    border:0;
    background:transparent;
    color:var(--brown);
    font-size:.78rem;
    font-weight:700;
    cursor:pointer;
  }

  .mobile-chat-back > span:first-child{
    font-size:1.8rem;
    line-height:.7;
    font-weight:400;
  }

  #chat-view .room-panel .section-head{
    align-items:center;
    margin-bottom:12px;
  }

  #chat-view .room-panel .section-head h2{
    margin-top:1px;
    font-size:1.3rem;
  }

  #new-room{
    min-height:40px;
    padding:8px 13px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
  }

  #room-list{
    gap:6px;
  }

  #room-list .room{
    min-height:66px;
    border-radius:13px;
    padding:9px 10px;
  }

  #room-list .room .avatar{
    flex-basis:46px;
    width:46px;
    height:46px;
  }

  #chat-view .conversation-head{
    min-height:58px;
    gap:7px;
    padding:7px 8px;
  }

  #chat-view .conversation-title{
    min-width:0;
    flex:1;
  }

  #chat-view .conversation-title h2{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:1rem;
  }

  #room-members{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.66rem;
  }

  #sync-state{
    display:none;
  }

  #chat-view .messages{
    padding-left:10px;
    padding-right:10px;
  }

  #chat-view .composer{
    padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  }

  #message-body{
    min-height:44px;
    max-height:120px;
    border-radius:17px;
  }

  #room-dialog{
    width:min(94vw,520px);
    max-height:88dvh;
    border-radius:20px;
  }

  #room-dialog #member-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  #room-dialog #member-options label{
    padding:9px 8px;
  }
}

@media (max-width:380px){
  #room-dialog #member-options{
    grid-template-columns:1fr;
  }
}

/* ==================================================
   TG WORKS - TALK HEADER CLEANUP
   2026-09-16
   スマホでは上部の「トーク」を唯一の見出しにする
================================================== */
@media (max-width:760px){
  #chat-view .room-panel > .section-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
  }

  #chat-view .room-panel > .section-head > div{
    min-width:0;
  }

  #chat-view .room-panel > .section-head .eyebrow,
  #chat-view .room-panel > .section-head h2{
    display:none;
  }

  #chat-view .chat-list-guide{
    margin:0;
    font-size:.82rem;
    line-height:1.55;
    color:var(--muted);
  }

  #chat-view #new-room{
    align-self:center;
  }
}


/* TG WORKS TALK v2 */
.new-talk-intro{display:flex;flex-direction:column;gap:4px;margin:0 0 14px}
.new-talk-intro strong{font-size:1rem}
.new-talk-intro span{font-size:.82rem;line-height:1.55;color:var(--muted)}
.talk-member-group{margin:0 0 16px}
.talk-member-group h4{margin:0 0 8px;font-size:.82rem;color:var(--muted)}
.talk-member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.talk-member-card{position:relative;display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.talk-member-card input{position:absolute;opacity:0;pointer-events:none}
.talk-member-check{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font-size:.75rem;color:transparent;background:#fff}
.talk-member-card:has(input:checked){border-color:#b79b69;background:#faf7f0}
.talk-member-card:has(input:checked) .talk-member-check{background:#8b7355;border-color:#8b7355;color:#fff}
.talk-member-name{min-width:0;font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-text{min-width:0;flex:1}
.room-line{display:flex;align-items:center;gap:8px;min-width:0}
.room-line strong,.room-preview{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-time{flex:0 0 auto;font-size:.72rem;color:var(--muted)}
.room-preview{font-size:.8rem;color:var(--muted)}
.message-day{width:max-content;margin:14px auto 10px;padding:4px 10px;border-radius:999px;background:rgba(139,115,85,.10);color:var(--muted);font-size:.72rem;font-weight:700}
@media(max-width:380px){.talk-member-grid{grid-template-columns:1fr}}

/* ==================================================
   TG WORKS STAFF LIST FINAL
   店舗別 / 名前のみ / スマホ2列
   2026-09-17
================================================== */

#staff-list{
  display:block;
  width:100%;
}

.staff-department{
  width:100%;
  margin:0 0 30px;
}

.staff-department-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 11px;
  padding:0 3px 9px;
  border-bottom:1px solid var(--line);
}

.staff-department-head h3{
  margin:0;
  color:var(--brown-dark);
  font-size:1rem;
  font-weight:800;
  line-height:1.4;
}

.staff-count{
  flex-shrink:0;
  color:var(--muted);
  font-size:.74rem;
  font-weight:600;
  white-space:nowrap;
}

.staff-name-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.staff-name-card{
  width:100%;
  min-width:0;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:11px 9px;
  color:var(--brown-dark);
  background:#FFF;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 2px 8px rgba(61,43,31,.035);
  text-align:center;
  overflow:hidden;
  transition:background .15s ease,border-color .15s ease,transform .08s ease,box-shadow .15s ease;
}

button.staff-name-card{
  cursor:pointer;
}

button.staff-name-card:hover{
  background:var(--ivory);
  border-color:#D7C5A8;
  box-shadow:0 3px 10px rgba(61,43,31,.06);
}

button.staff-name-card:active{
  background:#F1E9DE;
  transform:scale(.98);
}

.staff-name{
  display:block;
  width:100%;
  min-width:0;
  margin:0;
  color:var(--brown-dark);
  font-size:.94rem;
  font-weight:700;
  line-height:1.35;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.staff-name-card.inactive{
  opacity:.45;
  background:#F5F3EF;
}

@media(max-width:760px){
  #staff-view{
    width:100%;
    padding-left:14px;
    padding-right:14px;
  }

  .staff-department{
    margin-bottom:26px;
  }

  .staff-department-head{
    margin-bottom:9px;
    padding-bottom:8px;
  }

  .staff-department-head h3{
    font-size:.94rem;
  }

  .staff-count{
    font-size:.7rem;
  }

  .staff-name-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .staff-name-card{
    min-height:50px;
    padding:9px 6px;
    border-radius:11px;
    box-shadow:none;
  }

  .staff-name{
    font-size:.9rem;
    line-height:1.3;
  }
}

@media(max-width:380px){
  #staff-view{
    padding-left:12px;
    padding-right:12px;
  }

  .staff-name-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .staff-name-card{
    min-height:48px;
    padding-left:4px;
    padding-right:4px;
  }

  .staff-name{
    font-size:.85rem;
  }
}
/* ==================================================
   TG WORKS TALK LIST
   1トーク = 1列表示
================================================== */

#room-list{
  display:grid;
  grid-template-columns:1fr;
  width:100%;
  gap:8px;
}

#room-list .room{
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
}

/* スマホ・縦長画面も必ず1列 */

@media(max-width:760px){

  #room-list{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    max-height:none;
    overflow-x:hidden;
    overflow-y:auto;
    padding:0 14px 14px;
    gap:8px;
  }

  #room-list .room{
    width:100%;
    max-width:none;
    min-width:0;
    min-height:68px;
    margin:0;
  }
}
/* ==================================================
   TG WORKS
   トーク画面・新規トーク画面 最終調整

   1. 新規トークボタンを大きく表示
   2. 店舗は縦1列
   3. スタッフは横2列
   4. フルネームを省略しない
   5. トーク画面の文字を濃くする

   app.js・店舗順・社員番号順は変更しない
================================================== */


/* ==================================================
   1. 新規トークボタン
================================================== */

#chat-view .room-panel > .section-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  gap: 10px;
  padding: 16px;

  background: #ffffff;
  border-bottom: 1px solid #d7c9ba;
}

#chat-view .room-panel > .section-head > div {
  width: 100%;
  min-width: 0;
}

#chat-view #new-room {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 56px;

  margin: 0;
  padding: 14px 18px;

  color: #ffffff;
  background: #76604e;

  border: 1px solid #76604e;
  border-radius: 12px;

  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;

  cursor: pointer;

  box-shadow: 0 4px 12px rgba(61, 43, 31, 0.14);
}

#chat-view #new-room:hover {
  color: #ffffff;
  background: #604b3b;
}

#chat-view #new-room:active {
  background: #514032;
}


/* ==================================================
   2. 新規トーク画面
================================================== */

#room-dialog {
  width: min(640px, 94vw);
  max-width: none;
  max-height: 90dvh;

  box-sizing: border-box;

  padding: 22px;

  color: #342b25;
  background: #ffffff;
}


/* ==================================================
   3. 店舗は縦1列
================================================== */

#room-dialog #member-options {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  width: 100%;
  min-width: 0;

  max-height: 48dvh;

  gap: 18px;
  padding: 4px;

  box-sizing: border-box;

  overflow-x: hidden;
  overflow-y: auto;
}

#room-dialog .talk-member-group {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}

#room-dialog .talk-member-group h4 {
  display: block;

  margin: 0 0 10px;
  padding: 0 0 9px;

  color: #514237;

  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;

  border-bottom: 1px solid #d7c9ba;
}


/* ==================================================
   4. スタッフは横2列
================================================== */

#room-dialog .talk-member-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  width: 100%;
  min-width: 0;

  gap: 9px;
}

#room-dialog .talk-member-card {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-width: 0;
  min-height: 56px;

  margin: 0;
  padding: 10px;

  gap: 8px;

  box-sizing: border-box;

  color: #342b25;
  background: #ffffff;

  border: 1px solid #d7c9ba;
  border-radius: 11px;

  cursor: pointer;
}


/* ==================================================
   5. 選択用チェックマーク
================================================== */

#room-dialog .talk-member-card input {
  position: absolute;

  opacity: 0;
  pointer-events: none;
}

#room-dialog .talk-member-check {
  display: grid;
  place-items: center;

  flex: 0 0 22px;

  width: 22px;
  height: 22px;

  margin: 0;

  color: transparent;
  background: #ffffff;

  border: 1px solid #cbbba7;
  border-radius: 50%;

  font-size: 12px;
  line-height: 1;
}


/* ==================================================
   6. フルネームを省略せず表示
================================================== */

#room-dialog .talk-member-name {
  display: block !important;

  flex: 1 1 auto;

  width: auto;
  min-width: 0;

  color: #342b25;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;

  overflow-wrap: anywhere;
  word-break: normal;
}


/* ==================================================
   7. スタッフ選択時の色
================================================== */

#room-dialog .talk-member-card:has(input:checked) {
  color: #342b25;
  background: #f1e7d9;

  border-color: #a98d70;

  box-shadow:
    inset 0 0 0 1px #a98d70;
}

#room-dialog
.talk-member-card:has(input:checked)
.talk-member-check {
  color: #ffffff;
  background: #76604e;

  border-color: #76604e;
}


/* ==================================================
   8. トーク画面の文字のコントラスト改善
================================================== */

/* 会話画面の背景 */

#chat-view .conversation {
  background: #f7f3ed;
}


/* 相手のメッセージ */

#chat-view .message:not(.mine) .bubble {
  color: #28231f;
  background: #ffffff;

  border-color: #d7c9ba;

  font-weight: 500;
}


/* 自分のメッセージ */

#chat-view .message.mine .bubble {
  color: #28231f;
  background: #e2d3c1;

  border-color: #cbb79e;

  font-weight: 500;
}


/* 送信者の名前 */

#chat-view .message-name {
  color: #514237;

  font-weight: 800;
}


/* 日時・既読数 */

#chat-view .message-meta {
  color: #62574d;

  font-size: 12px;
  font-weight: 600;
}


/* 日付の区切り */

#chat-view .message-day {
  color: #514237;
  background: #e9dfd1;

  font-weight: 700;
}


/* トーク一覧のスタッフ名 */

#chat-view #room-list .room strong {
  color: #342b25;

  font-weight: 800;
}


/* トーク一覧のメッセージ */

#chat-view #room-list .room-preview {
  color: #62574d;

  font-weight: 500;
}


/* トーク一覧の日時 */

#chat-view #room-list .room-time {
  color: #62574d;

  font-weight: 600;
}


/* メッセージ入力欄 */

#chat-view #message-body {
  color: #28231f;
  background: #ffffff;

  border-color: #b7a898;
}

#chat-view #message-body::placeholder {
  color: #766a60;
}


/* ==================================================
   9. スマホ専用
================================================== */

@media (max-width: 760px) {

  /* 新規トークボタン */

  #chat-view .room-panel > .section-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 10px;
    padding: 14px;
  }

  #chat-view #new-room {
    display: flex;

    width: 100%;
    min-height: 56px;

    padding: 14px;

    font-size: 16px;
  }


  /* 新規トーク画面 */

  #room-dialog {
    width: calc(100vw - 20px);
    max-width: none;
    max-height: 90dvh;

    padding: 18px 12px;
  }


  /* 店舗は縦1列 */

  #room-dialog #member-options {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    width: 100%;
    max-height: 48dvh;

    gap: 18px;
    padding: 3px;
  }


  /* スタッフは横2列 */

  #room-dialog .talk-member-grid {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 8px;
  }


  /* スタッフカード */

  #room-dialog .talk-member-card {
    min-height: 56px;

    padding: 9px 7px;

    gap: 6px;
  }


  /* チェックマーク */

  #room-dialog .talk-member-check {
    flex: 0 0 20px;

    width: 20px;
    height: 20px;
  }


  /* フルネーム */

  #room-dialog .talk-member-name {
    font-size: 13px;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    line-height: 1.45;
  }

}


/* ==================================================
   10. 小さいスマホでも横2列を維持
================================================== */

@media (max-width: 380px) {

  #room-dialog #member-options {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  #room-dialog .talk-member-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 6px;
  }

  #room-dialog .talk-member-card {
    padding: 8px 5px;

    gap: 5px;
  }

  #room-dialog .talk-member-name {
    font-size: 12px;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

}
/* ==================================================
   TG WORKS
   新しいトーク：開始ボタン常時表示
   PC・スマホ共通
================================================== */


/* ポップアップ全体 */

#room-dialog {
  width: min(640px, 94vw);
  max-height: 90dvh;

  padding: 0;

  overflow: hidden;
}


/* フォームを縦並びにする */

#room-dialog #room-form {
  display: flex;
  flex-direction: column;

  width: 100%;
  max-height: 90dvh;

  padding: 20px;

  box-sizing: border-box;

  overflow: hidden;
}


/* 上部の見出し */

#room-dialog #room-form > .section-head {
  flex: 0 0 auto;

  margin-bottom: 14px;
}


/* 説明文 */

#room-dialog .new-talk-intro {
  flex: 0 0 auto;
}


/* スタッフ選択エリア */

#room-dialog #room-form > fieldset {
  display: flex;
  flex-direction: column;

  flex: 1 1 auto;

  min-height: 0;

  margin-top: 14px;
  margin-bottom: 10px;

  padding: 12px;

  overflow: hidden;
}


/* スタッフ一覧だけをスクロール */

#room-dialog #member-options {
  flex: 1 1 auto;

  min-height: 0;
  max-height: none;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* グループ名入力欄 */

#room-dialog #group-title {
  flex: 0 0 auto;

  margin: 5px 0 10px;
}


/* 下部の固定操作エリア */

#room-dialog .talk-submit-area {
  flex: 0 0 auto;

  position: relative;
  z-index: 5;

  width: 100%;

  margin-top: auto;
  padding: 12px 0 0;

  background: #ffffff;

  border-top: 1px solid #e8e0d0;
}


/* 注意書き */

#room-dialog .talk-submit-guide {
  margin: 0 0 10px;

  color: #62574d;

  font-size: 12px;
  line-height: 1.5;
}


/* トーク開始ボタン */

#room-dialog #room-submit {
  display: block;

  width: 100%;
  min-height: 54px;

  margin: 0;
  padding: 13px 16px;

  color: #ffffff;
  background: #76604e;

  border: 0;
  border-radius: 12px;

  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;

  text-align: center;
}


/* 未選択時 */

#room-dialog #room-submit:disabled {
  color: #746b62;
  background: #e9e3dc;

  opacity: 1;

  cursor: not-allowed;
}


/* ==================================================
   スマホ版
================================================== */

@media (max-width: 760px) {

  #room-dialog {
    width: calc(100vw - 20px);
    max-height: 90dvh;

    padding: 0;
  }

  #room-dialog #room-form {
    max-height: 90dvh;

    padding:
      16px
      12px
      calc(12px + env(safe-area-inset-bottom));
  }

  #room-dialog #room-form > fieldset {
    min-height: 0;

    margin-top: 10px;
    margin-bottom: 8px;

    padding: 10px;
  }

  #room-dialog #member-options {
    min-height: 0;
    max-height: none;

    overflow-y: auto;
  }

  #room-dialog .talk-submit-area {
    padding-top: 10px;
  }

  #room-dialog .talk-submit-guide {
    font-size: 11px;
    line-height: 1.4;
  }

  #room-dialog #room-submit {
    width: 100%;
    min-height: 52px;

    font-size: 14px;
  }

}
/* ==================================================
   TG WORKS MOBILE FIX
   新規トーク・送信ボタン表示修正
================================================== */


/* ==================================================
   1. 新規トーク画面
================================================== */

#room-dialog {
  height: min(90dvh, 850px);
  max-height: 90dvh;
  overflow: hidden;
}

#room-dialog #room-form {
  display: flex;
  flex-direction: column;

  height: 100%;
  max-height: none;
  min-height: 0;

  overflow: hidden;
}

#room-dialog #room-form > fieldset {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

#room-dialog #member-options {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;

  overflow-x: hidden;
  overflow-y: auto;

  -webkit-overflow-scrolling: touch;
}

#room-dialog .talk-submit-area {
  flex: 0 0 auto;

  position: relative;
  z-index: 10;

  margin-top: 0;

  background: #ffffff;
}

#room-dialog #room-submit {
  display: block;

  width: 100%;
  margin: 0;
}


/* ==================================================
   2. スマホの会話画面
================================================== */

@media (max-width: 760px) {

  /* 新規トーク */

  #room-dialog {
    height: 90dvh;
    max-height: 90dvh;
    overflow: hidden;
  }

  #room-dialog #room-form {
    height: 100%;
    max-height: none;
    min-height: 0;

    padding:
      12px
      12px
      calc(10px + env(safe-area-inset-bottom));
  }

  #room-dialog #room-form > .section-head {
    margin-bottom: 8px;
  }

  #room-dialog #room-form > fieldset {
    flex: 1 1 0;

    min-height: 0;

    margin-top: 8px;
    margin-bottom: 8px;
  }

  #room-dialog #member-options {
    flex: 1 1 0;

    min-height: 0;
    max-height: none;

    overflow-y: auto;
  }

  #room-dialog .talk-submit-area {
    flex-shrink: 0;

    padding-top: 8px;

    background: #ffffff;
  }

  #room-dialog .talk-submit-guide {
    margin-bottom: 6px;
  }

  #room-dialog #room-submit {
    min-height: 50px;
    margin: 0;
  }


  /* 会話画面全体 */

  #chat-view.mobile-room-open {
    position: fixed;

    top: 62px;
    right: 0;
    bottom: calc(70px + env(safe-area-inset-bottom));
    left: 0;

    z-index: 45;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: auto;
    min-height: 0;

    overflow: hidden;

    background: #f7f3ed;
  }


  /* 会話本体 */

  #chat-view.mobile-room-open .conversation {
    display: flex;

    flex: 1 1 0;

    flex-direction: column;

    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: hidden;
  }


  /* 相手の名前 */

  #chat-view.mobile-room-open .conversation-head {
    flex: 0 0 auto;
  }


  /* メッセージ履歴だけスクロール */

  #chat-view.mobile-room-open #messages {
    flex: 1 1 0;

    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
  }


  /* 入力欄と送信ボタン */

  #chat-view.mobile-room-open #message-form {
    display: flex;
    flex: 0 0 auto;

    flex-direction: column;

    width: 100%;

    margin: 0;

    padding: 8px 10px 10px;

    background: #ffffff;

    border-top: 1px solid #e8e0d0;
  }


  /* 入力欄 */

  #chat-view.mobile-room-open #message-body {
    width: 100%;

    min-height: 44px;
    max-height: 95px;

    margin: 0;

    font-size: 16px;
  }


  /* 添付と送信ボタン */

  #chat-view.mobile-room-open .composer-actions {
    display: flex;

    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;

    gap: 8px;

    margin-top: 7px;
  }


  /* 送信ボタン */

  #chat-view.mobile-room-open .composer-actions > .primary {
    display: block;

    flex: 0 0 auto;

    min-width: 76px;
    min-height: 44px;

    margin: 0;

    padding: 9px 14px;

    background: #3d2b1f;
    color: #ffffff;

    border-radius: 11px;

    font-size: 14px;
    font-weight: 800;
  }

}
/* ==================================================
   TG WORKS MOBILE: トーク一覧へ戻るボタン
   既存 #mobile-chat-back を利用（二重作成しない）
================================================== */
@media (max-width: 760px) {
  #chat-view.mobile-room-open .conversation {
    min-height: 0;
  }

  #chat-view.mobile-room-open .conversation-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 64px;
    padding: 9px 12px;
  }

  #chat-view.mobile-room-open #mobile-chat-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 4px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--ivory);
    color: var(--brown-dark);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }

  #chat-view.mobile-room-open #mobile-chat-back > span:first-child {
    font-size: 26px;
    line-height: 0.7;
  }

  #chat-view.mobile-room-open .conversation-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  #chat-view.mobile-room-open #room-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #chat-view.mobile-room-open #sync-state {
    flex: 0 0 auto;
  }
}
/* ==========================================
   TG WORKS スマホ版トーク履歴表示修正
========================================== */

@media (max-width: 760px) {

  /* トーク一覧を画面内で縦スクロール */
  #chat-view:not(.mobile-room-open) .chat-layout {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 132px);
    min-height: 0;
  }

  /* 190pxの高さ制限を解除 */
  #chat-view:not(.mobile-room-open) .room-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* 新規トークボタンは上に固定 */
  #chat-view:not(.mobile-room-open) .room-panel > .section-head {
    flex-shrink: 0;
  }

  /* 過去のトークを縦1列ですべて表示 */
  #chat-view:not(.mobile-room-open) #room-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0 14px 20px;
    gap: 8px;
  }

  #chat-view:not(.mobile-room-open) #room-list .room {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }

}
/* TG WORKS room management: touch-friendly per-room menu */
#room-list .room-item { display:flex; align-items:stretch; width:100%; min-width:0; position:relative; background:#fff; border-bottom:1px solid #f2eee8; }
#room-list .room-item > .room { flex:1 1 auto; min-width:0; width:auto; border-bottom:0; }
#room-list .room-more { flex:0 0 44px; min-width:44px; min-height:56px; padding:8px; background:#fff; color:#8b7355; font-size:25px; border-radius:0; }
#room-list .room-more:focus-visible { outline:2px solid #c9a96e; outline-offset:-2px; }
.room-hidden-toggle { margin-left:auto; flex-shrink:0; font-size:12px; white-space:nowrap; }
@media(max-width:760px){
 #room-list .room-item { width:100%; min-width:0; }
 #room-list .room-item > .room { width:auto; min-width:0; }
 #room-list .room-more { min-height:68px; }
 .room-hidden-toggle { font-size:11px; padding:6px 7px; }
}

.room-action-dialog { border:0; border-radius:18px; width:min(92vw,390px); max-width:390px; padding:20px; color:#3d2b1f; background:#fff; box-shadow:0 16px 48px rgba(0,0,0,.2); }
.room-action-dialog::backdrop { background:rgba(0,0,0,.35); }
.room-action-dialog h3 { margin:0 0 14px; font-size:16px; overflow-wrap:anywhere; }
.room-action-button,.room-action-cancel { display:block; width:100%; min-height:52px; text-align:left; background:#f5f0e8; color:#3d2b1f; margin:8px 0; border-radius:12px; }
.room-action-cancel { text-align:center; background:#fff; border:1px solid #e8e0d0; }

/* TG WORKS: non-browser visibility dialog and talk history search */
.room-action-description { font-size:14px; line-height:1.7; margin:0 0 18px; }
.room-action-button:disabled { opacity:.5; }
.talk-search-trigger { display:inline-flex; align-items:center; min-height:36px; padding:5px 12px; margin:6px 0; border:1px solid #d9cbbb; border-radius:20px; background:#fff; color:#7d6a5d; font-size:13px; }
.talk-search-trigger[hidden] { display:none !important; }
.talk-search-dialog { border:0; border-radius:18px; width:min(94vw,520px); max-height:85dvh; padding:20px; background:#fff; color:#3d2b1f; box-shadow:0 16px 48px rgba(0,0,0,.2); }
.talk-search-dialog::backdrop { background:rgba(0,0,0,.4); }
.talk-search-dialog h3 { font-size:18px; margin:0 0 14px; }
.talk-search-form { display:flex; gap:8px; margin-bottom:12px; }
.talk-search-form input { flex:1; min-width:0; border:1px solid #d9cbbb; border-radius:10px; padding:10px; font-size:16px; }
.talk-search-submit,.talk-search-more { border:0; border-radius:10px; padding:10px 14px; background:#7d6a5d; color:#fff; }
.talk-search-more { width:100%; margin-top:10px; }
.talk-search-more[hidden] { display:none !important; }
.talk-search-results { overflow-y:auto; max-height:48dvh; }
.talk-search-result { display:flex; flex-direction:column; gap:5px; width:100%; padding:12px 6px; border:0; border-bottom:1px solid #eee7de; text-align:left; background:#fff; color:#3d2b1f; white-space:normal; overflow-wrap:anywhere; }
.talk-search-result small { color:#877b70; }
.talk-search-highlight { outline:3px solid #c9a96e; outline-offset:2px; border-radius:10px; }

/* ==================================================
   TG WORKS VOICE CALL BUTTON
   スマホ最優先：個人トークのみ app.js から表示
================================================== */

.call-button{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  padding:0;
  margin-left:auto;
  border:1px solid var(--line);
  border-radius:50%;
  color:#FFF;
  background:var(--brown-dark);
  box-shadow:0 4px 14px rgba(44,26,14,.16);
  font-size:1.35rem;
  line-height:1;
}

.call-button:hover{
  background:#453024;
}

.call-button:active{
  transform:scale(.96);
}

@media (max-width: 760px){
  .conversation-head{
    gap:8px;
    padding-left:12px;
    padding-right:12px;
  }

  .conversation-title{
    flex:1 1 auto;
    min-width:0;
  }

  .conversation-title h2,
  .conversation-title p{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .call-button{
    width:50px;
    height:50px;
    min-width:50px;
    min-height:50px;
    margin-left:6px;
    font-size:1.42rem;
  }
}


/* Browser audio call panel */
.voice-panel{position:fixed;z-index:10000;bottom:20px;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 32px));padding:20px;border:1px solid #d6c9b8;border-radius:16px;background:#fffdf9;color:#292521;box-shadow:0 8px 36px #0003;text-align:center}
.voice-panel[hidden]{display:none}
.voice-panel button{margin:6px;padding:10px 16px;min-height:44px}
.voice-panel audio{display:none}