/* =======================================================
   クライアントポータル スタイル（チャット式 修正依頼）
   ======================================================= */
:root{
  --ink:#1b271f; --muted:#62756a; --line:#e2ece5; --line2:#eef4ef;
  --paper:#f3f7f3; --card:#fff;
  --green:#068f3a; --green-d:#07562a; --green-l:#18b85f; --mint:#eaf5ee; --mint2:#eef5f1;
  --head:"Zen Kaku Gothic New",system-ui,sans-serif; --body:"Noto Sans JP",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1); --topbar:60px;
}
*{box-sizing:border-box}
html,body{margin:0}
body.hp{ font-family:var(--body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; min-height:100dvh; }
a{color:inherit;text-decoration:none}

/* ---- top bar ---- */
.hp-top{ height:var(--topbar); position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:0 clamp(14px,3vw,26px); background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.hp-brand img{ height:30px; width:auto; display:block; }
.hp-portaltag{ font-family:var(--head); font-weight:700; font-size:12px; color:var(--green-d); background:var(--mint); padding:4px 11px; border-radius:999px; }
.hp-user{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.hp-user__ava{ width:30px;height:30px;border-radius:50%;object-fit:cover; }
.hp-user__name{ font-size:13px; font-weight:700; font-family:var(--head); color:var(--ink); max-width:30vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hp-user__out{ font-size:12px; color:var(--muted); border:1px solid var(--line); padding:6px 11px; border-radius:9px; }
.hp-user__out:hover{ border-color:var(--green); color:var(--green-d); }

/* ---- buttons ---- */
.hp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:12px; font-family:var(--head); font-weight:700; font-size:14px; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink); }
.hp-btn--primary{ background:linear-gradient(150deg,var(--green),var(--green-d)); color:#fff; border:0; }

/* ---- auth / login ---- */
.hp-auth{ min-height:calc(100dvh - var(--topbar)); display:flex; align-items:center; justify-content:center; padding:30px 18px; }
.hp-auth__card{ background:#fff; border:1px solid var(--line); border-radius:24px; max-width:430px; width:100%; padding:clamp(30px,5vw,46px); text-align:center; box-shadow:0 40px 90px -50px rgba(10,50,28,.45); }
.hp-auth__icon{ width:62px;height:62px;border-radius:17px;margin:0 auto 18px;display:grid;place-items:center;background:linear-gradient(150deg,var(--green-l),var(--green-d));color:#fff; }
.hp-auth__icon svg{ width:30px;height:30px; }
.hp-auth__card h1{ font-family:var(--head); font-weight:900; font-size:23px; margin:0 0 12px; color:var(--ink); }
.hp-auth__lead{ font-size:13.5px; line-height:1.9; color:var(--muted); margin:0 0 24px; }
.hp-auth__err{ background:#fdecec; color:#b3322f; border:1px solid #f2c4c4; border-radius:10px; padding:10px 14px; font-size:12.5px; margin:0 0 18px; }
.hp-google{ display:inline-flex; align-items:center; gap:11px; width:100%; justify-content:center; padding:13px 18px; border-radius:12px; border:1px solid #dadce0; background:#fff; font-family:var(--head); font-weight:700; font-size:15px; color:#3c4043; transition:box-shadow .2s,border-color .2s; }
.hp-google:hover{ box-shadow:0 2px 10px rgba(60,64,67,.18); border-color:#c8ccd0; }
.hp-auth__note{ font-size:11.5px; line-height:1.8; color:var(--muted); margin:20px 0 0; }
.hp-auth__back{ display:inline-block; margin-top:18px; font-size:12.5px; color:var(--green-d); }

/* ---- dashboard ---- */
.hp-wrap{ max-width:760px; margin:0 auto; padding:clamp(24px,4vw,40px) clamp(16px,4vw,24px) 60px; }
.hp-hello h1{ font-family:var(--head); font-weight:900; font-size:clamp(20px,3.5vw,26px); margin:0 0 8px; color:var(--ink); }
.hp-hello p{ font-size:13.5px; line-height:1.9; color:var(--muted); margin:0; }
.hp-newchat{ margin:24px 0; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.hp-newchat>summary{ list-style:none; cursor:pointer; padding:16px 20px; font-family:var(--head); font-weight:700; font-size:14.5px; color:var(--green-d); display:flex; align-items:center; gap:10px; }
.hp-newchat>summary::-webkit-details-marker{ display:none; }
.hp-newchat__plus{ width:24px;height:24px;border-radius:8px;background:var(--mint);display:grid;place-items:center;font-weight:900; }
.hp-newchat__form{ padding:4px 20px 22px; display:flex; flex-direction:column; gap:6px; }
.hp-newchat__form label{ font-size:12px; font-weight:700; font-family:var(--head); color:var(--muted); margin-top:10px; }
.hp-newchat__form input{ border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:14px; font-family:var(--body); }
.hp-newchat__form button{ margin-top:16px; }
.hp-sech{ font-family:var(--head); font-weight:900; font-size:15px; margin:30px 0 14px; }
.hp-empty{ background:#fff; border:1px dashed var(--line); border-radius:14px; padding:34px 22px; text-align:center; color:var(--muted); font-size:13.5px; }
.hp-chats{ display:flex; flex-direction:column; gap:11px; }
.hp-chat{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:15px; padding:17px 20px; transition:transform .2s var(--ease),box-shadow .2s,border-color .2s; }
.hp-chat:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -20px rgba(10,50,28,.4); border-color:var(--green-l); }
.hp-chat__main{ min-width:0; flex:1; }
.hp-chat__top{ display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.hp-chat__title{ font-family:var(--head); font-weight:700; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-chat__prev{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-chat__meta{ flex:none; text-align:right; display:flex; flex-direction:column; gap:5px; align-items:flex-end; font-size:11px; color:var(--muted); }
.hp-chat__cnt{ background:var(--mint2); color:var(--green-d); font-weight:700; padding:2px 8px; border-radius:999px; }
.hp-chat__status{ font-family:var(--head); font-weight:700; font-size:11px; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.hp-st--open{ background:#fdf3e0; color:#c8881f; }
.hp-st--in_progress{ background:#e9f1fa; color:#2b6fb0; }
.hp-st--done{ background:var(--mint); color:var(--green-d); }
.hp-st--archived{ background:#eef1ee; color:#7a8a80; }

/* ---- chat view (app shell) ---- */
.hp-chatview{ height:calc(100dvh - var(--topbar)); display:flex; flex-direction:column; max-width:760px; margin:0 auto; background:#fff; }
/* PC: 白いカードとして浮かせ、ペーパー地で区切りを見せる */
@media(min-width:860px){
  .hp-chatview{ height:calc(100dvh - var(--topbar) - 28px); margin:14px auto; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 30px 70px -50px rgba(10,50,28,.4); }
}
.hp-cbar{ flex:none; display:flex; align-items:center; gap:12px; padding:12px clamp(14px,3vw,20px); background:#fff; border-bottom:1px solid var(--line); }
.hp-cbar__back{ font-size:26px; line-height:1; color:var(--green-d); width:34px; height:34px; display:grid; place-items:center; border-radius:9px; }
.hp-cbar__back:hover{ background:var(--mint); }
.hp-cbar__t{ min-width:0; flex:1; }
.hp-cbar__t b{ font-family:var(--head); font-size:15px; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-cbar__url{ font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.hp-thread{ flex:1; min-height:0; overflow-y:auto; padding:18px clamp(14px,3vw,20px); display:flex; flex-direction:column; gap:14px; background:#fff; }
.hp-thread__intro{ margin-top:auto; text-align:center; font-size:12px; line-height:1.8; color:var(--muted); background:var(--mint2); border-radius:12px; padding:12px 16px; margin-bottom:2px; }
.hp-msg{ display:flex; flex-direction:column; max-width:80%; }
.hp-msg.is-me{ align-self:flex-end; align-items:flex-end; }
.hp-msg.is-staff{ align-self:flex-start; align-items:flex-start; }
.hp-msg__bubble{ border-radius:16px; padding:12px 15px; font-size:14px; line-height:1.75; word-break:break-word; }
.hp-msg.is-me .hp-msg__bubble{ background:linear-gradient(150deg,var(--green),var(--green-d)); color:#fff; border-bottom-right-radius:5px; }
.hp-msg.is-staff .hp-msg__bubble{ background:var(--paper); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px; }
.hp-msg__who{ font-size:11px; font-weight:700; font-family:var(--head); color:var(--green-d); margin-bottom:4px; }
.hp-msg__imgs{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.hp-msg__img{ display:block; width:118px; height:118px; border-radius:11px; overflow:hidden; cursor:zoom-in; background:rgba(255,255,255,.25); }
.hp-msg__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hp-msg__file{ display:inline-flex; align-items:center; padding:8px 13px; background:rgba(255,255,255,.85); border-radius:9px; font-family:var(--head); font-weight:700; font-size:12px; color:var(--green-d); }
.hp-msg__time{ font-size:10.5px; color:var(--muted); margin:5px 4px 0; }

/* ---- composer ---- */
.hp-composer{ flex:none; border-top:1px solid var(--line); background:#fff; padding:10px clamp(10px,3vw,16px) calc(10px + env(safe-area-inset-bottom)); }
.hp-comp__files{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.hp-comp__files:empty{ display:none; }
.hp-comp__chip{ position:relative; width:60px; height:60px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--mint2); }
.hp-comp__chip img{ width:100%;height:100%;object-fit:cover; }
.hp-comp__chip b{ position:absolute; inset:0; display:grid; place-items:center; font-size:11px; font-family:var(--head); color:var(--muted); }
.hp-comp__chip span{ position:absolute; top:2px; right:2px; width:18px;height:18px;border-radius:50%;background:rgba(8,24,16,.7);color:#fff;font-size:13px;line-height:18px;text-align:center;cursor:pointer; }
.hp-comp__row{ display:flex; align-items:flex-end; gap:8px; }
.hp-comp__attach{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--green-d); background:var(--mint2); cursor:pointer; }
.hp-comp__attach:hover{ background:var(--mint); }
.hp-composer textarea{ flex:1; resize:none; border:1px solid var(--line); border-radius:14px; padding:11px 15px; font-size:14px; font-family:var(--body); line-height:1.6; max-height:160px; min-height:44px; }
.hp-comp__send{ flex:none; width:44px; height:44px; border-radius:50%; border:0; background:linear-gradient(150deg,var(--green),var(--green-d)); color:#fff; display:grid; place-items:center; cursor:pointer; }
.hp-comp__send:hover{ filter:brightness(1.06); }
.hp-comp__send svg{ margin-left:-1px; }

/* ---- lightbox ---- */
.hp-lb{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(7,18,12,.92); backdrop-filter:blur(4px); }
.hp-lb.is-open{ display:flex; }
.hp-lb img{ max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:0 40px 100px -30px rgba(0,0,0,.8); }
.hp-lb__close{ position:absolute; top:18px; right:22px; width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;cursor:pointer; }