body * div {
  /*border: 1px solid red;*/
}

/* 戻るボタン（右上に配置） */
.p2p-back-btn {
  position: absolute;
  top: 10px;
  right: 10px;

  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.5vw 1.2vw;
  font-size: 1.8vw;
  border-radius: 5px;
  cursor: pointer;
  z-index: 9999; /* 最前面に */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease;
}

.p2p-back-btn:hover {
  background-color: rgba(29, 6, 53, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}



#p2p-screen {
  /**/
  position: absolute;
  z-index: 3;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*border-radius: 10px;/*角丸*/
  /*background: linear-gradient(to bottom, rgba(55, 48, 52, 0.9), rgba(75, 60, 68, 0.5));*/
  width: 100%;
  height: 100%;
  box-shadow: 6px 6px 10px 0px rgba(51, 48, 48, 0.5);
  background-color: #1e1e1e;
  color: #ccc;
  font-family: 'Consolas', 'Courier New', monospace;

}


#p2p-wrapper {
  position: absolute;
  display: flex;
  flex-direction:row;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;

  border-radius: 12px;

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

  width: 100%;
  height: 98%;
  /*max-height: 380px; /* ← これはOK */
}

/* シグナルメッセージウインドウwrapper*/
#p2p-signal-wrapper{
  display: flex;
  flex-direction:column;
  width:50%;
  height:100%;
  justify-content: space-between;
  margin-right: 0.2vw;
}


/* 接続済みユーザーリスト */
#p2p-userList{
  width:100%;
  height:50%;
  /*border: 5px dotted #076899 ;*/
  border-radius: 8px;
  /*margin: 20px auto;*/


  text-align: left;

  font-size: 1.6vw;
  text-shadow: 1px 2px 3px #4c0ed3;

  background: linear-gradient(to bottom, #0d001a, #310047);
  color: white;
  padding: 8px;
  font-family: monospace;
  border-radius: 4px;
  box-shadow: inset 0 -4px 10px rgba(19, 14, 40, 0.6);

}
#p2p-userList .self {
  padding-left: 9px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;

  color: #e0e8f2;
  background:  linear-gradient(rgb(97, 77, 243),rgba(230, 145, 227, 0.1));
  border-radius: 5px;
}

/* 最上位のwrapper */
#p2p-screen {
  height: 100vh;  /* または height: 100%; にして html, body にも height: 100% 指定 */
  display: flex;
}

/* 左右分割用 */
#p2p-wrapper {
  display: flex;
  flex: 1;
}

/* 左ペイン（信号/チャット） */
#p2p-signal-wrapper {
  width: 50%;
  display: flex;

  flex-direction: column;

  border: 1px solid #7a7979;
  border-radius: 3px;
  box-sizing: border-box;
}

/* 右ペイン（アセット） */
#p2p-chatLog-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/*サムネ画像表示*/
#p2p-remote-assets{
  /*display: flex;*/

  display: grid;
  grid-auto-flow: column;                 /* 左→右に自動配置 */
  grid-template-rows: repeat(2, auto);    /* 2段固定 */
  overflow-x: auto;                       /* 横スクロール有効 */
  /*overflow-y: scroll;*/
  gap: 12px;

  grid-auto-columns: minmax(120px, 1fr);               /* 各アイテムの横幅 */
  /*grid-auto-rows: 100px;               /* 各アイテムの横幅 */
  overflow-y: hidden;       /* ← Y方向は禁止 */
  -webkit-overflow-scrolling: touch; /* ← iOS用慣性スクロール */
  touch-action: pan-x;      /* ← 横だけスワイプ可に */
  width:94%;
  height:100%;
  border: 4px dotted #3a3a3a ;
  /*margin: 20px auto;*/
  /*background-color: #fff;*/
  /*background: repeating-linear-gradient( -45deg, #b3b8bb, #eaf3f8 5px, #fff 5px, #fff 13px );*/
  background: linear-gradient(135deg, #222 0%, #333 100%);
  border: 2px solid #555;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
  padding: 10px;
  text-align: left;
  color: #000000;
  font-size: 2vw;
  text-shadow: 1px 2px 3px #4c0ed3;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/
  text-align: center;

}

#p2p-remote-assets .p2p-thumb{
  float: left;
  width: 85%;
  height: 95%;
  /*height: 45%;*/
  font-family: 'Orbitron', sans-serif;
  border-radius: 5px;
  margin: 0px 0px 0px 0px;
  /*padding: 0px 8px 2px 8px;*/
  padding: 0px 5px 5px 5px;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/
  text-align: center;
  /*background-color: #ffffff;*/
  background: repeating-linear-gradient(45deg, #333 0, #444 5px);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(180, 189, 201, 0.4);
}

.p2p-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
#p2p-remote-assets .p2p-thumb img{
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-top: 5px;

  padding: 0px 0px 0px 0px ;
  margin: 0px 0px 0px 0px ;;
  object-fit: contain;
  text-align: center;
  align-items: center;
}


#p2p-remote-assets .p2p-thumb p{
  margin: 8px 2px 5px 2px;
  font-size: 1.4vw;
  color: #fff;
}


/*チャットログ・システムログ・ALL*/
#p2p-chatlog-wrapper{

  display:flex;             /* column に積む */
  flex-direction:column;
  width: 102%;
  max-height: 105vw;
  overflow-y: auto;
  flex: 1;
}
/* textarea:focus 用は別に */
textarea:focus {
  outline: none; /* または必要なものだけ */
}


/* タブ */
#p2p-tabbar{
  display:flex;
  height:2.8vw;
  width: 100%;

}
.tab{
  display:flex;
  border:none;
  cursor:pointer;
  background:#ccc;
  width: 100%;
  text-align: center;
  align-items: center;
  font-size:1.5vw;

}
#p2p-tabbar .tab {
  padding: 6px 12px;
  margin-right: 4px;
  background: #222;
  color: #ccc;
  border-radius: 6px 6px 0 0;
  border: 1px solid #444;
  cursor: pointer;
}
#p2p-tabbar .tab.active {
  background: #444;
  color: #fff;
  border-bottom: none;
}


/* ログペイン共通 */
.log-pane{
  display: flex;
  display:none;           /* = 非アクティブは隠す */
  resize:none;
  outline:none;
  border:1px solid #bbb;
  margin-bottom: 2px;

  font-family: monospace;
  font: 1.5vw "Roboto";
  text-shadow: 2px 1px 2px rgba(255, 255, 255, 0.1);
  color: rgb(245, 245, 245);

  background-color: #111;
  border: 1px solid #444;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  padding: 6px;

  padding: 8px;

  overflow-y: auto;

  border: 1px solid #444;
  box-sizing: border-box;
}
.log-pane.active{
  display:block;
  background-color: #333;
  width: 100%;
}

/*
#p2p-remoteSignal{
  width:102%;
  height:50%;
  font-size: 0.8vw;
}
*/

/* シグナルボタンwrapper*/
#p2p-signal-btn-wrapper{
  display: flex;
  flex-direction:row;
  width:102%;
  height:auto;

}

#p2p-messageInput{
  width: 87%;
  margin-left: 0.1vw;
  background-color: #333;
  color: #eee;
}
#p2p-sendBtn, #p2p-connectBtn {
  width: 17%;
  font-size: 1.3vw;
  margin-left: 0.1vw;
  background-color: #333;
  color: #eee;
  border: 1px solid #666;
  padding: 5px 12px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
#p2p-sendBtn:hover,
#p2p-connectBtn:hover {
  background-color: rgb(4, 0, 255);
  color: #000;
}

/*
#p2p-localSignal{
  width:100%;
  height:50%;
  color:#000000;
  background: linear-gradient(to bottom, rgba(169, 154, 255, 0.9), rgba(224, 217, 242, 0.5));
  font-size: 0.8vw;
}*/
/*
#p2p-initiatorBtn{
  width: 50%;
  height:auto;
}*/
/*
#p2p-chatLog{
  width: 100%;
  height: 100%;

  background: #ffffff;

  padding: 9px;

  border: 1px solid rgb(255, 205, 251);
  outline: none;
  font: 300 15px Roboto;
  resize: none;
  &:focus, &:valid {
    padding: 0px;
    border: 3px solid rgb(85, 85, 85);
  }
}*/
/*
#p2p-messageInput-wrapper{
  display: flex;
  flex-direction:row;
  height: auto;
}*/
/*
#p2p-sendZipBtn{
  width: 10%;
  margin-left: 0.5vw;
}*/