<template>
  <view class="container" :style="{ paddingBottom: keyboardPadding }">
    <view class="dream-bg dream-bg-one"></view>
    <view class="dream-bg dream-bg-two"></view>

    <scroll-view scroll-y class="page-scroll" :scroll-into-view="scrollIntoView" scroll-with-animation>
      <view class="main-content">
        <view class="page-hero">
          <text class="hero-title">匿名短信</text>
          <text class="hero-subtitle">写下想说的话，选择时间后送达。</text>
        </view>

        <view class="panel info-panel">
          <view class="field-card" :class="phoneFieldClass">
            <view class="field-icon phone-icon">+86</view>
            <view class="field-body">
              <input
                class="field-input"
                type="number"
                maxlength="11"
                confirm-type="done"
                :value="phoneNumber"
                placeholder="请输入对方手机号"
                placeholder-class="input-placeholder"
                @input="onPhoneInput"
                @blur="phoneTouched = true"
              />
            </view>
          </view>
          <view class="phone-message" v-if="phoneErrorText">
            <text>{{ phoneErrorText }}</text>
          </view>

          <view class="time-card" @tap="showDatePicker">
            <view class="time-main">
              <view class="time-icon-wrap">
                <image src="../../assets/time-32.svg" mode="aspectFit" class="time-icon"></image>
              </view>
              <view class="time-copy">
                <text class="time-label">发送时间</text>
                <text class="time-value" :class="{ empty: !selectedDate }">{{ selectedDate || "选择年月日 时分" }}</text>
              </view>
            </view>
            <text class="time-arrow">›</text>
          </view>
        </view>

        <view class="panel edit-panel" id="message-editor">
          <view class="panel-header editor-header">
            <view>
              <text class="panel-title">短信内容</text>
              <text class="panel-desc">{{ messageCount }}条 · {{ calculateMessageCost() }}元</text>
            </view>
            <button class="ai-entry" hover-class="button-hover" @tap="useBuiltContent">
              <text class="ai-entry-main">AI帮写</text>
            </button>
          </view>

          <view class="textarea-shell" :class="{ focused: textareaFocused }">
            <textarea
              class="message-textarea"
              v-model="messageContent"
              maxlength="500"
              placeholder="请输入要传达的内容，例如道歉、告白、晚安、生日祝福..."
              placeholder-class="textarea-placeholder"
              :cursor-spacing="textareaCursorSpacing"
              :adjust-position="true"
              :show-confirm-bar="false"
              auto-height
              @focus="handleTextareaFocus"
              @blur="handleTextareaBlur"
              @linechange="handleTextareaLineChange"
            />
          </view>

          <view class="editor-meta">
            <view class="character-count">
              <text class="count-strong">{{ messageContent.length }}</text>
              <text class="count-muted">/500 · 共{{ calculateMessageCost() }}元</text>
            </view>
            <button class="preview-button" @tap="previewMessage">短信预览</button>
          </view>
        </view>

        <view class="send-button-container">
          <button class="send-button" :class="{ disabled: !canSend }" @tap="sendMessage">
            <image src="../../assets/sending.svg" mode="aspectFit" class="send-icon"></image>
            <text class="send-text">确认发送</text>
          </button>
        </view>
      </view>
    </scroll-view>

    <view class="date-picker-popup" v-if="showDatePickerPopup">
      <view class="date-picker-mask" @tap="hideDatePicker"></view>
      <view class="date-picker-content">
        <view class="date-picker-handle"></view>
        <view class="date-picker-header">
          <view>
            <text class="picker-title">选择发送时间</text>
            <text class="picker-subtitle">精确到分钟，不展示秒</text>
          </view>
          <text class="picker-close" @tap="hideDatePicker">×</text>
        </view>
        <picker-view class="date-picker" :value="dateTimeValue" @change="onDateTimeChange">
          <picker-view-column>
            <view class="picker-item" v-for="year in yearOptions" :key="year">{{ year }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="month in monthOptions" :key="month">{{ formatTwoDigits(month) }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="day in dayOptions" :key="day">{{ formatTwoDigits(day) }}日</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="hour in hourOptions" :key="hour">{{ formatTwoDigits(hour) }}时</view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="minute in minuteOptions" :key="minute">{{ formatTwoDigits(minute) }}分</view>
          </picker-view-column>
        </picker-view>
        <view class="date-picker-preview">
          <text>{{ pendingDateText }}</text>
        </view>
        <view class="date-picker-footer">
          <button class="picker-cancel" @tap="clearSelectedDate">立即发送</button>
          <button class="picker-confirm" @tap="confirmDatePicker">确认时间</button>
        </view>
      </view>
    </view>

    <view class="preview-popup" v-if="showPreviewPopup">
      <view class="preview-mask" @tap="hidePreview"></view>

      <view class="iphone-preview">
        <view class="iphone-status">
          <text>9:41</text>
          <text>●●● 5G</text>
        </view>
        <view class="imessage-header">
          <text class="imessage-back">‹</text>
          <view class="avatar-dot">{{ recipientInitial }}</view>
          <view class="recipient-info">
            <text class="recipient-name">{{ previewRecipient }}</text>
            <text class="recipient-subtitle">短信 · 预览</text>
          </view>
          <text class="preview-close" @tap="hidePreview">×</text>
        </view>

        <scroll-view scroll-y class="imessage-body">
          <view class="imessage-time">{{ previewTimeText }}</view>
          <view class="bubble-row">
            <view class="ios-bubble">
              <text class="ios-message-text">{{ messageContent || "暂无内容" }}</text>
            </view>
          </view>
        </scroll-view>

        <view class="imessage-compose">
          <text class="compose-placeholder">iMessage</text>
          <button class="compose-send" @tap="hidePreview">确认</button>
        </view>
      </view>
    </view>

    <tui-drawer mode="bottom" :visible="showBuiltContentStatus" @close="hideBuiltContentStatus">
      <view class="template-content">
        <view class="template-header">
          <view>
            <text class="template-title">AI文案美化</text>
            <text class="template-subtitle">选择类型，自动生成一版可编辑文案</text>
          </view>
          <text class="template-close" @tap="hideBuiltContentStatus">×</text>
        </view>

        <view class="template-category-list">
          <view
            class="template-category-item"
            v-for="template in messageTemplates"
            :key="template.typeId"
            @tap="selectTemplate(template)"
          >
            <view class="template-category-top">
              <text class="template-category-text">{{ template.type }}</text>
            </view>
          </view>
        </view>
      </view>
    </tui-drawer>
  </view>
</template>

<script setup lang="ts">
import TuiDrawer from "@/components/thorui/tui-drawer/tui-drawer.vue";
import { MESSAGE_TEMPLATES } from "@/config/form";

type PhoneStatus = "empty" | "invalid" | "valid";

const phoneNumber = ref<string>("");
const phoneTouched = ref<boolean>(false);
const messageContent = ref<string>("");
const selectedDate = ref<string>("");
const selectedDateValue = ref<Date | null>(null);
const sendTimeType = ref<"immediate" | "scheduled">("immediate");
const textareaFocused = ref<boolean>(false);
const keyboardHeight = ref<number>(0);
const scrollIntoView = ref<string>("");
const textareaCursorSpacing = ref<number>(120);

const showDatePickerPopup = ref<boolean>(false);
const dateTimeValue = ref<number[]>([0, 0, 0, 9, 0]);
const yearOptions = ref<number[]>([]);
const monthOptions = ref<number[]>([]);
const dayOptions = ref<number[]>([]);
const hourOptions = ref<number[]>([]);
const minuteOptions = ref<number[]>([]);

const showPreviewPopup = ref<boolean>(false);
const showBuiltContentStatus = ref<boolean>(false);
const messageTemplates = ref(MESSAGE_TEMPLATES);

const phoneStatus = computed<PhoneStatus>(() => {
  if (!phoneNumber.value) return "empty";
  return /^1[3-9]\d{9}$/.test(phoneNumber.value) ? "valid" : "invalid";
});

const phoneFieldClass = computed(() => ({
  invalid: Boolean(phoneErrorText.value),
}));

const phoneErrorText = computed(() => {
  if (phoneNumber.value.length === 11 && phoneStatus.value === "invalid") return "手机号格式不正确，请检查后再发送";
  return "";
});

const canSend = computed(() => phoneStatus.value === "valid" && messageContent.value.trim().length > 0);

const messageCount = computed(() => {
  if (!messageContent.value.length) return 0;
  return Math.ceil(messageContent.value.length / 20);
});

const keyboardPadding = computed(() => {
  if (!keyboardHeight.value) return "0px";
  return `${Math.max(keyboardHeight.value - 20, 0)}px`;
});

const pendingDateText = computed(() => {
  const date = getPendingDate();
  return formatDate(date);
});

const previewRecipient = computed(() => {
  if (!phoneNumber.value) return "对方手机号";
  if (phoneNumber.value.length < 7) return phoneNumber.value;
  return `${phoneNumber.value.slice(0, 3)}****${phoneNumber.value.slice(-4)}`;
});

const recipientInitial = computed(() => {
  if (!phoneNumber.value) return "匿";
  return phoneNumber.value.slice(-2);
});

const previewTimeText = computed(() => {
  if (selectedDate.value) return selectedDate.value;
  return "现在发送";
});

watch(dateTimeValue, () => {
  updateDateOptions();
});

const onPhoneInput = (event: any) => {
  const value = String(event.detail?.value || "").replace(/\D/g, "").slice(0, 11);
  phoneNumber.value = value;
  return value;
};

const formatTwoDigits = (value: number): string => String(value).padStart(2, "0");

const formatDate = (date: Date): string => {
  const year = date.getFullYear();
  const month = formatTwoDigits(date.getMonth() + 1);
  const day = formatTwoDigits(date.getDate());
  const hour = formatTwoDigits(date.getHours());
  const minute = formatTwoDigits(date.getMinutes());
  return `${year}年${month}月${day}日 ${hour}:${minute}`;
};

const getDaysInMonth = (year: number, month: number): number => new Date(year, month, 0).getDate();

const getMinSelectableDate = (): Date => {
  const now = new Date();
  const minDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), 0, 0);
  minDate.setMinutes(minDate.getMinutes() + 1);
  return minDate;
};

const initDateOptions = () => {
  const minDate = getMinSelectableDate();
  yearOptions.value = [minDate.getFullYear(), minDate.getFullYear() + 1];
  monthOptions.value = getAvailableMonths(minDate.getFullYear());
  dayOptions.value = getAvailableDays(minDate.getFullYear(), minDate.getMonth() + 1);
  hourOptions.value = getAvailableHours(minDate.getFullYear(), minDate.getMonth() + 1, minDate.getDate());
  minuteOptions.value = getAvailableMinutes(
    minDate.getFullYear(),
    minDate.getMonth() + 1,
    minDate.getDate(),
    minDate.getHours(),
  );
  dateTimeValue.value = [0, 0, 0, 0, 0];
};

const createRange = (start: number, end: number): number[] => {
  if (start > end) return [];
  return Array.from({ length: end - start + 1 }, (_, index) => start + index);
};

const isCurrentYear = (year: number): boolean => year === getMinSelectableDate().getFullYear();

const isCurrentMonth = (year: number, month: number): boolean => {
  const minDate = getMinSelectableDate();
  return isCurrentYear(year) && month === minDate.getMonth() + 1;
};

const isCurrentDay = (year: number, month: number, day: number): boolean => {
  const minDate = getMinSelectableDate();
  return isCurrentMonth(year, month) && day === minDate.getDate();
};

const isCurrentHour = (year: number, month: number, day: number, hour: number): boolean => {
  const minDate = getMinSelectableDate();
  return isCurrentDay(year, month, day) && hour === minDate.getHours();
};

const getAvailableMonths = (year: number): number[] => {
  const minDate = getMinSelectableDate();
  return createRange(isCurrentYear(year) ? minDate.getMonth() + 1 : 1, 12);
};

const getAvailableDays = (year: number, month: number): number[] => {
  const minDate = getMinSelectableDate();
  const startDay = isCurrentMonth(year, month) ? minDate.getDate() : 1;
  return createRange(startDay, getDaysInMonth(year, month));
};

const getAvailableHours = (year: number, month: number, day: number): number[] => {
  const minDate = getMinSelectableDate();
  return createRange(isCurrentDay(year, month, day) ? minDate.getHours() : 0, 23);
};

const getAvailableMinutes = (year: number, month: number, day: number, hour: number): number[] => {
  const minDate = getMinSelectableDate();
  return createRange(isCurrentHour(year, month, day, hour) ? minDate.getMinutes() : 0, 59);
};

const closestIndex = (options: number[], value: number): number => {
  const exactIndex = options.indexOf(value);
  if (exactIndex >= 0) return exactIndex;

  const nextIndex = options.findIndex((item) => item > value);
  return nextIndex >= 0 ? nextIndex : Math.max(options.length - 1, 0);
};

const updateDateOptions = () => {
  if (!yearOptions.value.length) return;

  const [yearIndex, monthIndex, dayIndex, hourIndex, minuteIndex] = dateTimeValue.value;
  const year = yearOptions.value[yearIndex] || yearOptions.value[0];
  const minDate = getMinSelectableDate();
  const previousMonth = monthOptions.value[monthIndex] || minDate.getMonth() + 1;
  monthOptions.value = getAvailableMonths(year);
  const nextMonthIndex = closestIndex(monthOptions.value, previousMonth);
  const month = monthOptions.value[nextMonthIndex];

  const previousDay = dayOptions.value[dayIndex] || minDate.getDate();
  dayOptions.value = getAvailableDays(year, month);
  const nextDayIndex = closestIndex(dayOptions.value, previousDay);
  const day = dayOptions.value[nextDayIndex];

  const previousHour = hourOptions.value[hourIndex] || minDate.getHours();
  hourOptions.value = getAvailableHours(year, month, day);
  const nextHourIndex = closestIndex(hourOptions.value, previousHour);
  const hour = hourOptions.value[nextHourIndex];

  const previousMinute = minuteOptions.value[minuteIndex] || minDate.getMinutes();
  minuteOptions.value = getAvailableMinutes(year, month, day, hour);
  const nextMinuteIndex = closestIndex(minuteOptions.value, previousMinute);

  const nextValue = [yearIndex, nextMonthIndex, nextDayIndex, nextHourIndex, nextMinuteIndex];
  if (nextValue.some((item, index) => item !== dateTimeValue.value[index])) {
    dateTimeValue.value = nextValue;
  }
};

const getPendingDate = (): Date => {
  const [yearIndex, monthIndex, dayIndex, hourIndex, minuteIndex] = dateTimeValue.value;
  const year = yearOptions.value[yearIndex] || new Date().getFullYear();
  const month = monthOptions.value[monthIndex] || 1;
  const day = dayOptions.value[dayIndex] || 1;
  const hour = hourOptions.value[hourIndex] || 0;
  const minute = minuteOptions.value[minuteIndex] || 0;
  return new Date(year, month - 1, day, hour, minute);
};

const showDatePicker = () => {
  updateDateOptions();
  showDatePickerPopup.value = true;
};

const hideDatePicker = () => {
  showDatePickerPopup.value = false;
};

const onDateTimeChange = (event: any) => {
  dateTimeValue.value = event.detail.value;
};

const confirmDatePicker = () => {
  const date = getPendingDate();

  if (date.getTime() < getMinSelectableDate().getTime()) {
    uni.showToast({
      title: "请选择当前时间之后",
      icon: "none",
    });
    return;
  }

  selectedDateValue.value = date;
  selectedDate.value = formatDate(date);
  sendTimeType.value = "scheduled";
  hideDatePicker();
};

const clearSelectedDate = () => {
  const now = new Date();
  selectedDateValue.value = now;
  selectedDate.value = formatDate(now);
  sendTimeType.value = "immediate";
  hideDatePicker();
};

const calculateMessageCost = () => {
  if (messageCount.value === 0) return 0;
  return (messageCount.value * 3.99).toFixed(2);
};

const handleKeyboardHeightChange = (event: any) => {
  const height = Number(event.detail?.height || event.height || 0);
  keyboardHeight.value = height;
};

const handleTextareaFocus = () => {
  textareaFocused.value = true;
  scrollIntoView.value = "";
  setTimeout(() => {
    scrollIntoView.value = "message-editor";
  }, 80);
};

const handleTextareaBlur = () => {
  textareaFocused.value = false;
};

const handleTextareaLineChange = () => {
  if (!textareaFocused.value) return;
  scrollIntoView.value = "";
  setTimeout(() => {
    scrollIntoView.value = "message-editor";
  }, 50);
};

const previewMessage = () => {
  if (!messageContent.value.trim()) {
    uni.showToast({
      title: "请先输入短信内容",
      icon: "none",
    });
    return;
  }

  showPreviewPopup.value = true;
};

const hidePreview = () => {
  showPreviewPopup.value = false;
};

const useBuiltContent = () => {
  showBuiltContentStatus.value = true;
};

const hideBuiltContentStatus = () => {
  showBuiltContentStatus.value = false;
};

const selectTemplate = (template: any) => {
  messageContent.value = template.content;
  hideBuiltContentStatus();
  setTimeout(() => {
    scrollIntoView.value = "message-editor";
  }, 100);
};

const sendMessage = () => {
  phoneTouched.value = true;

  if (phoneStatus.value !== "valid") {
    uni.showToast({
      title: "请检查手机号",
      icon: "none",
    });
    return;
  }

  if (!messageContent.value.trim()) {
    uni.showToast({
      title: "请输入短信内容",
      icon: "none",
    });
    return;
  }

  const submitPayload = {
    phoneNumber: phoneNumber.value,
    content: messageContent.value.trim(),
    sendTime: selectedDateValue.value ? formatDate(selectedDateValue.value) : formatDate(new Date()),
    sendTimeType: sendTimeType.value,
  };

  uni.showLoading({
    title: "发送中...",
  });

  console.log("发送短信参数:", submitPayload);

  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: "发送成功",
      icon: "success",
    });

    phoneNumber.value = "";
    phoneTouched.value = false;
    messageContent.value = "";
    selectedDate.value = "";
    selectedDateValue.value = null;
    sendTimeType.value = "immediate";
  }, 1500);
};

onMounted(() => {
  initDateOptions();
  uni.$on("keyboardheightchange", handleKeyboardHeightChange);
});

onUnmounted(() => {
  uni.$off("keyboardheightchange", handleKeyboardHeightChange);
});
</script>

<style scoped>
.container {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255, 244, 250, 0.98) 0%, rgba(239, 248, 255, 0.96) 48%, #f7f8fb 100%),
    linear-gradient(135deg, rgba(255, 204, 225, 0.22), rgba(199, 233, 255, 0.24));
  position: relative;
  overflow: hidden;
  transition: padding-bottom 0.2s ease;
}

.dream-bg {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.dream-bg-one {
  width: 360rpx;
  height: 360rpx;
  right: -150rpx;
  top: 130rpx;
  background: rgba(255, 193, 215, 0.22);
}

.dream-bg-two {
  width: 320rpx;
  height: 320rpx;
  left: -130rpx;
  top: 620rpx;
  background: rgba(171, 218, 255, 0.2);
}

.page-scroll {
  position: relative;
  z-index: 1;
  height: 100vh;
}

.main-content {
  padding: 24rpx 26rpx 120rpx;
  box-sizing: border-box;
}

.page-hero {
  padding: 24rpx 8rpx 22rpx;
}

.hero-title,
.hero-subtitle {
  display: block;
}

.hero-title {
  color: #20273a;
  font-size: 42rpx;
  font-weight: 700;
  line-height: 1.2;
}

.hero-subtitle {
  margin-top: 10rpx;
  color: #687286;
  font-size: 25rpx;
  line-height: 1.55;
}

.panel {
  position: relative;
  margin-bottom: 22rpx;
  padding: 24rpx;
  border-radius: 30rpx;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 253, 0.84)),
    linear-gradient(90deg, rgba(255, 205, 223, 0.18), rgba(203, 235, 255, 0.18));
  border: 1rpx solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 16rpx 42rpx rgba(83, 96, 130, 0.08);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18rpx;
}

.panel-title,
.panel-desc {
  display: block;
}

.panel-title {
  color: #20273a;
  font-size: 31rpx;
  font-weight: 700;
  line-height: 1.25;
}

.panel-desc {
  margin-top: 8rpx;
  color: #8a93a4;
  font-size: 22rpx;
  line-height: 1.35;
}

.field-card,
.time-card {
  display: flex;
  align-items: center;
  min-height: 96rpx;
  border-radius: 24rpx;
  background: rgba(255, 255, 255, 0.74);
  border: 1rpx solid rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.88), 0 8rpx 22rpx rgba(83, 96, 130, 0.05);
}

.field-card {
  padding: 16rpx 20rpx;
  margin-bottom: 16rpx;
}

.field-card.valid {
  border-color: rgba(71, 190, 137, 0.36);
}

.field-card.invalid {
  border-color: rgba(255, 104, 132, 0.48);
  background: rgba(255, 247, 249, 0.88);
}

.phone-message {
  margin: -4rpx 8rpx 16rpx;
  padding: 12rpx 18rpx;
  border-radius: 18rpx;
  color: #d94f75;
  font-size: 23rpx;
  line-height: 1.35;
  background: rgba(255, 236, 244, 0.74);
}

.field-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76rpx;
  height: 62rpx;
  border-radius: 20rpx;
  color: #d94f75;
  font-size: 25rpx;
  font-weight: 700;
  background: rgba(255, 232, 240, 0.78);
  margin-right: 18rpx;
}

.field-body {
  flex: 1;
  min-width: 0;
}

.field-input {
  width: 100%;
  height: 42rpx;
  color: #20273a;
  font-size: 32rpx;
  line-height: 42rpx;
}

.input-placeholder {
  color: #b5bdca;
  font-size: 30rpx;
}

.time-card {
  justify-content: space-between;
  padding: 16rpx 20rpx;
}

.time-main {
  display: flex;
  align-items: center;
}

.time-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72rpx;
  height: 68rpx;
  border-radius: 22rpx;
  background: linear-gradient(145deg, rgba(255, 232, 240, 0.88), rgba(232, 247, 255, 0.9));
  margin-right: 18rpx;
}

.time-icon {
  width: 34rpx;
  height: 34rpx;
}

.time-copy {
  display: flex;
  flex-direction: column;
}

.time-label {
  color: #7b8493;
  font-size: 23rpx;
  line-height: 1.25;
}

.time-value {
  margin-top: 6rpx;
  color: #20273a;
  font-size: 28rpx;
  font-weight: 600;
  line-height: 1.35;
}

.time-value.empty {
  color: #b5bdca;
  font-weight: 400;
}

.time-arrow {
  color: #c1c8d2;
  font-size: 42rpx;
}

.editor-header {
  align-items: flex-start;
}

.ai-entry {
  width: 142rpx;
  height: 64rpx;
  padding: 0;
  margin: 0;
  border-radius: 999rpx;
  background: linear-gradient(135deg, #ff78a2 0%, #83c6ff 100%);
  box-shadow: 0 12rpx 24rpx rgba(255, 120, 162, 0.2);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ai-entry::after,
.preview-button::after,
.send-button::after,
.picker-cancel::after,
.picker-confirm::after,
.compose-send::after {
  content: none;
}

.ai-entry-main {
  display: block;
  line-height: 64rpx;
  font-size: 25rpx;
  font-weight: 700;
}

.textarea-shell {
  min-height: 238rpx;
  padding: 20rpx;
  border-radius: 26rpx;
  background: rgba(255, 255, 255, 0.78);
  border: 1rpx solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9), 0 8rpx 22rpx rgba(83, 96, 130, 0.05);
}

.textarea-shell.focused {
  border-color: rgba(255, 120, 162, 0.5);
  box-shadow: 0 0 0 6rpx rgba(255, 120, 162, 0.08), 0 10rpx 26rpx rgba(83, 96, 130, 0.08);
}

.message-textarea {
  width: 100%;
  min-height: 200rpx;
  max-height: 380rpx;
  color: #20273a;
  font-size: 30rpx;
  line-height: 1.65;
}

.textarea-placeholder {
  color: #b5bdca;
  font-size: 28rpx;
  line-height: 1.5;
}

.editor-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18rpx;
}

.count-strong {
  color: #20273a;
  font-size: 28rpx;
  font-weight: 700;
}

.count-muted {
  color: #8b94a3;
  font-size: 24rpx;
}

.preview-button {
  height: 62rpx;
  line-height: 62rpx;
  margin: 0;
  padding: 0 24rpx;
  border-radius: 999rpx;
  color: #d94f75;
  background: rgba(255, 236, 244, 0.86);
  font-size: 24rpx;
}

.send-button-container {
  margin: 28rpx 18rpx 0;
}

.send-button {
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 999rpx;
  margin: 0;
  color: #fff;
  background: linear-gradient(135deg, #ff6f96 0%, #ff9a7a 100%);
  box-shadow: 0 16rpx 34rpx rgba(255, 111, 150, 0.26);
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-button.disabled {
  opacity: 0.62;
}

.send-icon {
  width: 34rpx;
  height: 34rpx;
  margin-right: 10rpx;
}

.send-text {
  font-size: 31rpx;
  font-weight: 700;
}

.date-picker-popup,
.preview-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.date-picker-mask,
.preview-mask {
  position: absolute;
  inset: 0;
  background: rgba(31, 41, 55, 0.42);
}

.date-picker-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16rpx 28rpx 34rpx;
  border-radius: 34rpx 34rpx 0 0;
  background: linear-gradient(180deg, rgba(255, 250, 253, 0.98), rgba(239, 248, 255, 0.98));
  box-shadow: 0 -18rpx 50rpx rgba(31, 41, 55, 0.14);
}

.date-picker-handle {
  width: 78rpx;
  height: 8rpx;
  border-radius: 999rpx;
  background: rgba(152, 163, 179, 0.28);
  margin: 0 auto 20rpx;
}

.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18rpx;
}

.picker-title,
.picker-subtitle {
  display: block;
}

.picker-title {
  color: #20273a;
  font-size: 34rpx;
  font-weight: 700;
}

.picker-subtitle {
  margin-top: 8rpx;
  color: #8b94a3;
  font-size: 23rpx;
}

.picker-close {
  color: #98a3b3;
  font-size: 48rpx;
  width: 70rpx;
  text-align: right;
}

.date-picker {
  height: 430rpx;
  width: 100%;
  margin-top: 12rpx;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86rpx;
  line-height: 86rpx;
  color: #20273a;
  font-size: 30rpx;
}

.date-picker-preview {
  margin: 8rpx 0 18rpx;
  padding: 18rpx 20rpx;
  border-radius: 20rpx;
  text-align: center;
  color: #d94f75;
  font-size: 26rpx;
  background: rgba(255, 255, 255, 0.72);
}

.date-picker-footer {
  display: flex;
  align-items: center;
}

.picker-cancel,
.picker-confirm {
  height: 78rpx;
  line-height: 78rpx;
  border-radius: 999rpx;
  font-size: 28rpx;
  margin: 0;
}

.picker-cancel {
  width: 210rpx;
  color: #7b8493;
  background: rgba(255, 255, 255, 0.74);
}

.picker-confirm {
  flex: 1;
  margin-left: 18rpx;
  color: #fff;
  background: linear-gradient(135deg, #ff78a2 0%, #83c6ff 100%);
  box-shadow: 0 12rpx 24rpx rgba(255, 120, 162, 0.2);
}

.iphone-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 86%;
  max-height: 76vh;
  transform: translate(-50%, -50%);
  border-radius: 42rpx;
  overflow: hidden;
  background: #f2f2f7;
  box-shadow: 0 28rpx 70rpx rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
}

.iphone-status {
  height: 54rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #111827;
  font-size: 22rpx;
  font-weight: 600;
  background: rgba(249, 249, 251, 0.96);
}

.imessage-header {
  height: 112rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  background: rgba(249, 249, 251, 0.96);
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
}

.imessage-back {
  color: #007aff;
  font-size: 56rpx;
  margin-right: 8rpx;
}

.avatar-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58rpx;
  height: 58rpx;
  border-radius: 50%;
  color: #fff;
  font-size: 23rpx;
  font-weight: 700;
  background: linear-gradient(135deg, #b9bec8, #7b8493);
  margin-right: 14rpx;
}

.recipient-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.recipient-name {
  color: #1f2937;
  font-size: 28rpx;
  font-weight: 600;
}

.recipient-subtitle {
  color: #8b94a3;
  font-size: 21rpx;
  margin-top: 4rpx;
}

.preview-close {
  color: #8b94a3;
  font-size: 42rpx;
  padding-left: 16rpx;
}

.imessage-body {
  min-height: 420rpx;
  max-height: 56vh;
  padding: 24rpx;
  box-sizing: border-box;
}

.imessage-time {
  color: #8e8e93;
  font-size: 22rpx;
  text-align: center;
  margin-bottom: 26rpx;
}

.bubble-row {
  display: flex;
  justify-content: flex-end;
}

.ios-bubble {
  max-width: 76%;
  padding: 18rpx 22rpx;
  border-radius: 28rpx 28rpx 8rpx 28rpx;
  background: #34c759;
}

.ios-message-text {
  color: #fff;
  font-size: 29rpx;
  line-height: 1.5;
  word-break: break-all;
}

.imessage-compose {
  display: flex;
  align-items: center;
  padding: 18rpx 22rpx 24rpx;
  background: #f2f2f7;
}

.compose-placeholder {
  flex: 1;
  height: 62rpx;
  line-height: 62rpx;
  padding-left: 24rpx;
  border-radius: 999rpx;
  color: #b0b0b8;
  font-size: 25rpx;
  background: #fff;
  border: 1rpx solid rgba(0, 0, 0, 0.08);
}

.compose-send {
  width: 112rpx;
  height: 62rpx;
  line-height: 62rpx;
  border-radius: 999rpx;
  margin: 0 0 0 14rpx;
  color: #fff;
  font-size: 25rpx;
  background: #007aff;
}

.template-content {
  min-height: 430rpx;
  padding-bottom: 34rpx;
  border-radius: 32rpx 32rpx 0 0;
  background: linear-gradient(180deg, #fff8fb, #eef8ff);
  overflow: hidden;
}

.template-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 34rpx 34rpx 18rpx;
}

.template-title,
.template-subtitle {
  display: block;
}

.template-title {
  color: #20273a;
  font-size: 34rpx;
  font-weight: 700;
}

.template-subtitle {
  width: 520rpx;
  margin-top: 10rpx;
  color: #7b8493;
  font-size: 23rpx;
  line-height: 1.45;
}

.template-close {
  color: #98a3b3;
  font-size: 46rpx;
  line-height: 1;
}

.template-category-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 28rpx;
}

.template-category-item {
  width: calc(33.333% - 16rpx);
  margin: 8rpx;
  padding: 20rpx 10rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.78);
  border: 1rpx solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10rpx 26rpx rgba(83, 96, 130, 0.06);
  box-sizing: border-box;
}

.template-category-item:active {
  transform: scale(0.99);
}

.template-category-top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-category-text {
  color: #20273a;
  font-size: 27rpx;
  font-weight: 700;
}

.button-hover {
  opacity: 0.86;
}
</style>
