/* ===== css/main/10-layout.css —— 页面骨架：表单区域 / 按钮 / 历史留言区 / 错误提示 / 引导卡 / 点赞 / 楼中楼评论 =====
   · 2026-10-16 从 index.html 的 <style> 按【原顺序】切出：只切不重构，样式一个字符没改
   · 加载顺序（必须保持）：00-tokens → 10-layout → 20-components → 30-themes → 40-art
   · 本文件是第 2／5 段；删掉头部这 5 行，剩下的就是原文对应片段
   ===== */
    /* ---------- 表单区域（融进毛玻璃大卡，不再单独背板） ---------- */
    .form-card {
      margin-bottom: 36px;
    }

    .form-card label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #5d5182;
      margin-bottom: 8px;
    }

    .form-card input,
    .form-card textarea {
      width: 100%;
      padding: 11px 16px;
      border: 1px solid #e5e0f0;
      border-radius: 12px;
      background: #fff;
      font-size: 15px;
      font-family: inherit;
      color: #333;
      outline: none;
    }

    .form-card input:focus,
    .form-card textarea:focus {
      border-color: #5931F6;
      box-shadow: 0 0 0 3px rgba(89, 49, 246, 0.15); /* 聚焦柔光描边 */
    }

    .nickname-field {
      max-width: 320px;
      margin-bottom: 18px;
    }

    .content-field {
      margin-bottom: 22px;
    }

    /* 【本轮修复】编辑框不再带原生右下角拖拽把手（原 resize: vertical）：
       手机端手指按到框的右下角小角再向下滑，会把框无限拉长、页面被撑得冗长且无法自动恢复。
       改为 resize: none + 下方 JS 按内容自动增高（长到上限后改为框内滚动）。 */
    .form-card textarea {
      min-height: 120px;
      resize: none;
      line-height: 1.6;
    }

    /* ---------- 按钮：胶囊 + 渐变底（提交 / 加载更多 / 引导按钮共用） ---------- */
    .submit-button,
    .load-more-button,
    .guide-card button {
      padding: 11px 28px;
      border: none;
      border-radius: 999px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 1px;
      cursor: pointer;
    }

    .submit-button {
      display: block;
      width: 100%;
    }

    .submit-button:disabled,
    .load-more-button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* ---------- 历史留言区域 ---------- */
    .history-section h2 {
      font-size: 20px;
      font-weight: 700;
      color: #4a3b7c;
      text-align: center;
      padding-bottom: 10px;
      margin-bottom: 18px;
      border-bottom: 1px solid rgba(89, 49, 246, 0.15);
    }

    /* 列表顶部小字：共 N 条留言 */
    .message-count {
      font-size: 13px;
      color: #9b8fc0;
      text-align: center;
      margin-bottom: 14px;
    }

    /* 留言列表容器透明，内部每条留言是一张独立小卡片 */
    .message-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* 每条留言：独立小卡片 */
    .message-item {
      background: #fff;
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .message-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .message-nickname {
      font-size: 15px;
      font-weight: 700;
      color: #5931F6;
    }

    .message-time {
      font-size: 12px;
      color: #999;
    }

    .message-content {
      font-size: 15px;
      color: #333;
      line-height: 1.7;
      white-space: pre-wrap;        /* 保留编辑时的换行与缩进（与编辑栏排版一致） */
      word-break: break-word;
      overflow-wrap: break-word;    /* 超长英文/链接/表情连排时不撑破卡片 */
    }

    .empty-tip {
      text-align: center;
      color: #b3a8cc;
      font-size: 15px;
      padding: 18px 0;
    }

    /* ---------- 表单错误提示 ---------- */
    .error-tip {
      margin-top: 14px;
      font-size: 14px;
      color: #e05a5a;
      text-align: center;
    }

    .error-tip.info {
      color: #8b8fa8;
    }

    /* 【2026-10-13 统一口径】字数上限小提示（昵称 30 字 / 留言与评论 2000 字）：
       超过上限显示红字，刚到上限显示灰字，其余情况隐藏、零占位 */
    .len-tip {
      margin-top: 6px;
      font-size: 12px;
      color: #e05a5a;
      line-height: 1.5;
    }

    .len-tip.is-max {
      color: #8b8fa8;
    }

    /* 「加载更多」按钮居中 */
    .load-more-button {
      display: block;
      margin: 20px auto 0;
    }

    [hidden] {
      display: none !important;
    }

    /* ---------- 引导卡片 ---------- */
    .guide-card {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 16px;
      padding: 30px 24px;
      text-align: center;
      box-shadow: 0 4px 16px rgba(31, 38, 135, 0.08);
      margin-bottom: 36px;
    }

    .guide-card h2 {
      font-size: 22px;
      font-weight: 700;
      color: #5931F6;
      margin-bottom: 10px;
    }

    .guide-card p {
      font-size: 14px;
      color: #666;
      line-height: 1.7;
      margin-bottom: 20px;
    }

    /* 【本轮改动 2026-10-07】取消留言区静默防复制：
       原 user-select:none 挡住了"复制自己/别人的留言文字"等正当场景；
       防刷职责本就由后端承担（gate 门禁 + 访客唯一约束 + 内容审查），
       展示层不再禁选。规则整体移除，页面其余部分零影响。 */

    /* 「查看历史留言」按钮：进站默认收起时展示，点击后展开（毛玻璃紫色系，居中醒目） */
    .view-history-button {
      align-self: center;
      margin: 14px 0;
      padding: 13px 36px;
      border: 1px solid rgba(89, 49, 246, 0.3);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.85);
      color: #5931F6;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1);
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .view-history-button:hover {
      transform: translateY(-2px);
    }

    /* ---------- 点赞按钮样式 ---------- */
    .message-footer {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }

    .like-button {
      padding: 5px 16px;
      border: 1px solid rgba(89, 49, 246, 0.25);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      color: #5931F6;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .like-button:hover:not(:disabled) {
      transform: translateY(-1px);
    }

    .like-button.liked {
      background: rgba(255, 238, 240, 0.9);
      border-color: rgba(214, 69, 80, 0.3);
      color: #d64550;
      cursor: pointer; /* 已赞后仍可再次点击取消赞 */
    }

    .like-button:disabled {
      opacity: 0.9;
    }

    /* ---------- 楼中楼评论样式 ---------- */
    .comment-thread {
      margin: 12px 0 2px;
      padding: 10px 12px;
      background: rgba(89, 49, 246, 0.06);
      border-radius: 12px;
      font-size: 13px;
    }

    .comment-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .comment-row {
      border-left: 2px solid rgba(89, 49, 246, 0.22);
      padding: 2px 0 2px 10px;
    }

    .comment-row-head {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 2px;
    }

    .comment-nick {
      font-size: 12px;
      font-weight: 700;
      color: #5931F6;
    }

    .comment-time {
      font-size: 11px;
      color: #b3a8cc;
    }

    .comment-text {
      font-size: 12.5px;
      line-height: 1.6;
      color: #5a5570;
      white-space: pre-wrap;   /* 【本轮优化】保留换行，排版与留言区一致 */
      word-break: break-word;  /* 【本轮优化】超长连续字符不撑破卡片 */
      overflow-wrap: break-word;
    }

    .comment-form {
      margin-top: 12px;
    }

    .comment-nick-input {
      display: block;
      width: 60%;
      max-width: 200px;
      padding: 7px 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e0f0;
      border-radius: 10px;
      font-size: 13px;
      font-family: inherit;
      outline: none;
    }

    .comment-nick-input:focus,
    .comment-content-input:focus {
      border-color: #5931F6;
      box-shadow: 0 0 0 3px rgba(89, 49, 246, 0.12);
    }

    .comment-content-input {
      display: block;
      width: 100%;
      min-height: 56px;
      padding: 8px 12px;
      border: 1px solid #e5e0f0;
      border-radius: 10px;
      font-size: 13px;
      font-family: inherit;
      resize: none; /* 【本轮】同上：关闭原生拖拽把手，改由 JS 按内容自动增高 */
      outline: none;
    }

    .comment-submit {
      margin-top: 10px;
      padding: 7px 20px;
      font-size: 13px;
    }

    /* 「展开更早的评论」按钮 */
    .comment-more-button {
      align-self: flex-start;
      margin-top: 6px;
      padding: 6px 14px;
      font-size: 12px;
      color: #5931F6;
    }

    .comment-load-error,
    .comment-post-error {
      margin: 8px 0 0;
      font-size: 12px;
      color: #e05a5a;
    }

    /* 【本轮改动 2026-10-07】原"防复制豁免块"随上方禁选规则一并取消：
       禁选已不存在，豁免规则成了死代码，一并移除，逻辑保持干净。 */