Person_iCloud/pages/communication/communication.wxss

.communication-panel {
  overflow: hidden;
}

.communication-panel .panel-header {
  padding-bottom: 14rpx;
}

.panel-action-button.is-disabled {
  background: #eef1f5;
  color: #94a3b8;
}

.panel-action-button.is-active {
  background: var(--accent);
  color: #ffffff;
}

.communication-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8rpx;
}

.comm-send-body {
  padding: 0 24rpx 22rpx;
  box-sizing: border-box;
}

.comm-send-input {
  width: 100%;
  min-height: 136rpx;
  padding: 16rpx 18rpx;
  border: 1rpx solid #e7edf3;
  border-radius: 10rpx;
  background: #fafbfd;
  color: #111827;
  font-size: 26rpx;
  line-height: 1.5;
  box-sizing: border-box;
}

.comm-send-input--hex {
  font-family: Menlo, Monaco, Consolas, monospace;
}

.comm-send-input--text {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

.comm-send-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
  margin-top: 12rpx;
}

.comm-send-state,
.comm-send-length {
  color: #64748b;
  font-size: 22rpx;
  line-height: 1.35;
  font-weight: 800;
}

.comm-error {
  margin-top: 10rpx;
  color: var(--danger);
  font-size: 23rpx;
  line-height: 1.4;
  font-weight: 800;
  word-break: break-all;
}

.comm-preview {
  margin-top: 12rpx;
  padding: 12rpx 16rpx;
  border: 1rpx solid #d9edeb;
  border-radius: 10rpx;
  background: #f4fbfa;
  box-sizing: border-box;
}

.comm-preview-label {
  color: #64748b;
  font-size: 22rpx;
  line-height: 1.35;
  font-weight: 800;
}

.comm-preview-value {
  margin-top: 8rpx;
  color: #0f766e;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 24rpx;
  line-height: 1.45;
  font-weight: 800;
  word-break: break-all;
}

.protocol-form {
  padding: 0 24rpx 22rpx;
  box-sizing: border-box;
}

.protocol-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
  min-height: 82rpx;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.protocol-row:first-child {
  border-top: 0;
}

.protocol-label {
  flex: none;
  color: #64748b;
  font-size: 24rpx;
  line-height: 1.35;
  font-weight: 800;
}

.protocol-storage-sync {
  text-align: right;
}

.protocol-value-picker,
.protocol-row-input {
  width: 300rpx;
}

.picker-value {
  color: #111827;
  font-size: 28rpx;
  line-height: 70rpx;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-input,
.protocol-row-input {
  height: 70rpx;
  padding: 0 18rpx;
  border: 1rpx solid #e7edf3;
  border-radius: 10rpx;
  background: #fafbfd;
  color: #111827;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 28rpx;
  line-height: 70rpx;
  text-align: right;
  box-sizing: border-box;
}

.protocol-input {
  width: 100%;
}

.coil-row {
  min-height: 88rpx;
}

.coil-control {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #0f766e;
  font-size: 24rpx;
  line-height: 1.35;
  font-weight: 800;
}

.generated-frame {
  margin-top: 14rpx;
  padding: 14rpx 18rpx;
  border: 1rpx solid #d9edeb;
  border-radius: 10rpx;
  background: #f4fbfa;
  box-sizing: border-box;
}

.generated-frame--response {
  margin-top: 10rpx;
  border-color: #dbeafe;
  background: #eff6ff;
}

.generated-title {
  color: #64748b;
  font-size: 22rpx;
  line-height: 1.35;
  font-weight: 800;
}

.generated-value {
  margin-top: 8rpx;
  color: #0f766e;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 24rpx;
  line-height: 1.5;
  font-weight: 800;
  word-break: break-all;
}

.generated-meta {
  margin-top: 6rpx;
  color: #64748b;
  font-size: 22rpx;
  line-height: 1.35;
  font-weight: 800;
  word-break: break-all;
}

.protocol-error {
  padding-top: 10rpx;
  color: var(--danger);
  font-size: 23rpx;
  line-height: 1.4;
  font-weight: 800;
  word-break: break-all;
}

.protocol-multiple-dialog {
  max-height: 86vh;
}

.protocol-multiple-row {
  padding: 18rpx 24rpx;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.protocol-multiple-row:first-child {
  border-top: 0;
}

.protocol-multiple-head,
.protocol-multiple-text-length {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.protocol-multiple-title {
  color: #111827;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 26rpx;
  line-height: 1.35;
  font-weight: 900;
}

.protocol-multiple-type {
  width: 220rpx;
  min-width: 220rpx;
  max-width: 220rpx;
}

.protocol-multiple-length-input {
  width: 180rpx;
}

.protocol-multiple-input {
  width: 100%;
  margin-top: 12rpx;
}

.protocol-multiple-input--text {
  text-align: left;
}

.empty-log {
  padding: 42rpx 24rpx;
  color: #64748b;
  font-size: 25rpx;
  line-height: 1.4;
  text-align: center;
}

.log-scroll {
  height: 540rpx;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.log-row {
  padding: 18rpx 24rpx;
  border-top: 1rpx solid #edf2f7;
}

.log-row:first-child {
  border-top: 0;
}

.log-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.log-tags {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.log-direction {
  color: #0f766e;
  font-size: 23rpx;
  line-height: 1.35;
  font-weight: 900;
}

.log-note {
  padding: 3rpx 10rpx;
  border-radius: 999rpx;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20rpx;
  line-height: 1.35;
  font-weight: 800;
}

.log-row--RX .log-note {
  background: #ecfdf5;
  color: #047857;
}

.log-row--TX .log-direction {
  color: #2563eb;
}

.log-row--SYS .log-direction {
  color: #64748b;
}

.log-time {
  color: #94a3b8;
  font-size: 22rpx;
  line-height: 1.35;
}

.log-payload {
  margin-top: 8rpx;
  color: #111827;
  font-size: 24rpx;
  line-height: 1.55;
  word-break: break-all;
}

.log-payload--hex {
  font-family: Menlo, Monaco, Consolas, monospace;
}

.log-payload--text {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

.theme-dark .comm-send-input,
.theme-dark .protocol-row-input {
  border-color: #334155;
  background: #111827;
  color: #e5e7eb;
}

.theme-dark .comm-send-state,
.theme-dark .comm-send-length,
.theme-dark .protocol-label,
.theme-dark .comm-preview-label,
.theme-dark .generated-meta,
.theme-dark .log-time {
  color: #94a3b8;
}

.theme-dark .comm-preview,
.theme-dark .generated-frame {
  border-color: #174e49;
  background: #111827;
}

.theme-dark .generated-frame--response {
  border-color: #1e3a8a;
  background: #101827;
}

.theme-dark .comm-preview-value,
.theme-dark .generated-value,
.theme-dark .log-payload,
.theme-dark .protocol-multiple-title {
  color: #e5e7eb;
}

.theme-dark .log-scroll,
.theme-dark .log-row,
.theme-dark .protocol-row {
  border-color: #263241;
}

.theme-dark .log-note {
  background: #123d3b;
  color: #5eead4;
}

.theme-dark .log-row--RX .log-note {
  background: #0f2f2d;
  color: #5eead4;
}

.theme-dark .log-row--TX .log-direction,
.theme-dark .protocol-storage-sync {
  color: #5eead4;
}

.theme-dark .log-row--SYS .log-direction {
  color: #94a3b8;
}

.theme-dark .protocol-error {
  color: #fed7aa;
}

.theme-dark .empty-log {
  color: #94a3b8;
}

@media (max-width: 360px) {
  .protocol-value-picker,
  .protocol-row-input {
    width: 258rpx;
  }

  .protocol-multiple-type {
    width: 180rpx;
    min-width: 180rpx;
    max-width: 180rpx;
  }

  .comm-send-input {
    min-height: 128rpx;
  }
}